@extends('layout.base')

@section('action')
    <div class="d-flex gap-2">
        <a class="btn btn-light-primary btn-sm rounded" id="downloadPdf">
            <i class="fas fa-download"></i> Export Excel
        </a>
    </div>
@endsection

@section('content')
    <style>
        .select2-container--default .select2-selection--multiple {
            background-color: #fff !important;
            border: 1px solid #ced4da !important;
            min-height: 38px !important;
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff !important;
            border: 1px solid #ced4da !important;
        }

        .select2-dropdown {
            background-color: #fff !important;
            border: 1px solid #ced4da !important;
        }

        .select2-results__option {
            background-color: #fff !important;
            color: #000 !important;
        }

        .select2-results__option--highlighted[aria-selected] {
            background-color: #007bff !important;
            color: #fff !important;
        }
    </style>

    <div class="container mt-4">
        <div class="card">
            <div class="card-body">        
                <div id="activeFilters" class="mb-3" style="display: none;">
                    <small class="text-muted">Filters: </small>
                    <span id="filterDisplay"></span>
                </div>
                
                <table class="table table-bordered" id="reservationTable">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Action</th>
                            <th>Country Name</th>
                            <th>Total Room</th>
                            <th>Total Price</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .dataTables_wrapper .dataTables_filter {
            float: right;
        }
        .dataTables_wrapper .dataTables_length {
            float: left;
        }
        .fa-sort {
            margin-left: 5px;
            color: #999;
        }
    </style>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var table = $('#reservationTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('report.country-list-datatable') }}",
                    error: function(xhr, error, code) {
                        console.log('DataTable Error:', xhr, error, code);
                        alert('Error loading data. Please check console for details.');
                    }
                },
                columns: [
                    {
                        className: 'dt-control',
                        orderable: false,
                        searchable: false,
                        data: null,
                        defaultContent: '',
                    },
                    {
                        data: 'name',
                        name: 'name',
                        orderable: true
                    },
                    {data: 'total_room', name: 'total_room'},
                    {data: 'total_bill', name: 'total_bill'}
                ],
            });

            function formatCountryDetails(data) {
                let html = `
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Room Name</th>
                                <th>Total Room</th>
                                <th>Room Price</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>
                        <tbody>
                `;

                let grouped = {};
                data.forEach(item => {
                    if (!grouped[item.hotel_name]) {
                        grouped[item.hotel_name] = [];
                    }
                    grouped[item.hotel_name].push(item);
                });

                Object.keys(grouped).forEach(hotelName => {
                    html += `
                        <tr class="table-secondary fw-bold">
                            <td colspan="4">${hotelName}</td>
                        </tr>
                    `;
                    grouped[hotelName].forEach(item => {
                        html += `
                            <tr>
                                <td>${item.room_name}</td>
                                <td>${item.total_rooms}</td>
                                <td>USD ${item.room_price}</td>
                                <td>USD ${item.total_price}</td>
                            </tr>
                        `;
                    });
                });

                
                // Normalize total_rooms and total_price to float before summing
                const totalRooms = data.reduce((acc, item) => acc + parseFloat(item.total_rooms || 0), 0);
                const totalPrice = data.reduce((acc, item) => acc + parseFloat(item.total_price || 0), 0);

                html += `
                    <tr class="table-secondary fw-bold">
                        <td>Total</td>
                        <td>${totalRooms}</td>
                        <td></td>
                        <td>USD ${totalPrice}</td>
                    </tr>
                    </tbody>
                `;

                return html;
            }

            $('#reservationTable 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 countryId = row.data().id;
                    console.log(countryId);
                    $.get(`{{ route('report.country-details', ':id') }}`.replace(':id', countryId), function(
                        data) {
                        console.log(data);
                        row.child(formatCountryDetails(data)).show();
                        tr.addClass('shown');
                    });
                }
            });

            $('#downloadPdf').click(function() {
                $.ajax({
                    url: "{{ route('report.download-country-list') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(response) {
                        var blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = 'country-report.xlsx';
                        link.click();
                    },
                    error: function(xhr, status, error) {
                        console.error('Download failed:', error);
                    }
                });
            });
        });
    </script>
@endsection