@extends('model')
@section('title_page', 'Bon')
@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">Bon</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 QR
            </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>
                Créer un bon
            </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-2">
                            <label for="">Code</label>
                            <input type="text" class="form-control" name="code_search" id="code_search"
                                placeholder="Ex : EQ-ZE-0022">
                        </div>
                        <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-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="tableListeBon" 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">
                                        Numéro bon</th>
                                    <th data-class="text-center" orderable="false" searchable="false" class="text-center">
                                        Date du bon</th>
                                    <th data-class="text-start" class="text-center">Motif</th>
                                    <th data-class="text-center" class="text-center">Site</th>
                                    <th data-class="text-center" class="text-center">Code</th>
                                    <th data-class="text-center" class="text-center">Equipement</th>
                                    <th data-class="text-center" class="text-center">N° série</th>
                                    <th data-class="text-center" class="text-center">Créé par</th>
                                    <th data-class="text-center" class="text-center">Créé le</th>
                                    <th data-class="text-center" class="text-center">Description</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 du bon<span id="code"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <form id="formAddBon">
                    {{-- @csrf --}}
                    <input type="text" name="idbon" id="idbon" hidden>
                    <input type="text" name="update" id="update" value ="false" hidden>

                    <div class="modal-body">
                        <div class="row">

                            <div class="mb-3 col-md-2">
                                <label class="form-label">Site</label> <span class="text-danger">*</span>
                                <select name="site" class="form-control needs-validation " id="site" required>

                                </select>
                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Code de l'équipement</label> <span class="text-danger">*</span>
                                <select name="equipement" class="form-control needs-validation " id="equipement"
                                    required style="height: 100% !important">
                                    <option value="0"></option>
                                    @foreach ($Equipement as $item)
                                        <option value="{{ $item->IDequipement }}">{{ $item->code_equipement }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3 col-md-3">
                                <label class="form-label">Motif</label> <span class="text-danger">*</span>
                                <select name="motif" class="form-control needs-validation " id="motif" required>

                                </select>
                            </div>
                            <div class="mb-4 col-md-3">
                                <label class="form-label">Date du bon</label> <span class="text-danger">*</span>
                                <input type="date" class="form-control" name="date_bon" id="date_bon" value="{{ date('Y-m-d') }}" required>
                            </div>


                            <div class="mb-3 col-md-12">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" id="description" cols="10" rows="5"></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>

        $('#equipement').select2({
            dropdownParent : $('#modalEquipement')
        })

        $(document).ready(function() {
            var tableListeBon = $('#tableListeBon').DataTable({
                dom: 'Bfrtip',
                order: [],
                searching: true,
                // lengthMenu: 10,
                pageLength: 50,
                select: false,
                lengthChange: true,
                language: languageTable,

            });
            var tableRetientDonne = []

            getData()

            // $("#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)
            // })

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

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

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

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


                $.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) {
                        console.log(response)
                        if (response.error == false) {
                            getData()
                            // if ($("#update").val() == "true") {
                            $("#modalEquipement").modal("hide")
                            // }
                            //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('bon.get', '') }}/" + data,
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            console.log(response)                            
                            $("#idbon").val(response.data.IDbon)

                            $('#site').val(response.data.IDsite).change()
                            $('#equipement').val(response.data.IDequipement).change()
                            $('#motif').val(response.data.IDmotif_bon).change()
                            $('#date_bon').val(response.data.date_bon)
                            $('#description').val(response.data.description)
                            $('#code').text(" : " + response.data.numero_bon)

                            $("#btnAdd").click()
                        }
                    },
                    error: function(response) {
                        console.log(response.msg)
                    }
                });
            }).on("click", ".btn-delete", function() {
                var data = $(this).data("id")
                $.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()
                            )
                            notifSuccess(response.messages)
                            return 0
                        }
                        notifDanger(response.messages)
                    },
                    error: function(response) {
                        notifDanger(response.responseJson.messages)
                    }
                });
            }).on("click", "#btnSearch", function() {
                getData(
                    $("#code_search").val(),
                    $("#statut_search").val(),
                    $("#type_search").val(),
                    $("#site_search").val()
                )
            }).on("change", "#equipement", function() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('bon.selectMotif') }}",
                    data: {
                        IDequipement: $(this).val(),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $("#motif").html("");
                            $.each(response.data, function(index, item) {
                                $("#motif").append(
                                    `<option value="${item.IDmotif_bon}">${item.libelle}</option>`
                                );
                            });
                            return 0
                        }
                        notifDanger(response.messages)
                    },
                    error: function(response) {
                        notifDanger(response.responseJson.messages)
                    }
                });
            });


            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)
                    }
                });
            }


            function getData() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('bon.get') }}",
                    // data: {
                    //     code: code,
                    //     statut: statut,
                    //     type: type,
                    //     site: site,
                    // },
                    dataType: "json",
                    success: function(response) {
                        console.log(response)
                        if (response.error == false) {

                            tableListeBon.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>`

                                // }
                                tableListeBon.row.add([
                                    value.action,
                                    value.numero_bon,
                                    value.date_bon,
                                    value.libelle,
                                    value.nom_site,
                                    value.code_equipement,
                                    value.libelle_equipement,
                                    value.numero_serie,
                                    value.nom_prenom,
                                    value.cree_le,
                                    value.description,
                                ])
                            });

                            tableListeBon.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()

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

                        if (response.error == false) {
                            $("#site").html("")
                            $("#site").append('<option value=""></option>')
                            $.each(response.data, function(index, item) {
                                $("#site").append('<option value="' + item.IDsite + '">' +
                                    item.nom_site + '</option>')
                            });
                        }
                    },
                    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("")
                            $.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);
            }

            $('#modalEquipement').on('hidden.bs.modal', function(){

                // _('#date_bon').value = "{{ date('Y-m-d') }}"
                _('#formAddBon').reset()
                $('#equipement').val(0).trigger('change')
            })
        });
    </script>
@endsection