@extends('layouts.admin')

@section('content')
<style>
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 50% 50% no-repeat rgb(249, 249, 249);
    }

    .content {
        overflow: hidden;
    }

    .tableParent {
        /* min-width: 820px; */
        width: 96%;
        width: 100%;
        overflow-x: auto;
        padding: 20px;
    }

    @media screen and (max-width: 900px) {
        .tableParent {
            width: 96%;
        }
    }

    table tr td:nth-child(11) {

        position: relative !important;
    }

    .scrollable-container {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        padding: 10px;
    }

    .scrollable-container .col-md-2 {
        flex: 0 0 auto;
        margin-right: -15px;
    }

    .scrollable-container .col-md-2:last-child {
        padding-right: 0;

    }
</style>

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Bookings List</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    {{-- <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Bookings</li> --}}
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                @if (Session::has('success'))
                <div class="alert alert-success alert-dismissible">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>Success!</strong> {{ Session::get('success') }}
                </div>
                @endif
                @if (Session::has('error'))
                <div class="alert alert-danger alert-dismissible">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <strong>Success!</strong> {{ Session::get('error') }}
                </div>
                @endif
                <div class="card">
                    @can('booking-create')
                    <div class="card-header">
                        <a href="{{ route('admin.booking.create') }}" class="btn btn-success float-right my-1"><i
                                class="fas fa-plus me-1"></i> Add Booking</a>
                    </div>
                    @endcan
                    <!-- /.card-header -->
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label><strong>Search By:</strong></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <select name="search_by" id="search_by" class="custom-select"
                                            style="border-radius: 0px 0px 0px 0px;">
                                            <option value="first_name">Name</option>
                                            <option value="id">Booking ID</option>
                                            <option value="email">Email</option>
                                            <option value="phone">Phone</option>
                                        </select>
                                    </div>

                                    <input type="text" name="search_text" id="search_text" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label><strong>Booking Status:</strong></label>
                                    <select id='booking_status' name="booking_status"
                                        class="form-control custom-select">
                                        <option value="">All</option>
                                        @forelse (getBookingStatus() as $key => $value)
                                        <option value="{{ $value->id }}">{{ $value->name }}</option>

                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label><strong>Vehicle Type:</strong></label>
                                    <select id='vehicle_id' name="vehicle_id" class="form-control custom-select">
                                        <option value="">All</option>
                                        @forelse (getVehicles() as $key => $value)
                                        <option value="{{ $value->id }}">{{ $value->name }}</option>

                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label><strong>Service Type:</strong></label>
                                    <select id='service_type_id' name="service_type_id"
                                        class="form-control custom-select">
                                        <option value="">All</option>
                                        <option value="1">Distance</option>
                                        <option value="2">Hourly</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label><strong>Payment Status:</strong></label>
                                    <select id='payment_status' name="payment_status"
                                        class="form-control custom-select">
                                        <option value="">All</option>
                                        <option value="0">Pending</option>
                                        <option value="1">Paid</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-5 form-group">
                                <label><strong>Date:</strong></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <select name="search_date_type" id="search_date_type" class="custom-select"
                                            style="border-radius: 0px 0px 0px 0px;">
                                            <option value="pickup_date">Pickup Date</option>
                                            <option value="created_at">Created Date</option>
                                        </select>
                                    </div>
                                    <div class="input-group-prepend">
                                        <select name="search_date_key" id="search_date_key" class="custom-select"
                                            style="border-radius: 0px 0px 0px 0px;">
                                            <option value="">All</option>
                                            <hr>
                                            <option value="today">Today</option>
                                            <option value="tomorrow">Tommorow</option>
                                            <option value="next_3days">Next 3 Days</option>
                                            <option value="next_7days">Next 7 Days</option>
                                            <option value="this_month">This Month</option>
                                            <option value="next_month">Next Month</option>
                                            <hr>
                                            <option value="yesterday">Yesterday</option>
                                            <option value="last_week">Last Week</option>
                                            <option value="last_month">Last Month</option>
                                            <option value="last_year">Last Year</option>
                                            <option value="this_year">This Year</option>
                                            <hr>
                                            <option value="date_range">Date Range</option>
                                        </select>
                                    </div>

                                    @php
                                    $month_start = \Carbon\Carbon::now()->startOfMonth()->toDateString();
                                    $month_end = \Carbon\Carbon::now()->endOfMonth()->toDateString();
                                    @endphp

                                    <input type="date" name="search_date_value_1" id="search_date_value_1"
                                        class="form-control" value="{{ $month_start }}">
                                    <input type="date" name="search_date_value_2" id="search_date_value_2"
                                        class="form-control" value="{{ $month_end }}">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group" style="margin-top: 2rem;">
                                    <button id="searchBtn" class="btn btn-success">Search</button>
                                    <button id="resetBtn" class="btn btn-danger">Reset</button>
                                </div>
                            </div>

                        </div>

                        <div class="table-responsive">
                            <table id="booking_list" class="table" style="min-width:800px;min-height: 20vh;">
                                <thead>
                                    <th>Sr.</th>
                                    <th>Booking ID</th>
                                    <th>Name</th>
                                    <th>Vehicle</th>
                                    <th>Pickup</th>
                                    <th>Drop-off</th>
                                    <th>Pick-up Date</th>
                                    <th>Status</th>
                                    {{-- <th>Created At</th> --}}
                                    <th>Grand Total</th>
                                    <th style="width:150px">Action</th>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- delete booking model --}}
    <div class="modal fade" id="delete_booking_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="delete_booking_modal">Delete Booking</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </div>
                <div class="modal-body">
                    Are you sure? The record will be permanently deleted and cannot be recovered.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <a href="#" id="confirmDelete" class="btn btn-danger">Delete</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('scripts')
