@extends('user.layouts.master')

@section('content')
<style>
    .search::placeholder {
        color: grey !important;
        font-size: 16px;

    }
    .lb{
        line-break: auto !important;
    }
    .text-black{
        color: black !important;
    }
    .mb-10 {
        margin-bottom: 10px;
    }

    section {
        padding: 10px;
    }

    .wrap-search-filter button.btn.btn-primary {
        border-radius: 100%;
    }

    .search-filter {
        background: transparent !important;
    }

    .mt-5 {
        margin-top: 12%;
    }

    .color {
        color: #ecca69;

    }

    @media only screen and (min-width: 440px) and (max-width:540px) {
        .search::placeholder {
            color: grey !important;
            font-size: 12px;

        }
    }

    @media only screen and (min-width: 400px) and (max-width:439px) {
        .search::placeholder {
            color: grey !important;
            font-size: 10px;

        }
    }

    @media only screen and (min-width: 350px) and (max-width:399px) {
        .search::placeholder {
            color: grey !important;
            font-size: 8px;

        }
    }

    @media only screen and (min-width: 228px) and (max-width:349px) {
        .search::placeholder {
            color: grey !important;
            font-size: 6px;

        }
    }

    @media only screen and (min-width: 321px) and (max-width:540px) {
        .inner-header-title {
            /* padding-top: 12em; */
            text-align: center;
            color: #fff;
            overflow: visible;
            position: relative;
            /* border-bottom: 4px solid #11b719; */
            background-size: cover;
            height: 135px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    @media only screen and (min-width: 1024px) {
        section {
            padding: 15px;
        }
    }

    @media only screen and (min-width: 425px) {
        section {
            padding: 5px;
        }
    }

    @media (min-width: 768px) {
        .modal-dialog {
            width: 60%;

        }
    }

    .modal-header {
        background: #fff !important;
    }

    @media (width:320px) {
        .search::placeholder {
            color: grey !important;
            font-size: 7px;

        }
    }


    @media (width:425px) {
        .search::placeholder {
            color: grey !important;
            font-size: 10px;

        }
    }

    @media (min-width: 418px) {
        .nav-tabs.modern-tabs {
            padding: 0px !important;
        }
    }


    .rep {
        color: red;
    }

    .bbtnn {
        padding: 12px 20px !important;
    }

    .height {
        height: 40px !important;
    }

    .theme-cl {
        position: absolute;
        top: 13px;
        left: 10px;
    }

    .theme-cl1 {
        position: absolute;
        top: 20px;
        left: 10px;
    }

    .search_main {
        margin: 0px auto;
    }

    @media only screen and (max-width: 768px) {
        .cus_height {
            height: 36px !important;
        }

        #cus_height {
            height: 37px !important;
            margin-bottom: 9px !important;
        }
    }

    @media only screen and (max-width: 320px) {
        .column1 {
            display: none;
        }
    }
    
    .brows-job-list {
    display: flex;
    flex-direction: column;
    }
</style>
<section class="inner-header-title" style="background-image:url({{ asset('user/assets/img/bg.png') }}">
    <div class="container mx-auto">
        <h1 class="heal">Search</h1>
    </div>

</section>
    <div class="clearfix"></div>
    <!-- Title Header End -->

    <!-- ========== Begin: Brows job ===============  -->
    <section class="manage-employee gray">
        <div class="container" style="min-height: 100vh">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            <!-- search filter -->
            <div class="row flex search_main">
                {{-- <div class="col-md-1 column1"></div> --}}
                <div class="col-md-12">
                    <div class="search-filter">
                        <form action="{{ route('report.search') }}">
                            <div class="filter-form">
                                <div class="input-group">
                                    <input type="text" class="form-control search cus_height" name="search"
                                        placeholder="Search by Name, Email, Phone Number, Username, etc." onfocus="this.placeholder=''" onblur="this.placeholder='Search by Name, Email, Phone Number, Username, etc.'" required value="{{$request->search}}">
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-default" id="cus_height"><i
                                                class="fa fa-search"></i></button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
               
            </div>
            <!-- search filter End -->

            <!-- Manage Employee -->
           
            <div class="col-md-12 col-sm-12 text-right">
                <h5><a href="javascript:void(0)" class="text-black">Search Result: <b>{{ $data->count() }}</b></a></h5>
            </div>
            <div class="row">
                <article>
                    @if (sizeof($data))
                        @foreach ($data as $result)
                            <div class="brows-job-list">
                                <div class="col-md-12 col-sm-12 ">
                                    <div class="brows-job-location ">
                                        <a>
                                            {{-- <p>{{ $result->created_at->toDateString() }}</p> --}}
                                            <p class="text-black">
                                                {{ \Carbon\Carbon::parse($result->created_at->toDateString())->format('m/d/Y') }}
                                            </p>

                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12">
                                    <div class="brows-job-location text-left ">
                                        <a>
                                            <p class="text-black lb">{!! $result->notes !!}</p>
                                        </a>
                                    </div>
                                </div>

                           
                                {{-- <div class="col-md-12 col-sm-12">
                                    <div class="item-fl-box">
                                        @php
                                            $datas = [];
                                            if (!empty($result)) {
                                                if (!empty($result->images)) {
                                                    $data = json_decode($result->images);
                                                }
                                            }
                                            $j = 0;
                                        @endphp

                                        @foreach ($data as $datas)
                                            @php $j = $j + 1; @endphp
                                            @if ($j < 4)
                                                <div class="brows-job-company-img">
                                                    <a href="{{ route('report.detail', ['id' => $result->id]) }}"><img
                                                            src="{{ asset('imgfiles/' . $datas) }}" class="img-responsive"
                                                            alt="" width="100%" /></a>
                                                </div>
                                            @endif
                                        @endforeach
                                       
                                        @php
                                            $datas = [];
                                            $datas = json_decode($result->images);
                                            $k = 0;
                                        @endphp
                                        @foreach ($datas as $data)
                                            @php $k = $k + 1; @endphp
                                            @if ($k == 4)
                                                <div class="brows-job-company-img text-center"
                                                    style="background: url('{{ asset('/imgfiles/' . $data) }}') !important;    background-size: cover !important; height: 200px; border-radius: 0% !important">
                                                    <a href="{{ route('report.detail', ['id' => $result->id]) }}"
                                                        class="img-responsive"
                                                        style="    background: aliceblue; opacity: 0.7;font-size: 12px;font-weight: 800;       margin-top: 25%;">

                                                        @if ($j == 4)  @elseif($j > 4) + {{ $j - 3 }}  Attachments @endif

                                                    </a>
                                                </div>
                                            @endif
                                        @endforeach
                                        <div class="brows-job-position">
                                            <p>

                                            </p>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                        @endforeach


                        <div class="item-click">
                            <article>
                            @else
                                <div class="brows-job-list">
                                    <div class="col-md-6 col-sm-6">
                                        <div class="item-fl-box">
                                            <div class="brows-job-company-img">
                                                <a href=""><img src="user/assets/img/com-1.jpg"
                                                        class="img-responsive" alt="" /></a>
                                            </div>
                                            <div class="brows-job-position">
                                                <h3>No Result Found</h3>
                                                <p></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    @endif
                </article>
            </div>
            </article>
        </div>
        {{-- <div class="row">
                

                <ul class="pagination">
                    

                    <li><a href="#">«</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#"><i class="fa fa-ellipsis-h"></i></a></li>
                    <li><a href="#">»</a></li>
                </ul>
            </div> --}}
        </div>

    </section>
    <div id="ReportForm" class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{-- @if (Auth::guard('user')->check()) --}}
                    <form action="{{ route('report.process') }}" method="post" enctype=multipart/form-data>
                        {{-- @else --}}
                        {{-- <form action="{{ route('post.process.before.login') }}" method="post"
                                enctype=multipart/form-data> --}}
                        {{-- @endif --}}

                        @csrf
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>First Name</label>
                                    <div class="input-with-icon">
                                        <input type="text" name="first_name" class="form-control height"
                                            value="{{ old('first_name') }}" />
                                        <i class="theme-cl fa fa-user"></i>
                                    </div>
                                    <div class="error">{{ $errors->first('first_name') }}</div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Last Name</label>
                                    <div class="input-with-icon">
                                        <input type="text" name="last_name" class="form-control height"
                                            value="{{ old('last_name') }}" />
                                        <i class="theme-cl fa fa-user"></i>
                                    </div>
                                    <div class="error">{{ $errors->first('last_name') }}</div>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6">
                                <div class="form-group ">
                                    <label>Username</label>
                                    <div class="input-with-icon">
                                        <input type="text" name="user_name" class="form-control height"
                                            value="{{ old('user_name') }}" />
                                        <i class="theme-cl fa fa-user"></i>

                                    </div>
                                    <div class="error">{{ $errors->first('user_name') }}</div>

                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group ">
                                    <label>Platform Type</label>
                                    <div class="input-with-icon">
                                        <input type="text" name="payment_type" class="form-control height"
                                            value="{{ old('payment_type') }}" />
                                        <i class="theme-cl fa fa-clipboard"></i>
                                        {{-- <i class="fas fa-clipboard-list-check"></i> --}}

                                    </div>
                                    <div class="error">{{ $errors->first('payment_type') }}</div>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group ">
                                    <label>Phone Number</label>
                                    <div class="input-with-icon">
                                        <input type="tel" id="phoneNumber" name="phone_number"
                                            class="form-control height" value="{{ old('phone_number') }}" />
                                        <i class="theme-cl fa fa-phone"></i>
                                    </div>
                                    <div class="error">{{ $errors->first('phone_number') }}</div>

                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label>Scammer Email</label>
                                    <div class="input-with-icon">
                                        <input type="email" name="scammer_email" class="form-control height"
                                            value="{{ old('scammer_email') }}" />
                                        <i class="theme-cl fa fa-envelope"></i>
                                    </div>
                                    <div class="error">{{ $errors->first('scammer_email') }}</div>
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-md-12 col-sm-6">
                                <div class="form-group">
                                    <label>Attachments <span class="rep">*</span></label>
                                    <div class="input-with-icon">
                                        <input type="file" name="image[]" class="form-control "
                                            style="padding-top: 17px;" multiple required />
                                        <div class="text-danger">{{ $errors->first('image') }}</div>

                                        <i class="theme-cl1 fa fa-image"></i>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    <label>Comments <span class="rep">*</span></label>
                                    <div class="input-with-icon">
                                        <textarea name="notes" class="form-control" required rows="1">{{ old('notes') }}</textarea>
                                        <i class="theme-cl fa fa-comment"></i>

                                    </div>
                                    <div class="error">{{ $errors->first('notes') }}</div>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group">
                                    <label>Your Email</label>
                                    <div class="input-with-icon">
                                        <input type="email" name="email" class="form-control height"
                                            value="{{ old('email') }}" width="100%" />
                                        <i class="theme-cl fa fa-envelope"></i>
                                    </div>
                                    <div class="error">{{ $errors->first('email') }}</div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12">
                                <div class="form-group text-center">
                                    <span><input type="checkbox" name="agreement" value="{{ old('agreement') }}"
                                            required /></span>
                                    <span><label>I have read the terms and agreements
                                        </label></span>
                                </div>
                            </div>
                        </div>

                </div>
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10 col-sm-12">
                        <div class="form-groups">
                            <button type="submit" class="btn btn-primary theme-bg full-width">Submit</button>
                        </div>
                    </div>
                </div>
                </form>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            check = "{{ old('notes') }}";
            check_id = "{{ old('id') }}";
            if (check != "" && check_id == '') {
                $("#ReportForm").modal("show")
            }
            //     if (check_id!="") {
            //         $(".id").val(check_id);
            //         $("#ReportForm").modal("show");
            //   }
            $("#myClass").hide();
            $('#abc').change(function() {
                if ($('#abc').val() == 'other') {
                    $('#myClass').show();
                } else {
                    $('#myClass').hide();
                }
            });
        });
    </script>
@endsection