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

  <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
<style type="text/css">

#google_map { 
    height: 388px; 
    margin-bottom: 10px;   
}

#os_map { 
    position:absolute; 
    top:0; 
    bottom:0; 
    width: 98%; 
    height: 388px; 
    margin-bottom: 12px;
}

#overview-map {
    position: absolute;
    width: 129px;
    height: 76px; 
    bottom: 30px; 
    left: 20px;
    border: 2px solid #fff;
    -webkit-border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 40% !important;
  top: 12%;
  width: 24%;
  height: auto;
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgb(0,0,0); /* Fallback color */
  /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding: 0px !important;
}

.modal-dialog{
    margin: 2px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  /* margin: 15% auto;*/ /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
  height: auto;
  border: 0px solid #fff;
}

#search_err .modal-footer button{ 
    background-color: #B52555;
}
#search_err .modal-footer button,
#search_err .modal-footer button:link, 
#search_err .modal-footer button:visited, 
#search_err .modal-footer button:hover, 
#search_err .modal-footer button:active {
  color: #FFFFFF;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-left: 325px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.show-prty{
    font-size: 12px !important;
}

/*---------------------------------------Custom Tooltip----------------------------------*/
/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the bubble. */
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  font-family: sans-serif;
  overflow-y: auto;
  max-height: 60px;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute;
  width: 100%;
  bottom: 50px;
  left: 0;
}

/* This element draws the tip. */
.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Center the tip horizontally. */
  transform: translate(-50%, 0);
  /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  width: 0;
  height: 0;
  /* The tip is 8px high, and 12px wide. */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid white;
}

/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
  cursor: auto;
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 200px;
}

/*-------------------------------Custom Search------------------------------*/        
    #description {
          font-family: Roboto;
          font-size: 15px;
          font-weight: 300;
        }

        #infowindow-content .title {
          font-weight: bold;
        }

        #infowindow-content {
          display: none;
        }

        #map #infowindow-content {
          display: inline;
        }

        .pac-card {
          margin: 10px 10px 0 0;
          border-radius: 2px 0 0 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          background-color: #fff;
          font-family: Roboto;
        }

        #pac-container {
          padding-bottom: 12px;
          margin-right: 12px;
        }

        .modal-backdrop{
            display: none !important;
        }

        .pac-controls {
          display: inline-block;
          padding: 5px 11px;
        }

        .pac-controls label {
          font-family: Roboto;
          font-size: 13px;
          font-weight: 300;
        }

        #pac-input {
          background-color: #fff;
          font-family: Roboto;
          font-size: 15px;
          font-weight: 400;
          margin-left: 12px;
          padding: 0 11px 0 13px;
          text-overflow: ellipsis;
          width: 400px;
          top: 10px;
          right: 10px;
          left:inherit !important;
          z-index: 10000000;
          top: 12px !important;
          border: solid 1px #c5c0c0;
          height: 38px;
          border-radius: 6px;
          background-color: #fff;
          box-shadow: 0px 0px 11px -2px rgb(0 0 0 / 34%) 
        }

        #pac-input:focus {
          border-color: #c5c0c0 !important;
        }

        #title {
          color: #fff;
          background-color: #c5c0c0;
          font-size: 25px;
          font-weight: 500;
          padding: 6px 12px;
        }

        #target {
          width: 345px;
        } 
        .dataTables_filter{
            text-align: right !important;
           margin-top: -98px !important;
           margin-bottom: 27px !important;
           margin-right: -4px !important;
        }
        #example2_filter input {
            width: 205px !important;
           height: 38px !important;
            margin-top: 14px;
            margin-right: -4px !important;
        }
        #example2_filter label {
            display:none !important:}
        }
        .paging_simple_numbers{
            float: left !important;
            width: 79% !important;
        }
   
        #example2_length{
            float: left;
        }
    
      
