@extends('master.master_back')
@section('title')
    RDPC - Ajout des membres
@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">Membres</div>
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ route('get.backend.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ route('get.backend.list.member') }}">Liste des Membres</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Ajouter un Membre</li>
                </ol>
            </nav>
        </div>
    </div>
    <!--end breadcrumb-->
    <div class="card card-bx mb-3">
        <div class="card-header mt-4">
            <h6 class="title">ENREGISTREMENT DES INFORMATIONS</h6>
        </div>
        <form class="profile-form" id="add_doctor" method="post" action="{{ route('post.backend.add.member') }}">
            @csrf
            <div class="card-body">
                <div class="row">
                    <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-4 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-4 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-sm-4 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-4 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-4 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-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 Membres 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 Membres 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>
            </div>
            <div class="card-footer mb-3">
                <button type="submit" id="btn_add_doctor" class="btn btn-light btn_submit">enregistrer</button>
            </div>
        </form>
    </div>
</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