@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center bg-white p-4 rounded shadow-sm">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
        </div>
        <div class="col-md-12">
        <div class="row g-2 mb-3 align-items-end">
            <div class="col-md-4">
                <label for="dateFrom" class="form-label">Desde</label>
                <input
                    type="date"
                    id="dateFrom"
                    class="form-control"
                    value="{{ $defaultDateFrom ?? now()->startOfMonth()->toDateString() }}"
                >
            </div>
            <div class="col-md-4">
                <label for="dateTo" class="form-label">Hasta</label>
                <input
                    type="date"
                    id="dateTo"
                    class="form-control"
                    value="{{ $defaultDateTo ?? now()->endOfMonth()->toDateString() }}"
                >
            </div>
            <div class="col-md-4 d-flex gap-2">
                <button id="filterDateRange" type="button" class="btn btn-primary">Filtrar</button>
                <button id="resetDateRange" type="button" class="btn btn-outline-secondary">Mes actual</button>
            </div>
        </div>
        <table
            id="assistanceTable"
            class="table table-striped table-bordered"
        >
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Hora de Entrada</th>
                    <th>Periodo</th>
                    <th>Fecha de Asistencia</th>
                </tr>
            </thead>
            <tbody>
                <!-- Los datos se cargarán via AJAX -->
            </tbody>
        </table>
        </div>
    </div>
</div>
@endsection
