@extends('layouts.dashboard')

@section('content')
<style>
   .dt-length {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
div.dt-container select.dt-input {
    padding: 4px;
    margin-left: 5px;
}
.width-50{
    width: 50px;
}
</style>

<!-- Content Header -->
<div class="content-header">
    <div class="container-fluid">

        <!-- Page Title + Breadcrumb -->
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Holiday List</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Holiday List</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Main content -->
<div class="container-fluid">
   <div class="card">
        <div class="card-body">
            <!-- Filter + Download in one line -->
            <div class="d-flex justify-content-between align-items-center">
                <!-- Year Filter Form -->
                <form method="GET" action="{{ route('employee.holidays.index') }}" class="form-inline">
                    <label for="year" class="font-weight-bold mr-2">Filter by Year:</label>
                    <select name="year" id="year" class="form-control form-control-sm" onchange="this.form.submit()">
                        <option value="">Select Year</option>
                        @for ($y = date('Y'); $y >= 2000; $y--)
                        <option value="{{ $y }}" {{ request('year') == $y ? 'selected' : '' }}>
                            {{ $y }}
                        </option>
                        @endfor
                    </select>
                </form>

                <!-- Download Button -->
                <a href="{{ route('holidays.export', ['year' => request('year')]) }}" class="btn uniqbtn-btn btn-sm text-white">
                    <i class="fa fa-download"></i> Download
                </a>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <table id="holidayTable" class="table table-bordered table-striped mb-0 mt-0">
                <thead class="bg-warning text-dark">
                    <tr>
                        <th class="width-50">Sr No.</th>
                        <th>Occasion</th>
                        <th>Date</th>
                        <th>Day</th>
                        <th>Holiday Type</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($holidays as $holiday)
                    <tr>
                        <td></td> {{-- DataTables will fill Sr No dynamically --}}
                        <td>{{ $holiday->name }}</td>
                        <td>{{ \Carbon\Carbon::parse($holiday->date)->format('d-m-Y') }}</td>
                        <td>{{ \Carbon\Carbon::parse($holiday->date)->format('l') }}</td>
                        <td>
                            @switch($holiday->holiday_type)
                            @case(0) Public Holiday @break
                            @case(1) National Holiday @break
                            @case(2) Restricted Holiday @break
                            @default Unknown
                            @endswitch
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center">No holidays found.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection
@push('scripts')
<!-- DataTables CSS/JS -->
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css"> -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> -->
<!-- <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script> -->

<script>
    $(document).ready(function() {
        var t = $('#holidayTable').DataTable({
            "ordering": true,
            "lengthChange": false,
            "searching": true,
            "paging": false,
            columnDefs: [
                { orderable: false, searchable: false, targets: 0 } // Sr No column
            ]
        });

        // Auto-update Sr No on search/order
        t.on('order.dt search.dt', function () {
            let i = 1;
            t.cells(null, 0, { search: 'applied', order: 'applied' })
             .every(function () {
                 this.data(i++);
             });
        }).draw();
    });
</script>
@endpush