@extends('backend.app')
@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/datatable/css/datatables.min.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    <style>
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px 12px 0 0;
            padding: 2rem;
            color: white;
        }
        .data-table-card {
            border-radius: 0 0 12px 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .table thead th {
            background: #f8f9fa;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #dee2e6;
        }
        .table tbody tr:hover {
            background-color: #f8f9fa;
            transition: all 0.2s;
        }
        .badge-status {
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-weight: 500;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .user-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            object-fit: cover;
        }
        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .booking-id {
            font-family: 'Courier New', monospace;
            font-weight: 600;
            color: #667eea;
        }
        .amount-display {
            font-weight: 700;
            color: #28a745;
            font-family: 'Courier New', monospace;
        }
        .filter-section {
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
        }
    </style>
@endpush
@section('title', 'All Bookings')
@section('content')
    <div class="app-content content">
        <!-- Page Header -->
        <div class="page-header mb-0">
            <div class="row align-items-center">
                <div class="col">
                    <h3 class="mb-1"><i class="fa-solid fa-calendar-check me-2"></i>All Bookings</h3>
                    <p class="mb-0 opacity-75">Manage and monitor all platform bookings</p>
                </div>
                <div class="col-auto">
                    <div class="d-flex gap-2">
                        <button type='button' class='btn btn-light bulk-actions-btn d-none'
                            onclick='bulkCancel()'>
                            <i class="fa-solid fa-ban text-danger"></i> Bulk Cancel
                        </button>
                        <a href="{{ route('admin.bookings.dashboard') }}" class="btn btn-light">
                            <i class="fa-solid fa-chart-line text-primary"></i> Statistics
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Table Card -->
        <div class="card data-table-card">
            <div class="card-body">
                <!-- Quick Filters -->
                <div class="filter-section d-none" id="quickFilters">
                    <h6 class="mb-3"><i class="fa-solid fa-filter me-2"></i>Quick Filters</h6>
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label text-muted small">Status</label>
                            <select class="form-select" id="filterStatus">
                                <option value="">All Status</option>
                                <option value="pending">Pending</option>
                                <option value="confirmed">Confirmed</option>
                                <option value="completed">Completed</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label text-muted small">Date Range</label>
                            <input type="date" class="form-control" id="filterDateFrom" placeholder="From">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label text-muted small">To Date</label>
                            <input type="date" class="form-control" id="filterDateTo" placeholder="To">
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button class="btn btn-primary w-100" onclick="applyFilters()">
                                <i class="fa-solid fa-search me-1"></i> Apply Filters
                            </button>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover" id="data-table">
                        <thead>
                            <tr>
                                <th width="50">
                                    <div class="form-checkbox">
                                        <input type="checkbox" class="form-check-input" id="select_all"
                                            onclick="select_all()">
                                        <label class="form-check-label" for="select_all"></label>
                                    </div>
                                </th>
                                <th>Booking ID</th>
                                <th>User</th>
                                <th>Company</th>
                                <th>Professional</th>
                                <th>Date & Time</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Flagged</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Flag Booking Modal -->
    <div class="modal fade" id="flagModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="flagForm">
                    <div class="modal-header bg-warning text-white">
                        <h5 class="modal-title">
                            <i class="fa-solid fa-flag me-2"></i>Flag Booking
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="booking_id" id="flag_booking_id">
                        <div class="mb-3">
                            <label class="form-label">Reason for Flagging <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="flag_reason" name="flag_reason"
                                rows="4" required placeholder="Please explain why this booking needs attention..."></textarea>
                        </div>
                        <div class="alert alert-info small">
                            <i class="fa-solid fa-info-circle me-2"></i>
                            Flagged bookings will be reviewed by administrators.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-warning">
                            <i class="fa-solid fa-flag me-1"></i> Flag Booking
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('script')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="{{ asset('backend/assets/datatable/js/datatables.min.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            $(document).ready(function () {
                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    }
                });

                let dTable = $('#data-table').DataTable({
                    order: [[0, 'desc']],
                    lengthMenu: [
                        [10, 25, 50, 100, 200],
                        [10, 25, 50, 100, 200]
                    ],
                    pageLength: 25,
                    processing: true,
                    responsive: true,
                    serverSide: true,
                    language: {
                        processing: `<div class="text-center p-4">
                            <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2 text-muted">Loading bookings...</p>
                        </div>`,
                        emptyTable: '<div class="text-center p-4"><i class="fa-solid fa-inbox fa-3x text-muted mb-3"></i><p class="text-muted">No bookings found</p></div>'
                    },
                    scroller: {
                        loadingIndicator: false
                    },
                    pagingType: "full_numbers",
                    dom: "<'row justify-content-between table-topbar align-items-center mb-3'<'col-md-6 col-sm-6 px-0'l><'col-md-6 col-sm-6 px-0 d-flex justify-content-end'B>>" +
                          "<'row'<'col-sm-12'tr>>" +
                          "<'row justify-content-between'<'col-md-6 col-sm-6 px-0'i><'col-md-6 col-sm-6 px-0'p>>",
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1"></i> Excel',
                            titleAttr: 'Export to Excel',
                            className: 'btn btn-success rounded',
                        }
                    ],
                    ajax: {
                        url: "{{ route('admin.bookings.index') }}",
                        type: "get",
                    },
                    columns: [
                        { data: 'bulk_check', name: 'bulk_check', orderable: false, searchable: false },
                        { data: 'id', name: 'id', orderable: true, searchable: true },
                        { data: 'user_name', name: 'user_name', orderable: true, searchable: true },
                        { data: 'company_name', name: 'company_name', orderable: true, searchable: true },
                        { data: 'employee_name', name: 'employee_name', orderable: true, searchable: true },
                        { data: 'booking_datetime', name: 'booking_datetime', orderable: true, searchable: false },
                        { data: 'amount', name: 'amount', orderable: true, searchable: false },
                        { data: 'status', name: 'status', orderable: true, searchable: false },
                        { data: 'flagged', name: 'flagged', orderable: true, searchable: false },
                        { data: 'action', name: 'action', orderable: false, searchable: false },
                    ],
                });

                // Handle checkbox selection
                $('#data-table tbody').on('change', '.select_data', function() {
                    updateBulkActionButton();
                });
            });

            function select_all() {
                var checkboxes = document.getElementsByClassName('select_data');
                var selectAllCheckbox = document.getElementById('select_all');

                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = selectAllCheckbox.checked;
                }
                updateBulkActionButton();
            }

            function select_single_item(id) {
                updateBulkActionButton();
            }

            function updateBulkActionButton() {
                var checkedCount = $('.select_data:checked').length;
                if (checkedCount > 0) {
                    $('.bulk-actions-btn').removeClass('d-none');
                    $('.bulk-actions-btn').html('<i class="fa-solid fa-ban text-danger"></i> Cancel (' + checkedCount + ')');
                } else {
                    $('.bulk-actions-btn').addClass('d-none');
                }
            }

            function showFlagAlert(id) {
                $('#flag_booking_id').val(id);
                $('#flag_reason').val('');
                $('#flagModal').modal('show');
            }

            $('#flagForm').on('submit', function(e) {
                e.preventDefault();
                var bookingId = $('#flag_booking_id').val();
                var reason = $('#flag_reason').val();

                if (!reason.trim()) {
                    toastr.error('Please provide a reason');
                    return;
                }

                $.ajax({
                    url: '{{ route("admin.bookings.flag", ":id") }}'.replace(':id', bookingId),
                    type: 'POST',
                    data: {
                        flag_reason: reason,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('#flagModal').modal('hide');
                            $('#data-table').DataTable().ajax.reload();
                        }
                    },
                    error: function() {
                        toastr.error('Something went wrong!');
                    }
                });
            });

            function unflagBooking(id) {
                Swal.fire({
                    title: 'Resolve Flag?',
                    text: "Are you sure this booking no longer needs attention?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fa-solid fa-check me-1"></i>Yes, resolve it'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route("admin.bookings.unflag", ":id") }}'.replace(':id', id),
                            type: 'POST',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                _method: 'PUT'
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Resolved!',
                                        text: response.message,
                                        timer: 2000,
                                        showConfirmButton: false
                                    });
                                    $('#data-table').DataTable().ajax.reload();
                                }
                            },
                            error: function() {
                                Swal.fire(
                                    'Error!',
                                    'Something went wrong.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            }

            function showDeleteAlert(id) {
                Swal.fire({
                    title: 'Delete Booking?',
                    text: "This action cannot be undone. The booking will be soft deleted.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fa-solid fa-trash me-1"></i>Yes, delete it'
                }).then((result) => {
                    if (result.isConfirmed) {
                        deleteBooking(id);
                    }
                });
            }

            function deleteBooking(id) {
                $.ajax({
                    url: '{{ route("admin.bookings.destroy", ":id") }}'.replace(':id', id),
                    type: 'DELETE',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                            $('#data-table').DataTable().ajax.reload();
                        }
                    },
                    error: function() {
                        Swal.fire(
                            'Error!',
                            'Something went wrong.',
                            'error'
                        );
                    }
                });
            }

            function bulkCancel() {
                let ids = [];
                $('.select_data:checked').each(function () {
                    ids.push($(this).val());
                });

                if (ids.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Selection',
                        text: 'Please select at least one booking!',
                    });
                    return;
                }

                Swal.fire({
                    title: 'Bulk Cancel Bookings',
                    input: 'textarea',
                    inputLabel: 'Cancellation Reason',
                    inputPlaceholder: 'Enter the reason for cancelling these bookings...',
                    inputAttributes: {
                        'aria-label': 'Type your reason here',
                        'rows': 4
                    },
                    showCancelButton: true,
                    confirmButtonText: '<i class="fa-solid fa-ban me-1"></i>Cancel Bookings',
                    confirmButtonColor: '#dc3545',
                    inputValidator: (value) => {
                        if (!value) {
                            return 'You need to provide a reason!'
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed && result.value) {
                        $.ajax({
                            url: '{{ route("admin.bookings.bulkCancel") }}',
                            type: 'POST',
                            data: {
                                booking_ids: ids,
                                reason: result.value,
                                _token: $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success!',
                                        text: response.message,
                                        timer: 2000,
                                        showConfirmButton: false
                                    });
                                    $('#data-table').DataTable().ajax.reload();
                                    $('.bulk-actions-btn').addClass('d-none');
                                }
                            },
                            error: function() {
                                Swal.fire(
                                    'Error!',
                                    'Something went wrong.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            }
        </script>
    @endpush
@endsection