@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')
    <div class="container mt-4">
        <div class="card">
            <div class="card-body">        
                 <form id="filterForm">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <div class="d-flex flex-wrap gap-2">
                                    @foreach($status as $row)
                                        <div class="form-check me-3">
                                            <input type="checkbox" 
                                                class="form-check-input" 
                                                id="status_{{ $row }}" 
                                                name="status[]"
                                                value="{{ $row }}"
                                                {{ !request()->has('status') || in_array($row, (array)request('status')) ? 'checked' : '' }}>>
                                            <label class="form-check-label" for="status_{{ $row }}">
                                                {{ ucfirst($row) }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </form>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <h5 class="mb-0">Done</h5>
                                <h5 id="doneCount" class="mb-0"></h5>
                            </div>
                            <div style="max-height: 400px; overflow-y: auto;">
                                <table id="doneTable" class="table table-bordered table-sm">
                                    <thead style="top:0; position:sticky; background:#f8f9fa; z-index:2">
                                        <tr>
                                            <th>Name</th>
                                            <th>Total E-Visa</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot style="bottom:0; position:sticky; background:#f8f9fa; z-index:2">
                                        <tr class="table-secondary fw-bold">
                                            <th>Total</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <h5 class="mb-0">Approve</h5>
                                <h5 id="approveCount" class="mb-0"></h5>
                            </div>
                            <div style="max-height: 400px; overflow-y: auto;">
                                <table id="approveTable" class="table table-bordered table-sm">
                                    <thead style="top:0; position:sticky; background:#f8f9fa; z-index:2">
                                        <tr>
                                            <th>Name</th>
                                            <th>Total Status</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot style="bottom:0; position:sticky; background:#f8f9fa; z-index:2">
                                        <tr class="table-secondary fw-bold">
                                            <th>Total</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <h5 class="mb-0">Visa Request</h5>
                                <h5 id="multiCount" class="mb-0"></h5>
                            </div>
                            <div style="max-height: 400px; overflow-y: auto;">
                                <table id="multiTable" class="table table-bordered table-sm">
                                    <thead style="top:0; position:sticky; background:#f8f9fa; z-index:2">
                                        <tr>
                                            <th>Name</th>
                                            <th>Total Status</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot style="bottom:0; position:sticky; background:#f8f9fa; z-index:2">
                                        <tr class="table-secondary fw-bold">
                                            <th>Total</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </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;
        }
        .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>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            function fetchData(formData) {
                $.ajax({
                    url: "{{ route('report.visa-ajax') }}",
                    method: 'GET',
                    dataType: 'json',
                    data: formData,
                    success: function(res) {
                        if (res.status === 'success') {
                            mapData(res.done, res.approve, res.multi);
                        } else {
                            console.error('Response error:', res);
                        }
                    },
                    error: function(xhr, status, err) {
                        console.error('AJAX error:', err);
                    }
                });
            }

            function mapData(done, approve, multi) {
                var doneTotal = 0;
                $('#doneTable tbody').empty();
                $('#doneCount').empty();
                $('#doneCount').append(done.length);
                done.forEach((row, index) => {
                    doneTotal += parseInt(row.total_evisa);

                    $('#doneTable tbody').append(`
                        <tr>
                            <td>${row.name}</td>
                            <td>${row.total_evisa}</td>
                        </tr>
                    `);
                });

                $('#doneTable tfoot').empty();
                $('#doneTable tfoot').append(`
                    <tr class="table-secondary fw-bold">
                        <th>Total</th>
                        <th>${doneTotal}</th>
                    </tr>
                `)

                var approveTotal = 0;
                $('#approveTable tbody').empty();
                $('#approveCount').empty();
                $('#approveCount').append(approve.length);
                approve.forEach((row, index) => {
                    approveTotal += parseInt(row.total_status);

                    $('#approveTable tbody').append(`
                        <tr>
                            <td>${row.name}</td>
                            <td>${row.total_status}</td>
                        </tr>
                    `);
                });

                $('#approveTable tfoot').empty();
                $('#approveTable tfoot').append(`
                    <tr class="table-secondary fw-bold">
                        <th>Total</th>
                        <th>${approveTotal}</th>
                    </tr>
                `)
            
                var multiTotal = 0;
                $('#multiTable tbody').empty();
                $('#multiCount').empty();
                $('#multiCount').append(multi.length);
                multi.forEach((row, index) => {
                    multiTotal += parseInt(row.total_status);

                    $('#multiTable tbody').append(`
                        <tr>
                            <td>${row.name}</td>
                            <td>${row.total_status}</td>
                        </tr>
                    `);
                });

                $('#multiTable tfoot').empty();
                $('#multiTable tfoot').append(`
                    <tr class="table-secondary fw-bold">
                        <th>Total</th>
                        <th>${multiTotal}</th>
                    </tr>
                `)
            }

            fetchData(null);

            $('#filterForm').on('change', function() {
                let formData = $(this).serialize();

                fetchData(formData);
            });

            $('#downloadPdf').click(function() {
                let formData = $('#filterForm').serialize();

                $.ajax({
                    url: "{{ route('report.visa-download') }}",
                    method: 'GET',
                    data: formData,
                    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 = 'visa-report.xlsx';
                        link.click();
                    },
                    error: function(xhr, status, error) {
                        console.error('Download failed:', error);
                    }
                });
            });
        });
    </script>
@endsection