<script>
    function SubmitAssignDriver(booking_id) {
            var bookingId = $("#assign_booking_id" + booking_id).val();
            var driverId = $("#assign_driver_id" + booking_id).val();
            var price = $("#price" + booking_id).val();

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.assign') }}",
                data: {
                    booking_id: bookingId,
                    driver_id: driverId,
                    price: price,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {

                    if (data.status == 1) {

                        $("#assign_driver").css('display', 'block');
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else if (data.status == 400) {
                        alert(data.msg);
                    } else {

                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    }
                }
            });
        }

        function SubmitEmail(tmpID) {

            var template_id = $("#template_id" + tmpID).val();
            var email = $("#customer_email" + tmpID).val();
            var booking_id = $("#booking_id_email" + tmpID).val();

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.booking.sendmail') }}",
                data: {
                    template: template_id,
                    email: email,
                    booking_id: booking_id,
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {

                    if (data.status == 200) {
                        $("#mailsuccess" + tmpID).show();
                        $("#mailsuccess" + tmpID).text(data.msg);
                        setTimeout(function() {
                            window.location.reload();

                        }, 2000);
                    } else {
                        $("#mailsuccess" + tmpID).hide();
                        $("#mailerror" + tmpID).show();
                        $("#mailerror" + tmpID).text(data.msg);

                    }
                }
            });
        }
</script>

<script>
    function toggleBtn(divId) {
            var div = document.getElementById(divId);
            if (div.style.display === "none") {
                let toggleDivDropdown = document.querySelectorAll('.toggleDivDropdown');
                Array.from(toggleDivDropdown).forEach((v) => {
                    v.style.display = "none";
                });
                div.style.display = "block";
                div.style.zIndex = "10";
            } else {
                div.style.display = "none";
                div.style.zIndex = "9";
            }
        }
</script>

