@extends('layout.user')
@section('content')
    <style >
        #map,
        #pano {

            /*position: inherit!important;*/
            position: absolute!important;

            width: 535px;
            height: 368px;

        }
        input[type="file"] {
            display: none;
        }
        .custom-file-upload {
            border: 1px solid #ccc;
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
        }
    </style>
    <div class="page-title">
        <div class="left-column">
            <h4>Profile</h4>
        </div>
    </div>

            <section class="contact-form">
                <div class="row">
                    <div class="col-md-7">
                        <form class="main-form"   style="padding:10px 50px" action="{{route('policyholder.post.updateProfile')}}" method="POST" id="updateProfile" enctype="multipart/form-data">
                            {!! csrf_field() !!}
                            <div class="profile-container">

                                <div class="row form-row">
                                    <div class="col-sm-4">
                                        <div class="profile-img" >
                                            @if($user->image != null)

                                                <a  href="{{asset($user->image)}}" class="fancybox" data-fancybox="images"    style="display: block; ">
                                                    <div class="profile-photo fancybox" id="profile-photo-src"   style="background-image:url('{{asset($user->image)}}')"></div>
                                                </a>
                                            @else
                                                @if(!empty($user->lat) && !empty($user->lng))
                                                    <a data-toggle="modal" data-target="#360_view_modal"   style="display: block;">
                                                        <div class="profile-photo" id="profile-photo-src"    style="background-image:url('https://maps.googleapis.com/maps/api/streetview?size=150x150&location={{$user->lat}},{{$user->lng}}&fov=80&heading=70&pitch=0&key={{ env('GOOGLE_MAP_KEY') }}')"></div>
                                                    </a>
                                                @else
                                                    <div class="profile-photo" id="profile-photo-src"   style="background-image:url('{{asset('images/user_avatar.svg')}}')"></div>
                                                @endif
                                            @endif
                                            <div class="camera-icon">
                                                <input type="file"   style="display: none;" accept="image/*" name="image" id="profile-photo"/>
                                                <label for="profile-photo"><img src="{{asset('images/camera_icon.png')}}"/></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label>First Name</label>
                                        <input type="text" name="first_name" value="{{isset($user) ? $user->first_name : ''}}"  class="general-field" placeholder="Type Something "/>

                                        <label   style="margin-top: 5px">Email Address</label>
                                        <input type="email" name="email"  value="{{isset($user) ? $user->email : ''}}" class="general-field" placeholder="Example@gmail.com"/>
                                    </div>
                                    <div class="col-sm-4">
                                        <label>last Name</label>
                                        <input type="text" name="last_name" value="{{isset($user) ? $user->last_name : ''}}" class="general-field" placeholder="Type Something "/>

                                        <label   style="margin-top: 5px">Phone</label>
                                        <input type="text" class="general-field"  value="{{isset($user) ? $user->phone : ''}}"  placeholder="Enter Your Phone No." name="phone" id="phone_no" minlength="5" maxlength="19"/>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <label>Address</label>
                                    <input type="text" class="general-field"  value="{{isset($user) ? $user->address : ''}}" id="address" placeholder="Street Address" name="address"/>
                                </div>


                                <div class="row form-row">
                                    <div class="col-sm-4">
                                        <label>City</label>
                                        <input type="text" class="general-field" id="city"   value="{{isset($user) ? $user->city : ''}}" placeholder="City" name="city" />
                                    </div>
                                    <div class="col-sm-4">
                                        <label>State</label>
                                        <input type="text" class="general-field" id="state"  value="{{isset($user) ? $user->state : ''}}" placeholder="State" name="state" />
                                    </div>
                                    <div class="col-sm-4">
                                        <label>Zip Code</label>
                                        <input type="text" class="general-field" id="zip_code"  value="{{isset($user) ? $user->zip_code : ''}}" placeholder="Zip" name="zip_code" />
                                    </div>
                                </div>
                                        <input type="hidden" id="lat" name="lat" value="{{isset($user) ? $user->lat : ''}}">
                                        <input type="hidden" id="long" name="lng"  value="{{isset($user) ? $user->lng : ''}}">
                                <div class="form-full-row text-left"   style="height: 50px">
                                    <button class="btn-add"  id="updateProfilebtn">Save Changes</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-4">
                        <div class="additional-info">
                            <div>
                                <h4   style="color: red; font-size: 22px" >Additional Information</h4>
                            </div>
                            @foreach($policies as $policy)
                                <div>
                                    @php
                                        $ext = '';
