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

{{-- Content --}}
@section('content')

    <div class="card card-custom small_card">


        <div class="card-body">

            <!--begin::Search Form-->
            <!--begin::Search Form-->
            <div class="mt-2 mb-5 mt-lg-5 mb-lg-10">
                <div class="row align-items-center">
                    <div class="col-lg-12 col-xl-12">
                        <div class="row align-items-center">
                            <div class="col-md-9 my-2 my-md-0">
                                <div class="d-flex align-items-center ">
                                    <div class="mr-1">
                                        <select name="flag" id="flag" class="form-control" >
                                        <option value="0">Select Status</option>
                                            <option value="1">Contacted</option>
                                            <option value="2">Do Not Contact</option>
                                            <option value="3">Letter Sent</option>
                                        </select>
                                    </div>

                                    <div class="mr-2">
                                        <button type="submit" data-btn="Update Status" id="updateFlag" class="btn btn-primary px-6 font-weight-bold btn_click">
                                        Update Status </button>
                                    </div>

                                    <div class="mr-1">
                                        <select id="outcodeFil" class="form-control" >
                                            <option value="">Select Postcode</option>
                                            @foreach ($userOutcodes as $oc)
                                            <option value="{{$oc}}">{{$oc}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                           <!--  <div class="col-md-5 my-2 my-md-0">
                                <form>
                                    <div class="d-flex align-items-center ">
                                        <div class="mr-1">
                                            <button type="submit" data-btn="Update Status" id="" class="btn btn-primary px-6 font-weight-bold btn_click">
                                            Filter by </button>
                                        </div>
                                        <div class="ml-2">
                                            <select name="postcode" id="filter_postcode_withdrawn" class="form-control"  >
                                                <option value="0">Full Post Code</option>
                                                @foreach($post_code as $code)
                                                <option value="{{$code->id}}">{{$code->postcode}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="ml-2">
                                            <select name="property_type" id="filter_property_type_withdrawn" class="form-control"  >
                                                <option value="0">Type</option>
                                                @foreach($property as $code)
                                                <option value="{{$code->id}}">{{$code->property_type}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="btn-group ml-3">
                                            <button class="btn btn-danger  font-weight-bold btn-md btn_click " id="clear_filter12" type="reset">
                                                Clear Filter
                                            </button>
                                        </div>

                                    </div>
                                </form>
                            </div> -->

                            <div class="col-md-3 my-2 my-md-0 propertCheck">
                                <div class="d-flex align-items-center justify-content-end">
                                    <!-- <div class="btn-group mr-1">
                                        <button class="btn btn-danger add_to_campaign font-weight-bold btn-md btn_click" type="button" data-btn="Add to Campaign" id="addCampaign" >
                                            Add to Campaign
                                        </button>
                                    </div> -->

                                    <div class="dropdown dropdown-inline ml-1">
                                        <button type="button" class="btn btn-light-primary font-weight-bolder " data-mode="all_property" id="exportToCsv">
                                        <span class="svg-icon svg-icon-md">
                                            <!--begin::Svg Icon | path:assets/media/svg/icons/Design/PenAndRuller.svg-->
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <rect x="0" y="0" width="24" height="24"/>
                                                    <path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3"/>
                                                    <path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000"/>
                                                </g>
                                            </svg>
                                            <!--end::Svg Icon-->
                                        </span>Export as CSV
                                        </button>
                                        <!--begin::Dropdown Menu-->

                                        <!--end::Dropdown Menu-->
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!--end::Search Form-->
            <!--end::Search Form-->

            <table class="table table-bordered table-hover small_table" id="propertyDatatable">
                <thead>
                    <tr>
                        <th>Select All
                            <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
                            <input type="checkbox" id="select_all" name="select_all">
                            <span></span>
                            </label>
                        </th>
                        <th class="mw-75">Postcode</th>
                        <th width="20%">Address</th>
                        <th class="mw-90">Price</th>
                        <th>List Date</th>
                        <th>Withdrawn Date</th>
                        <th>Estate Agents</th>
                        <th>Type</th>
                        <th class="mw-110">Platform</th>
                        <th class="mw-120">Status</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
  <!-- Filter modal start  -->
    <div class="modal fade" id="propertyFilterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalSizeLg" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Filters</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="card-body">
                            <div class="form-group row">
                                <div class="col-lg-6">
                                    <label>Post code:</label>

                                    <select name="postcode" id="filter_postcode_property" class="form-control"  >
                                        <option value="0">PostCode</option>
                                        @foreach($post_code as $code)
                                        <option value="{{$code->id}}">{{$code->postcode}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label>Type:</label>
                                    <select name="property_type" id="filter_property_type_property" class="form-control"  >
                                        <option value="0">Type</option>
                                        @foreach($property as $code)

                                        <option value="{{$code->property_type}}">{{ucfirst($code->property_type)}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-6">
                                    <label>Status:</label>

                                    <select name="flag" id="filter_flag" class="form-control" >
                                            <option value="0">Select Status</option>
                                            <option value="1">Contacted</option>
                                            <option value="2">Do Not Contact</option>
                                            <option value="3">Letter Sent</option>
                                        </select>
                                </div>
                                <div class="col-lg-6">
                                    <label>Estate Agent:</label>

                                    <select name="flag" id="filter_agent" class="form-control" >
                                            <option value="0">Select Agent</option>
                                            @foreach($agency as $agent)
                                            <option value="{{$agent->id}}">{{$agent->name}}</option>
                                            @endforeach
                                        </select>
                                </div>


                            </div>
                            <div class="form-group row">
                                <div class="col-lg-6">
                                    <label>Platform:</label>

                                    <select name="flag" id="filter_platform" class="form-control" >
                                            <option value="-1">Select Platform</option>
                                            <option value="0">Rightmove</option>
                                            <option value="1">Zoopla</option>
                                        </select>
                                </div>

                            </div>
                            <div class="form-group row">
                                <div class="col-lg-6">
                                    <label>Date from:</label>

                                    <input class="form-control date_from" type="text" placeholder='Date from' name='date_from' value=''>
                                </div>
                                <div class="col-lg-6">
                                    <label>Date to:</label>

                                    <input class="form-control date_to" type="text" placeholder='Date to' name='date_to' value=''>
                                </div>

                            </div>
                        </div>
                    </form>

                </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary font-weight-bold filterWithdrawnProperty">Apply Filter</button>
                        <button type="button" class="btn btn-primary font-weight-bold" id="clear_filter">Clear</button>
                    </div>
                </div>
        </div>
    </div>
 <!-- Filter modal end  -->

@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')}}">
    <link rel="stylesheet" href="{{asset('css/pages/bootstrap-datepicker.css')}}">
@endsection


{{-- Scripts Section --}}
@section('scripts')
    {{-- vendors --}}
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/pages/crud/forms/widgets/bootstrap-datepicker.js')}}"></script>

    {{-- 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/developer/property.js') }}" type="text/javascript"></script>
	<!-- <script src="{{ asset('js/developer/formValidation.js') }}" type="text/javascript"></script> -->
    <script>
        $( document ).ready(function() {
         $('.date_from').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight:true,
         });
          $('.date_to').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight:true,
         });

     });
        var url = '