@extends('layouts.master')

@section('title', 'Ajouter un contrat')
@section('parentPageTitle', 'Formulaire')

@section('page-style')
@include('grh_views.coupures.style_css')
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 40px;
    }

    label {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
    }

    select, input {
        padding: 8px;
        width: 300px;
        margin-bottom: 20px;
    }

    #duree-container, #fpc-container {
        display: none;
    }
</style>
@stop

@section('content')
    @if (session()->has('success'))
        <div class="alert alert-success">
            <center><h5 style="color:black;">{{ session()->get('success') }}</h5></center>
        </div>
    @elseif (session()->has('error'))
        <div class="alert alert-danger">
            <h5 class="text-center" style="color:white;">{{ session()->get('error') }}</h5>
        </div>
    @endif

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

    <a href="{{ url('all_contrats') }}" class="btn btn-success" title="Retour à la liste des contrats">Retour</a>
    <a href="{{ url('list_employes') }}" class="btn btn-success mb-3 ml-3" title="Afficher tous les employés" style="float: right;">Tous les employés</a>

    <center><h3><strong>Enregistrement d'un nouveau contrat</strong></h3></center>

    <form method="POST" action="{{ url('save_contrat') }}" enctype="multipart/form-data">
        @csrf

        <div class="row clearfix">
            <div class="col-lg col-md-12 col-sm-12">
                <div class="card">
                    <div class="body">
                        <!-- Ligne 1: Employé, Date faite, Mode d'entrée -->
                        <div class="row clearfix">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <p><b>Sélectionner un employé <span class="text-danger">*</span></b></p>
                                    <select name="employe_id" class="form-control show-tick ms select2 text-center" data-placeholder="Sélectionner un Employé" required>
                      <option value="" >------------------------Sélectionner ici un employé------------------------</option>
                                        @foreach ($users as $u)
                                            <option value="{{ $u->id }}">{{ $u->matricule }} - {{ $u->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        <!--     <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Date de création <span class="text-danger">*</span></b></p>
                                    <input type="date" class="form-control" name="date_faite" value=""  max="2026-07-27">
                                </div>
                            </div> -->

                           
                        </div>

                        <!-- Ligne 2: Type contrat, Date début, Catégorie contrat -->
                        <div class="row clearfix">
                             <div class="col-md-4">
                                <div class="form-group">
                                <p><b>Date de début du contrat <span class="text-danger">*</span></b></p>
                                    <input type="date" class="form-control" name="dateDebut_contrat"  max="2026-07-27" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="type-contrat"><b>Type de contrat</b></label>
                                    <select name="typecontrat" class="form-control show-tick ms" data-placeholder="Sélectionner" required id="type-contrat">
                                        @foreach ($typecontrats as $u)
                                            <option value="{{ $u->id_type_contrat }}">{{ $u->nom_type_contrat }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                              <p><b>Mode d'entrée</b></p>
                                    <select name="mode_entre" class="form-control show-tick ms select2" data-placeholder="Sélectionner le mode d'entrée" required>
                                        @foreach ($mode_recrutements as $u)
                                            <option value="{{ $u->id_mode_recrutements }}">{{ $u->nom_mode_recrutements }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                           
                        </div>

                        <!-- Ligne 3: Durée du contrat (visible seulement pour CDD) -->
                        <div class="row clearfix" id="duree-container">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="duree"><b>Durée du contrat (en mois)</b></label>
                                    <input type="number" id="duree" placeholder="Ex: 6, 12, 24 mois..." class="form-control" name="duree_contrat">
                                </div>
                            </div>
                        </div>

                        <!-- Ligne 4: Salaire référentiel, Salaire mensuel, Type de FPC -->
                        <div class="row clearfix">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Salaire référentiel <span class="text-danger">*</span></b></p>
                                    <input type="number" class="form-control" name="salaire_referenc" placeholder="Le Salaire référentiel" required min="0">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Salaire mensuel <span class="text-danger">*</span></b></p>
                                    <input type="number" class="form-control" name="salaire_mensuel" placeholder="Le Salaire mensuel ici"  min="0" required="">
                                </div>
                            </div>
                                <div class="col-md-4">
                                <div class="form-group">
                        <p><b>Caisse sociale <span class="text-danger">*</span></b></p>
                <input type="number" class="form-control" name="caisse_sociale" placeholder="Frais de la caisse sociale ici" value="" min="0" required="" max="15000">
                                </div>
                            </div>
                             <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Catégorie de contrat</b></p>
                                    <select name="categ_contrat" class="form-control show-tick ms select2" data-placeholder="Sélectionner" required>
                                        @foreach ($categories_contrats as $u)
                                            <option value="{{ $u->id_categorie_contrats }}">{{ $u->nom_categorie_contrats }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Type de FPC</b></p>
                                    <select name="type_fpc" class="form-select show-tick ms" data-placeholder="Sélectionner" required id="type_fpc">
                                        @foreach ($type_fpc as $t)
                           <option value="{{ $t->id_fpc_types }}" {{ $loop->first ? 'selected' : '' }}>{{ $t->nom_fpc }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                               <!-- Ligne 5: FPC (Taux ou Montant selon le type sélectionné) -->
                        <div class="col-md-4" id="fpc-container">
                                <div class="form-group" id="fpc-field">
                                    <!-- Le contenu sera initialisé par JavaScript au chargement -->
                                </div>
                          
                        </div>

                        </div>

                     

                        <!-- Ligne 6: Diplôme, Pays de formation, Année d'obtention -->
                        <div class="row clearfix">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Diplôme </b></p>
                                    <select class="form-control show-tick ms select2" data-placeholder="Sélectionner" name="diplome_id">
                   <option value="">------- Sélectionner le diplôme -------</option>
                                        @foreach ($diplomes as $u)
                                            <option value="{{ $u->id_diplome }}">{{ $u->nom_diplome }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Pays de formation</b></p>
                                    <select class="form-control show-tick ms select2" data-placeholder="Sélectionner" name="pays_formation">
                                        @foreach ($pays as $p)
                                            <option value="{{ $p->id_pays }}" {{ $p->id_pays == 35 ? 'selected' : '' }}>{{ $p->nom_pays }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <p><b>Année d'obtention</b></p>
                                    <input type="number" class="form-control" name="annee_delivra" placeholder="Année de délivrance" min="1900" max="{{ date('Y') }}">
                                </div>
                            </div>
                        </div>

                        <!-- Ligne 7: Qualification du diplôme -->
                        <div class="row clearfix">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <p><b>Qualification du diplôme</b></p>
                                    <input type="text" class="form-control" name="qualificat_diplo" placeholder="Saisir la qualification/compétence du diplôme">
                                </div>
                            </div>
                        </div>

                        <!-- Bouton de soumission -->
                    <center>    <button class="btn btn-raised btn-primary waves-effect" type="submit">ENREGISTRER LE CONTRAT</button></center>
                    </div>
                </div>
            </div>
        </div>
    </form>
@stop

@section('page-script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gestion de l'affichage de la durée pour les contrats CDD
        const typeContrat = document.getElementById('type-contrat');
        const dureeContainer = document.getElementById('duree-container');

        if (typeContrat) {
            // Initialisation au chargement
            updateDureeVisibility(typeContrat.value);
            
            // Event listener pour les changements
            typeContrat.addEventListener('change', function() {
                updateDureeVisibility(this.value);
            });
        }

        function updateDureeVisibility(selectedValue) {
            // Supposons que l'ID 2 correspond au CDD
            dureeContainer.style.display = (selectedValue === '2') ? 'block' : 'none';
        }

        // Gestion de l'affichage du champ FPC (Taux ou Montant)
        const typeFpc = document.getElementById('type_fpc');
        const fpcContainer = document.getElementById('fpc-container');
        const fpcField = document.getElementById('fpc-field');

        if (typeFpc) {
            // Initialisation au chargement de la page
            updateFpcField(typeFpc.value);
            
            // Afficher le conteneur FPC dès le chargement
            fpcContainer.style.display = 'block';
            
            // Event listener pour les changements
            typeFpc.addEventListener('change', function() {
                updateFpcField(this.value);
            });
        }

        function updateFpcField(selectedValue) {
            let fieldHtml = '';

            if (selectedValue === '1') { // Taux
                fieldHtml = `
                    <label for="taux_fpc"><b>Taux FPC (%)</b></label>
                    <input type="number" id="taux_fpc" placeholder="Taux FPC" class="form-control" name="taux_fpc" value="0" step="0.01">
                `;
            } else if (selectedValue === '2') { // Montant
                fieldHtml = `
                    <label for="montant_fpc"><b>Montant FPC</b></label>
                    <input type="number" id="montant_fpc" placeholder="Montant FPC" class="form-control" name="montant_fpc" value="0" step="0.01">
                `;
            } else {
                fieldHtml = `
                    <label for="taux_fpc"><b>Taux FPC (%)</b></label>
                    <input type="number" id="taux_fpc" placeholder="Taux FPC" class="form-control" name="taux_fpc" value="0" step="0.01" max="20">
                `;
            }

            fpcField.innerHTML = fieldHtml;
        }
    });
</script>
@stop