@extends('model')
@section('commande', "open")
@section('content')
    <style>
        .monbg {
            background: rgb(98, 60, 43) !important;
        }
    </style>

    @isset($statut)
        {{ $statut }}
    @endisset

    <!-- Start::page-header -->
    <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">
                        <a href="javascript:void(0);">
                            Commandes
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Détail commande</li>
                </ol>
            </nav>
        </div>
        <div class="btn-list">

            <a href="{{ route('commande') }}" class="btn btn-primary btn-wave me-0 waves-effect waves-light">
                <i class="ri-arrow-left-circle-fill"></i> Retour
            </a>
        </div>
    </div>
    <!-- End::page-header -->

    <!-- Start:: Row-1 -->
    <div class="row">
        <div class="col-xl-9">
            <div class="card custom-card overflow-hidden" id="cart-container-delete">
            
                <div class="card-body p-1">
                    <div class="table-responsive">
                        <table class="table text-nowrap" id="tableListe">
                            <thead>
                                <tr>
                                    <th>
                                        Produit
                                    </th>
                                    <th>
                                        Prix unitaire
                                    </th>
                                    <th>
                                        Qté cmandée
                                    </th>
                                    <th>
                                        Qté servie
                                    </th>
                                    <th>
                                        Total
                                    </th>
                                    <th>
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- @dd($commande_ligne) --}}
                                @foreach ($commande_ligne as $item)
                                    <tr>
                                        <td class="cart-items01" style="text-align: start !important">
                                            <div class="d-flex align-items-center">
                                                <div class="me-3">
                                                    <span class="avatar avatar-xl bg-light">
                                                        <img src="{{ asset($item->urlDoc ?? $item->urlDoc_offre) }}" alt="">
                                                    </span>
                                                </div>
                                                <div class="flex-fill">
                                                    <div class="mb-1 fs-14 fw-semibold">
                                                        <span>
                                                            {{ $item->libelleProduit }} &nbsp;
                                                        </span> &nbsp;&nbsp;

                                                        @if($item->libelleStatutCommande)
                                                            <span class="badge fs-9"
                                                                style="background-color: {{ $item->bgCouleur ?: '#6c757d' }} !important;
                                                                       color: {{ $item->colorStatut ?: '#ffffff' }} !important;">
                                                                {{ $item->libelleStatutCommande }}
                                                            </span>
                                                        @endif

                                                        &nbsp; &nbsp;
                                                        @if ($item->avecCouverts == 1)
                                                        <i class="ri-restaurant-fill"></i>
                                                      
                                                        @endif
                                                    </div>
                                                    <div>
                                                       <span class="me-1 fw-medium text-muted">{{ $item->libelleAccompagnement}}</span>
                                                    </div>

                                                    <div class="d-flex gap-4 flex-wrap mb-1 align-items-center">
                                                        <div>
                                                            <span class="me-1">Client :</span>
                                                            <span
                                                                class="fw-semibold fs-14">{{ $item->nomPrenom }}</span>
                                                        </div>
                                                    </div>
                                                    
                                                   
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="fw-semibold fs-14">
                                                {{ formatNumerique($item->prixUnitaire) }}
                                            </div>
                                        </td>
                                        <td class="product-quantity-container">
                                            <div class="input-group flex-nowrap gap-1 rounded-pill cart-input-group">

                                                <input type="text"
                                                    class="form-control form-control-sm rounded-pill text-center p-0"
                                                    aria-label="quantity" value="{{ $item->qte }}"
                                                    id="qte-{{ $item->idcommande_ligne }}" readonly>

                                            </div>
                                        </td>
                                        <td class="product-quantity-container">
                                            <div class="input-group flex-nowrap gap-1 rounded-pill cart-input-group">

                                                <input type="text"
                                                    class="form-control form-control-sm rounded-pill text-center p-0"
                                                    aria-label="quantity" value="{{ $item->qte_servie }}"
                                                    id="qteServie-{{ $item->idcommande_ligne }}" readonly>
                                                @if (!in_array(intval($item->statut), [4, 5, 6, 7]) && !in_array( intval($commande->statutCommande), [2, 5, 4, 6, 7]))
                                                    <button type="button" aria-label="button"
                                                        class="btn btn-icon btn-wave btn-sm border btn-edit rounded-pill btn-primary-light border product-quantity-plus border-start-0 waves-effect waves-light"
                                                        data-id="{{ $item->idcommande_ligne }}">
                                                        <i class="ri-edit-circle-line"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <div class="fs-14 fw-semibold">
                                                {{ formatNumerique($item->totalTtc) }}
                                            </div>
                                        </td>
                                        <td>
                                            {{-- @if (!in_array(, [1,6]))
                                                
                                            @endif --}}
                                            @if ( !in_array( intval($commande->statutCommande), [1, 5, 4, 6, 7]))
                                                <form action="{{ route('commande.modif') }}" method="post">
                                                    <input type="hidden" name="idcommande_ligne"
                                                        value=" {{ $item->idcommande_ligne }}">
                                                    <input type="hidden" name="idcommande"
                                                        value="{{ $commande->idcommande }}">
                                                    @csrf
                                                    @if ( !in_array(intval($item->statut), [4, 6, 7]))
                                                        <button type="submit" name="etape" value="terminerLigne"
                                                            class="btn btn-icon btn-success btn-sm me-1"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            data-bs-title="Terminer">
                                                            <i class="ri-check-double-fill"></i>
                                                        </button>
                                                        <button type="submit" name="etape" value="annulerLigne"
                                                            class="btn btn-icon btn-danger btn-sm btn-delete"
                                                            data-bs-toggle="tooltip" data-bs-placement="top"
                                                            data-bs-title="Annuler">
                                                            <i class="ri-delete-bin-line"></i>
                                                        </button>
                                                    @endif
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card border-warning custom-card">
                <div class="card-header bg-warning-transparent">
                    <div class="card-title ">
                        Détail de la commande
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="p-3 border-bottom border-block-end-dashed">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="text-muted">Numéro commande</div>
                            <div class="fw-medium fs-14">{{ $commande->numeroCommande }}</div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="text-muted">Date commande</div>
                            <div class="fw-medium fs-14">{{ date_format(date_create($commande->dateCommande), "d/m/Y H:i:s") }}</div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div class="text-muted">Statut</div>
                            <div>
                                @php
                                    $statutCommande = \Illuminate\Support\Facades\DB::table('statut_commandes')
                                        ->where('idstatut_commande', $commande->statutCommande)
                                        ->first();
                                @endphp
                                <span class="badge fs-11"
                                    style="background-color: {{ $statutCommande->bgCouleur ?? '#6c757d' }} !important;
                                           color: {{ $statutCommande->codeCouleur ?? '#ffffff' }} !important;">
                                    {{ $commande->libelleStatutCommande }}
                                </span>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="text-muted">Localisation</div>
                            <div class="fw-medium fs-14">
                                <span>{{ $commande->adresse }}</span>
                            </div>
                        </div>
                        <span class=" mb-3">{{ $commande->precision }}</span>
                    </div>
                    <div class="p-3 border-bottom border-block-end-dashed tab-content">
                        <div class="tab-pane show active overflow-hidden p-0 border-0" id="freeshipping-pane"
                            role="tabpanel" aria-labelledby="freeshipping" tabindex="0">

                            
                            <div class="d-flex align-items-center justify-content-between h5">
                                <div class="fs-16">Total :</div>
                                <div class="fw-semibold">{{ formatNumerique($commande->totalTtc) }}</div>
                            </div>
                            @if ( !in_array( intval($commande->statutCommande), [5, 6, 4]))
                                <form action="{{ route('commande.modif') }}" method="post">
                                    @csrf
                                    <input type="hidden" name="idcommande"  id="idcommande" value="{{ $commande->idcommande }}">
                                    <div class="d-grid">
                                        @if (intval($commande->statutCommande) == 1)
                                            <button type="submit" name="etape" value="confirmer"
                                                class="btn btn-success btn-wave mb-2">Confirmer la commande</button>
                                            <label  class="btn btn-danger-light btn-wave mb-2" id="btnAnnuleCmde">
                                                Annuler la commande
                                            </label>
                                        @elseif (intval($commande->statutCommande) != 6)
                                            <button type="submit" name="etape" value="terminer"
                                                class="btn btn-success btn-wave mb-2">Terminer la commande</button>
                                            <a href="{{ route('commande') }}" name="etape" value="attente"
                                                class="btn btn-light btn-wave mb-2">Retourner au listing</a>
                                        @endif

                                    </div>
                                </form>
                            @endif
                        </div>

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

        
    </div>
    <!-- End:: Row-1 -->
    <!--End::row-2 -->

    {{-- - Section des modals - --}}
    <!-- Modal d'utilisateur-->
    <div id="modalEditQte" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog  modal-sm">

            <div class="modal-content">
                <div class="modal-header bg-primary-light">
                    <svg xmlns="http://www.w3.org/2000/svg" style="height : 20px!important;"
                        class="iconeHeader w-6 h-6 me-2 side-menu__icon" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                    <h5 class="modal-title">Modifier la quantité</h5>
                    <button type="button" class="btn-close bg-light text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form id="changeQte" action="{{ route('commande.modifQte') }}" method="post" class="w-100">
                    @csrf
                    <div class="modal-body iconFond">
                        <svg xmlns="http://www.w3.org/2000/svg" style="height : 70%!important;"
                            class="w-6 h-6 side-menu__icon iconFondBody" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                        </svg>


                        <div class="row" id="row-0">

                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0 d-flex justify-content-between">
                                    Quantité servie
                                </p>
                                <input class="form-control text-center" type="number" min="1" name="newQte"
                                    id="newQte">
                                <input type="hidden" name="idcmdeligne" id="idcmdeligne">
                            </div>


                            <div class="col-md-12 mb-2 pt-xl-3">
                                <p class="text-muted mb-0 d-flex justify-content-between">
                                    Commentaire
                                </p>
                                <textarea class="form-control" name="commentaireQte" id="commentaireQte" cols="30" rows="3"></textarea>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer pt-4 pb-2 mb-0">
                        <button type="submit" class="btn btn-warning" id="btnEditProduit">
                            <i class="bx bx-edit me-1"></i>
                            Modifier
                        </button>
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btnNewProduit">
                            <i class="bx bx-plus-circle me-1"></i>
                            Annuler
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <div id="modalAnnuleCmde" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog  modal-md">

            <div class="modal-content">
                <div class="modal-header bg-primary-light">
                    <svg xmlns="http://www.w3.org/2000/svg" style="height : 20px!important;"
                        class="iconeHeader w-6 h-6 me-2 side-menu__icon" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                    <h5 class="modal-title">Annulation de commande</h5>
                    <button type="button" class="btn-close bg-light text-dark" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <form  action="{{ route('commande.modif') }}" method="post" class="w-100">
                    @csrf
                    <div class="modal-body iconFond">
                        <svg xmlns="http://www.w3.org/2000/svg" style="height : 70%!important;"
                            class="w-6 h-6 side-menu__icon iconFondBody" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                        </svg>


                        <div class="row" id="row-0">

                            <div class="col-md-12 mb-2 text-center">
                                <p class="text-muted text-center mb-0 d-flex h4 justify-content-between">
                                   Pourquoi voulez-vous annuler la commande ?
                                </p>
                           
                                <input type="hidden" name="idcmde" id="idcmde">
                           
                                <textarea class="form-control" name="commentaireAnnule" id="commentaireAnnule" cols="30" rows="3"></textarea>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer pt-4 pb-2 mb-0">
                        <button type="submit" class="btn btn-warning"  name="etape" value="annulerCommande" id="btnEditProduit">
                            <i class="bx bx-edit me-1"></i>
                            Annuler la commande
                        </button>
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btnNewProduit">
                            <i class="bx bx-plus-circle me-1"></i>
                            Fermer
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@endsection


