@extends('model')
@section('title_page', 'Facture client')
@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">Facture client</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-xl-4 col-sm-4">
            <div class="card same-card">
                <div class="card-body depostit-card p-0">
                    <div class="depostit-card-media d-flex justify-content-between ">
                        <div>
                            <h6>Total facture</h6>
                            <h3 id="totalMontant">0</h3>
                        </div>
                        <div class="icon-box bg-secondary">
                            <i class='bx bx-receipt fs-14 text-white pt-2'></i>
                        </div>
                    </div>
                    {{-- <div id="NewExperience"></div> --}}
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-sm-4">
            <div class="card same-card">
                <div class="card-body depostit-card p-0">
                    <div class="depostit-card-media d-flex justify-content-between">
                        <div>
                            <h6>Total réglé</h6>
                            <h3 id="totalRegle">0</h3>
                        </div>
                        <div class="icon-box bg-success">
                            <i class='bx bx-receipt fs-14 text-white pt-2'></i>
                        </div>
                    </div>
                    {{-- <div id="NewExperience"></div> --}}
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-sm-4">
            <div class="card same-card">
                <div class="card-body depostit-card p-0">
                    <div class="depostit-card-media d-flex justify-content-between">
                        <div>
                            <h6>Total solde</h6>
                            <h3 id="totalSolde">0</h3>
                        </div>
                        <div class="icon-box bg-danger">
                            <i class='bx bx-receipt fs-14 text-white pt-2'></i>
                        </div>
                    </div>
                    {{-- <div id="NewExperience"></div> --}}
                </div>
            </div>
        </div>
    </div>

    <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 factures clients</h4>
                    {{-- @if (session('infoUser.droit_ajout_attestation') == 1) --}}

                    <button type="button" class="btn notreBtnPrimaire" 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 facture</button>
                    {{-- @endif --}}
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-11">
                            <div class="row">
                                <div class="mb-3 col-md-3">
                                    <label class="form-label">Période facture</label>
                                    <input type="text" name="periode" id="periode"
                                        class="form-control text-center wide datetimes">

                                </div>
                                <div class="mb-3 col-md-2">
                                    <label class="form-label">Société</label>
                                    <select name="Idsociete_filtre" id="Idsociete_filtre"
                                        class="default-select form-control wide">
                                        <option value="0">TOUTES</option>
                                        @foreach ($Societe as $item)
                                            <option value="{{ $item->idsociete }}">{{ $item->raison_sociale_societe }}
                                            </option>
                                        @endforeach
                                    </select>

                                </div>
                                <div class="mb-3 col-md-3">
                                    <label class="form-label">Client</label>
                                    <select name="Idclient_filtre" id="Idclient_filtre" class="form-control">
                                        <option selected value="0">TOUS</option>
                                        @foreach ($clients as $item)
                                            <option value="{{ $item->idclient }}">{{ $item->raison_sociale_client }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3 col-md-2">
                                    <label class="form-label">Engagement facture</label>
                                    <select name="engagement_facture_filtre" id="engagement_facture_filtre"
                                        class="default-select form-control wide">
                                        <option value="0">TOUS</option>
                                        <option value="1">COMPTANT</option>
                                        <option value="2">CREDIT</option>
                                    </select>
                                </div>
                                <div class="mb-3 col-md-2">
                                    <label class="form-label">Etat paiement</label>
                                    <select name="etat_filtre" id="etat_filtre" class="default-select form-control wide">
                                        <option value="0">TOUS</option>
                                        <option value="1">SOLDE</option>
                                        <option value="2">NON SOLDE</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-1 d-flex align-items-center">
                            <button class="btn notreBtnPrimaire d-flex align-items-center justify-content-center w-100"
                                id="btnSearch"><i class="fas fa-search"></i></button>
                        </div>
                    </div>

                    <div>
                        <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">Date facture</th>
                                        <th class="text-center">Numéro facture</th>
                                        <th class="text-center">Réf. externe</th>
                                        <th class="text-center">Société</th>
                                        <th class="text-center">Client</th>
                                        <th class="text-center">Montant</th>
                                        <th class="text-center">Réglé</th>
                                        <th class="text-center">Solde</th>
                                        <th class="text-center">Date échéance</th>
                                        <th class="text-center">Engagement</th>
                                        <th class="text-center">Créé par</th>
                                        <th class="text-center">Créé le</th>
                                    </tr>
                                </thead>

                            </table>
                        </div>
                    </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-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Formulaire de création de facture</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <form id="formAddFacture">

                    <input type="text" name="idfacture_client" id="idfacture_client" hidden>
                    <input type="text" name="update" id="update" value ="false" hidden>

                    <div class="modal-body">
                        <div class="row">
                            <div class="mb-3 col-md-3">
                                <label class="form-label">Date facture</label>
                                <input type="date" class="form-control  text-center" name="date_facture"
                                    id="date_facture" value="{{ date('Y-m-d') }}" required>
                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Numero facture </label>
                                <input type="text" name="numero_facture" id="numero_facture" class="form-control"
                                    readonly>

                            </div>
                            <div class="mb-3 col-md-5">
                                <label class="form-label">Référence externe <span class="text-danger">*</span></label>
                                <input type="text" class="form-control  text-center" name="ref_externe_facture"
                                    id="ref_externe_facture" placeholder="Ex : " required>

                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Société <span class="text-danger">*</span></label>
                                <select name="idsociete" id="idsociete" class="default-select form-control wide">
                                    @foreach ($Societe as $item)
                                        <option value="{{ $item->idsociete }}">{{ $item->raison_sociale_societe }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Client <span class="text-danger">*</span></label>
                                <select name="idclient" id="idclient" class="form-control"
                                    style="height: 100% !important">
                                    <option selected value="0">Choisir...</option>
                                    @foreach ($clients as $item)
                                        <option value="{{ $item->idclient }}">{{ $item->raison_sociale_client }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Engagement facture <span class="text-danger">*</span></label>
                                <select name="engagement_facture" id="engagement_facture"
                                    class="default-select form-control wide">
                                    <option value="1">COMPTANT</option>
                                    <option value="2">CREDIT</option>
                                </select>

                            </div>

                            <div class="mb-3 col-md-8">
                                <label class="form-label">Montant <span class="text-danger">*</span></label>
                                <input type="text" class="form-control text-center" name="montant_facture"
                                    id="montant_facture" placeholder="Ex : 10000" required>
                            </div>
                            <div class="mb-3 col-md-4">
                                <label class="form-label">Date échéance</label>
                                <input type="date" class="form-control  text-center" name="date_echeance"
                                    id="date_echeance" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn notreBtnPrimaire">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 tableAttestation = $('#tableListeAttestation').DataTable({
            //     dom: 'Bfrtip',
            //     // 'dom': 'ZBfrltip',

            //     order: [],
            //     searching: true,
            //     // lengthMenu: 10,
            //     pageLength: 25,
            //     // select: false,
            //     // lengthChange: true,
            //     language: languageTable,


            // });
            $("#idclient").select2({
                dropdownParent: $('#modalAttestation')
            });
            $("#Idclient_filtre").select2();
            var tableAttestation = $('#tableListeAttestation').DataTable({

                language: languageTable,
                pageLength: 25,

                order: [],
                columnDefs: [{
                        targets: [0, 1, 2, 3, 9, 10, 12],
                        className: "text-center"
                    },
                    {
                        targets: [4, 5, 11],
                        className: "text-start"
                    },
                    {
                        targets: [6, 7, 8],
                        className: "text-end"
                    },
                ],
            });

            getData()

            $("#modalAttestation").on("hide.bs.modal", function() {
                $("#formAddFacture")[0].reset()
                $("#idsociete").val(1).selectpicker('refresh').trigger("change")
                $("#idclient").val(0).selectpicker('refresh').trigger("change")
                $("#engagement_facture").val(1).selectpicker('refresh').trigger("change")
                $("#update").val("false")
            })

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

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

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

                let formData = new FormData(document.getElementById("formAddFacture"))
                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.error == false) {
                            $("#modalAttestation").modal("hide")
                            getData()
                            $("#formAddFacture")[0].reset()
                            notifSuccess(response.messages)
                            //console.log(response.messages)
                            return 0
                        }
                        notifWarning(response.messages)
                        //console.log(response.messages)
                    },
                    error: function(response) {
                        notifDanger(response.responseJSON.messages)
                        //console.log(response.responseJSON.messages)
                    }
                });
            })

            $(document).on("click", "#btnSearch", function() {
                getData()
            })

            $(document).on("click", ".btn-delete", function() {
                var data = $(this).data("id")

                Swal.fire({

                    title: 'Êtes-vous sûres ?',
                    text: 'De vouloir supprimer cette facture.',
                    type: 'warning',
                    showCancelButton: true,
                    cancelButtonColor: '#a6a6a6',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                }).then((result) => {

                    if (result.value) {

                        $.ajax({
                            type: "delete",
                            url: "{{ route('updateOrDeleteFactureClient') }}",
                            data: {
                                idfacture_client: data,
                                "_token": "{{ csrf_token() }}"
                            },
                            dataType: "json",
                            success: function(response) {
                                if (response.error == false) {
                                    getData()
                                    notifSuccess(response.messages)
                                    return 0
                                }
                                notifWarning(response.messages)
                            },
                            error: function(response) {
                                notifDanger(response.responseJson.messages)
                            }
                        });
                    }
                })
            })

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

            $(document).on("click", ".btn-edit", function() {
                var data = $(this).data("id")
                $.ajax({
                    type: "get",
                    url: "{{ route('getFactureClient') }}",
                    data: {
                        id: data,
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            $("#idfacture_client").val(response.data.idfacture_client)
                            $("#date_facture").val(response.data.date_facture)
                            $("#numero_facture").val(response.data.numero_facture)
                            $("#ref_externe_facture").val(response.data.ref_externe_facture)
                            $("#idsociete").val(response.data.idsociete).selectpicker('refresh')
                                .trigger('change')
                            $("#idclient").val(response.data.idclient).selectpicker('refresh')
                                .trigger('change')
                            $("#engagement_facture").val(response.data.engagement_facture)
                                .selectpicker('refresh').trigger('change')
                            $("#montant_facture").val(parseInt(response.data.montant_facture))
                            $("#date_echeance").val(response.data.date_echeance)
                            $("#update").val(true)
                            $("#modalAttestation").modal("show")
                            // notifSuccess(response.messages)
                            return 0
                        }
                        notifDanger(response.messages)
                    },
                    error: function(response) {
                        notifDanger(response.responJson.messages)
                    }
                });
            })


            function getData() {
                $.ajax({
                    type: "GET",
                    url: "{{ route('getFactureClient') }}",
                    data: {
                        periode: $("#periode").val(),
                        Idsociete_filtre: $("#Idsociete_filtre").val(),
                        Idclient_filtre: $("#Idclient_filtre").val(),
                        engagement_facture_filtre: $("#engagement_facture_filtre").val(),
                        etat_filtre: $("#etat_filtre").val()
                    },
                    dataType: "json",
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {

                            let totalMontant = 0
                            let totalRegle = 0
                            let totalSolde = 0

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

                                // }
                                let engagement_facture = ""
                                if (value.engagement_facture == 1) {
                                    engagement_facture = "COMPTANT"
                                } else if (value.engagement_facture == 2) {
                                    engagement_facture = "CREDIT"
                                }

                                let solde = parseFloat(value.montant_facture) - parseFloat(value
                                    .montant_regle)
                                totalMontant += parseFloat(value.montant_facture)
                                totalRegle += parseFloat(value.montant_regle)
                                totalSolde += solde

                                if (solde < 0) {
                                    solde =
                                        `<span  class="text-success " >${formatNumber(solde)}</span>`
                                } else {
                                    solde =
                                        `<span  class="text-danger " >${formatNumber(solde)}</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>
                                // `,

                                    `<div class="d-flex">
                                        <x-btn-icone-table class="btn-edit" type="edit"  data-id="${value.idfacture_client}" />
                                        <x-btn-icone-table class="btn-print" type="print" data-id="${value.idfacture_client}" />
                                        <x-btn-icone-table class="btn-delete" type="delete"  data-id="${value.idfacture_client}" />
                                    </div>
                                    `,
                                    moment(value.date_facture).format("DD/MM/YYYY"),
                                    value.numero_facture,
                                    value.ref_externe_facture,
                                    value.raison_sociale_societe,
                                    value.raison_sociale_client,
                                    `<span style=" font-weight: 500, color : black">${formatNumber(value.montant_facture)}</span>`,
                                    formatNumber(value.montant_regle),
                                    solde,
                                    moment(value.date_echeance).format("DD/MM/YYYY"),
                                    engagement_facture,
                                    value.nom_prenom,
                                    moment(value.created_at).format(
                                        "DD/MM/YYYY HH:mm:ss"),
                                ])

                            });

                            $("#totalMontant").text(formatNumber(totalMontant))
                            $("#totalRegle").text(formatNumber(totalRegle))
                            $("#totalSolde").text(formatNumber(totalSolde))

                            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