@extends('layouts.user_type.auth')

@section('content')
<style>

.table-responsive {
    max-height: 70vh;
    overflow-y: auto;
}

.table_fixed > thead > tr > th {
    position: sticky !important;
    inset-block-start: 0;
    /* z-index: 1 !important; */
    /* background-color: #ffffff; */
    padding-inline-start: 10px;
}

</style>
<div class="container-fluid">
    <div class="mb-3">
        <h3 class="mb-4">Leave Type-wise Summary Report</h3>
        <form id="filter-form" class="mb-4">
            <div class="row align-items-end">
                <div class="col-md-4">
                    <label for="leave_type" class="form-label">Leave Type</label>
                    <select id="leave_type" name="leave_type" class="form-select" required>
                        <option value="">-- Select Leave Type --</option>
                        @foreach($leaveTypes as $type)
                            <option value="{{ $type->id }}" {{ strtolower($type->name) === 'cl' ? 'selected' : '' }}>
                                {{ $type->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="year" class="form-label">Year</label>
                    <select id="year" name="year" class="form-select">
                        @for($i = date('Y'); $i >= 2025; $i--)
                            <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-2" style="width:auto;">
                    <button type="submit" class="btn bg-gradient-primary mb-0">Load Report</button>
                </div>
                <div class="col-md-4">
                    <a href="javascript:void(0);" 
                    onclick="downloadReport()" 
                    class="btn bg-gradient-primary mb-0" 
                    type="button" style="margin-left: 5px;">
                    Download XLS
                    </a>
                </div>
            </div>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered text-center table_fixed">
            <thead class="thead-dark">
                <tr>
                    <th>Employee Name</th>
                    <th>Employee Code</th>
                    <th>Allocated</th>
                    <th>Booked</th>
                    <th>Closing Balance</th>
                    <th>Lapsed</th>
                </tr>
            </thead>
            <tbody id="report-body">
                <tr>
                    <td colspan="7" class="text-center text-muted">Loading...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    function loadReport() {
        const leaveType = document.getElementById('leave_type').value;
        const year = document.getElementById('year').value;
        const tableBody = document.getElementById('report-body');

        if (!leaveType || !year) return;

        tableBody.innerHTML = `<tr><td colspan="7" class="text-center">Loading...</td></tr>`;

        fetch('{{ route('leave.report.data') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ leave_type_id: leaveType, year: year }),
        })
        .then(res => res.json())
        .then(res => {
            if (res.data && res.data.length > 0) {
                let rows = '';
                res.data.forEach(row => {
                    rows += `<tr>
                        <td>${row.employee_name}</td>
                        <td>${row.employee_code}</td>
                        <td>${row.allocated_leaves}</td>
                        <td>${row.used_leaves}</td>
                        <td>${row.remaining_leaves}</td>
                        <td>${row.lapsed_leaves}</td>
                    </tr>`;
                });
                tableBody.innerHTML = rows;
            } else {
                tableBody.innerHTML = `<tr><td colspan="7" class="text-center text-danger">No data found</td></tr>`;
            }
        })
        .catch(error => {
            console.error(error);
            tableBody.innerHTML = `<tr><td colspan="7" class="text-center text-danger">Error fetching data</td></tr>`;
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        const filterForm = document.getElementById('filter-form');

        if (filterForm) {
            filterForm.addEventListener('submit', function (e) {
                e.preventDefault();
                loadReport();
            });

            // Auto-load with default selected CL and current year
            loadReport();
        }
    });

    function downloadReport() {
        const leaveType = document.getElementById('leave_type').value;
        const year = document.getElementById('year').value;

        if (!leaveType || !year) {
            alert("Please select both Leave Type and Year before downloading.");
            return;
        }

        // Build URL with both params
        const url = `{{ route('leave.downloadTypeWiseSummary', ['year' => ':year', 'leave_type_id' => ':leaveType']) }}`
            .replace(':year', year)
            .replace(':leaveType', leaveType);

        window.location.href = url;
    }
</script>

@endsection