{% extends "header.html.twig" %}

{% block body_content %}
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Service</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <div class="table-responsive">
                <table id="datatable" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <td></td>
                        <td>
                            <select id="service_type" class="form-control select-search">
                                <option value="">All</option>
                                <option value="1">Boarding</option>
                                <option value="2">Sitting</option>
                                <option value="4">Walking</option>
                                <option value="3">Day Care</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" class="datepicker form-control form-control-sm select-search"
                                   placeholder="Date"
                                   id="start_date"/>
                        </td>
                        <td>
                            <input type="text" class="datepicker form-control form-control-sm  select-search"
                                   placeholder="Date"
                                   id="end_date"/>
                        </td>
                        <td>
                            <input type="text" class="datepicker form-control form-control-sm  select-search"
                                   placeholder="Date"
                                   id="created_at"/>
                        </td>
                    </tr>
                    <tr>
                        <th>User Name</th>
                        <th>Service Type</th>
                        <th>Start Date_ Time</th>
                        <th>End Date_ Time</th>
                        <th>Requested Date</th>
                        <th>Action</th>
                    </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="sitterAssignModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="sitter_assign_form" method="post">
                    <input type="hidden" name="longitude" id="longitude" value=""/>
                    <input type="hidden" name="latitude" id="latitude" value=""/>
                    <input type="hidden" name="service_id" id="service_id" value=""/>
                    <input type="hidden" name="service_type" id="service_type" value=""/>
                    <input type="hidden" name="pet_type" id="pet_type" value=""/>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Assign Sitter</h4>
                    </div>
                    <div class="modal-body" id="sitterAssignModalBody">
                        <div class="row mb-2">
                            <div class="col-lg-4">
                                <input type="text" class="form-control float" placeholder="Distance Search"
                                       id="distance_search"/>
                            </div>
                            <div class="col-lg-4">
                                <button type="button" class="btn btn-success" id="filter_distance">Filter</button>
                                <button type="button" class="btn btn-danger" id="clear_distance">Clear</button>
                            </div>
                        </div>
                        <div class="row" style="margin-left:5px;margin-right:5px;margin-top:10px">
                            <div class="col-12">
                                <table id="assignSitterDataTable" class="table table-bordered table-striped"
                                       style="width: 100%;">
                                    <thead>
                                    <tr>
                                        <th>Sitter Name</th>
                                        <th>Distance</th>
                                        <th>Zipcode</th>
                                        <th>City</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default close-button1" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock body_content %}
{% block script_content %}
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
    <script>
        $(document).ready(function () {
            $('.float').keypress(function (event) {
                if (( event.which !== 46 || $(this).val().indexOf('.') !== -1 ) && ( event.which < 48 || event.which > 57 )) {
                    event.preventDefault()
                }
            })
            let service_table = $('#datatable').DataTable({
                dom: 'Blfrtip',
                processing: true,
                serverSide: true,
                buttons: [
                    {
                        extend: 'excel',
                        text: '<button class="btn btn-primary" style="margin-bottom:10px">Excel</button>',
                        titleAttr: 'Excel',
                        action: newExportAction,
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                        },
                    },
                ],
                ajax: {
                    url: '/all/service/ajax/data',
                    type: 'POST',
                    data: function (d) {
                        d.service_type = $('#service_type').val()
                        d.start_date = $('#start_date').val()
                        d.end_date = $('#end_date').val()
                        d.created_at = $('#created_at').val()
                    }
                },
                columns: [
                    { data: 'name', name: 'name', orderable: false },
                    { data: 'service_type', name: 'service_type', orderable: false },
                    { data: 'from_date', name: 'from_date' },
                    { data: 'to_date', name: 'to_date' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'action', name: 'action', orderable: false,width:'15%' },
                ],
                order: [],
                lengthMenu: [[10, 25, 50], [10, 25, 50]]
            })

            function newExportAction (e, dt, button, config) {
                var self = this
                var oldStart = dt.settings()[ 0 ]._iDisplayStart
                dt.one('preXhr', function (e, s, data) {
                    data.start = 0
                    data.length = 2147483647
                    dt.one('preDraw', function (e, settings) {
                        if (button[ 0 ].className.indexOf('buttons-excel') >= 0) {
                            $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
                                $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
                                $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config)
                        }
                        dt.one('preXhr', function (e, s, data) {
                            settings._iDisplayStart = oldStart
                            data.start = oldStart
                        })
                        setTimeout(dt.ajax.reload, 0)
                        return false
                    })
                })
                dt.ajax.reload()
            }

            let assign_sitter_table = $('#assignSitterDataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/service/ajax/assign_sitter_list',
                    type: 'POST',
                    data: function (d) {
                        d.service_id = $('#service_id').val()
                        d.service_type = $('#service_type').val()
                        d.pet_type = $('#pet_type').val()
                        d.longitude = $('#longitude').val()
                        d.distance_search = $('#distance_search').val()
                        d.latitude = $('#latitude').val()
                    }
                },
                columns: [
                    { data: 'name', name: 'name', orderable: false },
                    { data: 'distance', name: 'distance', orderable: false },
                    { data: 'zipcode', name: 'zipcode', orderable: false },
                    { data: 'city', name: 'city', orderable: false },
                    { data: 'action', name: 'action', orderable: false },
                ],
                order: [],
                lengthMenu: [[10, 25, 50], [10, 25, 50]]
            })

            $(document).on('click', '.assign-sitter', function () {
                const service_id = $(this).data('id')
                const longitude = $(this).data('longitude')
                const latitude = $(this).data('latitude')
                const service_type = $(this).data('service_type')
                const pet_type = $(this).data('pet_type')
                $('#service_id').val(service_id)
                $('#longitude').val(longitude)
                $('#latitude').val(latitude)
                $('#service_type').val(service_type)
                $('#pet_type').val(pet_type)
                assign_sitter_table.ajax.reload(null, false)
                $('#sitterAssignModal').modal('show')
            })

            $(document).on('click', '.assign_sitter_btn', function () {
                const sitter_id = $(this).data('id')
                const service_id = $('#service_id').val()
                $.ajax({
                    url: '/assign/sitter/submit',
                    type: 'POST',
                    data: {
                        service_id: service_id,
                        sitter_id: sitter_id
                    },
                    dataType: 'json',
                    success: function (data) {
                        service_table.ajax.reload(null, false)
                        assign_sitter_table.ajax.reload(null, false)
                        // setTimeout(function () {
                        //   $('#sitterAssignModal').modal('hide')
                        // }, 100)
                        alert(data.message)
                    },
                    error: function (e) {
                        console.log(e)
                    }
                })
            })
            $('.datepicker').datepicker({
                format: 'mm-dd-yyyy',
                autoclose: true
            })
            $('#filter_distance').on('click', function () {
                assign_sitter_table.ajax.reload(null, false)
            })
            $('#clear_distance').on('click', function () {
                $('#distance_search').val('')
                assign_sitter_table.ajax.reload(null, false)
            })
            $('.select-search').on('change', function () {
                service_table.ajax.reload(null, false)
            })

            $(document).on('click', '.service-delete', function () {
                const service_id = $(this).data('id')
                var t = confirm('Are you sure you want to delete thi service?')
                if (t) {
                    $.ajax({
                        url: '/service_delete?service_id=' + service_id,
                        type: 'GET',
                        dataType: 'json',
                        success: function (data) {
                            console.log(data)
                            if (data.success == true) {
                                setTimeout(function () {
                                    service_table.ajax.reload(null, false)
                                }, 100)
                            }
                            alert(data.message)
                        },
                        error: function (e) {
                            console.log(e)
                        }
                    })
                }

            })
        })
    </script>
{% endblock script_content %}