</style>
@endsection
{{-- Content --}}
@section('content')

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    
    <!--end::Subheader-->
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">     
        <!--begin::Container-->
        <div class="container">
            <!--begin::Dashboard-->
            <!--begin::Row-->
  {{--           <div class="row">
                
                <div class="col-xl-12">
                    <!--begin::Engage Widget 8-->
                    <div class="card card-custom gutter-b card-stretch card-shadowless">
                        
                          <img src="{{URL::asset('admin/assets/media/svg/humans/map.png')}}" class=" max-h-xl-275px mb-n20" alt="">    
                    </div>
                    <!--end::Engage Widget 8-->
                </div>
                </div> --}}

                <!-- Search Result Error Modal -->
                <div class="modal fade" id="search_err" role="dialog">
                    <div class="modal-dialog modal-md">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                          <h4 class="modal-title">Error</h4>
                        </div>
                        <div class="modal-body">
                            <p>No properties have been found, please try widening your search area.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                      </div>
                    </div>
                </div>

                <div id="myModal" class="modal">
                  <!-- Modal content -->
                  <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>Info Panel</h2>
                        <p id="modalContent">No data available.</p>
                    </div>
                </div>

                <!--end::Row-->
                <div class="container py-8 ph-1">
                    <div class="row">
                         <div class="col-lg-12">
                            <input id="pac-input" class="controls" type="text" placeholder="Search..."/>
                            <div id="os_map"></div>
                            <div id="google_map"></div>
                            <div id="overview-map"></div>
                            <div id="content" style="padding: 0px; width: 100px; display:none;"></div>
                         </div>
                     </div>
                 </div>

                <!--begin::Row-->
                <div class="container py-8 ph-1">
                    <div class="row">
                        <div class="col-lg-4">
                            <!--begin::Callout-->
                            <div class="card card-custom  mb-8 mb-lg-0">
                                <div class="card-body" style="background-color: #fff; border-radius: 10px;">
                                    <div class="d-flex align-items-center p-5 count-lead-box">
                                        <!--begin::Icon-->
                                        <div class="mr-6 icon-box">
                                            <span class="svg-icon svg-icon-primary svg-icon-4x">
                                                <!--begin::Svg Icon | path:assets/media/svg/icons/Home/Mirror.svg-->
                                                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="42.08px" height="42.074px" viewBox="0 0 42.08 42.074" enable-background="new 0 0 42.08 42.074" xml:space="preserve">
<path id="house_7_" fill="#5298E8" d="M32.218,42.074H9.863C4.419,42.068,0.007,37.656,0,32.212v-13.83
    c0.008-3.074,1.442-5.971,3.881-7.842l11.178-8.525c3.535-2.686,8.426-2.686,11.961,0l3.554,2.707v-2.1
    c0-0.908,0.735-1.644,1.644-1.644s1.645,0.736,1.645,1.644v5.419c-0.001,0.908-0.737,1.644-1.645,1.643
    c-0.36,0-0.71-0.118-0.996-0.336l-6.193-4.719c-2.357-1.791-5.619-1.791-7.975,0L5.875,13.154c-1.626,1.248-2.582,3.179-2.588,5.228
    v13.83c0.004,3.63,2.945,6.571,6.575,6.575h22.356c3.63-0.004,6.57-2.945,6.575-6.575v-13.83c0.007-2.05-0.938-3.988-2.558-5.246
    c-0.729-0.541-0.882-1.57-0.341-2.3c0.541-0.729,1.57-0.881,2.3-0.34c0.012,0.008,0.023,0.018,0.035,0.026
    c2.432,1.881,3.855,4.785,3.852,7.86v13.83C42.074,37.656,37.662,42.068,32.218,42.074z M17.753,18.98
    c-1.135,0-2.055,0.92-2.055,2.055c0,1.135,0.92,2.055,2.055,2.055c1.135,0,2.055-0.92,2.055-2.055
    C19.808,19.9,18.888,18.98,17.753,18.98L17.753,18.98z M26.383,21.035c-0.024,1.135-0.965,2.034-2.1,2.009
    c-1.1-0.024-1.985-0.909-2.009-2.009c0.035-1.135,0.982-2.026,2.117-1.991C25.476,19.078,26.348,19.949,26.383,21.035L26.383,21.035
    z M19.808,27.609c-0.025,1.135-0.965,2.035-2.1,2.01c-1.099-0.024-1.985-0.91-2.009-2.01c0.035-1.134,0.983-2.025,2.117-1.99
    C18.901,25.653,19.773,26.524,19.808,27.609L19.808,27.609z M26.383,27.609c-0.024,1.135-0.965,2.035-2.1,2.01
    c-1.1-0.024-1.985-0.91-2.009-2.01c0.035-1.134,0.982-2.025,2.117-1.99C25.476,25.653,26.348,26.524,26.383,27.609L26.383,27.609z"
    />
