@extends('layouts.app')

@section('content')
<div class="card w-3/5">
    <div class="card-head">
        <div class="font-semibold text-cyan-900 uppercase">
            <i class="fal fa-address-book mr-1"></i>
            Exercice comptable
        </div>
        <div>
            <a id="btnNew" href="#" title="Ajouter un nouvel exercice">
                <i class="fal fa-plus mr-2"></i>
            </a>
        </div>
    </div>
    <div class="card-body">
        <x-alert></x-alert>
        @if($errors->any('exo'))
            <div class="flex justify-between alert border-orange-400 bg-orange-100 text-orange-800 border rounded-md px-5 py-2 mb-5 shadow-md">
                {{$errors->first('exo')}}
            </div>
        @endif
        <div class="card-content">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th class="text-center">ID</th>
                        <th class="text-center">Début période</th>
                        <th class="text-center">Fin période</th>
                        <th class="text-center">Statut</th>
                        <th></th>
                    </tr>
                </thead>
                @php $i=0 @endphp
                <tbody style="vertical-align: top">
                    @foreach ($exercices as $exo)
                    @php $i++ @endphp
                    <tr>
                        <td>
                            {{$i}}
                        </td>
                        <td class="text-center">{{ $exo->id_exo }}</td>
                        <td class="text-center">{{ (new DateTime($exo->debut_exo))->format('d/m/Y') }}</td>
                        <td class="text-center">{{ (new DateTime($exo->fin_exo))->format('d/m/Y') }}</td>
                        <td class="text-center">{{ $exo->statut }}</td>
                        <td class="text-right">
                            <a href="{{route('cp.exo.show', $exo->id_exo)}}" class="mr-2 text-orange-400 hover:text-orange-500">
                                <i class="fad fa-folder-open fa-lg"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                    @if($i == 0)
                        <tr>
                            <td colspan="9" class="text-center">
                                <span class="text-gray-800">La liste est vide</span>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>
<x-form-modal>
    <x-slot name="title">
        Nouvel exercice
    </x-slot>
    <form id="frmExo" method="post" action="{{route('cp.exo.store')}}" class="w-full">
        @csrf
        <div class="w-full space-y-3">
            <div>
                <x-label>
                    Nouvelle année
                </x-label>
                <div>
                    <input type="text" name="exo" id="exo" value="{{old('exo')}}" class="form-control" placeholder="Saisir la nouvelle année">
                </div>
            </div>
            <div>
                <input type="checkbox" name="import" id="import" class="checkbox">
                Utiliser les données de l'exercice précédent pour solde d'ouverture.
            </div>
        </div>
    </form>
    <x-slot name="footer">
        <button id="btnValider" class="btn btn-warning">
            <i class="fal fa-check mr-1"></i>
            Valider
        </button>
        <button id="btnNo" class="btn btn-dark btn-modal-close">
            <i class="fal fa-check mr-2"></i>
            Annuler
        </button>
    </x-slot>
</x-form-modal>


@endsection

@section('script')
    <script>
        document.getElementById('btnNew').addEventListener('click', function(e){
            e.preventDefault();
            let eltModal = document.querySelector('.modal');
            eltModal.classList.remove('hidden');
            eltModal.classList.add('flex');
        })
        document.getElementById('btnValider').addEventListener('click', function(){
            document.getElementById('frmExo').submit()
        })
    </script>
@endsection