@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="inputEmail4">Start Date</label>
                            <input type="date" class="form-control" id="start">
                        </div>
                        <div class="form-group col-4">
                            <label for="inputPassword4">End Date</label>
                            <input type="date" class="form-control" id="end">
                        </div>
                        <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">
                    <button type="button" class="btn btn-info" style="float: right" name="delete_wash_day"
                        id="delete_wash_day" data-toggle="modal" data-target="#assignTeamModal" disabled>Delete Wash
                        Day</button>
                    {!! $dataTable->table() !!}
                </div>
            </div>
        </div>
    </section>
    @push('styles')
        <style>
            table{
                width: 100%!important;
            }
        </style>
    @endpush
    @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 start = $("#start").val();
                    var end = $("#end").val();
                    var service_type = $("#service_type").val();

                    // Construct URL with parameters
                    var newUrl = "{{ route('wash-days.list') }}?startdate=" + start + "&end=" + end + "&service_type=" + service_type
                    $("#wash-days").DataTable().ajax.url(newUrl).load();
                });

                $('#select-all').on('click', function() {
                    var rows = $('#wash-days').DataTable().rows({
                        'search': 'applied'
                    }).nodes();
                    $('input[type="checkbox"]', rows).prop('checked', this.checked);
                    toggleAssignButton();
                });

                $('#delete_wash_day').on('click', function(e) {
                    e.preventDefault();

                    // Collect selected checkbox values
                    var selectedValues = $('input[name="wash_days[]"]:checked').map(function() {
                        return this.value;
                    }).get();


                    Swal.fire({
                        title: "Are you sure?",
                        text: "You will not be able to recover this Wash Days!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#36c6d3',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Confirm',
                        cancelButtonText: 'Cancel'
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: '{{ route("wash-days.delete") }}',
                                type: 'POST',
                                data: {
                                    ids: selectedValues,
                                },
                                success: function(response) {
                                    $("#wash-days").DataTable().draw();
                                    Swal.fire({
                                        title: "Wash Days",
                                        text: response.message,
                                        icon: "success"
                                    });
                                },
                                error: function(error) {
                                    message('error');
                                    location.reload();
                                }
                            });

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

                    });
                });

                $(document).on('change', '.delete-washdays', function() {
                    toggleAssignButton();
                });
            });

            function toggleAssignButton() {
                // Check if any checkbox is checked
                var anyChecked = $('.delete-washdays:checked').length > 0;

                // Enable or disable the Assign Team button
                $('#delete_wash_day').prop('disabled', !anyChecked);
            }
        </script>
    @endpush


    <script type="text/javascript">
        function deleteService(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/services/delete/" + id,
                        type: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                        },
                        error: function(response) {
                            location.reload();
                        },
                        // error: function(error) {
                        //     message('error');
                        // }
                    });

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

            });
        }
    </script>
@endsection