if(isset($policy->photo->image_path)){
                                            $ext = pathinfo($policy->photo->image_path, PATHINFO_EXTENSION);

}
                                    @endphp
                                    <div   style="display: flex; justify-content: space-between">
                                        <h5   style="float: left">Policy: {{$policy->name}}</h5>
                                        <div   style="float: right">
                                            <a href="javascript:void(0)" onclick="editPolicy('{{$policy->id}}',{{$policy}},'{{$ext}}')">
                                                <img src="{{asset('images/edit-icon.png')}}"   style="height: 40px"/>
                                            </a>
                                            <a href="javascript:void(0)" onclick="deletePolicy({{$policy->id}})">
                                                <img src="{{asset('images/delete-icon.png')}}"   style="height: 40px"/>
                                            </a>
                                        </div>
                                    </div>

                                    <div>


                                    @if(isset($policy->photo->image_path))
                                            @php
                                                $ext = pathinfo($policy->photo->image_path, PATHINFO_EXTENSION);
                                            @endphp

                                            @if($ext == 'pdf')
                                                <a  class="policy-img"  href="javascript:void(0)"   onclick="openDocument('{{ $policy->photo->image_path}}')">
                                                    <img src="{{asset('images/pdf_icon.png')}}"/>
                                                </a>

                                            @else
                                                <a  class="policy-img"  href="{{$policy->photo->image_path}}"  data-fancybox="images"   style="display:block;">
                                                    <div class="kidding-img-policy"   style="background-image:url('{{$policy->photo->image_path}}');object-fit: cover"></div>
                                                </a>
                                            @endif

                                        @endif
                                        <h4><b>{{$policy->company_name}}</b></h4>
                                        <h6>{{$policy->company_address}}</h6>
                                        <span><b   style="font-size: 13px">Start Date : </b>{{\Carbon\Carbon::createFromTimestamp(strtotime($policy->start_date))->format('m-d-Y')}}</span><br>
                                        <span><b   style="font-size: 13px">End Date : </b>{{\Carbon\Carbon::createFromTimestamp(strtotime($policy->end_date))->format('m-d-Y')}}</span>
                                    </div>
                                    {{--                    <td>{{$policy->agent_name}}</td>--}}
                                    <div   style="margin-top: 20px">
                                        <h6>{{$policy->agent_name}}</h6>
                                        <h6>{{$policy->agent_phone}}</h6>
                                        <h6>{{$policy->agent_email}}</h6>

                                    </div>
                                </div>
                                <hr>
                            @endforeach
                            @include('modal.360_view_modal')
                            @include('modal.add_new_policy')
                            @include('modal.edit_policy')
                        </div>
                        <div class="form-full-row text-left"   style="align-items: center;display:flex;">
                            <button data-toggle="modal" data-target="#add_new_policy" class="btn-add "   style="width: 200px;background: #105A6F;color: white;margin-top: 15px">Add Policy Info</button>
                        </div>
                    </div>
                </div>
                </section>
    @include('modal.document')

@endsection

@section('js_file')

