{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')
<!--begin::Profile Overview-->
<div class="d-flex flex-row">
    <!--begin::Aside-->
    <div class="flex-row-auto offcanvas-mobile w-300px w-xl-350px" id="kt_profile_aside" >
        <!-- //property -->
        {{--<input class="propertyCheck" checked  style="display:none" type="checkbox" value="{{$house_number_id}}" name="property[]">--}}
        <!--begin::Profile Card-->
        <div class="card card-custom card-stretchh">
            <h3 class="card-title align-items-start text-center flex-column pt-5">Property Info</h3>
            <div id="map" style="width: 100%; height: 300px;"></div>  
            <!--begin::Header-->
            <!-- <div class="card-header border-0"> -->
               
                
                <!-- <h6 class="text-muted">
               Details of Deceased Estates
                
                </h6>           -->
            <!-- </div> -->
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pff-2">
                <div class="pyy-9">
                <h4 class="text-muted">
                Details of Deceased Estates                
                </h4>                
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Deceased Full Name :</span>
                        <span class="text-muted">{{ucfirst($property_details->firstname).' '.ucfirst($property_details->surname)}}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Date of Death :</span>
                        <span class="text-muted">{{date('d-m-Y', strtotime($property_details->death_date))}}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Claims Date :</span>
                        <span class="text-muted">{{date('d-m-Y', strtotime($property_details->claim_date))}}</span>
                    </div>
                    @if($property_details->status==1)
                    <div class=" align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Address :</span>
                        <span class="text-muted">
                        {{ucfirst($property_details->address_1).' '.ucfirst($property_details->address_2)}}
                        <br>{{ucfirst($property_details->town)}}<br>{{ucfirst($property_details->postcode)}}<br>{{ucfirst($property_details->country)}}</span>
                    </div>
                    @elseif($property_details->status==2)
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Address :</span>
                        <span class="text-muted">{{ucfirst($property_details->address_1)}}
                        </span>
                    </div>
                    @endif
                    <h6>Details of the Executor/Administrator</h6>
                    @if(empty($property_details->e_address))
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Name:</span>
                        <span class="text-muted">
                        {{ucfirst($property_details->e_firstname).' '.ucfirst($property_details->e_surname)}}
                        </span>
                    </div>
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Address:</span>
                        <span class="text-muted">{{ucfirst($property_details->e_address1)}}<br>{{ucfirst($property_details->e_address2)}}
                        <br>{{ucfirst($property_details->e_town)}}<br>{{ucfirst($property_details->e_country)}}<br>{{ucfirst($property_details->e_postcode)}}</span>
                    </div>
                   
                    @else
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold"></span>
                        <span class="text-muted">
                        {{($property_details->e_address)}}
                        </span>
                    </div>
                 
                   
                    @endif
                    @if($property_details->email)
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Email :</span>
                        <span class="text-muted">{{($property_details->email)}}</span>
                    </div>
                    @endif
                    @if($property_details->phone)
                    <div class="d-flex align-items-center justify-content-betweenn mb-2">
                        <span class="font-weight-bold mr-2">Phone :</span>
                        <span class="text-muted">{{($property_details->phone)}}</span>
                    </div>
                    @endif
                  
                    
                </div>               
            </div>
            <!--end::Body-->
        </div>
        <!--end::Profile Card-->
    </div>
    <!--end::Aside-->
    
    <div class="flex-row-fluid ml-lg-8">
    @if(json_decode(Session::get(config('propai.authSessionKey')))->user_type!=1)
        <div class="row">
            <div class="col-lg-12">
                <!--begin::List Widget 14-->
                <div class="card card-custom card-stretch gutter-b">
                    <!--begin::Header-->
                    <div class="card-header border-0">
                        <h3 class="card-title font-weight-bolder text-dark">Your Property Comments</h3>

                    
                        <div class="card-toolbar">

                            <a href="#" id="addcommentBtn" class="btn btn-light-primary font-weight-bolder btn-sm mr-3" data-toggle="modal"  data-target="#commentModal" >
                                <i class="ki ki-plus icon-sm"></i>
                                Add Comment</a>
                            <div class="dropdown dropdown-inline">
                                <!-- <a href="#"
                                    class="btn btn-clean btn-light-primary btn-sm btn-icon"
                                    data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false"
                                >
                                    <i class="ki ki-bold-more-ver"></i>
                                </a> -->
                                <div class="dropdown-menu dropdown-menu-md dropdown-menu-right">
                                    <!--begin::Navigation-->
                                    <ul class="navi navi-hover">
                                        <li class="navi-footer pyy-4">
                                        <a href="#" id="addcommentBtn" class="btn btn-light-primary font-weight-bolder btn-sm" data-toggle="modal"  data-target="#commentModal" aria-haspopup="true" aria-expanded="false">
                                            <i class="ki ki-plus icon-sm"></i>
                                                Add Comment</a>
                                        </li>
                                    </ul>
                                    <!--end::Navigation-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div class="card-body pt-2">
                        <!--begin::Item-->
                        <div class="timeline timeline-justified timeline-4">
                        @if(count($comments)>0)
                            <div class="timeline-items">
                            @foreach($comments as $item)
                                <div class="timeline-bar"></div>
                                <div class="timeline-item" id="comment_{{$item->id}}">
                                    <div class="timeline-badge">
                                        <div class="bg-danger"></div>
                                    </div>

                                    <div class="timeline-label">
                                        <span class="text-primary font-weight-bold">{{date("d-m-Y",strtotime($item->created_at))}}</span>
                                        <a href="javascript:void(0)" data-id="{{$item->id}}" class="float-right commentDlt" style="margin: -10px;"><i class="flaticon-delete text-danger"></i></a>
                                        <!-- <button >Delete Comment</button> -->
                                    </div>

                                    <div class="timeline-content">
                                    {{$item->comment}}
                                    </div>
                                </div> 
                            @endforeach 
                            </div>
                        @endif
                        </div>
                        <!--end::Item-->
                    </div>
                    <!--end::Body-->
                </div>
                <!--end::List Widget 14-->
            </div>           
        </div>
    @endif

    @if ($campaign_history->count())
        <div class="card card-custom">
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">Campaign History</span>                    
                </h3>               
            </div>
            
            <div class="card-body py-2">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover display" id="campaign_history">
                        <thead>
                            <tr>
                                <th>Campaign</th>
                                <th>Trigger</th>
                                <th>Last Letter Sent</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach ($campaign_history as $item)
                            <tr>
                                <td>
                                    <a href="{{route('probate-campaign-history.show', $item->campaign_id)}}">{{$item->campaign->name}}</a>
                                </td>
                                <td>{{$trigger[$item->trigger]}}</td>
                                <td>{{isset($item->campaign->sent_date) && $item->campaign->sent_date ? $item->campaign->sent_date->format('d M Y') : '' }}</td>
                                <td>{{$item->campaign->campaign_status == 1 ? 'Sent' : 'Sending'}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <br />
    @endif
    </div>

    
</div>
<!--end::Profile Overview-->

<!-- Add  comment modal  -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <form method="post" novalidate="novalidate" action="{{route('addProbatePropertyComment')}}" class="form" id="addComment" name="addComment">
            {{csrf_field()}}
            <input type="hidden" value="{{$property_details->id}}" name="property" id="property">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Add Comment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">                    
                    <div class="form-group row">                           
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <textarea class="form-control" name="comment" placeholder="Comment" ></textarea>                            
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" id="addCampaignSubmit" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- comment modal  -->
@endsection

{{-- Styles Section --}}
@section('styles')
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{asset('css/pages/style.css')}}">
@endsection


{{-- Scripts Section --}}
@section('scripts')
{{-- vendors --}}

{{-- page scripts --}}
<!-- <script src="{{ asset('js/pages/crud/datatables/basic/basic.js') }}" type="text/javascript"></script> -->
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/pages/custom/profile/profile.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/developer/probateproperty.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/developer/formValidation.js') }}" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjGSBBTBtn7DTPE4Lu42BwNFewK4AD5DI&callback=initialize&libraries=&v=weekly" defer ></script> 

<script type="text/javascript">
    
    var latitude = "";
    var longitude = "";

    // var latitude  = '';
    // var longitude  = '';
    var address = "";   
    
    function initialize() {
        if (latitude != '' && longitude != '') {
            initLatLng(latitude, longitude);
        } else {
            initPostcode(address + ',UK');
        }                  
    }   

    function initLatLng(latitude,longitude) { 
        console.log(latitude + '---' + longitude);
        var latlng = new google.maps.LatLng(latitude, longitude);

        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 13
        });

        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            draggable: false,
            anchorPoint: new google.maps.Point(0, -29)
        });

        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
            var iwContent = '<div id="iw_container">' +
            '<div class="iw_title"><b>Location</b> : Noida</div></div>';
            // including content to the infowindow
            infowindow.setContent(iwContent);
            // opening the infowindow in the current map and at the current marker location
            infowindow.open(map, marker);
        });
    }

    function initPostcode(address) {    
        console.log(address);     
        var geocoder = new google.maps.Geocoder();

        geocoder.geocode( { 'address': address }, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
        } else {
            console.log(status);
        }

        var latlng = new google.maps.LatLng(latitude,longitude);
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 13
        });
        var marker = new google.maps.Marker({
            map: map,
            position: latlng,
            draggable: false,
            anchorPoint: new google.maps.Point(0, -29)
        });
        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
            var iwContent = '<div id="iw_container">' +
            '<div class="iw_title"><b>Location</b> : Noida</div></div>';
            // including content to the infowindow
            infowindow.setContent(iwContent);
            // opening the infowindow in the current map and at the current marker location
            infowindow.open(map, marker);
        });
        });
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);   
</script>
    
<script>
    jQuery(document).ready((function() {
        //listing_activity
        $("#listing_activity").DataTable({
            bFilter:false,
            searching:false,
            pagination: true,
            pageLength:5,
            responsive: !0,
            info : false,
            bLengthChange:false,
            order:false,
            //  "order": [[ 1, "desc" ]]
        });

        $("#campaign_history").DataTable({
            bFilter:false,
            searching:false,
            pagination: true,
            pageLength:5,
            responsive: !0,
            info : false,
            bLengthChange:false,
            order:false,
            //  "order": [[ 1, "desc" ]]
        });

        var token = '