</svg>
                        <!--end::Svg Icon-->
                    </span>
                </div>
                <!--end::Icon-->
                <!--begin::Content-->
                <div class="d-flex flex-column count-lead">
                    <a href="{{route('recentlySold')}}" class="text-label label-text01 text-hover-primary font-weight-bold font-size-h4 mb-3">{{ $totalCountData['total_count'] }}</a>
                    <div class="text-dark-75 sub-text-box">Total Probate Leads</div>
                </div>
                <!--end::Content-->
            </div>
        </div>
    </div>
    <!--end::Callout-->
</div>
                                        <div class="col-lg-4">
                                            <!--begin::Callout-->
                                            <div class="card card-custom   wave-danger mb-8 mb-lg-0">
                                                <div class="card-body" style="background-color: #fff;     border-radius: 10px;">
                                                    <div class="d-flex align-items-center p-5 count-lead-box">
                                                        <!--begin::Icon-->
                                                        <div class="mr-6 icon-box ico-i">
                                                            <span class="svg-icon svg-icon-danger svg-icon-4x">
                                                                <!--begin::Svg Icon | path:assets/media/svg/icons/General/Thunder-move.svg-->
                                                                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="46px" height="46.004px" viewBox="0 0 46 46.004" enable-background="new 0 0 46 46.004" xml:space="preserve">
 <g id="house_6_" transform="translate(-0.03 0)">
    <g id="Group_70" transform="translate(0.03 0)">
        <path id="Path_103" fill="#08BEAB" d="M41.957,24.353c-1.122,0.001-2.193,0.468-2.959,1.288l-1.084,1.158V18.64
            c2.104,0.745,4.414-0.358,5.158-2.462c0.574-1.622,0.059-3.43-1.285-4.505l-3.873-3.1v-7.22c0-0.743-0.602-1.345-1.344-1.347
            h-5.395c-0.744,0-1.348,0.604-1.348,1.348v0.753l-1.518-1.216c-1.475-1.189-3.577-1.189-5.051,0L9.784,11.672
            c-1.744,1.396-2.026,3.941-0.63,5.685c1.075,1.342,2.88,1.858,4.502,1.287V24.2c-0.964,0.285-1.875,0.725-2.7,1.301
            c-0.108-2.152-1.884-3.842-4.038-3.844h-5.57C0.604,21.656,0,22.26,0,23.004c0,0,0,0.001,0,0.001v21.654
            c0,0.744,0.604,1.348,1.348,1.348h5.57c1.721-0.002,3.251-1.092,3.818-2.717c0.075,0.014,0.15,0.02,0.225,0.021h20.215
            c2.982-0.036,5.775-1.466,7.547-3.862l6.471-8.628c1.338-1.786,0.975-4.321-0.813-5.659
            C43.682,24.636,42.831,24.353,41.957,24.353z M8.27,41.961c0,0.746-0.605,1.35-1.35,1.349c0,0-0.001,0-0.002,0H2.695V24.353h4.223
            c0.745-0.001,1.351,0.601,1.352,1.347l0,0V41.961z M32.523,2.7h2.699v3.719l-2.699-2.156V2.7z M13.15,15.882
            c-0.601,0.438-1.444,0.306-1.882-0.295c-0.41-0.563-0.324-1.345,0.199-1.805L24.943,3c0.49-0.396,1.191-0.396,1.683,0
            l13.478,10.778c0.562,0.489,0.621,1.339,0.133,1.9c-0.461,0.53-1.252,0.617-1.816,0.2l-11.793-9.43
            c-0.492-0.395-1.191-0.395-1.684,0L13.15,15.882z M28.48,18.962H23.09c-0.744,0-1.348,0.604-1.348,1.348v5.19
            c-1.583-1.102-3.464-1.689-5.391-1.688v-7.04l9.434-7.546l9.434,7.546V29.7l-0.181,0.195c-0.527-1.69-2.091-2.842-3.862-2.844
            h-1.348V20.31C29.828,19.565,29.225,18.962,28.48,18.962L28.48,18.962z M27.133,21.662v5.391h-2.699v-5.395L27.133,21.662z
             M43.033,29.208l-6.463,8.623c-1.263,1.721-3.258,2.75-5.391,2.785H10.961V29.004l0.939-0.825c2.547-2.231,6.353-2.231,8.9,0
            c0.477,0.419,0.682,0.608,0.878,0.756c0.086,0.065,0.932,0.81,1.408,0.81h8.086c0.746,0,1.35,0.604,1.35,1.35
            s-0.604,1.35-1.35,1.35H20.394c-0.746,0-1.35,0.604-1.35,1.35c0,0.746,0.604,1.351,1.35,1.351h11.685
            c1.122-0.001,2.192-0.468,2.958-1.287l5.934-6.379c0.254-0.274,0.611-0.431,0.986-0.429c0.745,0,1.349,0.604,1.348,1.35
            c0,0,0,0,0,0.001c0,0.289-0.095,0.569-0.269,0.8L43.033,29.208z"/>
    </g>
