@extends('../partials.model')

@section('content')
<div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center my-4 justify-content-between page-header-breadcrumb">
        <div>
            <h1 class="text-3xl font-bold text-slate-900">
                Gestion des clients
            </h1>
            <p class="text-slate-600 mtw-1">
                Gérer tous vos clients et leurs informations
            </p>
        </div>
        <div class="ms-md-1 ms-0">
            <nav>
                <button class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#clientModal">
                    <i class="bi bi-plus-circle btn-icon-size"></i>
                    Nouveau Client
                </button>
            </nav>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="card card-border">
        <div class="card-body">

            <div class="row mb-2">

                <div class="col-xl-2">
                     <div class="lib">Solde :</div>
                    <select class="form-select" id="signe_tri" name="signe_tri">
                        <option value="0">Tous</option>
                         <option value=">">></option>
                         <option value="<"><</option>
                         <option value="<="><=</option>
                         <option value=">=">>=</option>
                    </select>
                </div>

                <div class="col-xl-2">
                     <div class="lib">Valeur :</div>
                    <input type="number" class="form-control" name="solde_tri" id="solde_tri"/>
                </div>

                <div class="col-xl-2">
                     <div class="lib">Statut :</div>
                    <select class="form-select" id="statut_tri" name="statut_tri">
                        <option value="0">TOUS</option>
                        <option value="1">ACTIF</option>
                        <option value="2">SUSPENDU</option>
                    </select>
                </div>

                <div class="col-xl-2">
                    <button class="btn btn-primary mt-4 btn-filter" id="btn-recherche">
                      <i class="bi bi-search"></i>
                    </button>
                </div>

                <div class="col-xl-4">

                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover" id="clientsTable">
                    <thead >

                            <th>#</th>
                            <th>Civilité</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Email</th>
                            <th>Téléphone</th>
                            <th>Statut</th>
                            <th>Solde</th>

                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!--End::row-1 -->

        <!-- Modal -->
        <div class="modal fade" id="clientModal" tabindex="-1" aria-labelledby="clientModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="clientModalLabel">Nouveau Client</h1>
                    <button type="button" class="btn btn-secondary ms-3" style="border-radius:20px;" id="call_documentModal"><i class="bi bi-file-earmark-check"></i></button>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="client_form">
                            @csrf
                            <input type="hidden" id="id_hidden" name="id_hidden" value="0"/>
                            <div class="row">

                                <div class="col-xl-12 mb-1">
                                    <div class="lib">Nom* :</div>
                                    <input type="text" class="form-control" name="nom_client" id="nom_client" placeholder="Nom du client" />
                                </div>

                                <div class="col-xl-12  mb-1">
                                    <div class="lib">Prenom* :</div>
                                    <input type="text" class="form-control" name="prenom_client" id="prenom_client" placeholder="Prenom du client" />
                                </div>

                                <div class="col-xl-6  mb-1">
                                    <div class="lib">Civilité* :</div>
                                   <select class="form-select" name="civilite_client" id="civilite_client">
                                        <option value="M.">M.</option>
                                        <option value="Mme">Mme</option>
                                        <option value="Société">Société</option>
                                   </select>
                                </div>

                                <div class="col-xl-6  mb-1">
                                    <div class="lib">NCC :</div>
                                    <input type="text" class="form-control" name="ncc_client" id="ncc_client" placeholder="NCC du client" />
                                </div>

                                
                                <div class="col-xl-6  mb-1">
                                    <div class="lib">Adresse :</div>
                                    <input type="text" class="form-control" name="adresse_client" id="adresse_client" placeholder="Adresse du client" />
                                </div>

                                 <div class="col-xl-6  mb-1">
                                    <div class="lib">Type facturation :</div>
                                   <select class="form-select" name="type_facturation_client" id="type_facturation_client">
                                        <option value="">Sélectionner</option>
                                        <option value="B2B">B2B</option>
                                        <option value="B2F">B2F</option>
                                        <option value="B2G">B2G</option>
                                        <option value="B2C">B2C</option>
                                   </select>
                                </div>

                                <div class="col-xl-12  mb-1">
                                    <div class="lib">Email* :</div>
                                    <input type="email" class="form-control" name="email_client" id="email_client" placeholder="Email du client" />
                                </div>

                                <div class="col-xl-12">
                                    <div class="lib">Téléphone* :</div>
                                    <input type="number" class="form-control" name="telephone_client" id="telephone_client" placeholder="Téléphone du client" />
                                </div>

                            </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_client">Enregistrer</button>
                </div>
                </div>
            </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="clientInfoModal" tabindex="-1" aria-labelledby="clientInfoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="clientInfoModalLabel">Informations du client</h1>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="card card-border">
                            <div class="card-body">

                               <div class="row">
                                    <div class="col-xl-3">
                                      <div class="d-flex">
                                         <img src="{{ asset('assets/images/userDefault.png') }}" style="width:40px;height:40px" />
                                         <div class="mt-3" id="fetch_client"></div>
                                      </div>
                                    </div>
                                    <div class="col-xl-3">
                                        <div class="mt-3">
                                            Email : <span id="fetch_email"></span>
                                        </div>
                                    </div>
                                    <div class="col-xl-3">
                                       <div class="d-flex mt-3">
                                            <div> Statut :</div>
                                            <div id="fetch_statut" class="ms-2 mt-1">ACTIF</div>
                                       </div>
                                    </div>
                                    <div class="col-xl-3 mt-3">
                                        Solde : <span id="fetch_solde" class="fw-bold">0</span>
                                    </div>
                               </div>
                            </div>
                    </div>

                        <ul class="nav nav-tabs tab-style-2 nav-justified mb-3 d-sm-flex d-block" id="myTab1" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="order-tab" data-bs-toggle="tab"
                                    data-bs-target="#order-tab-pane" type="button" role="tab"
                                    aria-controls="home-tab-pane" aria-selected="true"><i
                                        class="ri-gift-line me-1 align-middle"></i>Ventes</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link " id="confirmed-tab" data-bs-toggle="tab"
                                    data-bs-target="#confirm-tab-pane" type="button" role="tab"
                                    aria-controls="profile-tab-pane" aria-selected="false"><i
                                        class="ri-check-double-line me-1 align-middle"></i>Règlements</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="shipped-tab" data-bs-toggle="tab"
                                    data-bs-target="#shipped-tab-pane" type="button" role="tab"
                                    aria-controls="contact-tab-pane" aria-selected="false"><i
                                        class="ri-shopping-bag-3-line me-1 align-middle"></i>Documents</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="delivered-tab" data-bs-toggle="tab"
                                    data-bs-target="#delivered-tab-pane" type="button" role="tab" aria-selected="false"><i
                                    class="ri-truck-line me-1 align-middle"></i>Reservations</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade text-muted show active" id="order-tab-pane" role="tabpanel"
                                aria-labelledby="home-tab" tabindex="0">

                               <div class="table-responsive">
                                    <table class="table table-striped" id="table_client_vente">

                                        <thead>
                                            <th>Numéro vente</th>
                                            <th>Numéro lot</th>
                                            <th>Superficie</th>
                                            <th>Longitude</th>
                                            <th>Latitude</th>
                                            <th>Prix de vente</th>
                                            <th>Remise</th>
                                            <th>Net à payer</th>
                                            <th>Total payé</th>
                                            <th>Reste à payer</th>

                                        </thead>

                                    </table>
                               </div>
                            </div>
                            <div class="tab-pane fade  text-muted" id="confirm-tab-pane"
                                role="tabpanel" aria-labelledby="profile-tab" tabindex="0">


                                    <div class="table-responsive">
                                            <table class="table table-striped" id="table_client_reglement">

                                                <thead>
                                                    <th class="text-center">Date</th>
                                                    <th>Numéro règlement</th>
                                                    <th>Reférence</th>
                                                    <th>Montant</th>
                                                </thead>

                                            </table>
                                    </div>

                            </div>
                            <div class="tab-pane fade text-muted" id="shipped-tab-pane" role="tabpanel"
                                aria-labelledby="contact-tab" tabindex="0">
                                <div class="table-responsive">
                                    <table class="table table-striped" id="table_client_fichier">
                                        <thead>
                                            <th>#</th>
                                            <th>Nom document</th>
                                            <th>Nature</th>
                                            <th>Fichier</th>
                                        </thead>
                                    </table>
                               </div>
                            </div>
                            <div class="tab-pane fade text-muted" id="delivered-tab-pane" role="tabpanel" tabindex="0">

                                <div class="table-responsive">
                                    <table class="table table-striped" id="table_client_reservation">

                                        <thead>
                                             <th>Date</th>
                                            <th>Numéro reservation</th>
                                            <th>Numéro lot</th>
                                            <th>Superficie</th>
                                            <th>Prix de vente</th>
                                        </thead>
                                    </table>
                               </div>

                            </div>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="save_client">Enregistrer</button>
                </div>
                </div>
            </div>
        </div>
