@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>
        <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;
        }

        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }

        #reservationTable th, 
        #reservationTable td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

    <!-- 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-4 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>

                            <!-- Room Name Filter -->
                            <div class="col-md-4 mb-3">
                                <label for="room_name">Room Type</label>
                                <select class="form-control" name="room_name" id="room_name">
                                    <option value="">Select Room Type</option>
                                    @foreach($rooms as $room)
                                        <option value="{{ $room->room_name }}" {{ request('room_name') == $room->room_name ? 'selected' : '' }}>
                                            {{ $room->room_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Country Filter -->
                            <div class="col-md-4 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>

    <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>
                <div class="table-responsive">
                    <table class="table table-bordered" id="reservationTable">
                        <thead>
                            <tr>
                                <th></th>
                                <th>No</th>
                                <th>Invoice</th>
                                <th>Detail</th>
                                <th>Hotel Name</th>
                                <th>Country</th>
                                <th>Room Name</th>
                                <th>Booked Rooms</th>
                                <th>Pax</th>
                                <th>Total Price</th>
                                <th>Check In</th>
                                <th>Check Out</th>
                            </tr>
                        </thead>
                        <tfoot class="table-secondary fw-bold">
                            <tr>
                                <th></th>
                                <th>Total</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </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.reservation-list-datatable') }}",
                    data: function(d) {
                        d.hotel_id = $('#hotel').val() || '';
                        d.country_id = $('#country').val() || '';
                        d.room_name = $('#room_name').val() || '';
                    },
                    error: function(xhr, error, code) {
                        console.log('DataTable Error:', xhr, error, code);
                        alert('Error loading data. Please check console for details.');
                    }
                },
                columns: [
                    {
                        data: null,
                        defaultContent: '',
                        orderable: false,
                        searchable: false,
                        width: '5px'
                    },
                    {
                        data: "DT_RowIndex",
                        orderable: false,
                        searchable: false,
                        width: '50px'
                    },
                    {
                        data: 'invoice_number',
                        name: 'invoice_number',
                        orderable: true,
                        searchable: true,
                        width: '150px'
                    },
                    {
                        data: 'reservation_name',
                        name: 'reservation_name',
                        orderable: true,
                        searchable: true,
                        width: '150px'
                    },
                    {
                        data: 'hotel_name',
                        name: 'hotel_name',
                        orderable: true,
                        searchable: true,
                        width: '150px'
                    },
                    {
                        data: 'country_name',
                        name: 'country_name',
                        orderable: true,
                        searchable: true,
                        width: '120px'
                    },
                    {
                        data: 'room_name',
                        name: 'room_name',
                        orderable: true,
                        searchable: true,
                        width: '120px'
                    },
                    {
                        data: 'booked_rooms',
                        name: 'booked_rooms',
                        orderable: false,
                        searchable: false,
                        width: '80px'
                    },
                    {
                        data: 'pax',
                        name: 'pax',
                        orderable: true,
                        searchable: true,
                        width: '150px'
                    },
                    {
                        data: 'total_price',
                        name: 'total_price',
                        orderable: false,
                        searchable: false,
                        width: '120px'
                    },
                    {
                        data: 'check_in',
                        name: 'check_in',
                        orderable: false,
                        searchable: false,
                        width: '100px'
                    },
                    {
                        data: 'check_out',
                        name: 'check_out',
                        orderable: false,
                        searchable: false,
                        width: '100px'
                    }],
                footerCallback: function( tfoot, data, start, end, display ) {
                    var api = this.api();
                    var total = api.column(9).data().reduce(function(a, b) {
                        b = b.replace(/[^\d]/g, '');
                        b = parseInt(b);
                        return a + b;
                    }, 0);
                    $(api.column(9).footer()).html('USD ' + total.toLocaleString('de-DE'));
                }
            });

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

            $('#resetFilter').click(function() {
                $('#hotel').val('');
                $('#country').val('');
                $('#room_name').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 ($('#room_name').val()) {
                    filters.push('Room Type: ' + $('#room_name option:selected').text());
                }
                if (filters.length > 0) {
                    $('#filterDisplay').html(filters.join(', '));
                    $('#activeFilters').show();
                } else {
                    $('#activeFilters').hide();
                }
            }

            updateActiveFiltersDisplay();

            $('#downloadPdf').click(function() {
                var hotelId = $('#hotel').val() || '';
                var countryId = $('#country').val() || '';
                var roomName = $('#room_name').val() || '';
                $.ajax({
                    url: "{{ route('report.download-reservation-list') }}",
                    method: 'POST',
                    data: {
                        hotel_id: hotelId,
                        country_id: countryId,
                        room_name: roomName,
                        _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 = 'hotel-report.xlsx';
                        link.click();
                    },
                    error: function(xhr, status, error) {
                        console.error('Download failed:', error);
                    }
                });
            });
        });
    </script>
@endsection