</g>
</svg>
                                                                <!--end::Svg Icon-->
                                                            </span>
                                                        </div>
                                                        <!--end::Icon-->
                                                        <!--begin::Content-->
                                                        <div class="d-flex flex-column count-lead">
                                                            <a href="{{route('newToMarket')}}#" class="text-label label-text02 text-hover-primary font-weight-bold font-size-h4 mb-3">{{ $totalCountData['month_count'] }}</a>
                                                            <div class="text-dark-75 sub-text-box">New Probate Leads </div>
                                                        </div>
                                                        <!--end::Content-->
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end::Callout-->
                                        </div>
                                        <div class="col-lg-4">
                                            <!--begin::Callout-->
                                            <div class="card card-custom    mb-8 mb-lg-0">
                                                <div class="card-body" style="
                                                background-color: #fff; border-radius: 10px;">
                                                    <div class="d-flex align-items-center p-5 count-lead-box">
                                                        <!--begin::Icon-->
                                                        <div class="mr-6 icon-box ico-2">
                                                            <span class="svg-icon svg-icon-success svg-icon-4x">
                                                                <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Sketch.svg-->
                                                                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="45.307px" height="35.535px" viewBox="0 0 45.307 35.535" enable-background="new 0 0 45.307 35.535" xml:space="preserve">
