{{-- Extends layout --}}
@extends('layout.default')
{{-- Content --}}
@section('styles')
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" href="{{asset('css/pages/bootstrap-datepicker.css')}}">
@endsection
@section('content')
<style>
.table-condensed{
    background:#fff;
}
.card-custom{
    margin-top: 25px;
}
#newbtn
{
    background: #B52555;
}
#newbtn button
{
    color: #fff;
}
#addCampaign
{
   background: #B52555;
   color: #fff;
}
#example2_filter{
  width: 50% !important;
  float: right !important;
  margin-top: -54px !important;
  margin-right: -4px !important;

}
#example2_filter input {
    width: 205px !important;
    height: 38px !important;
 }
</style>
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@section('content')
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid content-wrap" id="kt_content">
    <div class="d-flex flex-column-fluid">     
        <div class="container">                  
            <div class="container py-8 ph-1">
                <div class="row">
                    <div class="col-lg-4">                     
                        <div class="col-lg-4">                            
                        </div>
                    </div>
                </div>
                <div class="row">                  
                    <div class="container">                      
                        <div class="alert alert-custom alert-white alert-shadow gutter-b head-line top-box" role="alert">
                            <div class="alert-text head-text">Probate Properties<br> 
                            </div>
                            <button class="btn add_to_campaign font-weight-bold btn-md btn_click mr-1" type="button" data-btn="Add to Campaign" id="addCampaign">
                                Add to Campaign
                            </button>
                            <div class="ml-2 filter-btn">
                                <button type="submit" data-btn="" id="filterAll" class="btn btn-primary px-4 font-weight-bold btn_click" data-toggle="modal" data-target="#propertyFilterModal">Filter </button>
                            </div>

                        </div>
                        <div class="card card-custom new-property">

                            <div class="card-body">                               
                                <div class="col-xs-12">
                                    <div class="">
                                        <div class="">
                                         <div class="mt-2 mb-5">
                                            <div class="row align-items-center">
                                                <div class="col-lg-10 col-xl-10">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-8 my-2 my-md-0">
                                                            <div class="d-flex align-items-center ">
                                                                <div class="mr-1">
                                                                    <select name="status" id="status" class="form-control btn-box" >
                                                                        <option value="0">Select Status</option>
                                                                        <option value="1" {{ (@$search_data->flag) == 1 ?'selected':'' }} >Contacted</option>
                                                                        <option value="2" {{ (@$search_data->flag) == 2 ?'selected':'' }}>Do Not Contact</option>
                                                                        <option value="3" {{ (@$search_data->flag) == 3 ?'selected':'' }}>Letter Sent</option>
                                                                    </select>
                                                                </div>
                                                                <div class="mr-1">
                                                                    <select id="outcodeFil" class="form-control btn-box" >
                                                                        <option value="">Select Postcode</option>
                                                                        @foreach ($userOutcodes as $oc)
                                                                        <option value="{{$oc}}"
                                                                        @php
                                                                        if((isset($search_data->outcode) && $search_data->outcode!='' && $search_data->outcode == $oc)
                                                                          || (isset($selectedOutcode) && $selectedOutcode!='' && $selectedOutcode == $oc)) { echo 'selected';  } @endphp >{{$oc}}</option>
                                                                      @endforeach
                                                                  </select>
                                                              </div>
                                                              <div class="col-md-6  my-2 my-md-0  propertCheck update-status">

                                                                <div class="col-md-6 status-btn ">
                                                                    <select name="flag" id="updateFlag" class="form-control selectpicker"  data-style="btn-success">
                                                                        <option value="">Update Status</option>
                                                                        <option value="1">Contacted</option>
                                                                        <option value="2">Do Not Contact</option>
                                                                        <option value="3">Letter Sent</option>
                                                                    </select>
                                                                </div> 
                                                            </div>
                                                            <div class="col-xs-12 row form-group csv-btn" id="newbtn">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <table id="example2" class="table">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
                                                        <input type="checkbox" id="select_all" name="select_all">
                                                        <span></span> All
                                                    </label>
                                                </th>

                                                <th>Outcode</th>
                                                <th width="20%">Address</th>   
                                                <th>Name</th>
                                                <th>Executor</th>
                                                <th width="20%">Publication Date</th>
                                                <th>Status</th>                              
                                            </tr>
                                        </thead>                        
                                        <tbody>
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</div>
</div>
<div class="modal fade filter-modal" 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 modal-box-content">
            <div class="modal-header filter-modal-head">    
                <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>Status:</label>
                                <select name="flag" id="filter_flag" class="form-control" >
                                    <option value="0">Select Status</option>
                                    <option value="1" {{ (@$search_data->flag) == 1 ?'selected':'' }} >Contacted</option>
                                    <option value="2" {{ (@$search_data->flag) == 2 ?'selected':'' }}>Do Not Contact</option>
                                    <option value="3" {{ (@$search_data->flag) == 3 ?'selected':'' }}>Letter Sent</option>
                                </select>
                            </div>                             
                        </div>
                        <div class="form-group row">                       
                        </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-primary font-weight-bold clear-btn" id="clear_filter">Clear</button>
                <button type="button" class="btn btn-primary font-weight-bold filterProperty">Apply Filter</button>                   
            </div>
        </div>
    </div>