@section('script')
    @if(session('status') === 'success')
    <script>
        // Rafraîchir immédiatement les notifications après confirmation de commande
        $(function() { if (typeof rafraichirNotificationsCommandes === 'function') rafraichirNotificationsCommandes() })
    </script>
    @endif
    <script>
        $(function() {

            $("#tableListe").DataTable({
                bFilter: false, // Activer ou désactiver le filtrage
                language: languageTable, // Utiliser une configuration de langue définie ailleurs
                order: [], // Désactiver le tri initial
                lengthChange: false,
                pageLength: 10,
                lengthMenu: [10, 20, 25, 35, 50, 100, 200, 500],
            })

            var qteEncours = 0;

            $(document).on("click", ".btn-edit", function() {
                let id = $(this).data("id")
                console.log($("#qte-" + id).val())
                $("#qte-" + id).val()
                $("#qteServie-" + id).val()
                $("#newQte").val($("#qteServie-" + id).val())
                $("#idcmdeligne").val(id)
                $("#newQte").attr("max", $("#qte-" + id).val())
                qteEncours = parseInt( $("#qte-" + id).val())
                $("#modalEditQte").modal("show")
            }).on("change", "#newQte", function () { 
                if(parseInt($(this).val()) > qteEncours){
                    $(this).val(qteEncours)
                }

                if(parseInt($(this).val()) < 0){
                    $(this).val(0)
                }
             }).on("click", "#btnAnnuleCmde", function (param) { 
                
                $("#idcmde").val($("#idcommande").val())
                $("#modalAnnuleCmde").modal("show")
              }).on("click", "input", function () { 
                $(this).select()
             })
       
            // .on("submit", "#changeQte", function() {
            //     let formData = new FormData(_("#changeQte"))
            //     $.ajax({
            //         type: "post",
            //         url: "",
            //         data: formData,
            //         dataType: "json",
            //         success: function (response) {

            //         }
            //     });
            // })

        })
    </script>
@endsection