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

        div.dataTables_wrapper div.dataTables_paginate {
            position: fixed;
            bottom: 10px;
            margin-right: auto;
            margin-left: auto;
            z-index: 2;
            background: white;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }
    </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="accreditationTable">
                        <thead>
                            <tr>
                                <th></th>
                                <th>No</th>
                                <th>Country</th>
                                <th>Hotel Name</th>
                                <th>Room Name</th>
                                <th>Meal For</th>
                                <th>Full Name</th>
                                <th>Sharing With</th>
                                <th>Check In</th>
                                <th>Check Out</th>
                                <th>Status</th>
                                <th>Invoice 1</th>
                            </tr>
                        </thead>
                    </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 = $('#accreditationTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('report.accreditation-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: 'country', name: 'country' },
                    { data: 'hotel', name: 'hotel' },
                    { data: 'room_name', name: 'room_name' },
                    { data: 'meal_for', name: 'meal_for' },
                    { data: 'accreditation_name', name: 'accreditation_name' },
                    { data: 'sharing_with_name', name: 'sharing_with_name' },
                    { data: 'checkin_date', name: 'checkin_date' },
                    { data: 'checkout_date', name: 'checkout_date' },
                    { data: 'status', name: 'status' },
                    { data: 'invoice_1', name: 'invoice_1' },
                ]
            });

            $('#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.accreditation-download') }}",
                    method: 'GET',
                    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 = 'accomodation-by-name.xlsx';
                        link.click();
                    },
                    error: function(xhr, status, error) {
                        console.error('Download failed:', error);
                    }
                });
            });
        });
    </script>
@endsection