<g id="campaigning_1_" transform="translate(0 -25.459)">
    <path id="Path_104" fill="#EA9F0C" d="M1.439,33.854C0.644,33.854,0,34.498,0,35.293l0,0v11.232c0,0.795,0.645,1.439,1.439,1.439
        s1.438-0.645,1.438-1.439V35.293C2.878,34.498,2.234,33.854,1.439,33.854L1.439,33.854z"/>
    <path id="Path_105" fill="#EA9F0C" d="M31.935,25.459h-5.988c-0.795,0-1.439,0.645-1.439,1.439c0,0,0,0.001,0,0.002v1.3
        L5.236,33.913c-0.611,0.181-1.03,0.743-1.03,1.38V46.52c0,0.073,0.006,0.146,0.018,0.217c0,0.014,0,0.027,0.006,0.041
        c0.01,0.06,0.024,0.119,0.042,0.178l4.08,13.029c0.236,0.757,1.042,1.18,1.8,0.942l5.944-1.856
        c0.757-0.237,1.179-1.043,0.943-1.801l-2.021-6.461l9.489,2.815v1.3c0,0.795,0.645,1.439,1.439,1.439h5.988
        c0.794,0,1.438-0.645,1.438-1.439V26.9C33.374,26.105,32.731,25.46,31.935,25.459C31.935,25.459,31.935,25.459,31.935,25.459z
         M13.862,56.753l-3.194,1l-2.843-9.078l3.867,1.147L13.862,56.753z M13.254,47.282h-0.012l-6.157-1.831v-9.084L24.508,31.2v19.42
        L13.254,47.282z M30.495,53.482h-3.11V28.337h3.11V53.482z"/>
    <path id="Path_106" fill="#EA9F0C" d="M43.167,48.967l-6.227-3.113c-0.711-0.355-1.576-0.067-1.932,0.644
        c-0.354,0.711-0.066,1.575,0.645,1.931l6.227,3.114c0.711,0.355,1.576,0.067,1.932-0.644S43.878,49.322,43.167,48.967z"/>
    <path id="Path_107" fill="#EA9F0C" d="M36.297,36.119c0.224,0,0.443-0.052,0.643-0.152l6.227-3.114
        c0.715-0.348,1.013-1.208,0.665-1.923s-1.208-1.013-1.923-0.665c-0.01,0.005-0.02,0.009-0.029,0.014l-6.227,3.114
        c-0.712,0.354-1.001,1.218-0.646,1.93C35.25,35.813,35.75,36.121,36.297,36.119L36.297,36.119z"/>
    <path id="Path_108" fill="#EA9F0C" d="M43.867,39.471h-5.2c-0.795-0.001-1.439,0.643-1.44,1.438
        c-0.001,0.794,0.643,1.439,1.438,1.44c0.001,0,0.002,0,0.003,0h5.2c0.795-0.001,1.438-0.646,1.438-1.44
        C45.303,40.115,44.661,39.472,43.867,39.471z"/>
</g>
</svg>
                                                                <!--end::Svg Icon-->
                                                            </span>
                                                        </div>
                                                        <!--end::Icon-->
                                                        <!--begin::Content-->
                                                        <div class="d-flex flex-column count-lead">
                                                            <a href="{{route('priceDrop')}}" class="text-label label-text03 text-hover-primary font-weight-bold font-size-h4 mb-3">{{ $totalCountData['campaign_count'] }}</a>
                                                            <div class="text-dark-75 sub-text-box">Campaign</div>
                                                        </div>
                                                        <!--end::Content-->
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end::Callout-->
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                
                                    <!--begin::Container-->
                                    <div class="container">
                                        <!--begin::Notice-->
                                
                                        <!--end::Notice-->
                                        <!--begin::Card-->
                                        <div class="alert alert-custom alert-white alert-shadow gutter-b head-line top-box" role="alert">
                                         
                                            <div class="alert-text head-text" id="new_prop">New Properties<br> 
                                            
                                               
                                            </div>
                                            
                                        </div>
                                        <div class="card card-custom new-property">
                                            
                                            <div class="card-body">
                                                <!--begin: Search Form-->
                                                <!--begin::Search Form-->   
                                                <!--end::Search Form-->
                                                <!--end: Search Form-->
                                                <!--begin: Datatable-->
                                                <div class="col-xs-12">
                <div class="">
                    <div class="">
                        <table id="example2" class="table">
                            <thead>
                                <tr>
                                {{--  <th>Sl No.</th> --}}
                                <th>Outcode</th>
                                <th width="30%">Address</th>                    
                                <th>Executor</th>
                                <th>Publication Date</th>
                                <th>Claim Date</th>                                                       
                               </tr>
                            </thead>                        
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
                                                <!--end: Datatable-->
                                            </div>
                                        </div>
                                        <!--end::Card-->
                                    </div>
                                    <!--end::Container-->
                                <!--end::Row-->
                                <!--end::Dashboard-->
                            </div>
                            <!--end::Container-->
                        </div>
                        <!--end::Entry-->
                    </div>
                    </div>
                    <!--end::Content-->