</div>


@endsection

@section('script')

<script>


    $(document).ready(function(){

        var showmodal_client = 0;

        recuperation_client()
        $('#save_client').on('click',function(){
            $('#client_form').submit();
        })

        $('#client_form').on('submit',function(e){
            e.preventDefault();
            var documents = JSON.parse(localStorage.getItem('documentsTemp')) || [];
            var formData = new FormData(this);
            formData.append('documents', JSON.stringify(documents));
            $.ajax({
                type: "POST",
                url: "{{ route('client.store') }}",
                data: formData,
                dataType: "JSON",
                contentType:false,
                processData:false,
                beforeSend:function(){

                   if($('#nom_client').val().length == 0){
                         notify_error('Ce champ est obligatoire')
                        $('#nom_client').focus()
                        return false
                   }

                   if($('#prenom_client').val().length == 0){
                         notify_error('Ce champ est obligatoire')
                        $('#prenom_client').focus()
                        return false
                   }

                    if($('#civilite_client').val()== 'Société' && $('#ncc_client').val().length == 0){
                         notify_error('Ce champ est obligatoire')
                        $('#ncc_client').focus()
                        return false
                   }

                   if($('#civilite_client').val()== 'Société' && $('#type_facturation_client').val() == ''){
                         notify_error('Type de facturation obligatoire')
                        $('#type_facturation_client').focus()
                        return false
                   }

                  

                   if($('#email_client').val().length == 0){
                         notify_error('Ce champ est obligatoire')
                        $('#email_client').focus()
                        return false
                   }

                   if($('#telephone_client').val().length == 0){
                         notify_error('Ce champ est obligatoire')
                        $('#telephone_client').focus()
                        return false
                   }
                },
                success: function (resp) {
                    $('#clientModal').modal('hide')
                    notif('success', 'Succès', resp.msg);
                    $('#id_hidden').val(0)
                    recuperation_client()
                    $('#client_form')[0].reset()
                    localStorage.removeItem('documentsTemp');
                    refreshDocumentTable();
                },
                error:function(error){

                }
            });
        })

        // ::::::::::::::: SUPPRESION DE CLIENT :::::::::::::::::::::::
        $(document).on('click','#checkbox_ligne',function(){
            var id = $(this).data('id')
            alert(id)
        })

        // ::::::::::::::: MODIFICATION DE CLIENT :::::::::::::::::::::::
        $(document).on('click','#modification_ligne',function(){
            var id = $(this).data('id')

            useAjaxPromise('GET',"{{ route('client.get') }}",{id :id })
             .then(resp => {
                $('#nom_client').val(resp.data[0].nom_client)
                $('#prenom_client').val(resp.data[0].prenom_client)
                $('#email_client').val(resp.data[0].email_client)
                $('#telephone_client').val(resp.data[0].telephone_client)
                $('#civilite_client').val(resp.data[0].civilite_client)
                $('#ncc_client').val(resp.data[0].ncc_client)
                $('#adresse_client').val(resp.data[0].adresse_client)
                $('#type_facturation_client').val(resp.data[0].type_facturation_client)
                $('#id_hidden').val(resp.data[0].id_client)
                $('#clientModal').modal('show')
            })
            .catch(err => {
                console.error("Erreur :", err);
            });
        })

         // ::::::::::::::: SUPPRESION DE CLIENT :::::::::::::::::::::::
        $(document).on('click','#suppression_ligne',function(){
            var id = $(this).data('id')
             sweet_alert(callback = function() {
                useAjaxPromise('DELETE',"{{ route('client.delete') }}",{id :id,_token:'{{ csrf_token() }}' })
                .then(resp => {
                    notif('success', 'Succès', resp.msg);
                    recuperation_client()
                })
                .catch(err => {
                    console.error("Erreur :", err);
                });
            })
        })
         // ::::::::::::::: MODIFICATION DE STATUT DE CLIENT :::::::::::::::::::::::
        $(document).on('change','#statut-client',function(){
            var id = $(this).data('id')
            var statut_val = $(this).val()
            useAjaxPromise('GET',"{{ route('client_statut.update') }}",{id_hidden :id,statut:statut_val })
             .then(resp => {
                 notif('success', 'Succès', resp.msg);
            })
            .catch(err => {
                console.error("Erreur :", err);
            });
        })

        // ::::::::::::::::::::::::::: RECHERCHE TRI :::::::::::::::::::::::::::::
        $('#btn-recherche').on('click',function(){
            recuperation_client(null,$('#solde_tri').val(), $('#signe_tri').val(),$('#statut_tri').val())
        })

        $(document).on('click','#call_documentModal',function(){
            $('#clientModal').modal('hide');
            $('#DocumentModal').modal('show');
        });

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

            if(showmodal_client == 1){
                 $('#DocumentModal').modal('hide');
                showmodal_client = 0;
            }
            else{
                  $('#clientModal').modal('show');
            }
        });

        $(document).on('click','#voir_doc_associe',function(){
            showmodal_client = 1;
            var id = $(this).data('id')
             $('#check_btn_addocument').val(id)
            useAjaxPromise('GET',"{{ route('document.get') }}",{id:id })
             .then(resp => {

                if(resp.data.length == 0){
                   //notif('info', 'Info', 'Aucun document associé pour ce client.');
                     refreshDocumentTable(null,null,'documentLotTable');
                    $('#DocumentModal').modal('show');
                    return;
                }
                //$('#check_btn_addocument').val(resp.data[0].id_doc_concerne)
                $('#doc_type').val(resp.data[0].type_document);

                refreshDocumentTable(resp.data,true);
                $('#DocumentModal').modal('show');
            })
            .catch(err => {
                console.error("Erreur :", err);
            });
        });

        $(document).on('click','.removedocument_for_base',function(){
            var id = $(this).data('id')
            var id_concerne = $(this).data('id_concerne')

            sweet_alert(callback = function() {
                useAjaxPromise('DELETE',"{{ route('document.delete') }}",{id_document :id,_token:'{{ csrf_token() }}' })
                .then(resp => {
                    notif('success', 'Succès', resp.msg);
                     recuperation_document(id_concerne);

                })
                .catch(err => {
                    console.error("Erreur :", err);
                });
            })
        })

        $(document).on('click','#clientInfo',function(){
            var id = $(this).data('id')
            var client_nom = $(this).data('client_nom')
            var client_prenom = $(this).data('client_prenom')
            var client_solde = $(this).data('client_solde')
            var client_statut = $(this).data('client_statut')
            var client_email = $(this).data('client_email')

            var statut = "";
            if(client_statut == 1){
                statut = '<span class="badge bg-success">ACTIF</span>'
            }else{
                statut = '<span class="badge bg-danger">SUSPENDU</span>'
            }

            var nom_complet = client_nom + ' '+client_prenom
            $('#fetch_client').text(nom_complet)
            $('#fetch_solde').text(formatNumber(client_solde))
            $('#fetch_email').text(client_email)

            $('#fetch_statut').html("")
            $('#fetch_statut').append(statut)

            recuperation_vente_client(id)
            recuperation_fichier_client(id)
            recuperation_reglement_client(id)
            recuperation_reservation_client(id)
        })

        $(document).on('click', '#viewDoc', function () {
            const url = $(this).data('url');
            window.open(url, '_blank'); // ouvre dans un nouvel onglet
        });

        $(document).on('click', '#generate_contrat', function () {
            var id = $(this).data('id')
            ajax({
                type: "GET",
                url: "{{ route('client.contrat.generate') }}",
                data: {id:id},
                dataType: "json",
                beforeSend:fetchLoader("Génération du contrat..."),
                success: function (resp) {
                    removeLoader();
                    if(resp.url){
                        window.open(resp.url, '_blank');
                    }else{
                        notify_error('Erreur lors de la génération du contrat.');
                    }
                },
                error:handleAjaxError
            });
           // window.location.href = "{{ route('client.contrat.generate') }}?id="+id;
        }); 

    })

    function select($val, $id) {
            var $tab = [{
                    'val': 1,
                    'libelle': 'ACTIF'
                },
                {
                    'val':2,
                    'libelle': 'SUSPENDU'
                }
            ];

            var output = ''
            $.each($tab, function(key, value) {
                output +=
                    `<option value="${value.val}" ${$val==value.val ? 'selected': ''}>${value.libelle}</option>`;
            })
            return '<select data-id="' + $id + '" id="statut-client" class="form-select">' + output + '</select>';
        }

    function recuperation_client($id,$solde_tri,$signe_tri,$statut_tri){

        $.ajax({
            type: "GET",
            url: "{{ route('client.get') }}",
            data: {id:$id,
                solde_tri:$solde_tri,
                signe_tri:$signe_tri,
                statut_tri:$statut_tri,
            },
            dataType: "json",
            beforeSend:fetchLoader("Chargement des données..."),
            success: function (resp) {
                var table = $('#clientsTable').DataTable();
                table.clear();
                $.each(resp.data,function(key,value){
                    table.row.add([

                        `<div class="d-flex">
                         ${  renderActions(value.id_client,null,'modification_ligne','suppression_ligne',null,'voir_doc_associe')}
                             <button class="btn btn-icon btn-outline-info rounded-pill btn-wave btn-action "
                                    data-id="${value.id_client}"
                                    data-client_nom="${value.nom_client}"
                                    data-client_prenom="${value.prenom_client}"
                                    data-client_solde="${value.soldes}"
                                    data-client_statut="${value.statut}"
                                    data-client_email="${value.email_client}"
                                    id="clientInfo" title="Infos client">

                                <i class="bi bi-info-lg icon-action"></i>
                            </button>
                        </div>`,
                        value.civilite_client,
                        value.nom_client,
                        value.prenom_client,
                        value.email_client,
                       
                        value.telephone_client,
                        select(value.statut,value.id_client),
                       `<span style="font-weight:bold">${formatNumber(value.soldes)}</span>`
                    ])
                })
                table.draw();
                removeLoader()
            },
            error:handleAjaxError
        });
    }

    function recuperation_document($id){

        $.ajax({
            type: "GET",
            url: "{{ route('document.get') }}",
            data: {id:$id},
            dataType: "json",
            success: function (resp) {
                refreshDocumentTable(resp.data,true);
            },
            error:handleAjaxError
        });
    }

    function recuperation_vente_client($id){

        $.ajax({
            type: "GET",
            url: "{{ route('client_vente_lot.get') }}",
            data: {id:$id},
            dataType: "JSON",
            success: function (resp) {

    
                console.log(resp.data)
                var table = $('#table_client_vente').DataTable()
                table.clear()
                $.each(resp.data,function(key,value){
                    var net_a_payer = value.prix_vente - (value.prix_vente *  value.remise_vente)/100;
                     var reste_a_payer = net_a_payer - value.montant_regle;
                    table.row.add([
                        value.numero_vente,
                        value.numero_lot,
                        value.superficie+' m²',
                        value.latitude_lot,
                        value.longitude_lot,
                        formatNumber(value.prix_vente),
                        value.remise_vente+' %',
                        formatNumber(value.prix_vente - (value.prix_vente *  value.remise_vente)/100),
                         formatNumber(value.montant_regle),
                        formatNumber(net_a_payer - value.montant_regle),
                

                    ]);
                })

                table.draw();
             $('#clientInfoModal').modal('show')
            },
            error:handleAjaxError
        });
    }

    function recuperation_fichier_client($id){

        $.ajax({
            type: "GET",
            url: "{{ route('client_fichier.get') }}",
            data: {id:$id},
            dataType: "JSON",
            success: function (resp) {


                var table = $('#table_client_fichier').DataTable()
                table.clear()
                $.each(resp.data,function(key,value){
                    table.row.add([
                        ` <button class="btn btn-icon btn-outline-info rounded-pill btn-wave btn-action"
                                    data-url="${value.doc_url}"
                                    id="viewDoc">
                                <i class="bi bi-eye icon-action"></i>
                            </button>`,
                        value.nom_document,
                        value.libelle,
                        value.url_doc,

                    ]);
                })

                table.draw();

            },
            error:handleAjaxError
        });
    }

    function recuperation_reglement_client($id){

        $.ajax({
            type: "GET",
            url: "{{ route('client_reglement.get') }}",
            data: {id:$id},
            dataType: "JSON",
            success: function (resp) {

                var table = $('#table_client_reglement').DataTable()
                table.clear()
                $.each(resp.data,function(key,value){
                    table.row.add([
                        formatDate(value.date_reglement),
                        value.numero_reglement,
                        value.reference_client,
                        formatNumber(value.montant_reglement),
                    ]);
                })
                table.draw();
            },
            error:handleAjaxError
        });
    }

    function recuperation_reservation_client($id){

        $.ajax({
            type: "GET",
            url: "{{ route('client_reservation.get') }}",
            data: {id:$id},
            dataType: "JSON",
            success: function (resp) {

                var table = $('#table_client_reservation').DataTable()
                table.clear()
                $.each(resp.data,function(key,value){
                    table.row.add([
                        formatDate(value.created_at),
                        value.numero_reservation,
                        value.numero_lot,
                        value.superficie+' m²',
                        formatNumber(value.prix_vente_lot),
                    ]);
                })
                table.draw();
            },
            error:handleAjaxError
        });
    }

</script>
@endsection