@extends('model')
@section('title_page', 'Tableau de bord')
@section('content')
    {{-- @dd($Utilisateur); --}}

    <div class="row">
        <div class="col-xl-12">
            <div class="accordion accordion-header-bg accordion-bordered" id="accordion-ten">
                <div class="accordion-item">
                    <div class="accordion-header  rounded-lg" id="accord-7One" data-bs-toggle="collapse"
                        data-bs-target="#collapse7One" aria-controls="collapse7One" aria-expanded="true" role="button">
                        <span class="accordion-header-icon"></span>
                        <span class="accordion-header-text">Filtre</span>
                        <span class="accordion-header-indicator"></span>
                    </div>
                    <div id="collapse7One" class="collapse accordion__body show" aria-labelledby="accord-7One"
                        data-bs-parent="#accordion-seven">
                        <div class="accordion-body-text">
                            <div class="row">
                                <div class="mb-3 col-md-4">
                                    <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-3">
                                    <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-4">
                                    <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-1  d-flex align-items-center">
                                    <button
                                        class="btn notreBtnPrimaire d-flex align-items-center justify-content-center w-100 mt-4"
                                        id="btnsearch"><i class="fas fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="col-xl-6">
            <div class="card">
                <div class="card-header p-0 py-1 ps-2">
                    <h3>Factures</h3>
                </div>
                <div class="card-body">
                    <div class="row task">
                        <div class="col-xl-2 col-sm-4 col-6">
                            <div class="task-summary">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-primary count" id="nbreFacture">0</h2>
                                </div>
                                <p>Nbre facture</p>
                            </div>
                        </div>
                        <div class="col-xl-2 col-sm-4 col-6">
                            <div class="task-summary">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-danger count" id="nbreFactureNonSolde">0</h2>
                                </div>
                                <p>Nbre fact. non soldé</p>
                            </div>
                        </div>
                        <div class="col-xl-2 col-sm-4 col-6">
                            <div class="task-summary">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-success count" id="nbreFactureSolde">0</h2>
                                </div>
                                <p>Nbre fact. soldé</p>
                            </div>
                        </div>
                        <div class="col-xl-6 col-sm-4 col-6">
                            <div class="task-summary">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-warning count" id="totalFacture">0</h2>
                                </div>
                                <p>Total facture</p>
                            </div>
                        </div>

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

        <div class="col-xl-3">
            <div class="card">
                <div class="card-header p-0 py-1 ps-2">
                    <h3>Règlement</h3>
                </div>
                <div class="card-body">
                    <div class="row task">
                        <div class="col-xl-4 col-sm-4 col-6">
                            <div class="task-summary">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-primary count" id="nbreReglement">0</h2>
                                </div>
                                <p>Nbre règlement</p>
                            </div>
                        </div>


                        <div class="col-xl-8 col-sm-4 col-6">
                            <div class="task-summary">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-success count" id="totalReglement">0</h2>
                                </div>
                                <p>Total règlement</p>
                            </div>
                        </div>

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

        <div class="col-xl-3">
            <div class="card">
                <div class="card-header p-0 py-1 ps-2">
                    <h3>Solde</h3>
                </div>
                <div class="card-body">
                    <div class="row task">
                        <div class="col-xl-12 col-sm-12 col-12">
                            <div class="task-summary">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="text-danger count" id="soldeGeneral">0</h2>
                                </div>
                                <p>Solde général</p>
                            </div>
                        </div>


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

        <div class="col-xl-12 respo col-xxl-12 col-lg-12">
            <div class="row">
                
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="table-responsive active-projects">
                                <div class="tbl-caption d-flex justify-content-between align-items-center">
                                    <h4 class="heading mb-0">Liste des 10 dernières factures</h4>
                                    <a href="{{ url('/facture_client') }}" class="btn btn-light btn-xs">Voir plus <span
                                            class="btn-icon-end"><i class="fa fa-eye"></i></span>
                                    </a>
                                </div>
                                <table id="projects-tbl" class="table">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Date</th>
                                            <th class="text-center">Numéro</th>
                                            <th class="text-center">Client</th>
                                            <th class="text-center">Montant</th>
                                            <th class="text-center">Date échéance</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table10">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("#Idclient_filtre").select2();
            getData()
            $("#btnsearch").on("click", function() {
                getData()
            })

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

                            $('#nbreFacture').text(formatNumber(response.nbreFacture))
                            $('#nbreFactureNonSolde').text(formatNumber(response.nbreFactNonSolde))
                            $('#nbreFactureSolde').text(formatNumber(response.nbreFactSolde))
                            $('#totalFacture').text(formatNumber(response.totalFacture))
                            $('#nbreReglement').text(formatNumber(response.nbreReglement))
                            $('#totalReglement').text(formatNumber(response.totalReglement))

                            if(response.soldeGeneral > 0){
                                $('#soldeGeneral').text(formatNumber(response.soldeGeneral))
                                $('#soldeGeneral').removeAttr("class")
                                $('#soldeGeneral').addClass("text-warning count")
                            }else{
                                $('#soldeGeneral').text(formatNumber(response.soldeGeneral))
                                $('#soldeGeneral').removeAttr("class")
                                $('#soldeGeneral').addClass("text-success count")

                            }


                            $("#table10").html("")
                            $.each(response.liste10, function(key, value) {
                                $("#table10").append(`
                                <tr>
                                    <td class="text-center">${moment(value.date_facture).format("DD/MM/YYYY")}</td>
                                    <td class="text-center">${value.numero_facture}</td>
                                    <td class="text-start">${value.raison_sociale_client}</td>
                                    <td class="text-end">${formatNumber(value.montant_facture)}</td>
                                    <td class="text-center">${moment(value.date_echeance).format("DD/MM/YYYY")}</td>
                                </tr>
                                `)
                            });
                        }
                    },
                    error: function(response) {
                        console.log(response)
                    }
                });
            }
        })
    </script>
@endsection