@endsection

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

   <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        
          <script src="{!! asset('admin/js/jquery.dataTables.js') !!}"></script>

          <script src="{!! asset('admin/js/dataTables.bootstrap4.js') !!}"></script>

          <script src="{!! asset('admin/js/dataTables.responsive.min.js') !!}"></script>
          <script src="{!! asset('admin/js/responsive.bootstrap4.min.js') !!}"></script>
          <script src="{!! asset('admin/js/tables-datatable.js') !!}"></script>
<script type="text/javascript">
    var table = $('#example2').DataTable({
        "aaSorting": [],
        "pageLength": 10,
                "sDom": '<"top"f>rt<"bottom"pli><"clear">',

                language: { search: '', searchPlaceholder: "Search...", "sLengthMenu": "_MENU_","sInfo" : "Showing _START_ - _END_ of _TOTAL_ ",// text you want show for info section
"sLengthMenu": "_MENU_" },

                
        "fnDrawCallback": function(oSettings) {

            if (oSettings.bSorted || oSettings.bFiltered || oSettings._iDisplayLength)
            {
                j = 0;

                for (var i = oSettings._iDisplayStart; i < oSettings.aiDisplay.length + oSettings._iDisplayStart; i++)
                {
                    $('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[j] ].nTr).find('span').text(i + 1);
                    j++;
                }
            }

        },
            //processing: true,

            mark: true,
            ajax: {
                url: '{!! URL::to("/get-probate-data") !!}',
                data: function (d) {
                }
            },

            columns: [
            // {data: 's#', name: 's#'},
            {data: 'outcode', name: 'outcode'},
            {data: 'address', name: 'address'},       
            {data: 'executer', name: 'executer'},
            {data: 'publication_date', name: 'publication_date'},
            // {data: 'created_date', name: 'created_date'},           
            {data: 'claim_date', name: 'claim_date'},
            // {data: 'status', name: 'status'},      

            ]});
 </script>
 <script src="https://maps.googleapis.com/maps/api/js?key={{ config('map.apiKey') }}&libraries=places"></script>
 <script src="https://labs.os.uk/public/os-api-branding/v0.2.0/os-api-branding.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

<script>
    
    let popup, Popup;
    var bounds = new google.maps.LatLngBounds();
    
    var getCenter = [ -0.118092, 51.509865];
    var getZoom = 10;
    var coord = [-0.118092,51.509865];
    $('#content').hide();

    // Google Map Search Function
    function google_search(map)
    {
        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');

        const options = {
            componentRestrictions: { country: "uk" },
        };
        var autocomplete = new google.maps.places.Autocomplete(input,options);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
        /*var marker = new google.maps.Marker({
            map: map
        });*/

        // Bias the SearchBox results towards current map's viewport.
        autocomplete.bindTo('bounds', map);
        // Set the data fields to return when the user selects a place.
        autocomplete.setFields(
        ['address_components', 'geometry', 'name']);

        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
               $('#search_err').modal('show');
              return;
            }
            var bounds = new google.maps.LatLngBounds();
            //marker.setPosition(place.geometry.location);

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
            map.fitBounds(bounds);
        });
    }

    function initMap() {
        
        var bounds = new google.maps.LatLngBounds();
        
        // Display a map on the web page
        var icon = "{!! asset('admin/assets/media/svg/icons/Map/marker.svg') !!}";
        var map = new google.maps.Map(document.getElementById("google_map"), 
        {
            mapTypeControl: false,
            mapTypeId:'roadmap',
            fullscreenControl: false,
            //zoom: 15,
            center: {
                lat: 51.509865,
                lng: -0.118092
            },
        });

        var markers = [
            @php
            if($probateProperties)
            {
                foreach($probateProperties as $row)
                {
                    if($row['latitude'] && $row['longitude'])
                    {
                        echo '["'.$row['address_1'].'", "'.$row['latitude'].'", "'.$row['longitude'].'", "'. Crypt::encrypt($row['id']).'"],';
                    }
                }
            }
            @endphp
        ]; 

        /*----------------------------------Custom Tooltip-------------------------------------*/
        class Popup extends google.maps.OverlayView {
            position;
            containerDiv;
            constructor(position, content) {
              super();
              this.position = position;
              content.classList.add("popup-bubble");
              // This zero-height div is positioned at the bottom of the bubble.
              const bubbleAnchor = document.createElement("div");
              bubbleAnchor.classList.add("popup-bubble-anchor");
              bubbleAnchor.appendChild(content);
              // This zero-height div is positioned at the bottom of the tip.
              this.containerDiv = document.createElement("div");
              this.containerDiv.classList.add("popup-container");
              this.containerDiv.appendChild(bubbleAnchor);
              // Optionally stop clicks, etc., from bubbling up to the map.
              Popup.preventMapHitsAndGesturesFrom(this.containerDiv);

            }
            /** Called when the popup is added to the map. */
            onAdd() {
              this.getPanes().floatPane.appendChild(this.containerDiv);
            }
            /** Called when the popup is removed from the map. */
            onRemove() {
                bubbleAnchor.classList.remove("popup-bubble-anchor");
                 
              if (this.containerDiv.parentElement) {
                this.containerDiv.parentElement.removeChild(this.containerDiv);
              }
            }
            /** Called each frame when the popup needs to draw itself. */
            draw() {
              const divPosition = this.getProjection().fromLatLngToDivPixel(
                this.position
              );
              // Hide the popup when it is far out of view.
              const display =
                Math.abs(divPosition.x) < 1000 && Math.abs(divPosition.y) < 1000
                  ? "block" : "none";

              if (display === "block") {
                this.containerDiv.style.left = divPosition.x + "px";
                this.containerDiv.style.top = divPosition.y + "px";
              }

              if (this.containerDiv.style.display !== display) {
                this.containerDiv.style.display = display;
              }
            }
        }
       
        // Place each marker on the map  
       
        for(var i = 0; i < markers.length; i++ ) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);

            var marker = new google.maps.Marker({
                position: position,
                map: map,
                //title: markers[i][0],
                animation: google.maps.Animation.DROP,
                place:AnimationEffect,
                icon:icon,
            });
            google.maps.event.addListener(marker, 'mouseout', function () {
                $(".popup-bubble-anchor").hide();
            });

            google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
                 return function() {
                    
                    //marker.setAnimation(google.maps.Animation.BOUNCE);
                    
                    var latitude = markers[i][1];
                    var longitude = markers[i][2];
                    $("#content").show();

                    $.ajax({
                         type: 'GET', 
                         url: '{!! URL::to("/get-probate-tooltipdata?pid=") !!}'+markers[i][3],
                        success : function (data) {
                            $("#content").html(data.html);
                            popup = new Popup(
                                new google.maps.LatLng(latitude, longitude),
                                    document.getElementById("content")
                            );
                            popup.setMap(map);
                        }
                    });
                }
                    
            })(marker, i));

            // Add info window to marker    
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                
                  return function() {
                    var latitude = markers[i][1];
                    var longitude = markers[i][2];
                    var pid = markers[i][3];

                    var url = '{!! URL::to("/property-detail?pid=") !!}' + pid;
                    
                    window.location.href = url;    
             }
                    
            })(marker, i));

            // Center the map to fit all markers on the screen
            map.fitBounds(bounds);
        }
        
        var overviewMap = new google.maps.Map(document.getElementById('overview-map'), {
            zoom: 10,
            center: {
                lat: 51.509865,
                lng: -0.118092
            },
            mapTypeId: 'hybrid',
            zoomControl: false,
            gestureHandling: "none",
            disableDefaultUI: true
        });

        overviewMap.addListener( "click", (e) => {

            if(map.mapTypeId == "hybrid")
            {
                map.setMapTypeId('roadmap');
                overviewMap.setMapTypeId('hybrid');
            }
            else
            {
                map.setMapTypeId('hybrid');
                overviewMap.setMapTypeId('roadmap');
            }
            
        });
        google_search(map);
    }

// Load initialize function
    google.maps.event.addDomListener(window, 'load', initMap);

    var modal = document.getElementById("myModal");

    function popWindow(content)
    {    
        modal.style.display = "block";
        $("#modalContent").html(content);
    }

    // When the user clicks on <span> (x), close the modal
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
      modal.style.display = "none";
    }

</script>
@endsection