@extends('layout.base')

@section('action')
    <div class="d-flex gap-2">
        <a class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#filterModal">
            <i class="fas fa-filter"></i> Filter
        </a>
    </div>
@endsection

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="card card-flush">
        <div class="card-header">
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Booking Information</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="datatableBookings">
                <thead>
                    <tr>
                        <th></th>
                        <th>No</th>
                        <th>Hotel</th>
                        <th>Total Rooms</th>
                        <th>Reservation Date</th> <!-- Sebelumnya "Booking Date", sekarang mengikuti backend -->
                        <th>Countries</th> <!-- Sebelumnya "Booking Date", sekarang mengikuti backend -->
                        <th>Booked By</th>
                        <th>Status</th>
                        <th>First Payment</th>
                        <th>Second Payment</th>
                        <th>Action</th>
                    </tr>
                </thead>

            </table>
        </div>
    </div>

    <!-- Payment Proof Modal -->
    <div class="modal fade" id="paymentProofModal" tabindex="-1" aria-labelledby="paymentProofModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentProofModalLabel">Payment Proof</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="proofImage" src="" class="img-fluid rounded shadow" alt="Payment Proof">
                </div>
            </div>
        </div>
    </div>

        <!-- Filter Modal -->
        <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="filterModalLabel">Filter Reservations</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="filterForm">
                        <div class="row">
                            <!-- Hotel Filter -->
                            <div class="col-md-6 mb-3">
                                <label for="hotel">Hotel</label>
                                <select class="form-control" name="hotel_id" id="hotel">
                                    <option value="">Select Hotel</option>
                                    @foreach($hotels as $hotel)
                                        <option value="{{ $hotel->id }}" {{ request('hotel_id') == $hotel->id ? 'selected' : '' }}>
                                            {{ $hotel->hotel_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Country Filter -->
                            <div class="col-md-6 mb-3">
                                <label for="country">Country</label>
                                <select class="form-control" name="country_id" id="country">
                                    <option value="">Select Country</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}" {{ request('country_id') == $country->id ? 'selected' : '' }}>
                                            {{ $country->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="applyFilter">Apply Filters</button>
                    <button type="button" class="btn btn-secondary" id="resetFilter">Reset</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal Detail Reservasi -->
    <div class="modal fade" id="reservationModal" tabindex="-1" aria-labelledby="reservationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="reservationModalLabel">Reservation Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!-- Col 1: Detail Reservasi -->
                        <div class="col-md-6">
                            <h6>Room Details</h6>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Room Name</th>
                                        <th>Duration</th>
                                        <th>Total Price</th>
                                    </tr>
                                </thead>
                                <tbody id="room-details">
                                    <!-- Data akan dimasukkan dengan AJAX -->
                                </tbody>
                            </table>
                        </div>
                        <!-- Col 2: Info User & Payment Proof -->
                        <div class="col-md-6">
                            <h6>Booked By</h6>
                            <p id="booked-by">-</p>
                            <h6>Payment Proof</h6>
                            <img id="payment-proof-img" src="" alt="Payment Proof" class="img-fluid"
                                style="max-height: 300px;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="approve-payment-btn" data-id="">Approve
                        Payment</button>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('booking-information.datatable') }}",
        };
        // ✅ DataTable setup
        let table = $("#datatableBookings").DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: CompactUrls._datatable,
                data: function(d) {
                    d.hotel_id = $('#hotel').val() || '';
                    d.country_id = $('#country').val() || '';
                },
            },
            order: [
                [1, 'asc']
            ],
            columns: [{
                    className: 'dt-control',
                    orderable: false,
                    searchable: false,
                    data: null,
                    defaultContent: ''
                },
                {
                    data: "DT_RowIndex",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "hotel_name",
                    name: "hotel.hotel_name"
                },
                {
                    data: "total_rooms",
                    name: "total_rooms"
                },
                {
                    data: "reservation_date",
                    name: "reservations.date"
                },
                {
                    data: "country_name",
                    name: "countries.name"
                },
                {
                    data: "user_name",
                    name: "users.name"
                },
                {
                    data: "status",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "first_payment",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "second_payment",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "action",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "reservation_id",
                    visible: false
                }, // kolom ini dipakai buat expand child row

            ]
        });


        // ✅ Expand child row when clicked
        $('#datatableBookings tbody').on('click', 'td.dt-control', function() {
            let tr = $(this).closest('tr');
            let row = table.row(tr);

            if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
            } else {
                let reservationId = row.data().reservation_id;
                // ✅ FIX: ambil langsung dari dataTables row
                console.log("✅ Extracted Reservation ID:", reservationId);

                if (!reservationId || isNaN(reservationId)) {
                    console.error("❌ Invalid Reservation ID:", reservationId);
                    alert("Error: Invalid Reservation ID!");
                    return;
                }

                console.log("✅ Expanding reservation with ID:", reservationId);
                loadChildTable(row, reservationId);
                tr.addClass('shown');
            }
        });

        $('#applyFilter').click(function() {
                table.ajax.reload();
                $('#filterModal').modal('hide');
                updateActiveFiltersDisplay();
        });

            $('#resetFilter').click(function() {
                $('#hotel').val('');
                $('#country').val('');
                table.ajax.reload();
                $('#activeFilters').hide();
                $('#filterModal').modal('hide');
            });

            function updateActiveFiltersDisplay() {
                var filters = [];
                
                if ($('#hotel').val()) {
                    filters.push('Hotel: ' + $('#hotel option:selected').text());
                }
                if ($('#country').val()) {
                    filters.push('Country: ' + $('#country option:selected').text());
                }
                if (filters.length > 0) {
                    $('#filterDisplay').html(filters.join(', '));
                    $('#activeFilters').show();
                } else {
                    $('#activeFilters').hide();
                }
            }

            updateActiveFiltersDisplay();

        $("#datatableBookings").on("click", ".cancel-reservation", function() {
            let reservationId = $(this).data("id");

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to cancel this reservation?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, cancel it!',
                cancelButtonText: 'No, keep it'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('booking.cancel') }}",
                        method: 'POST',
                        data: {
                            id: reservationId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Cancelled!',
                                text: response.message
                            });
                            $("#datatableBookings").DataTable().ajax.reload();
                        },
                        error: function(xhr) {
                            if (xhr.status === 403) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Unauthorized',
                                    text: "You are not authorized to cancel this reservation."
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: "Something went wrong."
                                });
                            }
                        }
                    });
                }
            });
        });

        $("#datatableBookings").on("click", ".restore-reservation", function() {
            let reservationId = $(this).data("id");

            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to restore this reservation?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, restore it!',
                cancelButtonText: 'No, cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('booking.restore') }}",
                        method: 'POST',
                        data: {
                            id: reservationId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Restored!',
                                text: response.message
                            });
                            $("#datatableBookings").DataTable().ajax.reload();
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: "Something went wrong."
                            });
                        }
                    });
                }
            });
        });

        // ✅ Function to load child table
        function loadChildTable(row, reservationId) {
            let childTable = $(`
                <table class="table table-bordered child-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Room Name</th>
                            <th>Quantity</th>
                            <th>Total Price</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            `);

            row.child(childTable).show();
            let requestUrl = "{{ route('booking-information.child-datatable', ':id') }}".replace(':id', encodeURIComponent(
                reservationId));
            console.log("✅ Fetching child table data from:", requestUrl);

            $.ajax({
                url: requestUrl,
                type: "GET",
                success: function(response) {
                    console.log("✅ AJAX Response:", response);
                    let tbody = childTable.find('tbody');
                    $.each(response.data, function(index, detail) {
                        tbody.append(`
                    <tr>
                        <td>${index + 1}</td>
                        <td>${detail.room_name}</td>
                        <td>${detail.quantity}</td>
                        <td>${detail.total_price}</td>
                        <td>${detail.start_date}</td>
                        <td>${detail.end_date}</td>
                    </tr>
                `);
                    });
                },
                error: function(xhr, status, error) {
                    console.error("❌ AJAX Error:", xhr.status, xhr.statusText, xhr.responseText);
                }
            });
        }

        // ✅ Handle Payment Proof Modal
        $(document).on("click", ".view-proof", function() {
            let imageUrl = $(this).data("image");
            $("#proofImage").attr("src", imageUrl);
            $("#paymentProofModal").modal("show");
        });

        // ✅ Handle Payment Proof Modal
        $(document).on("click", ".delete-reservation", function() {
            let reservationId = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: "This action cannot be undone!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`{{ route('booking-information.destroy', ':id') }}`.replace(':id',
                            reservationId), {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: 'Reservation has been deleted.'
                                }).then(() => {
                                    // Reload or remove item from table (if using DataTables)
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: data.message || 'Failed to delete the hotel.'
                                });
                            }
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: err.message || 'Something went wrong.'
                            });
                        });
                }
            });
        });

        // ✅ Handle Reservation Modal
        $(document).on('click', '.view-reservation', function() {
            let reservationId = $(this).data('id');
            let userId = $(this).data('user');

            $.ajax({
                url: '/booking-information/details/' + reservationId,
                type: 'GET',
                success: function(response) {
                    $('#room-details').empty();
                    $.each(response.data, function(index, detail) {
                        $('#room-details').append(`
                    <tr>
                        <td>${detail.room_name}</td>
                        <td>${detail.duration}</td>
                        <td>€ ${detail.total_price}</td>
                    </tr>
                `);
                    });

                    $('#booked-by').text(response.booked_by || '-');
                    $('#approve-payment-btn').data('id', reservationId);

                    if (response.payment_proof) {
                        $('#payment-proof-img').attr('src', response.payment_proof).show();
                    } else {
                        $('#payment-proof-img').hide();
                    }

                    $('#reservationModal').modal('show');
                },
                error: function() {
                    alert('Failed to fetch reservation details.');
                }
            });
        });


        $(document).on('click', '#approve-payment-btn', function() {
            const reservationId = $(this).data('id');

            // Ambil status reservasi terlebih dahulu
            $.ajax({
                url: '/booking-information/status/' +
                    reservationId, // Endpoint untuk mengambil status reservasi
                type: 'GET',
                success: function(response) {
                    const status = response.status;

                    // Jika status sudah "paid", langsung update ke "paid_approve" tanpa input deadline
                    Swal.fire({
                        title: 'Approve Payment?',
                        text: "Are you sure you want to approve this payment?",
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Approve',
                        cancelButtonText: 'Cancel'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: '/booking-information/approve-payment/' +
                                    reservationId,
                                type: 'POST',
                                data: {
                                    _token: $('meta[name="csrf-token"]').attr(
                                        'content'),
                                },
                                success: function(response) {
                                    Swal.fire('Approved!',
                                        'Payment has been approved.',
                                        'success');
                                    $('#reservationModal').modal(
                                        'hide'); // Tutup modal
                                    location.reload(); // Reload tabel datatable
                                },
                                error: function() {
                                    Swal.fire('Error!',
                                        'Failed to update reservation.',
                                        'error');
                                }
                            });
                        }
                    });
                },
                error: function() {
                    Swal.fire('Error!', 'Failed to get reservation status.', 'error');
                }
            });
        });
    </script>
@endsection