@extends('layouts.pointage-layout')

@section('title', 'Système de Pointage - Présence CABOMA')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-5 col-md-7 col-sm-10">

        <!-- Titre -->
        <div class="text-center mb-4">
            <h1 class="fw-bold text-black">Exportation des pointages</h1>
            <p class="text-muted">Choisissez une période puis téléchargez votre fichier.</p>
        </div>

        <!-- Message flash -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show text-center" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Formulaire -->
        <div class="card shadow-lg border-0 rounded-4">
            <div class="card-body p-4">
                <form action="{{ route('points') }}" method="POST">
                    @csrf
                    <input type="hidden" name="format" value="excel">

                    <div class="row g-3">
                        <div class="col-12 col-sm-6">
                            <label for="date_debut" class="form-label fw-semibold">Du</label>
                            <input type="date" class="form-control rounded-pill" id="date_debut" name="date_debut" required>
                        </div>
                        <div class="col-12 col-sm-6">
                            <label for="date_fin" class="form-label fw-semibold">Au</label>
                            <input type="date" class="form-control rounded-pill" id="date_fin" name="date_fin" required>
                        </div>
                    </div>

                    <div class="d-grid mt-4">
                        <button type="submit" class="btn btn-gradient btn-lg rounded-pill">
                            <i class="fas fa-download me-2"></i>Exporter
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Styles -->
<style>
body { background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); }
.text-gradient {
    background: linear-gradient(90deg, #0d6efd, #6610f2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-gradient {
    background: linear-gradient(90deg, #1db5a6, #1db5a6);
    border: 0; color: #fff;
}
.btn-gradient:hover {
    background: linear-gradient(90deg, #0b5ed7, #5a1fd0);
    color: #fff;
}
</style>

<!-- Script auto-remplissage -->
<script>
document.addEventListener('DOMContentLoaded', () => {
    const today = new Date().toISOString().split('T')[0];
    const firstDay = new Date(new Date().getFullYear(), new Date().getMonth(), 1).toISOString().split('T')[0];
    document.getElementById('date_debut').value = firstDay;
    document.getElementById('date_fin').value = today;
});
</script>
@endsection