@extends('modelCustomer')

@section('content')
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">

                    <li class="breadcrumb-item active" aria-current="page">Commandes</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            {{-- <button class="btn btn-primary btn-wave me-0" id="callModal"  data-bs-toggle="modal" data-bs-target="#exampleModal" id="">
                <i class="bx bx-plus-circle me-1"></i> Ajouter une notification
            </button> --}}
        </div>
    </div>



    <div class="card custom-card overflow-hidden">

        <div class="card-body p-2 px-3">

            <table class="table table-hover text-nowrap w-100" id="tableListeCommande">
                <thead>
                    <tr>
                   
                        <th data-column="" data-class="text-start" class="text-center">Numero commande</th>
                        <th data-column="" data-class="text-start" class="text-center">Adresse de livraison</th>
                        <th data-column="" data-class="text-start" class="text-center">Montant</th>
                        <th data-column="" data-class="text-start" class="text-center">statut</th>
                        <th data-column="" data-class="text-start" class="text-center">destinataire</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {

            $('#tableListeCommande').DataTable({
                responsive: true,
                language: languageTable,
                "pageLength": 10,
                columnDefs: [{
                    targets: [2],
                    className: 'text-end'
                }]
            });



            $.ajax({
                type: "GET",
                url: "{{ route('recuperationCommande') }}",
                dataType: "JSON",
                success: function(resp) {
                    table= $('#tableListeCommande').DataTable()
                    table.clear().draw();
                    $.each(resp.data, function(key, row) {

                        let statut = '';
                          if (row.statutCommande == 1) {
                            statut =
                                   '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }

                          if (row.statutCommande == 2) {
                            statut =
                                   '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }

                          if (row.statutCommande == 3) {
                            statut =
                                   '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }

                        if (row.statutCommande == 4) {
                            statut =
                                   '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }

                        if (row.statutCommande == 5) {
                            statut =
                                   '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }

                        if (row.statutCommande == 6) {
                            statut =
                                   '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }
                        if (row.statutCommande == 7) {
                            statut =
                                '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }

                         if (row.statutCommande == 8) {
                            statut =
                                '<span class="badge fs-9" style="width : 100%;background:'+row.codeCouleurStatut+'"> <i class="ri-discount-percent-line fs-10"></i> &nbsp; '+row.statut+'</span>'
                        }
                      

                        table.row.add([
                            
                            row.numeroCommande,
                            row.adresseLivraison,
                            formatNumber(row.totalTtc),
                            statut,
                            row.nomUser + ' ' + row.prenomUser
                        ])

                    })

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