@extends('layouts.base')
@section('title','Nouvelle session de tirage')

@section('style')
<style>
    /* Amélioration du formulaire */
    .form-label{font-weight:600;color:#495057;margin-bottom:.5rem}
    .form-select,.form-control{border:1px solid #ced4da;border-radius:.375rem}
    .form-select:focus,.form-control:focus{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}
    .card-header{background:#f8f9fa;border-bottom:1px solid #dee2e6;font-weight:600;color:#495057}
    /* Espacement des sections */
    .my-2{margin-top:.75rem!important;margin-bottom:.75rem!important}
    .hint{font-size:.8rem;color:#6c757d;margin-top:.25rem}
</style>
@endsection

@section('content')
<div class="container-fluid px-2 px-md-3" id="sessionCreatePage">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 fw-bold text-dark">Nouvelle session de tirage</h1>
                    <p class="text-muted mb-0">Enregistrement des données de base du tirage</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body mt-3">

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <form id="sessionForm" action="{{ route('evalidation.session.store') }}" method="POST" novalidate>
                        @csrf

                        <!-- Champs cachés pour les civilités -->
                        <input type="hidden" id="animator_civility" name="animator_civility" value="">
                        <input type="hidden" id="machinist_civility" name="machinist_civility" value="">
                        <input type="hidden" id="person_at_pear_civility" name="person_at_pear_civility" value="">

                        <div class="row g-3">
                            <div class="col-12 col-md-6 my-2">
                                <div class="row g-2">
                                    <div class="col-6">
                                        <label for="game_type_id" class="form-label">Type de jeu</label>
                                        <select id="game_type_id" name="game_type_id" class="form-select" required>
                                            <option value="" class="text-muted">Sélectionner</option>
                                            @if(isset($gameTypes) && $gameTypes->count() > 0)
                                                @foreach($gameTypes as $gameType)
                                                    <option value="{{ $gameType->id }}">{{ $gameType->name }}</option>
                                                @endforeach
                                            @else
                                                <option value="" disabled>Aucun type de jeu disponible</option>
                                            @endif
                                        </select>
                                        <div class="invalid-feedback" id="game_type_id_error"></div>
                                    </div>
                                    <div class="col-6">
                                        <label for="session_number" class="form-label">Numéro de session</label>
                                        <input type="text" class="form-control" id="session_number"
                                               name="session_number" placeholder="Ex : 137/2025" required>
                                        <div class="invalid-feedback" id="session_number_error"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 my-2">
                                <div class="row g-2">
                                    <div class="col-6">
                                        <label for="drawing_date" class="form-label">Date du tirage</label>
                                        <input type="date" class="form-control" id="drawing_date" name="drawing_date"
                                               value="{{ date('Y-m-d') }}" required readonly>
                                        <div class="invalid-feedback" id="drawing_date_error"></div>
                                    </div>
                                    <div class="col-6">
                                        <label for="drawing_time" class="form-label">Heure du tirage</label>
                                        <input type="time" class="form-control" id="drawing_time" name="drawing_time"
                                               value="{{ now()->format('H:i') }}"
                                               min="{{ now()->subHour()->format('H:i') }}"
                                               max="{{ now()->addHour()->format('H:i') }}"
                                               title="Heure modifiable dans un intervalle de ±1h" required>
                                        <div class="hint">Intervalle autorisé : ±1h</div>
                                        <div class="invalid-feedback" id="drawing_time_error"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 my-2">
                                <h6 class="mb-2" style="font-size:14px;">Animateur / Animatrice</h6>
                                <div class="row g-2">
                                    <div class="col-4 col-md-3">
                                        <select id="animatorCivility" class="form-select" required>
                                            <option value="M.">M.</option>
                                            <option value="Mlle">Mlle</option>
                                            <option value="Mme">Mme</option>
                                        </select>
                                    </div>
                                    <div class="col-8 col-md-9">
                                        <input type="text" class="form-control" id="animatorName" name="animator_name"
                                               placeholder="Nom et prénom">
                                        <div class="invalid-feedback" id="animator_name_error"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 my-2">
                                <h6 class="mb-2" style="font-size:14px;">Machiniste</h6>
                                <div class="row g-2">
                                    <div class="col-4 col-md-3">
                                        <!-- Correction ID: machinistCivility -->
                                        <select id="machinistCivility" class="form-select" required>
                                            <option value="M.">M.</option>
                                            <option value="Mlle">Mlle</option>
                                            <option value="Mme">Mme</option>
                                        </select>
                                    </div>
                                    <div class="col-8 col-md-9">
                                        <!-- Correction ID: machinistName -->
                                        <input type="text" class="form-control" id="machinistName" name="machinist_name"
                                               placeholder="Nom et prénom">
                                        <div class="invalid-feedback" id="machinist_name_error"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 my-2">
                                <h6 class="mb-2" style="font-size:14px;">Personne à la poire</h6>
                                <div class="row g-2">
                                    <div class="col-4 col-md-3">
                                        <select id="pearPersonCivility" class="form-select" required>
                                            <option value="M.">M.</option>
                                            <option value="Mlle">Mlle</option>
                                            <option value="Mme">Mme</option>
                                        </select>
                                    </div>
                                    <div class="col-8 col-md-9">
                                        <input type="text" class="form-control" id="pearPersonName"
                                               name="person_at_pear" placeholder="Nom et prénom">
                                        <div class="invalid-feedback" id="person_at_pear_error"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <button type="submit" class="btn btn-primary">Créer la session</button>
                                </div>
                            </div>
                        </div>
                    </form>

                </div> <!-- /card-body -->
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/evalidation/session-create.js') }}" defer></script>
@endsection