@extends('layout.base')

@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">Reservation Information</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="datatableReservations">
                <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>Status</th>
                        <th>First Payment</th> <!-- Tambahkan kolom untuk melihat bukti pembayaran -->
                        <th>Second Payment</th> <!-- Tambahkan kolom untuk melihat bukti pembayaran -->
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentModalLabel">Detail Pembayaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">
                    <!-- Kolom 8 untuk Foto Payment Proof -->
                    <div class="col-md-8">
                        <img id="paymentImage" src="" class="img-fluid" alt="Bukti Pembayaran">
                    </div>
                    <!-- Kolom 4 untuk List Reservation Accreditations -->
                    <div class="col-md-4">
                        <h6>Reservation Accreditations</h6>
                        <ul id="accreditationsList" class="list-group">
                            <!-- Data Akan Ditampilkan di Sini -->
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="confirmApprove" data-id="">Ya, Setujui</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Settle Payment Modal -->
    <div class="modal fade" id="paymentProofModal" tabindex="-1" aria-labelledby="paymentProofLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentProofLabel">Settle Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="uploadPaymentForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="reservation_id" id="reservationId">
                        <div class="mb-3">
                            <label for="paymentProof" class="form-label">Upload Payment Proof</label>
                            <input type="file" name="payment_proof" id="paymentProof" class="form-control" required
                                accept="image/*">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit Payment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            Swal.fire({
                icon: 'info',
                title: 'Information',
                text: 'Accommodation by name can be uploaded upon the 100% payment of accommodation and nominative information',
                confirmButtonText: 'OK'
            });
        });
    </script>
    <script>
        const CompactUrls = {
            _datatable: "{{ route('reservation.datatable') }}",
        };

        $(document).on('click', '.cancel-reservation', function(e) {
            e.preventDefault();
            let url = $(this).attr('href');

            Swal.fire({
                title: 'Are you sure?',
                text: "Any changes and rebooking may be subject to the availability of rooms.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, cancel it!',
                cancelButtonText: 'No, keep it'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post(url, {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    }, function(response) {
                        if (response.success) {
                            Swal.fire('Cancelled!', response.message, 'success');
                            table.ajax.reload();
                        } else {
                            Swal.fire('Failed!', response.message, 'error');
                        }
                    });
                }
            });
        });

        let table = $("#datatableReservations").DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: CompactUrls._datatable,
            },
            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: "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,
                    className: "text-center"
                }
            ]
        });

        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');
                    response.data.forEach((item, index) => {
                        tbody.append(`
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.room_name}</td>
                        <td>${item.quantity}</td>
                        <td>${item.total_price}</td>
                        <td>${item.start_date}</td>
                        <td>${item.end_date}</td>
                    </tr>
                `);
                    });
                },
                error: function(xhr, status, error) {
                    console.error("❌ AJAX Error:", xhr.status, xhr.statusText, xhr.responseText);
                }
            });
        }

        $('#datatableReservations 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().id; // 🔥 Ambil ID dari DataTable
                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');
            }
        });

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

        $(document).on('click', '.upload-payment', function() {
            let reservationId = $(this).data('id');
            let status = $(this).data('status');

            if (status === 'dp_approve') {
                // Tampilkan modal untuk upload ulang payment proof
                $('#paymentProofModal').modal('show');
                $('#reservationId').val(reservationId);
            } else {
                // Update status langsung ke "paid"
                $.ajax({
                    url: '/reservation/update-paid',
                    method: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        id: reservationId,
                        status: 'paid'
                    },
                    success: function(response) {
                        alert('Status berhasil diperbarui!');
                        $('#reservationTable').DataTable().ajax.reload();
                    }
                });
            }
        });

        // Handle form submit di dalam modal
        $(document).on('submit', '#uploadPaymentForm', function(e) {
            e.preventDefault(); // Hindari reload halaman

            let formData = new FormData(this);
            formData.append('_token', $('meta[name="csrf-token"]').attr('content')); // Tambahkan CSRF token

            $.ajax({
                url: '/reservation/update-paid',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message,
                    });
                    $('#paymentProofModal').modal('hide'); // Tutup modal setelah sukses
                    $('#datatableReservations').DataTable().ajax.reload(); // Reload tabel
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON.message || 'Something went wrong!',
                    });
                }
            });
        });
    </script>
@endsection