@extends ('back_office.layouts.app')
@section('content')

<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="form-group col-4">
                        <label for="status">Service Type</label>
                        <select class="form-control" name="service_type" id="service_type">
                            @if(!empty($services) && count($services)>0)
                                <option value="all">All</option>
                                @foreach ($services as $service)
                                    <option value="{{ $service->id }}">{{ $service->name }}</option>
                                @endforeach
                            @else
                                <option value=>No Service Found</option>
                            @endif
                        </select>
                    </div>
                    <div class="form-group col-2" style="margin-top: 25px">
                        <button type="button" class="btn bg-gradient-info" id="reload"
                            style="width: 100%;">Search</button>
                    </div>
                </div>
            </div>
        </div><br>
        <div class="card">
            <div class="card-body" id="services">
                {!! $dataTable->table() !!}
            </div>
        </div>
    </div>
</section>

@push('scripts')
<link rel="stylesheet" href="{{asset('css/tables.css')}}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
<script src="{{env('APP_URL')}}/vendor/datatables/buttons.server-side.js"></script>
{!! $dataTable->scripts() !!}
<script src="{{ $cdn ?? asset('vendor/sweetalert/sweetalert.all.js')  }}"></script>
<script>
    $(document).ready(function() {
        $('#reload').on('click', function() {
            var service_type = $("#service_type").val();

            // Construct URL with parameters
            var newUrl = "{{ route('slot.list') }}?service_type=" + service_type
            $("#slot-id").DataTable().ajax.url(newUrl).load();
        });
    });
</script>
@endpush


<script type="text/javascript">
    function deleteSlot(id) {

        Swal.fire({
            title: "Are you sure?",
            text: "You will not be able to recover this type!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: '#36c6d3',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel'
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    url: "/admin/slot/delete",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        id: id
                    },
                    success: function(response) {
                        $("#slot-id").DataTable().draw();

                        Swal.fire({
                            title: "Slot",
                            text: "Slot has been successfully deleted",
                            icon: "success"
                        });
                    },
                    error: function(response) {
                        location.reload();
                    },
                    // error: function(error) {
                    //     message('error');
                    // }
                });

            } else if (result.dismiss == 'cancel') {
                // console.log('cancel')
            }

        });
    }
</script>

@endsection