@extends('main.main_back')
@section('style-up')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">
@endsection
@section('title')
    Ajouter un Employé
@endsection

@section('pagination')
    Employés
@endsection

@section('content')
<div class="row page-titles">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('get.backend.list.employee') }}">Liste</a></li>
        <li class="breadcrumb-item active"><a href="javascript:void(0)">Ajouter un Employé </a></li>
    </ol>
</div>
<div class="d-flex align-items-center mb-4 flex-wrap justify-content-between">
    <a href="javascript:voiud(0);">
        <div class="card p-3 me-2 mb-0 filter">
            <i class="flaticon-381-user"></i>
        </div>
    </a>
    <a class="btn btn-primary btn-sm" href="{{ route('get.backend.list.employee') }}">
        Liste
    </a>
</div>
<!-- row -->
<div class="row">
    <!-- --column-- -->
    <div class="col-xl-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Enregistrements des informations</h4>
            </div>
            <div class="card-body">
                <div class="basic-form">
                    <form id="add_employee" method="post" action="{{ route('post.backend.add.employee') }}" onsubmit="SendDataAnimation(event,'add_employee')">
                        <div class="row">
                            <div class="col-sm-12 mb-3">
                                <label class="form-label">Genre</label>
                                <div class="col-md-2 d-flex align-items-center justify-content-between pt-3">
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="radio" class="form-check-input" value="MASCULIN" id="customCheckBox5" name="gender" checked>
                                        <label class="form-check-label" for="customCheckBox5">MASCULIN</label>
                                    </div>
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="radio" class="form-check-input" value="FEMININ" id="customCheckBox6" name="gender">
                                        <label class="form-check-label" for="customCheckBox6">FEMININ</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Nom</label>
                                <input type="text" class="form-control" id="last_name" name="last_name" placeholder="MMMR">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Prénom</label>
                                <input type="text" class="form-control" id="first_name" name="first_name" placeholder="MMMR">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">No Téléphone</label>
                                <input type="text" class="form-control" id="phone" name="phone" placeholder="659158486">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Adresse</label>
                                <input type="text" class="form-control" id="address" name="address" placeholder="MANGUIERS">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Date de Naissance</label>
                                <input type="date" class="form-control" id="birth" name="birth" placeholder="2000-07-27" max="{{ date('Y-m-d') }}">
                            </div>
                            <div class="col-sm-4 mb-3">
                                <label class="form-label">Lieu de Naissance</label>
                                <input type="text" class="form-control" id="birth_place" name="birth_place" placeholder="YAOUNDE">
                            </div>
                            <div class="col-sm-3 mb-3">
                                <label class="form-label">Salaire</label>
                                <input type="number" class="form-control" id="salary" name="salary" placeholder="200000">
                            </div>
                            <div class="col-sm-3 mb-3">
                                <label class="form-label">Document</label>
                                <select class="selectpicker nice-select default-select form-control wide mh-auto" name="document">
                                    <option value="CNI">CNI</option>
                                    <option value="RECEPISSE">RECEPISSE</option>
                                    <option value="PASSEPORT">PASSEPORT</option>
                                    <option value="PERMIS DE CONDUIRE">PERMIS DE CONDUIRE</option>
                                </select>
                            </div>
                            <div class="col-sm-3 mb-3">
                                <label class="form-label">No Document</label>
                                <input type="text" class="form-control" name="document_id" placeholder="500354578">
                            </div>
                            <div class="col-sm-3 mb-3">
                                <label class="form-label">Date d'expiration Document</label>
                                <input type="date" class="form-control" name="date_exp">
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label">Poste</label>
                                <select class="form-control select2" name="post">
                                    <option value="">Selectionner un Poste</option>
                                    @if(isset($posts) && COUNT($posts) > 0)
                                        @foreach ($posts as $key => $value)
                                            <option value="{{ $value->id }}">
                                                {{ $value->po_name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label">Agence</label>
                                <select class="form-control select2" name="agency">
                                    <option value="">Selectionner l'agence</option>
                                    @if(isset($agencies) && COUNT($agencies) > 0)
                                        @foreach ($agencies as $key => $value)
                                            <option value="{{ $value->id }}">
                                                {{ $value->ag_name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label">Ajouter ses données de connexion</label>
                                <div class="col-md-4 d-flex align-items-center justify-content-between pt-3">
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="radio" class="form-check-input check_login" value="NON" checked id="customCheckBox1" name="check" onchange="showLogin(this.value)">
                                        <label class="form-check-label" for="customCheckBox1">NON</label>
                                    </div>
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="radio" class="form-check-input check_login" value="OUI" id="customCheckBox2" name="check" onchange="showLogin(this.value)">
                                        <label class="form-check-label" for="customCheckBox2">OUI</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3 mb-3 box_check_login" id="box_check_login" style="display: none">
                                <label class="form-label">Role</label>
                                <select class="form-control select2" name="role">
                                    <option value="">Selectionner</option>
                                    @if(isset($roles) && COUNT($roles) > 0)
                                        @foreach ($roles as $key => $value)
                                            <option value="{{ $value->id }}">
                                                {{ $value->name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-sm-3 mb-3 box_check_login" style="display: none">
                                <label class="form-label">Mot de passe</label>
                                <input type="password" name="password" class="form-control border-end-0" id="password" placeholder="Admin237">
                                <span onclick="return tooglePassword('password','created-password')" class="fa fa-fw fa-eye field-icon created-password cursor-pointer"></span>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Image document</label>
                                    <input type="file" class="form-control" name="image_doc" id="image_doc_input" accept=".png,.tif,.jpg, .jpeg, .webp">
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Aperçu Image</label>
                                    <div id="image_preview" style="border: 1px solid #ddd; padding: 10px;">
                                        <img id="preview_img" src="" alt="Image Preview" style="max-width: 100%; height: 150px; display: none;">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Libellé</label>
                                    <input type="text" class="form-control" name="label" id="label" placeholder="DOSSIER DE LA DEMANDE D'EMPLOI">
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Dossier De la demande d'emploi</label>
                                    <input type="file" class="form-control" name="file_folder" id="file_folder" accept=".pdf">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">No de Compte (BanQue)</label>
                                    <input type="number" class="form-control" name="no_account" id="no_account" placeholder="1452748501">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Clé du compte (BanQue)</label>
                                    <input type="number" class="form-control" name="key_account" id="key_account" placeholder="10254">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Montant ration</label>
                                    <input type="number" class="form-control" name="amount_ration" id="amount_ration" placeholder="25000">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">No Cnps</label>
                                    <input type="number" class="form-control" name="no_cnps" id="no_cnps" placeholder="14520255">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">No Nui</label>
                                    <input type="text" class="form-control" name="no_nui" id="no_nui" placeholder="145255400">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">No Interne</label>
                                    <input type="text" class="form-control" name="no_intern" id="no_intern" placeholder="145EL2540">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Service</label>
                                    <input type="text" class="form-control" name="service" id="service" placeholder="COMPATBLE">
                                </div>
                            </div>
                            <div class="col-sm-12 mb-4">
                                <button type="submit" class="btn btn-primary btn_submit mt-3">Enregistrer</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!----/column-- -->
</div>
<!-- /row -->

@endsection
@section("script-up")
<script src="{{ asset('vendor/select2/js/select2.full.min.js') }}"></script>
@endsection
@section("script-down")
<script>
    function showLogin(value){
        if(value == "OUI"){
            $('.box_check_login').show();
        }else{
            $('.box_check_login').hide();
        }
    }
    $(document).ready(function() {
        $('#image_doc_input').on('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview_img').attr('src', e.target.result).show();
                };
                reader.readAsDataURL(file);
            }
        });
    })
</script>
@endsection