<script nonce="{{config('app.nonce')}}">

    function editPolicy(id,policy, ext){

        $('#policy_id').val(id);
        $('#policy_name').val(policy['name']);
        $('#company_name').val(policy['company_name']);
        $('#company_address_edit').val(policy['company_address']);
        $('#agent_name').val(policy['agent_name']);
        $('#agent_email').val(policy['agent_email']);
        $('#agent_phone_edit').val(policy['agent_phone']);
        $('#edit_start_date').val(policy['start_date']);
        $('#edit_end_date').val(policy['end_date']);
        if(ext != ''){
            if(ext == 'pdf') {
                let image_name = 'images/pdf_icon.png';

                var html = `<div class="photo-column policy-id-${id}">
                                    <div class="photo-img"   style="background-image:url(${baseUrl+image_name})"></div>
                                    <div class="photo-content">
                                      <h3   style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 260px;">Pdf File</h3>

                                    </div>
                                </div>
                                <div class="photo-column1 ">
                                    <div class="newupload${id}">
                                        <a href="javascript:void(0)" onclick="deletePolicyPhoto(${policy['photo']['id']}, '${ext}')">${deleteImage}</a>
                                        </div>
                                </div>`;
            } else {
                var html = `<div class="photo-column policy-id-${id}">
                                    <div class="photo-img"   style="background-image:url('${policy['photo']['image_path']}');"></div>
                                    <div class="photo-content">
                                      <h3   style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 260px;">Image File</h3>

                                    </div>
                                </div>
                                <div class="photo-column1 ">
                                    <div class="newupload${id}">
                                        <a href="javascript:void(0)" onclick="deletePolicyPhoto(${policy['photo']['id']}, '${ext}')">${deleteImage}</a>
                                        </div>
                                </div>`;
            }
            $('#edit-policy-photo-src').html(html);
            $('#edit_policy_photo_id').val(policy['photo']['id']);

        }

        $('#edit_policy').modal('show');
    }



    function deletePolicy(id){

        $('.confirm_title').html('Delete Policy');
        $('.confirm_message').html('Are you sure you want to delete this Policy ?');
        $('.confirmation-red-btn').html('Yes, Delete');
        $('.confirmation-gray-btn').html('No');
        $('#confirmModal').modal({
            backdrop: 'static',
            keyboard: false
        }).one('click', '#delete', function (e) {
            if (id) {
                $('#spinner').modal('show');

                $.ajax({
                    type: "GET",
                    url: `${baseUrl}policyholder/policy/delete/${id}`,
                    success: function(data) {
                        showSuccessToaster(`<p>${data.successMessage}</p>`);
                        setTimeout(function (){
                            $('#policy-'+id).remove();
                            $('#spinner').modal('hide');
                            location.reload();

                        }, 500);
                    },
                    error: function (err) {
                        var err = err.responseJSON;
                        showErrorToaster(`<p>${err.errorMessage}</p>`);
                        $('#spinner').modal('hide');
                    }
                });
                $('#spinner').modal('hide');
            }
        }).one('click', '#concel_confirm', function (e) {
            id = '';
        });




    }

    google.maps.event.addDomListener(window, 'load', initAutocomplete);
    google.maps.event.addDomListener(window, 'load', initialize);

    function initAutocomplete() {
        let address2Field = document.querySelector("#company_address");
        let address3Field = document.querySelector("#company_address_edit");

        new google.maps.places.Autocomplete(address2Field, {
            componentRestrictions: {country: ["us"]},
            fields: ["address_components","geometry"],
            types: ["address"],
        });
        new google.maps.places.Autocomplete(address3Field, {
            componentRestrictions: {country: ["us"]},
            fields: ["address_components","geometry"],
            types: ["address"],
        });
    }


    function initialize() {
        const fenway = { lat: parseFloat('{{$user->lat}}'), lng: parseFloat('{{$user->lng}}')};
        // const map = new google.maps.Map(document.getElementById("map"), {
        //     center: fenway,
        //     zoom: 14,
        // });
        const panorama = new google.maps.StreetViewPanorama(
            document.getElementById("pano"),
            {
                position: fenway,
                pov: {
                    heading: 34,
                    pitch: 10,
                },
            }
        );
        // map.setStreetView(panorama);
    }


</script>
<script nonce="{{config('app.nonce')}}">
      $(document).ready(function () {
        $('[data-fancybox="images"]').fancybox({
            margin: [44, 0, 22, 0],
            thumbs: {
                autoStart: true,
                position: 'bottom',
                axis: 'x'
            }
        })
    });

      $( function() {
          $('.datepicker-policy').datepicker({ dateFormat: 'mm/dd/yy' });

          $('#start_date').on('change', function(){
              var eventDate = $(this).datepicker('getDate');
              eventDate.setDate(eventDate.getDate()+365);
              $("#end_date").datepicker("setDate", eventDate);

          })
          $('#edit_start_date').on('change', function(){
              var eventDate = $(this).datepicker('getDate');
              eventDate.setDate(eventDate.getDate()+365);
              $("#edit_end_date").datepicker("setDate", eventDate);

          })
      });

</script>

@endsection