@extends('layout.base')

@section('action')
    <a href="{{ route('hotel.add') }}" class="btn btn-light-primary btn-sm rounded">
        <i class="fas fa-plus"></i> Add Hotel
    </a>
@endsection

@section('content')
    <div class="card card-flush">
        <div class="card-header">
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Hotel List</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-stripped" id="datatableHotel">
                <thead>
                    <tr>
                        <th>Action</th>
                        <th>Action</th>
                        <th>Hotel Name</th>
                        <th>Address</th>
                        <th>Website</th>
                        <th>Distance to Venue</th>
                        <th>Distance to Airport</th>
                        <th>Category</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('hotel.elements.modal_add')
@endsection

@section('scripts')
    <script>
        const HotelUrls = {
            _datatable: "{{ route('hotel.datatable') }}",
        }

        $(document).ready(function() {
            // ✅ Simpan instance DataTable ke variabel
            const table = $('#datatableHotel').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: HotelUrls._datatable,
                    type: 'GET',
                },
                columns: [{
                        className: 'dt-control',
                        orderable: false,
                        searchable: false,
                        data: null,
                        defaultContent: '', // bisa ditambah icon
                    },
                    {
                        data: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                        <button class="btn btn-sm btn-warning edit-data" onclick="editHotel(${data})">
                            <i class="bx bx-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-danger delete-data" data-id="${data}">
                            <i class="bx bx-trash"></i>
                        </button>
                        <button class="btn btn-sm btn-info detail-data" data-id="${data}">
                            <i class="bx bx-detail"></i>
                        </button>`;
                        }
                    },
                    {
                        data: 'hotel_name'
                    },
                    {
                        data: 'address'
                    },
                    {
                        data: 'website'
                    },
                    {
                        data: 'distance_to_vanue'
                    },
                    {
                        data: 'distance_to_airport'
                    },
                    {
                        data: 'category_names'
                    },
                ]
            });

            function formatRoomDetails(data) {
                let html = `
    <table class="table table-sm table-bordered mb-0">
        <thead class="table-light">
            <tr>
                <th>Room</th>
                <th>Room Type</th>
                <th>Capacity</th>
                <th>Availability</th>
                <th>Booked Quantity</th>
                <th>Price (USD)</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>`;

                const grouped = {};
                const roomTypeInfo = {};

                data.forEach(room => {
                    const type = room.type_name || 'Unknown';
                    if (!grouped[type]) grouped[type] = [];
                    grouped[type].push(room);

                    roomTypeInfo[type] = {
                        quantity: parseInt(room.room_type_quantity),
                    };
                });

                let grandAvail = 0,
                    grandBooked = 0,
                    grandTotal = 0,
                    grandPrice = 0;

                for (const [type, rooms] of Object.entries(grouped)) {
                    let subtotalBooked = 0;
                    let subtotalPrice = 0;
                    const availability = roomTypeInfo[type].quantity;

                    rooms.forEach(room => {
                        const booked = parseFloat(room.booked_quantity ?? 0);
                        const price = parseFloat(room.total_price ?? 0);

                        html += `
                        <tr>
                            <td>${room.room_name}</td>
                            <td>${room.type_name}</td>
                            <td>${room.capacity}</td>
                            <td></td>
                            <td>${booked}</td>
                            <td>USD${price.toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
                            <td></td>
                        </tr>`;

                        subtotalBooked += booked;
                        subtotalPrice += price;
                    });

                    const total = availability + subtotalBooked;

                    html += `
                        <tr class="table-secondary fw-bold">
                            <td></td>
                            <td>Room type ${type}</td>
                            <td></td>
                            <td>${availability}</td>
                            <td>${subtotalBooked}</td>
                            <td>USD${subtotalPrice.toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
                            <td>${total}</td>
                        </tr>`;

                    grandAvail += availability;
                    grandBooked += subtotalBooked;
                    grandTotal += total;
                    grandPrice += subtotalPrice;
                }

                html += `
                    <tr class="table-dark fw-bold">
                        <td></td>
                        <td>Grand Total</td>
                        <td></td>
                        <td>${grandAvail}</td>
                        <td>${grandBooked}</td>
                        <td>USD${grandPrice.toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
                        <td>${grandTotal}</td>
                    </tr>
                    </tbody></table>`;

                return html;
            }



            // ✅ Click handler di dalam ready
            $('#datatableHotel tbody').on('click', 'td.dt-control', function() {
                const tr = $(this).closest('tr');
                const row = table.row(tr);

                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    const hotelId = row.data().id;
                    $.get(`{{ route('hotel.rooms.details', ':id') }}`.replace(':id', hotelId), function(
                        data) {
                        row.child(formatRoomDetails(data)).show();
                        tr.addClass('shown');
                    });
                }
            });
        });



        $(document).on('click', '.delete-data', function() {
            let hotelId = $(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('hotels.destroy', ':id') }}`.replace(':id', hotelId), {
                            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: 'Hotel 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.'
                            });
                        });
                }
            });
        });


        function navigateToRoute(route, id) {
            window.location.href = route.replace(':id', id);
        }

        function editHotel(id) {
            navigateToRoute(`{{ route('hotels.edit', ':id') }}`, id);
        }

        $(document).on('click', '.detail-data', function() {
            let hotelId = $(this).data('id');
            navigateToRoute(`{{ route('hotels.show', ':id') }}`, hotelId);
        });
    </script>
@endsection