@extends('layouts.app')

@section('title', 'Points - Call Center Admin')
@section('page-title', 'Points des calls')

@section('content')

    <!-- Content -->
    <div class="container-fluid py-4">
        {{-- Messages de succès/erreur --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

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

        {{-- Formulaire d'export --}}
        <form action="{{ route('points.export') }}" method="GET">
            @csrf
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label for="export_type" class="form-label">Type d'export</label>
                    <select name="export_type" id="export_type"
                        class="form-select @error('export_type') is-invalid @enderror" required>
                        <option value="" disabled selected>-- Choisir --</option>
                        <option value="whatsapp">WhatsApp</option>
                        <option value="call">Call General</option>
                        <option value="newbases">Nouvelle Base</option>
                        <option value="qc">Qc Ancienne Base</option>
                        <option value="qc_newbases">Qc Nouvelle Base</option>
                        <option value="para_qc">Para Qc</option>
                        <option value="checking">Checking Base</option>
                    </select>
                    @error('export_type')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-3">
                    <label for="startDate" class="form-label">Date début</label>
                    <input type="date" name="startDate" id="startDate"
                        class="form-control @error('startDate') is-invalid @enderror" max="{{ date('Y-m-d') }}" required>
                    @error('startDate')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-3">
                    <label for="endDate" class="form-label">Date fin</label>
                    <input type="date" name="endDate" id="endDate"
                        class="form-control @error('endDate') is-invalid @enderror" max="{{ date('Y-m-d') }}" required>
                    @error('endDate')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>


                <div class="col-md-3">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-file-export"></i> Exporter
                    </button>
                </div>
            </div>
        </form>
    </div>

@endsection

@push('scripts')
    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            const start = new Date(document.getElementById('startDate').value);
            const end = new Date(document.getElementById('endDate').value);
            const diff = (end - start) / (1000 * 60 * 60 * 24); // différence en jours

            if (diff > 1) {
                e.preventDefault();
                alert('La période ne peut pas dépasser 1 journée.');
                return;
            }

            if (end < start) {
                e.preventDefault();
                alert('La date de fin doit être supérieure ou égale à la date de début.');
                return;
            }
        });

        // Assure que endDate ne peut pas être avant startDate
        document.getElementById('startDate').addEventListener('change', function() {
            document.getElementById('endDate').min = this.value;
        });
    </script>
@endpush