@extends('layouts.app')

@section('content')
    <div class="container">
        <div>
            <h2 class="pb-2">Ajouter un PAAT</h2>
        </div>

        <div class="alert alert-info" role="alert">
            <h4 class="alert-heading">Information</h4>
            <p>La création d’un nouveau Plan d’Action Achat permet automatiquement de transférer les actions du PAAT de l’année précédente non terminées avec un lissage de leurs performances au prorata du solde restant sur le nouvel exercice.</p>
            <hr>
            <p class="mb-0">Veuillez indiquer la date de début du nouvel exercice ainsi que les commentaires associés au PAAT. La date de fin sera automatiquement mise au 31/12 de cette même année.</p>
        </div>

        @include('layouts.commons.errors')
        @include('layouts.commons.success')

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

            <!-- Date de début -->
            <div class="form-group row">
                <label for="date_debut" class="col-md-4 col-form-label text-md-right required">Date de début</label>
                <div class="col-md-6">
                    <input id="date_debut" type="text" class="form-control" name="date_debut" value="{{ old('date_debut') }}" required>
                </div>
            </div>

            <!-- Date de fin -->
            <div class="form-group row">
                <label for="date_fin" class="col-md-4 col-form-label text-md-right required">Date de fin</label>
                <div class="col-md-6">
                    <input id="date_fin" type="text" class="form-control" name="date_fin" value="{{ old('date_fin') }}" required>
                </div>
            </div>

            <!-- Description -->
            <div class="form-group row">
                <label for="description" class="col-md-4 col-form-label text-md-right required">Description</label>
                <div class="col-md-6">
                    <input id="description" type="text" class="form-control" name="description" value="{{ old('description') }}" required>
                </div>
            </div>

            <!-- Commentaire de cloture -->
            <div class="form-group row">
                <label for="commentaire" class="col-md-4 col-form-label text-md-right">Commentaire pour le directeur des achats pour la cloture de l'exercice N-1</label>
                <div class="col-md-6">
                    <input id="commentaire" type="text" class="form-control" name="commentaire" value="{{ old('commentaire') }}">
                </div>
            </div>

            <div class="form-group row mb-0">
                <div class="col-md-8 offset-md-4">
                    <button type="submit" class="btn btn-outline-success">
                        Sauvegarder
                    </button>
                    <a href="{{ route('paats.index') }}" class="btn btn-outline-warning">Annuler</a>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('unique-js')
    <script>
        $(function() {
            var date_debut = flatpickr('#date_debut', {
                dateFormat: 'd/m/Y',
                // Function appelée lorsque l'on ferme le selecteur de date début
                onClose: function(selectedDates, dateStr) {
                    // Permet de fixer la date minimale de la date de fin à la date de début pour ne pas pouvoir avoir une date de fin < date de début
                    date_fin.set('minDate', dateStr);
                },
            });
            var date_fin = flatpickr('#date_fin', {
                dateFormat: 'd/m/Y',
                // Function appelée lorsque l'on ferme le selecteur de date fin
                onClose: function(selectedDates, dateStr) {
                    // Permet de fixer la date maximale de la date début à la date de fin pour ne pas pouvoir avoir une date de début > date de fin
                    date_debut.set('maxDate', dateStr);
                },
            });
        });
    </script>
@endsection