@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;
        }
    </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">                 
                            <!-- Country Filter -->
                            <div class="col-md-6 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>

                            <!-- Hotel Filter -->
                            <div class="col-md-6 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>
                        </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>
                
                <table class="table table-bordered" id="reservationTable">
                    <thead>
                        <tr>
                            <th></th>
                            <th>No</th>
                            <th>Booking Date <i class="fas fa-sort"></i></th>
                            <th>Invoice Number</th>
                            <th>Country</th>
                            <th>Hotel Name</th>
                            <th>Total Price</th>
                            <th>DP</th>
                            <th>Payment Amount</th>
                            <th>Balance</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>
@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.invoice-reservation-list-datatable') }}",
                    data: function(d) {
                        d.hotel_id = $('#hotel').val() || '';
                        d.country_id = $('#country').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: 'booking_date',
                        name: 'booking_date',
                        orderable: true
                    },
                    {data: 'invoice_number', name: 'invoice_number'},
                    {data: 'country', name: 'country'},
                    {data: 'hotel_name', name: 'hotel_name', width: '5px'},
                    {data: 'total_price', name: 'total_price'},
                    {data: 'dp', name: 'dp'},
                    {data: 'payment_amount', name: 'payment_amount'},
                    {data: 'balance', name: 'balance'}
                ],
                footerCallback: function( tfoot, data, start, end, display ) {
                    var api = this.api();
                    // var totalPayment = api.column(8).data().reduce(function(a, b) {
                    //     b = b.replace(/[^\d]/g, '');
                    //     b = parseInt(b);
                    //     return a + b;
                    // }, 0);
                    // $(api.column(6).footer()).html('USD ' + totalPayment.toLocaleString('de-DE'));

                    var totalBalance = 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 ' + totalBalance.toLocaleString('de-DE'));
                }
            });

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

            $('#resetFilter').click(function() {
                $('#hotel').val('');
                $('#country').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 (filters.length > 0) {
                    $('#filterDisplay').html(filters.join(', '));
                    $('#activeFilters').show();
                } else {
                    $('#activeFilters').hide();
                }
            }

            updateActiveFiltersDisplay();

            $('#downloadPdf').click(function() {
                var hotelId = $('#hotel').val() || '';
                var countryId = $('#country').val() || '';

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