{{-- resources/views/hr/attandances/index.blade.php --}}
@extends('layouts.app')

@push('middle_part')
    <a href="{{ route('employee_attandance.create') }}" class="btn btn-primary">Add Employee Attendance</a>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'Hr > Employee Holiday';
                        $page_number = 1;
                    @endphp
                    @include('layouts.table_top')
                </div>

                <div class="col-md-12">
                    <div class="left-card">

                        <div class="mb-3">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-2">
                                    <label class="form-label">From</label>
                                    <input type="date" class="form-control" id="from_date" value="{{ $today }}">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">To</label>
                                    <input type="date" class="form-control" id="to_date" value="{{ $today }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Department</label>
                                    <select class="form-select" id="department_id">
                                        <option value="">All</option>
                                        @foreach ($departments as $d)
                                            <option value="{{ $d->id }}">{{ $d->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Employee</label>
                                    <select class="form-select selectpicker" data-live-search="true" id="employee_id">
                                        <option value="">All</option>
                                        @foreach ($employees as $e)
                                            <option value="{{ $e->id }}">{{ $e->name }} - {{ $e->employee_id }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex gap-2">
                                    <button class="btn btn-primary w-100" id="filter_btn">Filter</button>
                                    <button class="btn btn-outline-success w-100" id="export_btn">Export</button>
                                </div>
                            </div>
                        </div>

                        <div class="table-fixed-head table-responsive" id="items-table"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(function() {
            // --- debounce (works even if lodash/underscore isn't loaded) ---
            const debounce = (window._ && _.debounce) ? _.debounce : function(fn, wait) {
                let t;
                return function() {
                    clearTimeout(t);
                    t = setTimeout(() => fn.apply(this, arguments), wait);
                };
            };

            function params(extra = {}) {
                return {
                    perPage: $('#page_number').val() || 10,
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    department_id: $('#department_id').val(),
                    employee_id: $('#employee_id').val(),
                    search: $('#form_search').val(),
                    ...extra
                };
            }

            function loadItems(page = 1) {
                $('#items-table').empty();
                $.ajax({
                    url: "{{ route('employee_attandance.getdata') }}" + '?page=' + page,
                    data: params(),
                    type: 'GET',
                    success: function(html) {
                        $('#items-table').html(html);
                    }
                });
            }

            // initial load (today → today)
            loadItems(1);

            // pagination (preserve filters)
            $('#items-table').on('click', '.pagination a', function(e) {
                e.preventDefault();
                const page = $(this).attr('href').split('page=')[1];
                loadItems(page);
            });

            // filter actions
            $('#filter_btn').on('click', function(e) {
                e.preventDefault();
                loadItems(1);
            });
            $('#page_number, #department_id, #employee_id, #from_date, #to_date').on('change', function() {
                loadItems(1);
            });
         

            // --- EXPORT (shows spinner, downloads, then restores button) ---
            $('#export_btn').on('click', async function(e) {
                e.preventDefault();

                const $btn = $(this);
                const originalHtml = $btn.html();
                $btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Exporting…'
                );

                // Build query string from current filters
                const q = $.param(params());
                const url = "{{ route('employee_attandance.export') }}?" + q;

                try {
                    const resp = await fetch(url, {
                        credentials: 'same-origin'
                    });
                    if (!resp.ok) throw new Error('Export failed (' + resp.status + ')');

                    const blob = await resp.blob();

                    // Try to read filename from Content-Disposition
                    const cd = resp.headers.get('Content-Disposition') || '';
                    let filename = 'employee_attendances.xlsx';
                    const match = /filename\*?=(?:UTF-8''|")?([^\";]+)/i.exec(cd);
                    if (match && match[1]) {
                        filename = decodeURIComponent(match[1].replace(/\"/g, ''));
                    }

                    const link = document.createElement('a');
                    const urlObj = URL.createObjectURL(blob);
                    link.href = urlObj;
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    link.remove();
                    URL.revokeObjectURL(urlObj);
                } catch (err) {
                    console.error(err);
                    alert(err.message || 'Export failed');
                } finally {
                    $btn.prop('disabled', false).html(originalHtml);
                }
            });
        });
    </script>
@endpush