@extends('layouts.index')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/select2.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.css') }}">
@endsection
@section('contents')
    <div class="row justify-content-center">

        {!! pageTitle("Gestion des personnels") !!}

        <div class="col-lg-12  grid-margin ">
            <div class="card shadow">
                <div class="card-body">
                    <h4 class="card-title">La liste des personnels enregistrés</h4>
                    <div class="d-flex">
                        @if(IsAdmin())
                        <button type="button" class="btn mb-2 btn-outline-secondary">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="displayAll">
                                <label class="custom-control-label" for="displayAll">Afficher tous y compris ceux
                                    suppprimés</label>
                            </div>
                        </button>
                        @endif
                        <button type="button" class="btn mb-2 btn-outline-info ml-auto" id="trigerModalForm">
                            {{-- <i class="fe fe-plus-circle fe-16 "></i> --}}
                            <span class="ml-3 text-bold">Ajouter un nouveau </span>
                        </button>
                    </div>

                    <div class="table-responsive pt-3">
                        <table class="table table-striped table-bordered " id="personalsTable">
                            <thead>
                                <tr class="text-center">
                                    <th> N°</th>
                                    <th> Matricule </th>
                                    <th> Nom</th>
                                    <th> Prénom</th>
                                    <th> Sexe</th>
                                    <th> Bourcier</th>
                                    <th> Action</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal --}}

        <div class="modal fade" id="personalsModalForm" data-backdrop="static" tabindex="-1" role="dialog"
            aria-hidden="true">
            <form class="modal-dialog modal-dialog-centered needs-validation modal-xl" novalidate id="personalsForm"
                role="document">
                <div class="modal-content">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Formulaire de gestion des personnels</h5>
                        <button type="button" class="close resetForm" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-row">
                            <div class="col-md-12 mb-3">
                                <label for="site_id">Selectionner le site</label>
                                <select class="form-control site_id" id="site_id" name="site_id" required>
                                    <option value="">Selectionner le site</option>
                                    @foreach($sites as $site)
                                        <option value="{{ $site->id }}">{{ Str::ucfirst($site->name) }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"> Veuillez selectionner le site </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-4 mb-3">
                                <label for="name">Nom </label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Nom" required>
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="first_name">Prénom </label>
                                <input type="text" class="form-control" name="first_name" id="first_name" placeholder="Prénom"
                                    required>
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="birthday">Date de naissance </label>
                                <input type="date" class="form-control" name="birthday" id="birthday" placeholder="Date de naissance" required>
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="birthplace">Lieu de naissance </label>
                                <input type="text" class="form-control" name="birthplace" id="birthplace" placeholder="Lieu de naissance" required>
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-6 mb-3">
                                <label for="sexe">Selectionner le sexe</label>
                                <select class="form-control sexe" id="sexe" name="sexe" required>
                                    <option value="">Selectionner le sexe</option>
                                    @foreach($sexes as $sexe)
                                        <option value="{{ $sexe }}">{{ Str::ucfirst($sexe) }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"> Veuillez selectionner le sexe </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="marital_status">Situation matrimoniale</label>
                                <select class="form-control marital_status" id="marital_status" name="marital_status" required>
                                    <option value="">Selectionner la situation matrimoniale</option>
                                    @foreach($marital_status as $marital_statu)
                                        <option value="{{ $marital_statu }}">{{ Str::ucfirst($marital_statu) }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"> Veuillez selectionner la situation matrimoniale </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-2 mb-3">
                                <label for="state">Région </label>
                                <input type="text" class="form-control" name="state" id="state" placeholder="Région" required>
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="city">Ville </label>
                                <input type="text" class="form-control" name="city" id="city" placeholder="Ville"
                                    required>
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="address">Adresse </label>
                                <input type="text" class="form-control" name="address" id="address" placeholder="Adresse" required>
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="phone">Numero de téléphone </label>
                                <input type="text" class="form-control" name="phone" id="phone" placeholder="Numero de téléphone">
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                            <div class="col-md-2 mb-3">
                                <label for="email">Email </label>
                                <input type="mail" class="form-control" name="email" id="email" placeholder="Email">
                                <div class="invalid-feedback"> Veuillez renseigner ce champs </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-3 mb-3">
                                <label for="fonction">Selectionner la fonction</label>
                                <select class="form-control fonction" id="fonction" name="fonction" required>
                                    <option value="">Selectionner la fonction</option>
                                    @foreach($fonctions as $fonction)
                                        <option value="{{ $fonction }}">{{ Str::ucfirst($fonction) }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"> Veuillez selectionner la fonction </div>
                            </div>
                            {{-- <div class="col-md-3 mb-3">
                                <label for="ifu">Ifu </label>
                                <input type="mail" class="form-control" name="ifu" id="ifu" placeholder="Ifu">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="cnss">Cnss </label>
                                <input type="mail" class="form-control" name="cnss" id="cnss" placeholder="Cnss">
                            </div> --}}
                            <div class="col-md-3 mb-3">
                                <label for="photo">Photo </label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="photo">
                                    <label class="custom-file-label" for="photo">Choisir la photo </label>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="contact_person">Personne à contacter </label>
                                <input type="text" class="form-control" name="contact_person" id="contact_person" placeholder="Personne à contacter" required>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="phone_contact_person">Numero personne à contacter </label>
                                <input type="mail" class="form-control" name="phone_contact_person" id="phone_contact_person" placeholder="Numero personne à contacter" required>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col-md-12 mb-3 mt-4">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input bourcier" name='bourcier'
                                        id="bourcier">
                                    <label class="custom-control-label" for="bourcier"> Bourcier ?</label>
                                </div>
                            </div>
                            <div class="col-md-12 mb-3" id="div_bourcier" style="display: none">
                                <label for="bourcier_type">Selectionner le type de bource</label>
                                <select class="form-control bourcier_type" id="bourcier_type" name="bourcier_type" >
                                    <option value="">Selectionner le type de bource</option>
                                    @foreach($bourcier_types as $bourcier_type)
                                        <option value="{{ $bourcier_type }}">{{ Str::ucfirst($bourcier_type) }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback"> Veuillez Selectionner le type de bource </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="idpersonals" id="idpersonals" value="0">
                        <button type="submit" class="btn btn-primary me-2">Enrégistrer</button>
                        <button class="btn btn-danger light resetForm" data-dismiss="modal" type="reset">Annuler</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('js')
    <!-- plugin js for this page -->
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/js/modules/personal.js') }}"></script>
@endsection()