</div>    
@endsection
@section('scripts')
<script type="text/javascript">
    function btnReverse(ele) {
        var btn_txt = $(ele).attr("data-btn");
        $(ele).html(btn_txt);
        $(ele).removeAttr("disabled");
    }

    function btnInverse(ele) {
        $(ele).html("Posting...");
        $(ele).prop("disabled", true);
    }
</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 src="{{ asset('admin/js/bootstrap-switch.min.js')}}"></script> 
<script src="{{ asset('admin/js/dataTables.buttons.min.js')}}"></script> 
<script src="{{ asset('admin/js/jszip.min.js')}}"></script>
<script src="{{ asset('admin/js/buttons.html5.min.js')}}"></script>
<script src="{{ asset('admin/js/buttons.print.min.js')}}"></script> 
<script src="{{ asset('js/pages/crud/forms/widgets/bootstrap-datepicker.js')}}"></script>
<script type="text/javascript">
     $( document ).ready(function() {        

       $('.date_from').datepicker({     
     'todayHighlight': true,
     endDate: new Date(),
     clearBtn: true,

  // options here
}).on('changeDate', function () {
  $('.date_to').datepicker(
    'setStartDate', new Date($(this).val())
    );
});

  $('.date_to').datepicker({
   'todayHighlight': true,
   clearBtn: true,

  // options here
}).on('changeDate', function () {
  $('.date_from').datepicker(
    'setEndDate', new Date($(this).val())
    );
});

     });
    var table = "";
    var url = '{!! URL::to("/get-probate-property-data") !!}';        
    var token = '{!! csrf_token()  !!}';
    var postcode = 0;
    var property_type = 0;
    var flag =  $('#filter_flag').val();
    var date_from = '';
    var date_to = '';
    var outcode = $("#outcodeFil").val();
    var weeks = $('#weeks').val();
    var search_value = '{{ @$search_data->search?:'' }}';
    jQuery(document).ready((function () {
        propertyTable(url, token, 'AllProbateProperties',postcode,date_from,date_to,outcode,search_value,flag);

        var active = '{!! $active !!}';
        if(active == 2){
            $('.p2').addClass('active');
        }
        if(active == 3){
            $('.p3').addClass('active');
        }
    }))

    function propertyTable(data_url,token,filename,postcode,date_from,date_to,outcode,search_value,flag)
    {
        var table = $('#example2').DataTable({
            "aaSorting": [],
            "pageLength": 25,
            "processing": true,
            "serverSide": true,
            "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_" },
                search: {
                    search: search_value
                },     

                columnDefs: [
                {
                    targets: 0,
                    searchable: false,
                    orderable: false,             

                },
                {
                    width: "150px",
                    targets: 6,
                    orderable: false,
                }            
                ],                

                mark: true,
                ajax: {
                    url: '{!! URL::to("/get-probate-property-data") !!}',
                    data:  {
                     post_code: postcode,
                     flag: flag,
                     date_from: date_from,
                     date_to: date_to,
                     outcode: outcode,
                     _token: token
                 }
             },

             columns: [
             {data: 'id', name: 'id'},
             {data: 'outcode', name: 'outcode'},
             {data: 'address', name: 'address'},
             {data: 'name', name: 'name'},                  
             {data: 'executer', name: 'executer'},
             {data: 'publication_date', name: 'publication_date'},
             {data: 'status', name: 'status'},  
             ]});


        $("#select_all").on("click", function() {   
            var rows = table.rows({ search: "applied" }).nodes();
            $('input[type="checkbox"]', rows).prop("checked", this.checked);
            selectAllAlert($(this));

        });
        var buttons = new $.fn.dataTable.Buttons(table, {
           buttons: [
           { extend: 'csv', text: '<span class="ex-txt"> &nbsp;Export as CSV</span>' ,    init: function( api, node, config) {
             $(node).removeClass('dt-button')
         },className: "btn",titleAttr: 'Export as CSV',exportOptions: {
            columns: [1,2,3,4,5,6]
        }},        
        ]
    }).container().appendTo($('#newbtn'));
    }

    $(document).on("click", ".propertyCheck", function(e) {   
        var checkbox_length = $(".propertyCheck").length;
        if ($('input[name="property[]"]:checked').length == checkbox_length) {
            $("#select_all").prop("checked", true);
        } else {
            $("#select_all").prop("checked", false);
        }
    });

    $(document).on('change','#status',function(){
        $('#filter_flag').val($(this).val());
        var post_code = $('#filter_postcode_property').val();
        var type = $('#filter_property_type_property').val();
        var flag = $('#filter_flag').val();
        var agency = $('#filter_agent').val();
        var platform = $('#filter_platform').val();
        var date_from = $('.date_from').val();
        var date_to = $('.date_to').val();
        var outcode = $("#outcodeFil").val();
        var weeks = $('#weeks').val();
        $('#example2').DataTable().clear();
        $('#example2').DataTable().destroy();

        propertyTable(url, token, 'AllProbateProperties',postcode,date_from,date_to,outcode,search_value,flag);

    });
    $(document).on('change','#outcodeFil',function(){
        var post_code = $('#filter_postcode_property').val();
        var type = $('#filter_property_type_property').val();
        var flag = $('#filter_flag').val();
        var agency = $('#filter_agent').val();
        var platform = $('#filter_platform').val();
        var date_from = $('.date_from').val();
        var date_to = $('.date_to').val();
        var outcode = $(this).val();
        var weeks = $('#weeks').val();
        if($('#status').val() != '0')
        {
            flag = $('#status').val();
        }
        $('#example2').DataTable().clear();
        $('#example2').DataTable().destroy();
        propertyTable(url, token, 'AllProbateProperties',postcode,date_from,date_to,outcode,weeks,flag);
    });


    $(".filterProperty").on("click", function(e) {
        var post_code = $('#filter_postcode_property').val();
        var type = $('#filter_property_type_property').val();
        var flag = $('#filter_flag').val();
        var agency = $('#filter_agent').val();
        var platform = $('#filter_platform').val();
        var date_from = $('.date_from').val();
        var date_to = $('.date_to').val();
        var outcode = $("#outcodeFil").val();
        var weeks = $('#weeks').val();
        $('#example2').DataTable().clear();
        $('#example2').DataTable().destroy();
           propertyTable(url, token, 'AllProbateProperties',postcode,date_from,date_to,outcode,search_value,flag);           
        $('#propertyFilterModal').modal('hide');       
    });

    $(document).on("change", "#updateFlag", function(e) {
        var flag = $(this).val();
        e.preventDefault();
        if ($('input[name="property[]"]:checked').length > 0) {
            if ($(this).val() > 0) {
                Swal.fire({
                    title: "Are you sure?",
                    text: "Change the status",
                    icon: "warning",
                    buttonsStyling: !1,
                    confirmButtonText: "Update",
                    showCancelButton: true,
                    customClass: {
                        confirmButton: "btn font-weight-bold btn-light-primary",
                        cancelButton: "btn font-weight-bold btn-light-danger"
                    }
                }).then(function(result) {
                    if (result.value) {
                        var property = $('input[name="property[]"]:checked')
                        .map(function() {
                            return $(this).val();
                        })
                        .get(property);

                        var token = $('meta[name="csrf-token"]').attr("content");
                        $.ajax({
                            type: "POST",
                            url: host_url + "/probate-status-change",
                            data: {
                                property: property,
                                flag: flag,
                                _token: token
                            },
                            success: function(result) {
                                console.log(result);
                                if (result.status == "success") {
                                    $("#updateFlag").val("").selectpicker("refresh");
                                    if (table) {
                                        table.clear();
                                        table.ajax.reload();                                    
                                        showMessage(
                                            "Status Updated Successfully",
                                            "success"
                                            );
                                    } else {
                                        showMessage(result.data, result.status);
                                    }
                                } else {
                                    $("#updateFlag")
                                    .val("")
                                    .selectpicker("refresh");
                                    showMessage(
                                        "Something went wrong...!",
                                        "error"
                                        );
                                }
                            },
                            error: function(xhr, status, error, result) {
                                console.log(xhr);
                                showMessage("Something went wrong...!", "error");
                                $("#updateFlag")
                                .val("")
                                .selectpicker("refresh");
                            }
                        });
                    } else if (result.dismiss === "cancel") {
                        $("#updateFlag")
                        .val("")
                        .selectpicker("refresh");
                    }
                });
            }
        } else {
            showMessage("Select any property!", "warning");
            $("#updateFlag")
            .val("")
            .selectpicker("refresh");
        }
    });


    $(document).on("click", "#addCampaign", function(e) {
    // alert('c');
    var ele = $(this);
    e.preventDefault();
    if ($('input[name="property[]"]:checked').length <= 0) {
        showMessage("Select any property!", "warning");
    } else {
        var property = $('input[name="property[]"]:checked')
        .map(function() {
            return $(this).val();
        })
        .get();

        var token = $('meta[name="csrf-token"]').attr("content");
        //btnInverse(ele);
        console.log("ssss");
        $.ajax({
            type: "POST",
            url: '{!! URL::to("/add-probate-campaign") !!}',
            data: {
                property: property,
                _token: token
            },
            success: function(result) {
                //btnReverse(ele);
                console.log(result);
                if (result.status == "error") {
                    alert("error");
                    //showMessage("Something went wrong...!", "error");
                } else {
                    //alert("success");
                    showMessage(result.data, result.status);
                }
            },
            error: function(xhr, status, error, result) {
                //btnReverse(ele);
                console.log(xhr);
                //showMessage("Something went wrong...!", "error");
            }
        });
    }
});



    function selectAllAlert(ele){
        if(ele.prop("checked") == true){
            swal.fire({
                title: "INFO",
                text: "This only selects the current page, scroll to the next page for adding them seperately!",
                buttonsStyling: !1,
                confirmButtonText: "OK",
                showCancelButton: false,
                customClass: {
                    confirmButton: "btn font-weight-bold btn-light-primary",
                    cancelButton: "btn font-weight-bold btn-light-danger",
                }
            });
        }
    }

    $('#clear_filter').on('click', function(e) {
        localStorage.clear();
        $('#example2').DataTable().destroy();
        $('#filter_postcode_property').val(0);
        $('#filter_property_type_property').val(0);
        $('#filter_flag').val(0);
        $('#filter_agent').val(0);
        $('#filter_platform').val('-1');
        $('.date_from').val('');
        $('.date_to').val('');
        $('#weeks').val("");
        var outcode = $("#outcodeFil").val();
        propertyTable(url, token, 'AllProbateProperties',0,0,-1,outcode, '');
        $("#propertyFilterModal").modal('hide');
    });

</script>
@endsection