<script>
    $(document).ready(function() {

            function getStatusFromUrl() {
                let pathArray = window.location.pathname.split('/');
                let statusIndex = pathArray.indexOf('bookings_by_status');
                if (statusIndex !== -1 && pathArray.length > statusIndex + 1) {
                    return pathArray[statusIndex + 1];
                }
                return null;
            }

            var table;
            table = $('#booking_list').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.bookings') }}",
                    data: function(d) {
                        let status = getStatusFromUrl();
                        if (status) {
                            d.status = status;
                        }
                        d.search = $('input[type="search"]').val();
                        d.search_by = $('#search_by').val();
                        d.search_text = $('#search_text').val();
                        d.booking_status = $('#booking_status').val();
                        d.vehicle_id = $('#vehicle_id').val();
                        d.service_type_id = $('#service_type_id').val();
                        d.payment_status = $('#payment_status').val();

                        d.search_date_type = $('#search_date_type').val();
                        d.search_date_key = $('#search_date_key').val();
                        d.search_date_value_1 = $('#search_date_value_1').val();
                        d.search_date_value_2 = $('#search_date_value_2').val();
                    }
                },
                order: [
                    [0, "desc"]
                ],
                columns: [
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'first_name',
                        name: 'first_name',
                        render: function(data, type, row) {
                            return (row.first_name ? row.first_name : '') + (row.last_name ? ' ' +
                                row.last_name : '');
                        }
                    },
                    {
                        data: 'vehicle.name',
                        name: 'vehicle.name',
                        defaultContent: ''
                    },
                    {
                        data: 'pickup_location',
                        name: 'pickup_location',
                        defaultContent: ''
                    },
                    {
                        data: 'drop_location',
                        name: 'drop_location'
                    },
                    {
                        data: 'date',
                        name: 'date',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false,
                        defaultContent: ''
                    },
                    // {
                    //     data: 'created_at',
                    //     name: 'created_at',
                    //     render: function(data, type, row) {
                    //         return moment(data).format('DD-MM-YYYY hh:mm A');
                    //     },
                    //     orderable: false,
                    //     searchable: false,
                    //     defaultContent: ''
                    // },
                    {
                        data: 'grand_total',
                        name: 'grand_total',
                        orderable: false,
                        searchable: false,
                        defaultContent: ''
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },

                ],
                drawCallback: function(response) {
                    /*$('#countTotal').empty();
                    $('#countTotal').append(response['json'].recordsTotal);*/
                }
            });
            // Search button functionality
            $('#searchBtn').click(function() {
                table.draw(); // Apply search and reload the table with filters
            });
            $('#resetBtn').click(function() {
                // Reset all filters
                $('#search_by').val('first_name');
                $('#search_text').val('');
                $('#booking_status').val('');
                $('#vehicle_id').val('');
                $('#service_type_id').val('');
                $('#payment_status').val('');
                $('#search_display').addClass('d-none');
                
                $('#search_date_key').val('');
                $('#search_date_value_1, #search_date_value_2').prop('disabled', true);

                table.draw(); // Reload table without any filters
            });
            // $('input[type="search"],#search_text,#booking_status,#vehicle_id,#service_type_id,#payment_status')
            //     .change(function() {
            //         table.draw();
            //     });
        });
</script>

<script>
    $(document).ready(function() {
            $('#delete_booking_modal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var bookingId = button.data('id'); // Extract info from data-* attributes
                var modal = $(this);
                var deleteUrl = '{{ route('admin.booking.delete', ':id') }}';
                deleteUrl = deleteUrl.replace(':id', bookingId);

                modal.find('#confirmDelete').attr('href', deleteUrl);
            });
        });
</script>

<script>
    $(document).ready(function() {
            $('#search_by').change(function() {
                if ($(this).val()) {
                    $('#search_display').removeClass('d-none');
                } else {
                    $('#search_display').addClass('d-none');
                }
            });
        });
</script>

<script>
    $(document).ready(function() {
        if ($("#search_date_key").val() != 'date_range') {
            $('#search_date_value_1, #search_date_value_2').prop('disabled', true);
        }

        $('#search_date_key').on('change', function() {
            if ($(this).val() === 'date_range') {
                $('#search_date_value_1, #search_date_value_2').prop('disabled', false);
            } else {
                $('#search_date_value_1, #search_date_value_2').prop('disabled', true);
            }
        });
    });
</script>

@endsection