@extends('model')
@section('title_page', 'Equipement')
@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <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">Liste des équipements</li>
            </ol>
        </nav>

        <div>
            <button type="button" class="btn btn-warning" id="btnPrinterSelect">
                <span class="btn-icon-start text-warning">
                    <i class="fa fa-print"></i>
                </span>
                Imprimer Code Barre
            </button>
            <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 un équipement
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="card">
                <div class="card-header d-block">
                    <div class="row">

                        <div class="col-3">
                            <label for="">Statut</label>
                            <select name="statut_search" id="statut_search" class="form-control">
                                <option value="0">TOUS</option>
                                <option value="1">EN SERVICE</option>
                                <option value="2">EN STOCK</option>
                                <option value="4">EN REPARTAION</option>
                                <option value="3">HORS SERVICE</option>
                            </select>
                        </div>
                        <div class="col-3">
                            <label for="">Type d'équipement</label>
                            <select name="type_search" id="type_search" class="form-control">
                                <option value="0">TOUS</option>
                                @foreach ($type_equipement as $item)
                                    <option value="{{ $item->IDtype_equipement }}">{{ $item->nom_type_equipement }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <label for="">Site</label>
                            <select name="site_search" id="site_search" class="form-control">
                                <option value="0">TOUS</option>
                                @foreach ($site as $item)
                                    <option value="{{ $item->IDsite }}">{{ $item->nom_site }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <label for="">Service</label>
                            <select name="service_search" id="service_search" class="form-control">
                                <option value="0">TOUS</option>

                            </select>
                        </div>
                        <div class="col-3">
                            <label for="">Bureau</label>
                            <select name="bureau_search" id="bureau_search" class="form-control">
                                <option value="0">TOUS</option>
                            </select>
                        </div>
                        <div class="col-8">
                            <label for="">Code/N° série/description</label>
                            <input type="text" class="form-control" name="code_search" id="code_search"
                                placeholder="Ex : EQ-ZE-0022">
                        </div>
                        <div class="col-1">
                            <button class="btn btn-primary mt-4" id="btnSearch"><i class="fa fa-search"></i></button>
                        </div>
                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableListeEquipment" class="display table" style="min-width: 845px">
                            <thead>
                                <tr>
                                    <th data-class="text-center" orderable="false" searchable="false" class="text-center">
                                        <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> &nbsp;
                                        Action
                                    </th>
                                    <th data-class="text-center" orderable="false" searchable="false" class="text-center">
                                        Code</th>
                                    <th data-class="text-start" class="text-center">Désignation</th>
                                    <th data-class="text-start" class="text-center">Numéro série</th>
                                    <th data-class="text-center" class="text-center">Statut</th>
                                    <th data-class="text-center" class="text-center">Type</th>
                                    <th data-class="text-center" class="text-center">Bureau</th>
                                    <th data-class="text-center" class="text-center">Fournisseur</th>
                                    <th data-class="text-end" class="text-center">Prix d'achat HT</th>
                                    <th data-class="text-end" class="text-center">Valeur résiduelle</th>
                                    <th data-class="text-center" class="text-center">Date d'achat</th>
                                    <th data-class="text-center" class="text-center">Créé par</th>
                                    <th data-class="text-center" class="text-center">Créé le</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal --}}

    <div class="modal fade bd-example-modal-lg" id="modalEquipement" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Fiche d'équipement<span id="code"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <form id="formAddEquipement">
                    {{-- @csrf --}}
                    <input type="text" name="IDequipement" id="IDequipement" 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">Site</label> <span class="text-danger">*</span>
                                <select name="site_add" class="form-control needs-validation " id="site_add" required>
                                </select>
                            </div>

                            <div class="mb-3 col-md-6">
                                <label class="form-label">Bureau</label> <span class="text-danger">*</span>
                                <select name="bureau_add" class="form-control needs-validation " id="bureau_add"
                                    required>
                                    <option value=""></option>
                                </select>
                            </div>

                            <div class="mb-3 col-md-4">
                                <label class="form-label">Fournisseur</label> <span class="text-danger"></span>
                                <select name="fournisseur_add" class="form-control needs-validation "
                                    id="fournisseur_add">
                                    <option value=""></option>
                                </select>
                            </div>

                            <div class="mb-3 col-md-4">
                                <label class="form-label">Type d'équipement</label> <span class="text-danger">*</span>
                                <select name="type_equippement_add" class="form-control needs-validation "
                                    id="type_equippement_add" required>

                                </select>
                            </div>

                            <div class="mb-4 col-md-4">
                                <label class="form-label">Numéro de série </label>
                                <input type="text" class="form-control" name="numero_serie" id="numero_serie"
                                    placeholder="EX: EESSS000-969">
                            </div>

                            <div class="mb-9 col-md-9">
                                <label class="form-label">Désignation</label> <span class="text-danger">*</span>
                                <input type="text" class="form-control" name="libelle" id="libelle"
                                    placeholder="Ex : EQUIPEMENT" required>
                            </div>
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Statut </label>
                                <select name="statut" id="statut" class="form-control">
                                    <option value="1">EN SERVICE</option>
                                    <option value="2">EN STOCK</option>
                                    <option value="4">EN REPARTAION</option>
                                    <option value="3">HORS SERVICE</option>
                                </select>
                            </div>
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Date d'achat</label>
                                <input type="date" class="form-control" name="date_achat" id="date_achat">
                            </div>
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Date mise en service</label>
                                <input type="date" class="form-control" name="date_mise_service"
                                    id="date_mise_service">
                            </div>
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Prix d'achat HT</label>
                                <input type="number" class="form-control" name="valeur_achat" id="valeur_achat">
                            </div>
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Valeur résiduelle</label>
                                <input type="number" class="form-control" name="valeur_residuelle"
                                    id="valeur_residuelle">
                            </div>
                            <div class="mb-3 col-md-12">
                                <label class="form-label">Description (N° de Lot, couleur, etc...)</label>
                                <textarea class="form-control" name="commentaire" id="commentaire" cols="10" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <label type="button" class="btn btn-primary" id="btnIndentique">Valeurs identiques</label>
                        <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>
        $(document).ready(function() {
            var tableListeEquipment = $('#tableListeEquipment').DataTable({
                dom: 'Bfrtip',
                order: [],
                searching: true,
                // lengthMenu: 10,
                pageLength: 50,
                select: false,
                lengthChange: true,
                language: languageTable,

            });
            var tableRetientDonne = []
            // $("#site_search").select2()
            // $("#type_search").select2()
            getData(
                $("#code_search").val(),
                $("#statut_search").val(),
                $("#type_search").val(),
                $("#site_search").val(),
                $("#bureau_search").val(),
                $("#service_search").val()
            )

            $("#modalAttestation").on("hide.bs.modal", function() {
                $('#site_add').val(1).change()
                $('#fournisseur_add').val(1).change()
                $('#type_equippement_add').val(1).change()
                $('#statut').val(1).change()
                $("#update").val("false")
                $('#code').text("")
                $('#statut').prop("disabled", false)
            })

            $("#modalAttestation").on("show.bs.modal", function() {
                $('#code').val("")
                $('#libelle').val("")
                $('#date_achat').val("")
                $('#date_mise_service').val("")
                $('#valeur_achat').val("")
                $('#valeur_residuelle').val("")
                $('#commentaire').val("")
            })

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

                let url = "{{ route('equipement.store') }}"

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

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

                tableRetientDonne.push({
                    site_add: $("#site_add").val(),
                    fournisseur_add: $("#fournisseur_add").val(),
                    type_equippement_add: $("#type_equippement_add").val(),
                    statut: $("#statut").val(),
                    libelle: $('#libelle').val(),
                    date_achat: $('#date_achat').val(),
                    date_mise_service: $('#date_mise_service').val(),
                    valeur_achat: $('#valeur_achat').val(),
                    valeur_residuelle: $('#valeur_residuelle').val(),
                })

                $.ajax({
                    type: "post",
                    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.error == false) {
                            getData(
                                $("#code_search").val(),
                                $("#statut_search").val(),
                                $("#type_search").val(),
                                $("#site_search").val()
                            )
                            if ($("#update").val() == "true") {
                                $("#modalEquipement").modal("hide")
                            }

                            $('#code').val("")
                            $('#libelle').val("")
                            $('#date_achat').val("")
                            $('#valeur_achat').val("")
                            $('#valeur_residuelle').val("")
                            $('#date_mise_service').val("")
                            $('#commentaire').val("")

                            //genererPdf(response.pdf)
                            notifSuccess(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)
                        console.log(response.msg)
                    },
                    error: function(response) {
                        console.log(response.msg)
                    }
                });
            }).on("click", ".btn-edit", function() {

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

                var data = $(this).data("id")
                $.ajax({
                    type: "get",
                    url: "{{ route('equipement.get', '') }}/" + data,
                    dataType: "json",
                    success: function(response) {
                        if (response.succes == true) {
                            // remplirLeForm("#formAddAttestation", response.data)
                            $("#IDequipement").val(response.data.IDequipement)

                            $('#site_add').val(response.data.IDsite).change()
                            $('#bureau_add').val(response.data.IDbureau).change()
                            $('#fournisseur_add').val(response.data.IDfournisseur).change()
                            $('#type_equippement_add').val(response.data.IDtype_equipement)
                                .change()
                            $('#code').text(": " + response.data.code_equipement)
                            $('#libelle').val(response.data.libelle_equipement)
                            $('#statut').val(response.data.statut_equipement).change()
                            $('#statut').prop("disabled", true)
                            $('#date_achat').val(response.data.date_achat)
                            $('#numero_serie').val(response.data.numero_serie)
                            $('#date_mise_service').val(response.data.date_mise_service)
                            $('#valeur_achat').val(response.data.valeur_achat)
                            $('#valeur_residuelle').val(response.data.valeur_residuelle)
                            $('#commentaire').val(response.data.commentaire_equipement)

                            $("#btnAdd").click()
                        }
                    },
                    error: function(response) {
                        console.log(response.msg)
                    }
                });
            }).on("click", ".btn-delete", function() {
                var data = $(this).data("id")
                swal({
                        title: "Êtes-vous sûre de vouloir supprimer ?",
                        text: "cette action est irréversible !!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Oui, je supprime !!",
                        // cancelButtonText: "Non, j'annule",
                    }).then((result) => {
                        
                        if(result.value){
                            $.ajax({
                                type: "delete",
                                url: "{{ route('equipement.delete') }}",
                                data: {
                                    idequipement: data,
                                    "_token": "{{ csrf_token() }}"
                                },
                                dataType: "json",
                                success: function(response) {
                                    if (response.error == false) {
                                        getData(
                                            $("#code_search").val(),
                                            $("#statut_search").val(),
                                            $("#type_search").val(),
                                            $("#site_search").val(),
                                            $("#bureau_search").val(),
                                            $("#service_search").val()
                                        )
                                        notifSuccess(response.messages)
                                        return 0
                                    }
                                    notifDanger(response.messages)
                                },
                                error: function(response) {
                                    notifDanger(response.responseJson.messages)
                                }
                            });

                        }
                });
                
            }).on("click", ".btn-printer", function() {
                var data = $(this).data("id")
                print(data)
            }).on("click", "#btnPrinterSelect", function() {
                let data = listeLigneSelectionne("#tableListeEquipment", "#checkLigne")
                if (data.length <= 0) {
                    notifDanger("Aucune ligne cochée !!")
                    return false;
                }
                print(data)
            }).on("click", "#btnSearch", function() {
                getData(
                    $("#code_search").val(),
                    $("#statut_search").val(),
                    $("#type_search").val(),
                    $("#site_search").val(),
                    $("#bureau_search").val(),
                    $("#service_search").val()
                )
            }).on("change", "#date_achat", function() {
                $("#date_mise_service").val($(this).val())
            }).on("click", "#btnIndentique", function() {

                $("#site_add").val(tableRetientDonne[0].site_add).change()
                $("#fournisseur_add").val(tableRetientDonne[0].fournisseur_add).change()
                $("#type_equippement_add").val(tableRetientDonne[0].type_equippement_add).change()
                $("#statut").val(tableRetientDonne[0].statut).change()
                $('#libelle').val(tableRetientDonne[0].libelle)
                $('#date_achat').val(tableRetientDonne[0].date_achat)
                $("#date_mise_service").val(tableRetientDonne[0].date_mise_service)
                $('#valeur_achat').val(tableRetientDonne[0].valeur_achat)
                $('#valeur_residuelle').val(tableRetientDonne[0].valeur_residuelle)

                $('#numero_serie').focus()
                $('#numero_serie').select()

            }).on("change", "#site_search", function() {
                listeServiceSite($(this).val())
            }).on("change", "#service_search", function() {
                listeBureauService($(this).val())
            })

            document.getElementById('checkAll').addEventListener('click', function() {
                let value = this.checked
                let lignes = tableListeEquipment.rows().nodes()
                $(lignes).find('#checkLigne').prop('checked', value)
            })

            // selection d'une ligne de commande
            $(document).on('click', '#checkLigne', function() {
                if ($(this).checked == true) {
                    $(this).checked = false
                }
                if (document.getElementById('checkAll').checked == true) {
                    document.getElementById('checkAll').checked == false
                }
            })

            function print(data) {
                $.ajax({
                    type: "get",
                    url: "{{ route('equipement.genererQR') }}",
                    data: {
                        idequipement: data
                    },
                    dataType: "json",
                    success: function(response) {
                        genererPdf(response.pdf)
                        return 0
                    },
                    error: function(response) {
                        notifDanger(response.msg)
                    }
                });
            }

            $(document).on("change", "#site_add", function() {
                let id = $(this).val()
                listeAgenceSite(id)
            })

            function getData(code, statut, type, site, bureau, service) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('equipement.get') }}",
                    data: {
                        code: code,
                        statut: statut,
                        type: type,
                        site: site,
                        bureau: bureau,
                        service: service,
                    },
                    dataType: "json",
                    success: function(response) {
                        // console.log(response)
                        if (response.succes == true) {

                            tableListeEquipment.clear().draw()

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

                                } else if (value.statut_equipement == 2) {
                                    statut = `<span class="badge light badge-secondary badge-sm  text-uppercase" style="width: 100px;">
                                                      <i class="fa fa-circle text-secondary me-1"></i>
                                                      EN STOCK
                                                  </span>`

                                } else if (value.statut_equipement == 3) {
                                    statut = `<span class="badge light badge-warning badge-sm text-uppercase" style="width: 100px;">
                                                      <i class="fa fa-circle text-warning me-1"></i>
                                                      EN REPARATION
                                                  </span>`

                                } else if (value.statut_equipement == 4) {
                                    statut = `<span class="badge light badge-danger badge-sm text-uppercase" style="width: 100px;">
                                                      <i class="fa fa-circle text-danger me-1"></i>
                                                      HORS SERVICE
                                                  </span>`

                                }
                                tableListeEquipment.row.add([
                                    value.action,
                                    value.code_equipement,
                                    value.libelle_equipement,
                                    value.numero_serie,
                                    statut,
                                    value.nom_type_equipement,
                                    value.nom_bureau,
                                    value.nom_fournisseur,
                                    value.valeur_achat,
                                    value.valeur_residuelle,
                                    value.date_achat,
                                    value.nom_prenom,
                                    value.CreeLe,
                                ])
                            });

                            tableListeEquipment.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;
            }

            listeSite()
            listeFser()
            listeType()

            function listeSite() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('listeSite') }}",
                    dataType: "json",
                    success: function(response) {

                        if (response.error == false) {
                            $("#site_add").html("")
                            $.each(response.data, function(index, item) {
                                $("#site_add").append('<option value="' + item.IDsite + '">' +
                                    item.nom_site + '</option>')
                            });
                            listeAgenceSite($("#site_add").val())
                        }
                    },
                    error: function(response) {
                        notifDanger(response.messages)
                    }
                });
            }

            function listeServiceSite(idsite) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('listeServiceSite', '') }}/" + idsite,
                    dataType: "json",
                    success: function(response) {

                        if (response.error == false) {
                            $("#service_search").html("")
                            $("#service_search").append('<option value="0">TOUS</option>')
                            $.each(response.data, function(index, item) {
                                $("#service_search").append('<option value="' + item.IDservice +
                                    '">' + item.nom_service + '</option>')
                            });
                            // listeAgenceSite($("#site_add").val())
                        }
                    },
                    error: function(response) {
                        notifDanger(response.messages)
                    }
                });
            }

            function listeBureauService(idservice) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('listeBureauService', '') }}/" + idservice,
                    dataType: "json",
                    success: function(response) {

                        if (response.error == false) {
                            $("#bureau_search").html("")
                            $("#bureau_search").append('<option value="0">TOUS</option>')
                            $.each(response.data, function(index, item) {
                                $("#bureau_search").append('<option value="' + item.IDbureau +
                                    '">' + item.nom_bureau + '</option>')
                            });
                            // listeAgenceSite($("#site_add").val())
                        }
                    },
                    error: function(response) {
                        notifDanger(response.messages)
                    }
                });
            }

            function listeAgenceSite(idSite) {
                $.ajax({
                    type: "GET",
                    url: "{{ route('listeBureauSite', '') }}/" + idSite,
                    dataType: "json",
                    success: function(response) {

                        if (response.error == false) {
                            $("#bureau_add").html("")
                            $.each(response.data, function(index, item) {
                                $("#bureau_add").append('<option value="' + item.IDbureau +
                                    '">' + item.nom_bureau + '</option>')
                            });
                        }
                    },
                    error: function(response) {
                        notifDanger(response.messages)
                    }
                });
            }

            function listeFser() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('listeFournisseur') }}",
                    dataType: "json",
                    success: function(response) {

                        if (response.error == false) {
                            $("#fournisseur_add").html("")
                            $("#fournisseur_add").append('<option value=""></option>')
                            $.each(response.data, function(index, item) {
                                $("#fournisseur_add").append('<option value="' + item
                                    .IDfournisseur + '">' + item.nom_fournisseur +
                                    '</option>')
                            });
                        }
                    },
                    error: function(response) {
                        notifDanger(response.messages)
                    }
                });
            }

            function listeType() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('listeTypeEquipement') }}",
                    dataType: "json",
                    success: function(response) {

                        if (response.error == false) {
                            $("#type_equippement_add").html("")
                            $.each(response.data, function(index, item) {
                                $("#type_equippement_add").append('<option value="' + item
                                    .IDtype_equipement + '">' + item.nom_type_equipement +
                                    '</option>')
                            });
                        }
                    },
                    error: function(response) {
                        notifDanger(response.messages)
                    }
                });
            }

            function genererPdf(pdfBase64) {
                // 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);
            }
        });
    </script>
@endsection