@extends('model')
@section('title_page',"Attestations")
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{url("/accueil")}}">Accueil</a></li>/
            <li class="breadcrumb-item active" aria-current="page">Attestation</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="card">
                <div class="card-header justify-content-between">
                    <h4 class="card-title">Liste des attestations</h4>
                    @if (session("infoUser.droit_ajout_attestation") == 1)
                        
                    <button type="button" class="btn  btn-primary" id="btnAdd" data-bs-toggle="modal"
                        data-bs-target=".bd-example-modal-lg"><span class="btn-icon-start text-primary"><i
                                class="fa fa-plus"></i>
                        </span>Ajouter une attestation</button>
                    @endif
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableListeAttestation" class="display table" style="min-width: 845px">
                            <thead>
                                <tr>
                                    <th>
                                        <div class="custom-control d-inline custom-checkbox">
                                            <input type="checkbox" class="form-check-input" id="checkAll" required="">
                                            <label class="form-check-label" for="checkAll"></label>
                                        </div>
                                    </th>
                                    <th class="text-center">Action</th>
                                    <th class="text-center">Statut</th>
                                    <th class="text-center">Référence</th>
                                    <th class="text-center">Titulaire</th>
                                    <!-- <th class="text-center">Lieu de naissance</th>
                                    <th class="text-center">Date de naissance</th>
                                    <th class="text-center">Numéro de téléphone</th>
                                    <th class="text-center">Type de pièce</th>
                                    <th class="text-center">Numéro de la pièce</th> -->
                                    <th class="text-center">Adresse</th>
                                    <th class="text-center">Opération</th>
                                    <th class="text-center">Superficie</th>
                                    <!-- <th class="text-center">Numéro de l'arrêté</th>
                                    <th class="text-center">Numéro de Lot</th>
                                    <th class="text-center">Numéro de Ilot</th> -->
                                    <th class="text-center">Délivré le</th>
                                    <th class="text-center">Délivré par</th>
                                    <!-- <th class="text-center">Commentaire</th> -->
                                    <th class="text-center">Créé par</th>
                                    <th class="text-center">Créé le</th>

                                    
                                    <!-- <th class="text-center">Action</th>
                                    <th class="text-center">Statut</th>
                                    <th class="text-center">Référence</th>
                                    <th class="text-center">Titulaire</th>
                                    <th class="text-center">Lieu de naissance</th>
                                    <th class="text-center">Date de naissance</th>
                                    <th class="text-center">Numéro de téléphone</th>
                                    <th class="text-center">Type de pièce</th>
                                    <th class="text-center">Numéro de la pièce</th>
                                    <th class="text-center">Opération</th>
                                    <th class="text-center">Numéro de l'arrêté</th>
                                    <th class="text-center">Numéro de Lot</th>
                                    <th class="text-center">Numéro de Ilot</th>
                                    <th class="text-center">Date d'attribution</th>
                                    <th class="text-center">Commentaire</th>
                                    <th class="text-center">Créé par</th>
                                    <th class="text-center">Créé le</th> -->

                                </tr>
                            </thead>

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

    {{-- Modal --}}

    <div class="modal fade bd-example-modal-lg" id="modalAttestation" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Formulaire de création d'attestation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <form id="formAddAttestation">
                   
                    <input type="text" name="idattestation" id="idattestation" hidden>
                    <input type="text" name="update" id="update" value ="false" hidden>

                    <div class="modal-body">
                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <label class="form-label">Nom</label>
                                <input type="text" class="form-control needs-validation " name="nom" id="nom"
                                    placeholder="Ex : KONAN" required>
                                <div class="invalid-feedback">
                                    Veuillez saisir le nom.
                                </div>
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label">Prénoms</label>
                                <input type="text" class="form-control needs-validation" name="prenoms" id="prenoms"
                                    placeholder="Ex : LAMBERT" required>
                                <div class="invalid-feedback">
                                    Veuillez saisir le prenom.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Adresse</label>
                                <input type="text" class="form-control needs-validation" name="adresse" id="adresse"
                                    placeholder="Ex : BP 01 ABJ 01" required>
                                <div class="invalid-feedback">
                                    Veuillez saisir l'adresse.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Lieu de naissance</label>
                                <input type="text" hidden class="form-control needs-validation" name="lieu_naissance" id="lieu_naissance" placeholder="Abidjan" >
                                <div class="invalid-feedback">
                                    Veuillez saisir le lieu de naissance.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Date de naissance</label>
                                <input type="date" class="form-control needs-validation" name="date_naissance" id="date_naissance" >
                                <div class="invalid-feedback">
                                    Veuillez saisir la Date de naissance.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Numéro de téléphone</label>
                                <input type="tel" class="form-control needs-validation" name="tel_mobile"
                                    id="tel_mobile" max="10" min="10" maxlength="10" placeholder="0101010101" >
                                <div class="invalid-feedback" >
                                    Veuillez saisir le Numéro de téléphone.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Type de pièce</label>
                                <select name="idtype_piece" id="idtype_piece" class="form-control needs-validation wide">
                                    <option selected value="0">Choisir...</option>
                                    @foreach ($Type_piece as $item)
                                        <option value="{{ $item->idtype_piece }}">{{ $item->libelle_type_piece }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    Veuillez choisir le type de piece.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Numéro de la pièce</label>
                                <input type="text" class="form-control needs-validation" name="numero_piece"
                                    id="numero_piece" placeholder="C°0102030406" >
                                <div class="invalid-feedback">
                                    Veuillez saisir le Numéro de la pièce.
                                </div>
                            </div>
                            <div class="mb-3 col-md-8">
                                <label class="form-label">Opération</label>
                                <input type="text" class="form-control needs-validation" name="nom_lotissement"
                                    id="nom_lotissement" placeholder="Ex : YOP ÎLE BOULAY" required>
                                <div class="invalid-feedback">
                                    Veuillez saisir le Nom de l'opération.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Superficie</label>
                                <input type="text" class="form-control needs-validation" name="superficie"
                                    id="superficie" placeholder="Ex : 20 ha 00 a 00 ca" required>
                                <div class="invalid-feedback">
                                    Veuillez saisir la superficie.
                                </div>
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Numéro de l'arrêté</label>
                                <input type="text" class="form-control needs-validation" name="numero_arrete"
                                    id="numero_arrete" placeholder="109/PPD/CAV" >
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Numéro de Lot</label>
                                <input type="text" class="form-control needs-validation" name="numero_lot"
                                    id="numero_lot" placeholder="" >
                            </div>
                            <div class="mb-3 col-md-4" hidden>
                                <label class="form-label">Numéro d'Ilot</label>
                                <input type="text" class="form-control needs-validation" name="numero_ilot"
                                    id="numero_ilot" placeholder="" >
                            </div>
                            
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Signataire</label>
                                <input type="text" class="form-control needs-validation" name="signataire"
                                    id="signataire" placeholder="Ex : BOUABRE" required>
                            </div>
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Titre signataire</label>
                                <input type="text" class="form-control needs-validation" name="titre_signataire"
                                    id="titre_signataire" placeholder="Ex : CHEF DU VILLAGE" required>
                            </div>
                            <div class="mb-3 col-md-2">
                                <label class="form-label">Délivré le </label>
                                <input type="date" class="form-control needs-validation" name="date_attribution"
                                    id="date_attribution" value="{{ date('Y-m-d') }}" required>
                            </div>
                            <div class="mb-3 col-md-2" hidden>
                                <label class="form-label">Statut</label>
                                <select name="statut" id="statut" class="form-control needs-validation wide">
                                    <option value="1"selected>ACTIF</option>
                                    <option value="2">DÉSACTIVÉ</option>
                                </select>
                            </div>
                            <div class="mb-3 col-md-12">
                                <label class="form-label">Commentaire</label>
                                <textarea class="form-control needs-validation" name="commentaire_attestation" id="commentaire_attestation"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                        <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Fermer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        (function() {
            'use strict'

            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.querySelectorAll('.needs-validation')
			console.log(forms)
            // Loop over them and prevent submission
            Array.prototype.slice.call(forms)
                .forEach(function(form) {
                    form.addEventListener('submit', function(event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                    }, false)
                })
        })()


        // (function($) { })(jQuery)

        $(document).ready(function() {
            var tableAttestation = $('#tableListeAttestation').DataTable({
                dom: 'Bfrtip',
                // 'dom': 'ZBfrltip',
                buttons: [

                    {
                        extend: 'excel',
                        text: '<i class="fa-solid fa-file-excel"></i> Export Report',
                        className: 'btn btn-sm border-0'
                    }
                ],
				order : [],
                searching: true,
                // lengthMenu: 10,
                pageLength: 10,
                select: false,
                lengthChange: true,
                language: languageTable,

            });

            getData()

            $("#modalAttestation").on("hide.bs.modal", function() {
                $("#formAddAttestation")[0].reset()
                $("#update").val("false")
            })

            $(document).on("submit", "#formAddAttestation",function(evt) {
                evt.preventDefault()

                let type = "post"
                let url = "{{ route('storeattestation') }}"

                if ($("#update").val() == "true") {
                    type = "post"
                    url = "{{ route('updateOrDeleteAttestation') }}"
                }

                let formData = new FormData(document.getElementById("formAddAttestation"))
                formData.append("_token", "{{ csrf_token() }}")

				console.log([...formData]);
                $.ajax({
                    type: type,
                    url: url,
                    data: formData,
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.succes == true) {
                            $("#modalAttestation").modal("hide")
                            getData()
                            $("formAddAttestation")[0].reset()
                            console.log(response.msg)
							return 0
                        }
                        console.log(response.msg)
                    },
                    error: function(response) {
                        console.log(response.msg)
                    }
                });
            })

            $(document).on("click", ".btn-edit", function() {

                $("#update").val("true")

                var data = $(this).data("id")
                $.ajax({
                    type: "get",
                    url: "{{ route('Getattestation') }}",
                    data: {
                        idattestation: data
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.succes == true) {
                            // remplirLeForm("#formAddAttestation", response.data)
							$("#idattestation").val(response.data.idattestation)
							$("#nom").val(response.data.nom)
							$("#prenoms").val(response.data.prenoms)
							$("#lieu_naissance").val(response.data.lieu_naissance)
							$("#date_naissance").val(response.data.date_naissance)
							$("#tel_mobile").val(response.data.tel_mobile)
							$("#idtype_piece").val(response.data.idtype_piece)
							$("#numero_piece").val(response.data.numero_piece)
							$("#nom_lotissement").val(response.data.nom_lotissement)
							$("#date_attribution").val(response.data.date_attribution)
							$("#statut").val(response.data.statut)
							$("#commentaire_attestation").val(response.data.commentaire_attestation)
                            $('#numero_ilot').val(response.data.numero_ilot)
                            $('#numero_lot').val(response.data.numero_lot)
                            $('#numero_arrete').val(response.data.numero_arrete)

                            $('#adresse').val(response.data.adresse)
                            $('#signataire').val(response.data.signataire)
                            $('#titre_signataire').val(response.data.titre_signataire)
                            $('#superficie').val(response.data.superficie)

                            $("#btnAdd").click()
                        }
                    },
                    error: function(response) {
                        console.log(response.msg)
                    }
                });
            })
            $(document).on("click", ".btn-delete", function() {
				var data = $(this).data("id")
                $.ajax({
                    type: "delete",
                    url: "{{ route('updateOrDeleteAttestation') }}",
                    data: {
                        idattestation: data,
						"_token" : "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.succes == true) {
                            getData()
							notifSuccess(response.msg)
                            return 0
                        }
                        notifDanger(response.msg)
                    },
                    error: function(response) {
                        notifDanger(response.msg)
                    }
                });
            })

            $(document).on("click", ".btn-printer", function() {
				var data = $(this).data("id")
                $.ajax({
                    type: "get",
                    url: "{{ route('generationQrcode') }}",
                    data: {
                        idAttestation: data
                    },
                    dataType: "json",
                    success: function(response) {
                        // if (response.succes == true) {
							var pdfBase64 = response.pdf

                            // Créez un objet blob à partir du PDF en base64
                            var blob = b64toBlob(pdfBase64, 'application/pdf');

                            // Créez un objet URL pour le blob
                            var blobUrl = URL.createObjectURL(blob);

                            // Créez une fenêtre d'impression avec l'URL du blob
                            var printWindow = window.open(blobUrl);
							return 0
                        // }
						// console.log(response.msg)
                    },
                    error: function(response) {
                        notifDanger(response.msg)
                    }
                });
            })

            $(document).on("click", ".btn-changeStatut", function() {
				var data = $(this).data("id")
                $.ajax({
                    type: "post",
                    url: "{{ route('changerStatutattestation') }}",
                    data: {
                        idattestation: data,
                        "_token" : "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.succes == true) {
                            getData()
							notifSuccess(response.msg)
                            return 0 
                        }
                        notifDanger(response.msg)
                    },
                    error: function(response) {
                        notifDanger(response.msg)
                    }
                });
            })

            function getData() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('Getattestation') }}",
                    dataType: "json",
                    success: function(response) {
                        console.log(response)
                        if (response.succes == true) {
                            
                          tableAttestation.clear().draw()

                            $.each(response.data, function(key, value) {
                                var statut = ""
                                if (value.statut == 1) {
                                    statut = `<span class="badge light badge-success text-uppercase" style="width: 110px;">
                                            <i class="fa fa-circle text-success me-1"></i>
                                            ACTIF
                                        </span>`

                                } else if (value.statut == 2) {
                                    statut = `<span class="badge light badge-secondary text-uppercase" style="width: 110px;">
                                                      <i class="fa fa-circle text-secondary me-1"></i>
                                                      DÉSACTIVÉ
                                                  </span>`

                                }
                                tableAttestation.row.add([
                                    `
                                <div class="form-check custom-checkbox ms-2">
                                          <input type="checkbox" class="form-check-input " id="customCheckBox2"
                                              required="">
                                          <label class="form-check-label" for="customCheckBox2"></label>
                                      </div>
                                `,

                                    value.action,
                                    statut,
                                    value.reference,
                                    value.nom +" "+value.prenoms,
                                    value.adresse,
                                    value.nom_lotissement,
                                    value.superficie,
                                    moment(value.date_attribution).format("DD/MM/YYYY"),
                                    value.signataire+", "+value.titre_signataire,
                                    value.nom_prenom,
                                    moment(value.created_at).format("DD/MM/YYYY HH:mm:ss"),
                                ])
                            });

                            tableAttestation.draw()
                        }
                    },
                    error: function(response) {

                    }
                });
            }

			function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
                var byteCharacters = atob(b64Data);
                var byteArrays = [];

                for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                    var slice = byteCharacters.slice(offset, offset + sliceSize);

                    var byteNumbers = new Array(slice.length);
                    for (var i = 0; i < slice.length; i++) {
                        byteNumbers[i] = slice.charCodeAt(i);
                    }

                    var byteArray = new Uint8Array(byteNumbers);
                    byteArrays.push(byteArray);
                }

                var blob = new Blob(byteArrays, {
                    type: contentType
                });
                return blob;
            }
        });
    </script>
@endsection