@extends('master.master_front')
@section('title')
    ONM - Enrolement des Médecins de L'Ordre Nationale du Congo
@endsection
@section('styles-up')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/css/intlTelInput.css">
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
@endsection
@section('styles')
<style>
    .kbw-signature {
        width: 100%;
        height: 200px;
        /* border: 1px solid red !important; */
        background: white !important;
    }
    #signature{
        width: 100% !important;
        height: 250px;
        background: white !important;
        border-radius: 10px;
    }
    .form-control{
        height: 40px !important;
    }
    @media only screen and (max-width: 767px) {
        .btn_submit{
            padding: 1.2rem;
        }
        .form-control{
            height: 40px !important;
        }
        .select2-container .select2-selection--single {
            height: 40px !important;
        }
    }
</style>
@endsection

@section('content')
<div class="page-content">
	<!--breadcrumb-->
	<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
		<div class="breadcrumb-title pe-3">RDPC</div>
		<div class="ps-3">
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb mb-0 p-0">
					<li class="breadcrumb-item">Rassemblement Démocratique du Peuple Camerounais </li>
					<li class="breadcrumb-item active" aria-current="page">Enrolement des membres du RDPC</li>
				</ol>
			</nav>
		</div>

	</div>
	<!--end breadcrumb-->

	<!--start stepper two-->
	<h6 class="text-uppercase">ENROLEMENT DES MEMMBRES</h6>
	<hr>
	<div id="stepper2" class="bs-stepper">
		<div class="card">
			<div class="card-header">
				<div class="d-lg-flex flex-lg-row align-items-lg-center justify-content-lg-between" role="tablist">
					<div class="step" data-target="#test-nl-1">
						<div class="step-trigger" role="tab" id="stepper2trigger1" aria-controls="test-nl-1">
							<div class="bs-stepper-circle"><i class='bx bx-user fs-4'></i></div>
							<div class="">
								<h5 class="mb-0 steper-title">Informations personnelles</h5>
								<p class="mb-0 steper-sub-title">Details des informations</p>
							</div>
						</div>
					</div>
					<div class="bs-stepper-line"></div>
					<div class="step" data-target="#test-nl-2">
						<div class="step-trigger" role="tab" id="stepper2trigger2" aria-controls="test-nl-2">
							<div class="bs-stepper-circle"><i class='bx bx-map fs-4'></i></div>
							<div class="">
								<h5 class="mb-0 steper-title">Lieux</h5>
								<p class="mb-0 steper-sub-title">Details</p>
							</div>
						</div>
					</div>
					<div class="bs-stepper-line"></div>
					<div class="step" data-target="#test-nl-3">
						<div class="step-trigger" role="tab" id="stepper2trigger3" aria-controls="test-nl-3">
							<div class="bs-stepper-circle"><i class='bx bxs-file fs-4'></i></div>
							<div class="">
								<h5 class="mb-0 steper-title">Document</h5>
								<p class="mb-0 steper-sub-title">Details des Document</p>
							</div>
						</div>
					</div>
					{{-- <div class="bs-stepper-line"></div>
					<div class="step" data-target="#test-nl-4">
						<div class="step-trigger" role="tab" id="stepper2trigger4" aria-controls="test-nl-4">
							<div class="bs-stepper-circle"><i class='bx bx-briefcase fs-4'></i></div>
							<div class="">
								<h5 class="mb-0 steper-title">Work Experience</h5>
								<p class="mb-0 steper-sub-title">Experience Details</p>
							</div>
						</div>
					</div> --}}
				</div>
			</div>
			<div class="card-body">
				<div class="bs-stepper-content">
					<form id="add_doctor" method="post" action="{{ route('post.backend.add.doctor') }}" onsubmit="SendDataAnimation(event,'add_doctor')">
						<div id="test-nl-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger1">
							<h5 class="mb-4">Vos informations personnelles</h5>
							{{-- <p class="mb-4">Enter your personal information to get closer to copanies</p> --}}
							<div class="row g-3">
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Sexe</label>
                                    <select class="form-control select2" name="sexe">
                                        <option value="">Sexe</option>
                                        <option value="MASCULIN">MASCULIN</option>
                                        <option value="FEMININ">FEMININ</option>
                                    </select>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Nominatif</label>
                                    <select class="form-control select2" name="nominatif">
                                        <option value="">Nominatif</option>
                                        <option value="Pr">Professeur</option>
                                        <option value="Dr">Docteur</option>
                                    </select>
                                </div>
                                {{-- <div class="col-sm-4 mb-3">
                                    <label class="form-label">Spécialité</label>
                                    <input type="text" class="form-control" name="specialite" placeholder="CHIRUGIEN">
                                </div> --}}
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Nom</label>
                                    <input type="text" class="form-control" tabindex="-1" name="lastname" placeholder="MBA">
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="form-label">Prenom</label>
                                    <input type="text" class="form-control" name="firstname" placeholder="MIGUEL RODRIGUE">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Spécialité</label>
                                    <input type="text" class="form-control" name="specialite" placeholder="CHIRUGIEN">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Numero Telephone</label> <br>
                                    <input type="text" class="form-control phone-call" name="phone" id="phone">
                                    <span id="phoneError" class="text-danger"></span>
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Numero Telephone</label> <br>
                                    <input type="text" class="form-control phone-call" name="phone_urgence" id="phone_urgence">
                                    <span id="phoneUrgenceError" class="text-danger"></span>
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Adresse</label>
                                    <input type="text" class="form-control" 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" name="birth" max="{{ date('Y-m-d') }}" placeholder="Date de naissance">
                                </div>
                                <div class="col-sm-4 mb-3">
                                    <label class="form-label">Lieu de Naissance</label>
                                    <input type="text" class="form-control" name="place_birth" placeholder="Lieu de naissance">
                                </div>

								<div class="col-12 col-lg-6">
									<button class="btn btn-light px-4" onclick="stepper2.next(event.preventDefault())">Suivant<i class='bx bx-right-arrow-alt ms-2'></i></button>
								</div>
							</div>
							<!---end row-->
						</div>
						<div id="test-nl-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger2">
							<h5 class="mb-4">Plus de details sur la Nationalité</h5>
							{{-- <p class="mb-4">Enter Your Account Details.</p> --}}
							<div class="row g-3">
								<div class="col-sm-3 mb-3">
                                    <label class="form-label">Pays d'Origine</label>
                                    <select class="form-control select2 text-uppercase" name="country" id="country">
                                        <option value="">Pays d'origine</option>
                                        @if(isset($countries) && COUNT($countries) > 0)
                                            @foreach ($countries as $key => $value)
                                                <option value="{{ $value->cty_name_en  }}">
                                                    {{ $value->cty_name_en }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Region</label>
                                    <select class="form-control wide mh-auto select2" name="region" onchange="searchData(this.value,'{{ route('get.backend.departement.by.region') }}','departement')">
                                        <option value="">Selectionner une region</option>
                                        @if(isset($regions) && COUNT($regions) > 0)
                                            @foreach ($regions as $key => $r)
                                                <option value="{{ $r->reg_id }}">
                                                    {{ $r->reg_name }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Departement</label>
                                    <select class="form-control select2" id="departement" name="departement">
                                        <option value="">Selectionner un departement</option>
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Arrondissement</label>
                                    <select class="form-control wide mh-auto select2" id="arrondissement" name="arrondissement">
                                        <option value="">Selectionner un Arrondissement</option>
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Document</label>
                                    <select class="form-control select2" name="document">
                                        <option value="">Document</option>
                                        <option value="CARTE D'IDENTE NATIONALE">CARTE D'IDENTE NATIONALE</option>
                                        <option value="PASSEPORT">PASSEPORT</option>
                                        <option value="PERMIS DE CONDUIRE">PERMIS DE CONDUIRE</option>
                                        <option value="CARTE DE SEJOUR">CARTE DE SEJOUR</option>
                                        <option value="PAS DE DOCUMENT">PAS DE DOCUMENT</option>
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">N° du Document</label>
                                    <input type="text" class="form-control" id="document_id" name="document_id" placeholder="N° du Document">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Statut matrimonial</label>
                                    <select class="form-control select2" name="statut_mat">
                                        <option value="">Statut matrimonial</option>
                                        <option value="MARIE(E)">MARIE(E)</option>
                                        <option value="CELIBATAIRE">CELIBATAIRE</option>
                                    </select>
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Nombre d'enfants</label>
                                    <input type="text" class="form-control" id="childs" name="childs" placeholder="Nombre d'enfants">
                                </div>
								<div class="col-12">
									<div class="d-flex align-items-center gap-3">
										<button class="btn btn-outline-light px-4" onclick="stepper2.previous(event.preventDefault())"><i class='bx bx-left-arrow-alt me-2'></i>Précédent</button>
										<button class="btn btn-light px-4" onclick="stepper2.next(event.preventDefault())">Suivant<i class='bx bx-right-arrow-alt ms-2'></i></button>
									</div>
								</div>
							</div>
							<!---end row-->
						</div>
						<div id="test-nl-3" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger3">
							<h5 class="mb-4">Importer vos documents</h5>
							{{-- <p class="mb-4">Inform companies about your education life</p> --}}
							<div class="row g-3">
								<div class="col-sm-3 mb-3">
                                    <label class="form-label">Demande D'inscription (PDF)</label>
                                    <input type="file" class="form-control" id="demande" name="demande" accept=".pdf">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Certificat de nationalité (PDF)</label>
                                    <input type="file" class="form-control" id="certificat" name="certificat" accept=".pdf">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Cassier Judiciaire (PDF)</label>
                                    <input type="file" class="form-control" id="cassier" name="cassier" accept=".pdf">
                                </div>
                                <div class="col-sm-3 mb-3">
                                    <label class="form-label">Diplomes Certifiés (ZIP)</label>
                                    <input type="file" class="form-control" id="diplome" name="diplome" accept=".zip">
                                </div>
                                <div class="col-sm-4 mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="confidentialite1" id="flexCheckCheckedOne" autocomplete="off">
                                        <label class="form-check-label" for="flexCheckCheckedOne">Je demande mon inscription au Tableau de l'Ordre des Médecins du Congo</label>
                                    </div>
                                </div>
                                <div class="col-sm-4 mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="confidentialite2" id="flexCheckCheckedTwo" autocomplete="off">
                                        <label class="form-check-label" for="flexCheckCheckedTwo">Je jure sur l'honneur e les déclarations ci-dessus sont conformes à la vérité</label>
                                    </div>
                                </div>
                                <div class="col-sm-4 mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="confidentialite3" id="flexCheckCheckedTree" autocomplete="off">
                                        <label class="form-check-label" for="flexCheckCheckedTree">J'accepte les termes et conditions rélatifs aux réglements intérieur de l'Ordre des Médecins du Congo</label>
                                    </div>
                                </div>

                                <div class="col-sm-6 mb-3">
                                    <label class="col-lg-3 col-form-label">
                                        Image <span class="text-danger">*</span>
                                    </label>
                                    <div class="text-center">
                                        <label class="fileContainer" for="image">
                                            <i class="bx bx-user text-white text-center" style="font-size:80px"></i>
                                            <input type="file" name="image" id="image" class="form-control upload__inputfile d-none" data-max_length="20" accept=".png,.tif,.jpg, .jpeg, .webp"><br>
                                            <em>Cliquer ici pour selectionner la photo</em>
                                             {{-- <span>Choose form Computer</span> --}}
                                         </label>
                                         <div class="form-group" id="preview_img" style="display:none;"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <label class="" for="">Votre Signature:</label>
                                    <canvas id="signature"></canvas>
                                    <br>
                                    <button id="clear" class="btn btn-danger btn-sm">Effacer</button>
                                </div>
								<div class="col-12">
									<div class="d-flex align-items-center gap-3">
										<button class="btn btn-outline-light btn_submit" onclick="stepper2.previous(event.preventDefault())"><i class='bx bx-left-arrow-alt me-2'></i>Précédent</button>
										{{-- <button class="btn btn-light" onclick="stepper2.next(event.preventDefault())">Suivant<i class='bx bx-right-arrow-alt ms-2'></i></button> --}}
                                        <button type="submit" id="btn_add_doctor" class="btn btn-success px-4 btn_submit">Enregistrer</button>
									</div>
								</div>
							</div>
							<!---end row-->
						</div>
                        <input type="hidden" name="frontend" value="frontend">
					</form>
				</div>
			</div>
		</div>
	</div>
	<!--end stepper two-->
</div>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>

<script>

    function searchData(value,url,div) {
        //var value = $("#matricule").val();
        //alert(value);
        $.ajax({
            type: "get",
            url: url,
            data: {
                search: value,
            },
            success: function (response) {
                console.log(response);
                if (response.code == 200) {
                    var options = '';
                    var j = response.data;
                    options += '<option value="">Selectionner un departement</option>';
                    for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].dp_id + '">' + j[i].dp_name.toUpperCase() + '</option>';
                        console.log(options);
                    }
                    $('#'+div).html(options);
                } else {
                    $('#'+div).html($("<option></option>").attr("value", "").text(response.message.toUpperCase()));
                }
            },
        });
    }
    $(document).ready(function () {
        $('.upload__inputfile').on('change', function(){
            var data = $(this)[0].files;
            //alert(data)
            $.each(data, function(index, file){
                var filename=file.name;
                if(/(\.|\/)(gif|jpe?g|png)$/i.test(file.type)){
                    var fRead = new FileReader();
                    fRead.onload = (function(file){
                    return function(e) {
                    var img = $('<img/>').addClass('thumb').attr('src', e.target.result) .width(100)
                    .height(100).css("margin","3px","border-radius","10px"); //create image element
                    $('#preview_img').html(img).show();
                    };
                    })(file);
                    fRead.readAsDataURL(file); //URL representing the file's data.
                }
            });
        });
        $("#show_hide_password a").on('click', function (event) {
            event.preventDefault();
            if ($('#show_hide_password input').attr("type") == "text") {
                $('#show_hide_password input').attr('type', 'password');
                $('#show_hide_password i').addClass("bx-hide");
                $('#show_hide_password i').removeClass("bx-show");
            } else if ($('#show_hide_password input').attr("type") == "password") {
                $('#show_hide_password input').attr('type', 'text');
                $('#show_hide_password i').removeClass("bx-hide");
                $('#show_hide_password i').addClass("bx-show");
            }
        });
        // try {
        //     var sig = $('#sig').signature({
        //         syncField: '#signature64',
        //         syncFormat: 'PNG',
        //         touchEvents: {
        //             touchstart: function(event) {
        //                 //alert('Tactile start event detected!');
        //             },
        //             touchmove: 'touchmove',
        //             touchend: 'touchend'
        //         }
        //     });
        //     console.log("Initialization successful");
        // } catch (error) {
        //     console.error("Initialization failed:", error);
        // }
        // $('#sig').on('touchstart', function(event) {
        //     alert('Touch start event detected!', event);
        //     // Ajoutez ici le code que vous souhaitez exécuter lors du toucher
        // });

        var url = "{{ route('get.backend.arrondissement.by.departement') }}";
        $('#departement').on('change', function(){
            //alert($(this).val())
            $.ajax({
                type: "get",
                url: url,
                data: {
                    search: $(this).val(),
                },
                success: function (response) {
                    console.log(response);
                    if (response.code == 200) {
                        var options = '';
                        var j = response.data;
                        for (var i = 0; i < j.length; i++) {
                            options += '<option value="' + j[i].arr_id + '">' + j[i].arr_name.toUpperCase() + '</option>';
                            console.log(options);
                        }
                        $('#arrondissement').html(options);
                    } else {
                        $('#arrondissement').html($("<option></option>").attr("value", "").text(response.message.toUpperCase()));
                    }
                },
            });
        })
        var phone = document.querySelector('#phone');
        var phone_urgence = document.querySelector('#phone_urgence');
        var phone_simple = window.intlTelInput(phone,{
        initialCountry: "auto",
        nationalMode: false,
        autoInsertDialCode: true,
        geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("us"));
        },
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js"
        });
        phone_simple.setCountry("CG");

        var phone_urgence = window.intlTelInput(phone_urgence,{
        initialCountry: "auto",
        nationalMode: false,
        autoInsertDialCode: true,
        geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("us"));
        },
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js"
        });
        phone_urgence.setCountry("CG");

        var canvas = document.getElementById("signature");
        var signaturePad = new SignaturePad(canvas);

        $('#clear').click(function(e) {
            e.preventDefault();
            signaturePad.clear();
        });

        $('#btn_add_doctor').click(function(e) {
            e.preventDefault();
            var signatureData = signaturePad.isEmpty() ? "" : signaturePad.toDataURL();
            var form_ = $('#add_doctor')[0];
            var data_to_send = new FormData(form_);
            // Affectez la signature aux données du formulaire
            data_to_send.append('signed', signatureData);
            console.log("Contenu de la signature en base64:", signatureData);

            if (!phone_simple.isValidNumber()) {
                $('#phoneError').text('Le numéro de téléphone est invalide');
                alert("Le numéro de téléphone est invalide selon le code du pays choisi")
                return false;
            }

            if (!phone_urgence.isValidNumber()) {
                $('#phoneUrgenceError').text("Le numéro de téléphone d'urgence est invalide");
                alert("Le numéro de téléphone d'urgence est invalide selon le code du pays")
                return false;
            }

            console.log(data_to_send);
            $.ajax({
                url: $("#add_doctor").attr('action'),
                type: $("#add_doctor").attr('method'),
                data: data_to_send,
                enctype: 'multipart/form-data',
                processData: false,
                contentType: false,
                Cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'contentType': "application/json; charset=utf-8",
                    "accept": "application/json",
                },
                beforeSend: function () {
                    $('.btn_submit').prop('disabled', true);
                    $('#clear').prop('disabled', true);
                },
                success: function (data, err) {
                    $('.btn_submit').prop('disabled', false);
                    $('#clear').prop('disabled', false);
                    if (data.code == 200) {
                        // $('.select2').select2('destroy');
                        $('.select2').val(null).trigger('change');
                        Swal.fire({
                            icon: "success",
                            text: data.message,
                            buttonsStyling: false,
                            showConfirmButton: false,
                            timer: 3000
                        });
                        setTimeout(function () {
                            if (data.new) {
                                Swal.fire({
                                    icon: "warning",
                                    text: "Voulez vous encore enregistrer à nouveau ???",
                                    showCancelButton: true,
                                    cancelButtonText: "NON",
                                    confirmButtonText: "OUI",
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    buttonsStyling: true,
                                }).then(function (result) {
                                    if (result.isConfirmed) {
                                        $(".modal:visible").modal('show');
                                        signaturePad.clear();
                                    } else{
                                        $(".modal:visible").modal('hide');
                                        if (data.redirect == "ok") {
                                            window.location = data.url;
                                        } else {
                                            window.location.reload(true)
                                        }
                                    }
                                });
                            }

                        }, 3000)

                        $('#add_doctor').get(0).reset();
                        if (data.reload) {
                            setTimeout(function () {
                                window.location.reload(true)
                            }, 2000)
                        }
                        $('#preview_img').hide();
                        if (data.redirect_open) {
                            setTimeout(function () {
                                window.open(data.redirect_open)
                            }, 2000)
                            setTimeout(function () {
                                window.location.reload(true)
                            }, 2000)
                        }
                    } else if (data.code == 205) {
                        Swal.fire({
                            icon: "error",
                            text: data.errors[0],
                            showConfirmButton: false,
                            timer: 4000
                        });
                    }else if (data.code == 500) {
                        Swal.fire({
                            icon: "error",
                            text: "Une erreur est survenue lors du traitement de la requete",
                            showConfirmButton: false,
                            timer: 4000
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            text: data.message,
                            showConfirmButton: false,
                            timer: 4000
                        });
                    }
                },
                error: function(xhr, status, error) {
                    $('.btn_submit').prop('disabled', false);
                    $('#clear').prop('disabled', false);
                    if (xhr.status == 419) {
                        var errorMessage = JSON.parse(xhr.responseText).message;
                        Swal.fire({
                            icon: "error",
                            text: errorMessage,
                            showConfirmButton: false,
                            timer: 4000
                        });
                    }else{
                        Swal.fire({
                            icon: "error",
                            text: "Une erreur est survenue lors du traitement de la requete",
                            showConfirmButton: false,
                            timer: 4000
                        });
                    }

                }
            });
        })
    });
</script>
@endsection