@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: {{$profile->display_name}} {{$profile->city_name}}'s Profile</title>
@endsection


@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    <a href="javascript:history.back()" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1 class="py-2 py-sm-0">{{$profile->display_name}} - {{$profile->country_name}}@if($profile->city_name !=''){{', '.$profile->city_name}} @endif</h1>
                    <!-- breadcrumb -->
                    @php
                    $breadcrumb = array(
                        array('title'=>'My Profiles', 'url'=>route('profile')),
                        array('title'=>$profile->display_name, 'url'=>'', 'active'=>'1')
                    );
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection



@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif

<section class="profile-one">
    <div class="container-fluid">
        <div class="row gap-y-2">
            <!-- Message-->
            @if (session('message'))
            <div class="col-12">
                <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                    @if(session('message.type')=='danger')
                    <strong>Oops!</strong> {!! session('message.text') !!}
                    @else
                    <strong>Success!</strong> {!! session('message.text') !!}
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            @endif
            <!--end message-->

            <div class="col-12 d-md-none">
                <div class="heading-one text-center">
                    <h1>
                        {{$profile->display_name}} - {{$profile->country_name}}@if($profile->city_name !=''){{', '.$profile->city_name}} @endif
                    </h1>
                </div>
            </div>
            <div class="col-12">
                <div class="select-profile">
                    @if(isset($advertisers) && !empty($advertisers))
                    <div class="dropdown dropdown-one">

                        <a class="btn btn-white dropdown-toggle" href="#" role="button" id="profile-listing" data-toggle="dropdown">
                            <span>{{$profile->display_name}} in {{$profile->city_name}}</span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="profile-listing">
                            @foreach($advertisers as $advertiser)
                            <a class="dropdown-item" href="{{route('profile.link',['slug'=>$advertiser[0]->slug])}}">
                                <span class="title">{{$advertiser[0]->display_name}} in {{$advertiser[0]->city_name}}</span>
                                <span class="badge" data-placement="top" data-toggle="tooltip" title="Your profile will not be listed until you verify the photos.">
                                    <i class="fa fa-image"></i>
                                </span>
                                <span class="my-status" data-toggle="tooltip" title="Free - Upgrade to receive more enquiries">Free</span>
                            </a>
                            @endforeach
                        </div>

                    </div>
                    @endif
                    <a href="{{route('profile.add')}}" class="btn btn-main">Add Profile +</a>
                </div>
            </div>
            <div class="col-12">
                <div class="row gap-y-2">
                    <div class="col-md-8">
                        <div class="box-one h-100">
                            <div class="verify-now">
                                <div class="list-items">
                                    <h5>
                                        <span>1</span> The photos on the listing must be yours:
                                    </h5>
                                    <div class="body-sec">
                                        <ul class="img-list">
                                            @if(isset($images) && !empty($images))
                                                @foreach($images as $image)
                                                    <li>
                                                        <a href="javascript::void(0)">
                                                            <img src="{{ getStorageFile(config('path.escort').$profile->advertiser_id.'/thumb/300_'.$image->advertiser_image_url, 'b2') }}" alt=""/>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                                <div class="list-items">
                                    <h5>
                                        <span>2</span> We must be able to match them with new photo you upload.
                                    </h5>
                                    <div class="body-sec"></div>
                                </div>
                                <div class="list-items">
                                    <h5>
                                        <span>3</span> Write <code>{{$profile->image_verification_code}}</code> on a piece of paper and take a new photo of yourself <i>holding that piece of paper.</i>
                                    </h5>
                                    <div class="body-sec"></div>
                                </div>
                                <div class="list-items">
                                    <h5>
                                        <span>4</span> Verification code must be <b>hand written</b>
                                    </h5>
                                    <div class="body-sec">
                                        <div class="box-one bg-warning-light">
                                            <p class="m-0">We do <b>not</b> accept passport or ID scans, photos with no face visible. <br> <b>Any attempt to use different person's photo</b></p>
                                        </div>
                                        <div class="box-one bg-primary-light mt-3">
                                            <p class="m-0"><i class="fa fa-eye-slash"></i> The image you upload will <b>never</b> be published or shared.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <form id="verifyPhoto" method="post" enctype="multipart/form-data" action="{{route('picture.verification.request.process')}}">
                            @csrf
                            <input type="hidden" name="slug" value="{{$profile->slug}}">
                            <input type="hidden" name="advertiser_id" value="{{$profile->advertiser_id}}">
                            <div class="form-group">
                                <input type="file" class="" name="verification_image" id="verification_image" accept="image/jpeg"><br>
                                <small>Allowed file types are <b>JPEG, JPG</b>.</small>
                            </div>
                            <div class="mt-3">
                                <button type="submit" class="btn btn-main">Apply for verification <i class="fa fa-angle-right"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection


@section('custom_js')

<script>
    $('#verifyPhoto').validate({
        rules: {
            verification_image: {
                required: true
            },

        },
        messages: {
            verification_image: {
                required: "Please upload your image",
            },
        },
        errorElement: 'div',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });
</script>
@endsection