@extends('model')
@section('title_page', 'Clients')
@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">Listing clients</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 montant</h6>
                            <h3 id="totalConso">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="totalReglement">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="card">
        <div class="card-header justify-content-between">
            <h4 class="card-title">Liste des clients</h4>
            @if (session('infoUser.droit_gestion_client') == 1)

            <button type="button" class="btn notreBtnPrimaire" id="btnCallModal" data-bs-toggle="modal"
                data-bs-target="#modalClient"><span class="btn-icon-start text-primary"><i class="fa fa-plus"></i>
                </span>Ajouter un client</button>
            @endif 
        </div>
        <div class="card-body">


            <div class="table-responsive">
                <table id="tableListeClient" 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">Raison sociale</th>
                            <th class="text-center">Email</th>
                            <th class="text-center">Téléphone mobile</th>
                            <th class="text-center">Téléphone fixe</th>

                            <th class="text-center">Statut</th>

                            <th class="text-center">Conso</th>
                            <th class="text-center">Règlement</th>
                            <th class="text-center">Solde</th>
                            <th class="text-center">Adresse</th>
                            <th class="text-center">Créé par</th>
                            <th class="text-center">Créé le</th>

                        </tr>
                    </thead>

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


    {{-- MODAL --}}

    <div class="modal fade" id="modalClient" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titreModal">Nouveau client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="formAddClient" class="formAddClient needs-validation p-0" method="POST" novalidate>
                        <input type="hidden" name="idClientHidden" id="idClientHidden" value="0">
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <p class="text-muted mb-0">Raison social</p>
                                <input type="text" class="form-control" name="raison_sociale_client"
                                    id="raison_sociale_client" style="text-transform: uppercase;" required>

                                <div class="invalid-feedback">
                                    Raison social obligatoire
                                </div>
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted mb-0">Téléphone mobile</p>
                                <input type="text" class="form-control" name="tel_mobile_client"
                                    id="tel_mobile_client">
                            </div>
                            <div class="col-md-6">
                                <p class="text-muted mb-0">Téléphone fixe</p>
                                <input type="text" class="form-control" name="tel_fix_client" id="tel_fix_client">
                            </div>
                            <div class="col-md-6" id="divPwd">
                                <p class="text-muted mb-0">Adresse email</p>
                                <input type="email" class="form-control" name="email_client" id="email_client">
                            </div>

                            <div class="col-md-6" id="divPwd">
                                <p class="text-muted mb-0">Statut</p>

                                <select class="default-select form-control wide" name="statut_client" id="statut_client">
                                    <option value="1">Actif</option>
                                    <option value="2">Inactif</option>
                                </select>
                            </div>

                            <div class="col-md-12">
                                <p class="text-muted mb-0">Adresse</p>
                                <input type="text" class="form-control" name="adresse_client" id="adresse_client"
                                    style="text-transform: uppercase;">
                            </div>

                        </div>


                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn notreBtnPrimaire text-black" id="btnNewAndUpdateClient">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() {

            divShowPer = $('#tableListeClient_filter')

            // // Division des valeur totales
            BroDivShowPer = divShowPer.parent().prev()
            BroDivShowPer.addClass('d-flex')
            BroDivShowPer.prepend('<div>srtyhjkdifgfhgiogiog</div>')

            $('#tableListeClient').DataTable({

                language: languageTable,
                pageLength: 25,

                order: [],
                columnDefs: [{
                        targets: [6, 7, 8],
                        className: 'text-end'
                    },
                ],
            });
            recuperationListClient();

            $('#btnCallModal').on('click', function() {
                $('#btnNewAndUpdateClient').text('Enregistrer')
                $('#btnNewAndUpdateClient').removeClass('btn btn-warning')
                $('#btnNewAndUpdateClient').addClass('btn btn-primary')
                $('#titreModal').text('Nouveau client')

                
            })
            $('#formAddClient').on('submit', function(e) {

                e.preventDefault();
                var formData = new FormData(this);
                formData.append('_token', '{{ csrf_token() }}')

                if (!$(this)[0].checkValidity()) {
                    $(this).addClass('was-validated');
                    e.preventDefault();
                    e.stopPropagation();
                } else {
                    e.preventDefault();
                    $.ajax({
                        type: "POST",
                        url: "{{ route('Client.add') }}",
                        data: formData,
                        dataType: "JSON",
                        contentType: false,
                        processData: false,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(resp) {
                            if (resp.error) {
                                notifDanger(resp.msg)
                                return false;
                            }

                            if (resp.succes) {

                                notifSuccess(resp.msg)
                                $('#idClientHidden').val(0)
                                $('#formAddClient')[0].reset()
                                $('#formAddClient').removeClass('was-validated');

                                $('#modalClient').modal('hide')
                                recuperationListClient()
                            }
                        }
                    });

                }
            })

            $(document).on('click', '#modificationFecth', function() {

                var IDclient = $(this).data('id')

                $('#idClientHidden').val(IDclient)
                $.ajax({
                    type: "GET",
                    url: "{{ route('Client.get') }}",
                    data: {
                        ClientId: IDclient
                    },
                    dataType: "JSON",
                    success: function(resp) {

                        if (resp.error) {
                            notifDanger(resp.msg)
                            return false;
                        }
                        $.each(resp.data, function(key, value) {

                            $('#raison_sociale_client').val(value.raison_sociale_client)
                            $('#email_client').val(value.email_client)
                            $('#tel_mobile_client').val(value.tel_mobile_client)
                            $('#tel_fix_client').val(value.tel_fix_client)
                            $('#adresse_client').val(value.adresse_client)
                            $('#statut_client').val(value.statut_client).trigger('change')
                        })
                    }
                });

                $('#btnNewAndUpdateClient').text('Modifier')
                $('#btnNewAndUpdateClient').removeClass('btn btn-primary')
                $('#btnNewAndUpdateClient').addClass('btn btn-warning')
                $('#titreModal').text('Modification du client')
                $('#modalClient').modal('show')
            })


            $(document).on('click', '#supprimerClient', function() {

                var IDclient = $(this).data('id')

                $('#idClientHidden').val(IDclient)

                Swal.fire({

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

                }).then((result) => {

                    if (result.value) {


                        $.ajax({
                            type: "GET",
                            url: "{{ route('Client.delete') }}",
                            data: {
                                ClientId: IDclient
                            },
                            dataType: "JSON",
                            success: function(resp) {

                                if (resp.error) {
                                    notifDanger(resp.msg)
                                    return false;
                                }


                                recuperationListClient()
                            }
                        });
                    }

                })



            })


        })





        function recuperationListClient() {

            var table = $('#tableListeClient').DataTable();
            table.clear().draw();
            $.ajax({
                type: "GET",
                url: "{{ route('Client.get') }}",
                dataType: "JSON",
                success: function(resp) {

                    if (resp.error) {
                        notifDanger(resp.msg)
                        return false;
                    }

                    var totalConso = 0;
                    var totalReglement = 0;
                    var totalSolde = 0;
                    $.each(resp.data, function(key, value) {


                        var statut = "";
                        if (value.statut_client == 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 {
                            statut =
                                '<span class="badge light badge-secondary text-uppercase " style="width: 110px;"> <i class="fa fa-circle text-secondary  me-1"></i> Inactif</span>'
                        }

                        solde = value.TotalFacture - value.TotalRegle;

                        totalConso += parseFloat(value.TotalFacture);
                        totalReglement += parseFloat(value.TotalRegle);
                        totalSolde += parseFloat(solde);

                        var actionBtn =  `<div style="display:flex">
                                                <x-btn-icone-table  type="edit" class="btn-edit" disabled title="Vous n'avez pas le droirt de modification" />
                                                <x-btn-icone-table  type="delete" class="btn-edit" disabled title="Vous n'avez pas le droirt de suppression" />
                                            </div>`;
                        
                         @if (session('infoUser.droit_gestion_client') == 1)

                            actionBtn =  `<div style="display:flex">
                                            <x-btn-icone-table  type="edit" class="btn-edit" id="modificationFecth" data-id="${value.idclient}" />
                                            <x-btn-icone-table  type="delete" class="btn-edit" id="supprimerClient" data-id="${value.idclient}" />
                                        </div>`;

                                                        

                         @endif

                        table.row.add([
                           
                            actionBtn,
                            value.raison_sociale_client,
                            value.email_client,
                            value.tel_mobile_client,
                            value.tel_fix_client,



                            statut,
                            formatNumber(value.TotalFacture),
                            formatNumber(value.TotalRegle),
                            '<span class="text-danger">' + formatNumber(solde) + '</span>',
                            value.adresse_client,
                            value.nom_prenom,
                            formatDate(value.created_at)

                        ])

                    })

                    $('#totalConso').text(formatNumber(totalConso))
                    $('#totalReglement').text(formatNumber(totalReglement))
                    $('#totalSolde').text(formatNumber(totalSolde))

                    table.draw();
                }
            });
        }
    </script>
@endsection