@extends('dashboard.layouts.app')

@section('title', 'Créer une activité PTA - UAC eservices')

@section('page-title', 'Nouvelle activité PTA')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('pta.activites.index') }}">PTA</a></li>
    <li class="breadcrumb-item active" aria-current="page">Créer</li>
@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Créer une nouvelle activité</h4>
                <p class="text-muted">Définissez les détails de l'activité du Plan de Travail Annuel</p>

                <form action="{{ route('pta.activites.store') }}" method="POST">
                    @csrf

                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="titre" class="form-label">Titre de l'activité <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('titre') is-invalid @enderror"
                                    id="titre" name="titre" value="{{ old('titre') }}" required>
                                @error('titre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror"
                                        id="description" name="description" rows="4">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="date_debut_prevue" class="form-label">Date de début prévue <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('date_debut_prevue') is-invalid @enderror"
                                    id="date_debut_prevue" name="date_debut_prevue"
                                    value="{{ old('date_debut_prevue') }}" required>
                                @error('date_debut_prevue')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="date_fin_prevue" class="form-label">Date de fin prévue <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('date_fin_prevue') is-invalid @enderror"
                                    id="date_fin_prevue" name="date_fin_prevue"
                                    value="{{ old('date_fin_prevue') }}" required>
                                @error('date_fin_prevue')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="budget_alloue" class="form-label">Budget alloué (XOF)</label>
                                <div class="input-group">
                                    <input type="number" class="form-control @error('budget_alloue') is-invalid @enderror"
                                        id="budget_alloue" name="budget_alloue" step="0.01" min="0" max="999999999999.99"
                                        value="{{ old('budget_alloue') }}" placeholder="0.00">
                                    <span class="input-group-text">XOF</span>
                                </div>
                                <small class="form-text text-muted">Budget prévu pour cette activité (optionnel)</small>
                                @error('budget_alloue')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="alert alert-info">
                                <i class="mdi mdi-information"></i>
                                <strong>Information :</strong> Les tâches et dépenses seront ajoutées après la création de l'activité.
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('pta.activites.index') }}" class="btn btn-secondary">
                            <i class="mdi mdi-arrow-left"></i> Annuler
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="mdi mdi-content-save"></i> Créer l'activité
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------- -->
<!-- End PAge Content -->
<!-- -------------------------------------------------------------- -->
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Validation côté client pour les dates
    const dateDebut = document.getElementById('date_debut_prevue');
    const dateFin = document.getElementById('date_fin_prevue');

    function validateDates() {
        const startDate = new Date(dateDebut.value);
        const endDate = new Date(dateFin.value);
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        // La date de début doit être aujourd'hui ou dans le futur
        if (startDate < today) {
            dateDebut.setCustomValidity('La date de début doit être aujourd\'hui ou dans le futur');
        } else {
            dateDebut.setCustomValidity('');
        }

        // La date de fin doit être après la date de début
        if (endDate <= startDate) {
            dateFin.setCustomValidity('La date de fin doit être après la date de début');
        } else {
            dateFin.setCustomValidity('');
        }
    }

    dateDebut.addEventListener('change', validateDates);
    dateFin.addEventListener('change', validateDates);
});
</script>
@endpush