@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section('css')
    @include('dashboard.Boutique.Boutique_template.layouts.grocery.css_other_page')
@endsection
@section('content')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        fieldset {
            border: none;
        }

        .paid {
            background: #9ece9e;
            cursor: not-allowed;
        }

        .impaid {
            background: #992832;
        }

        .impaid:hover {
            background: #de747d;
        }

        .mounth-paid-box {
            cursor: pointer;
        }

        .attente {
            border: 2px dashed #ddd;
        }

        .attente:hover {
            background: #f8f8f8;
        }

        .selected-cotisation {
            border: 3px solid orange;
        }

        .nav-pills-custom .nav-link {
            color: #aaa;
            background: #fff;
            position: relative;
        }

        .nav-pills-custom .nav-link.active {
            color: #45b649;
            background: #fff;
        }


        /* Add indicator arrow for the active tab */
        @media (min-width: 992px) {
            .nav-pills-custom .nav-link::before {
                content: '';
                display: block;
                border-top: 8px solid transparent;
                border-left: 10px solid #fff;
                border-bottom: 8px solid transparent;
                position: absolute;
                top: 50%;
                right: -10px;
                transform: translateY(-50%);
                opacity: 0;
            }
        }

        .nav-pills-custom .nav-link.active::before {
            opacity: 1;
        }

        .tab-content {
            display: block;
        }

        .cotisation-details .badge {
            padding: 5px 10px !important;
        }

        .stats-cot-details {
            display: inline-block;
            margin-bottom: 10px;
        }

        .list-media a {
            font-size: 12pt;
            color: #fff;
            margin-bottom: 2px;
        }

        .list_boutique:hover .list-media {
            transition: all 1000ms ease;
            display: inline-block;
        }

        .list-media {
            display: block;
            margin-bottom: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .list-media:hover {
            box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            transition: all 500ms ease;
        }

        #media-share {
            z-index: 99;
        }

        .whatsapp {
            width: 30px;
            height: 30px;
            line-height: 32px;
            text-align: center;
            background: green;
            border-radius: 100%;
            font-weight: bold;
        }

        .facebook {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #0e0ea0;
            border-radius: 100%;
            font-weight: bold;
        }

        .instagram {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #48aed6;
            border-radius: 100%;
            font-weight: bold;
        }

        .list-media {
            display: inline-block;
            text-align: center;
        }

        .list-media div {
            margin-left: 3%;
        }
    </style>

    @include('dashboard.Boutique.Boutique_template.layouts.grocery.banner', [
        'page_title' => 'PANIER MADE IN AFRICA (MIB) ' . $year,
    ])
    @php
        $params = new \App\ParametrageMib();
        $souscription = $params->getParametersByKeys('souscription', $boutique->id, $year);
        $devise = $params->getParametersByKeys('devise', $boutique->id, $year);
        $jour_fin = $params->getParametersByKeys('jour_fin', $boutique->id, $year);
        $fin_souscription = $params->getParametersByKeys('fin_souscription', $boutique->id, $year);
        $active_carte_brunch = $params->getParametersByKeys('active_carte_brunch', $boutique->id, $year);
        $can_have_carte_brunch = $params->getParametersByKeys('can_have_carte_brunch', $boutique->id, $year);
        $parainnage = $params->getParametersByKeys('parainnage', $boutique->id, $year);
    @endphp
    <div id="contact-us-page" class="page-content page-content--centered container">
        <div class="col-12">
            <div class="row">
                @if (\Illuminate\Support\Facades\Auth::check())
                    @if (isset($souscription) &&
                            $souscription != null &&
                            isset($devise) &&
                            $devise != null &&
                            isset($jour_fin) &&
                            $jour_fin != null &&
                            isset($fin_souscription) &&
                            $fin_souscription != null &&
                            isset($parainnage) &&
                            $parainnage != null)
                        <div class="col-lg-12">

                            <div class="row">
                                <div class="col-12 mb-3">
                                    <a href="{{ url($boutique->nom_boutique . '/mib/client/list/' . $year) }}"
                                        class="btn btn-dark btn-sm"><i class="mdi mdi-arrow-left-thin"></i> Mes comptes
                                        Panier MIB</a>
                                </div>
                                <div class="col-md-4">
                                    <div class="col-12 pt-4 pb-4" style="background: #f8f8f8;border-radius: 10px">
                                        <div class="row">
                                            <div class="col-12 text-center">
                                                <img data-src="{{ asset('images/user.png') }}" class="lazy"
                                                    style="width: 100px;height: 100px;border-radius: 100%" alt="">
                                            </div>
                                            <div class="col-12 text-center">
                                                <strong>{{ $client->nom }} {{ $client->prenom }}</strong> <br>
                                            </div>
                                        </div>
                                    </div>
                                    @if (intVal(date('Y')) == intVal($year))
                                        <div class="col-12 pt-4 pb-4 mt-3" style="background: #f8f8f8;border-radius: 10px">
                                            <div class="row">

                                                <div class="col-12 text-center">
                                                    Lien de parainnage <br>
                                                    <strong
                                                        style="font-size: 7pt">{{ route('boutique.mib.client', $boutique['nom_boutique']) }}?prn-mib={{ str_replace('user', 'prn-mib', \Illuminate\Support\Facades\Auth::user()->slug) }}</strong>
                                                </div>
                                    @endif
                                    @if (intVal(date('Y')) == intVal($year))
                                        <div class="text-left mb-3 mt-3 col-12 text-center">
                                            <div class="list-media whatsapp"><a target="_blank"
                                                    href="https://api.whatsapp.com/send?text=Accede%20au%20panier%20mib%20sur%20sungrocery%20%3A%20%20{{ route('boutique.mib.client', $boutique['nom_boutique']) }}?prn-mib={{ str_replace('user', 'prn-mib', \Illuminate\Support\Facades\Auth::user()->slug) }}"><i
                                                        class="fab fa-whatsapp"></i></a></div>
                                            <div class="list-media facebook"><a target="_blank"
                                                    href="https://www.facebook.com/sharer/sharer.php?u={{ route('boutique.mib.client', $boutique['nom_boutique']) }}?prn-mib={{ str_replace('user', 'prn-mib', \Illuminate\Support\Facades\Auth::user()->slug) }}"
                                                    title="Share on Facebook"><i class="fab fa-facebook-f"></i></a></div>
                                            <div class="list-media instagram"><a target="_blank"
                                                    href="https://www.linkedin.com/shareArticle?mini=true&url={{ route('boutique.mib.client', $boutique['nom_boutique']) }}?prn-mib={{ str_replace('user', 'prn-mib', \Illuminate\Support\Facades\Auth::user()->slug) }}"><i
                                                        class="fab fa-linkedin-in"></i></a></div>
                                            <div class="list-media share">
                                                <a href="#" class="share_btn" data-title="Panier Mib"
                                                    data-test="Rejoignez nous sur sungrocery pour profiter des offres panier Mib de {{ $year }}"
                                                    data-url="{{ route('boutique.mib.client', $boutique['nom_boutique']) }}?prn-mib={{ str_replace('user', 'prn-mib', \Illuminate\Support\Facades\Auth::user()->slug) }}"><i
                                                        class="mdi mdi-share-variant-outline"></i>
                                                </a>
                                            </div>
                                        </div>

                                </div>
                            </div>
                    @endif
                    @if (intVal(date('Y')) == intVal($year))
                        <div class="col-12 pt-4 pb-4 mt-3" style="background: #f8f8f8;border-radius: 10px">
                            <div class="row">
                                <div class="col-12">
                                    <strong>Portefeuille sungrocery:
                                        {{ $client->user->portefeuilleDevice($devise) ? $client->user->portefeuilleDevice($devise)->montant : 0 }}
                                        {{ $devise }}
                                    </strong> <br>
                                    <button class="btn btn-light btn-sm" id="retrait_mib">Faire un retrait</button>
                                </div>

                            </div>
                        </div>
                    @endif
                    <div class="col-12 pt-4 pb-4 mt-3" style="background: #f8f8f8;border-radius: 10px">
                        <div class="row">
                            <div class="col-12">
                                <strong>Status Panier MIB {{ $year }}</strong> <br>
                                @if ($client->status_cotisation && intVal(date('Y')) == intVal($year))
                                    <span class="fa fa-circle" style="color: orange"></span> en cours
                                @else
                                    <span class="fa fa-circle" style="color: red"></span> fermé
                                @endif
                            </div>

                        </div>
                    </div>
                    <div class="col-12 pt-4 pb-4 mt-3" style="background: #f8f8f8;border-radius: 10px">
                        <div class="row">
                            <div class="col-12">
                                <strong>Status Cotisation MIB</strong> <br>
                                @if (!$client->end_cotisation)
                                    <span class="fa fa-circle" style="color: orange"></span> en cours
                                @else
                                    @if ($client->livrer)
                                        <span class="fa fa-circle" style="color: #1243bf"></span> terminé - livrer
                                    @else
                                        <span class="fa fa-circle" style="color: green"></span> terminé
                                    @endif
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-12 pt-4 pb-4 mt-3" style="background: #f8f8f8;border-radius: 10px">
                        <div class="row">
                            <div class="col-12">
                                <strong>Solde cotisation</strong> :
                                <strong>{{ $sumPayer }} {{ $devise }} </strong>

                            </div>
                        </div>
                    </div>
                    <div class="col-12 pt-4 pb-4 mt-3" style="background: #f8f8f8;border-radius: 10px">
                        <div class="row">
                            <div class="col-12">
                                <strong>Bonus Panier MIB </strong> :
                                <span
                                    class="badge @if ($client->bonus) badge-success @else badge-danger @endif">
                                    @if ($client->bonus) actif
                                    @else
                                        perdu @endif
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 pt-4 pb-4 mt-3 mb-4" style="background: #f8f8f8;border-radius: 10px">
                        <div class="row">
                            <div class="col-md-12">
                                <!-- Tabs nav -->
                                <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist"
                                    aria-orientation="vertical">
                                    <a class="nav-link mb-3 p-3 shadow active" id="v-pills-home-tab" data-toggle="pill"
                                        href="#v-pills-home" role="tab" aria-controls="v-pills-home"
                                        aria-selected="true">
                                        <i class="fa fa-user-circle-o mr-2"></i>
                                        <span class="font-weight-bold small text-uppercase">Ma Cotisation</span></a>

                                    <a class="nav-link mb-3 p-3 shadow" id="v-pills-profile-tab" data-toggle="pill"
                                        href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
                                        aria-selected="false">
                                        <i class="fa fa-calendar-minus-o mr-2"></i>
                                        <span class="font-weight-bold small text-uppercase">Mes Informations
                                            personnelles</span></a>

                                    @if ($client->categorieMib)
                                        @if (
                                            $client->brunch &&
                                                isset($active_carte_brunch) &&
                                                $active_carte_brunch &&
                                                isset($can_have_carte_brunch) &&
                                                $client->categorieMib->price >= $can_have_carte_brunch)
                                            <a class="nav-link mb-3 p-3 shadow" id="v-pills-messages-tab"
                                                data-toggle="pill" href="#v-pills-messages" role="tab"
                                                aria-controls="v-pills-messages" aria-selected="false">
                                                <i class="fa fa-star mr-2"></i>
                                                <span class="font-weight-bold small text-uppercase">Carte Brunch</span></a>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="col-md-8">

                <!-- Tabs content -->
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade shadow rounded bg-white show active pt-0" id="v-pills-home" role="tabpanel"
                        aria-labelledby="v-pills-home-tab">
                        <div class="">
                            @if (!$client->livrer)
                                <div class="row">
                                    <div class="col-12 cotisation-details "
                                        style="background: #f8f8f8;border-radius: 10px">
                                        <h4>Statistiques</h4>
                                        <span class="stats-cot-details">Impayer: <span class="badge badge-danger">
                                                {{ $impayer }} mois
                                            </span></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span class="stats-cot-details"> Payer: <span class="badge badge-success">
                                                {{ $payer }} mois
                                            </span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span class="stats-cot-details"> Reste à Payer: <span class="badge badge-warning">
                                                {{ $resteApayer }} mois
                                            </span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span class="stats-cot-details">Total Actif: <span class="badge badge-light">
                                                {{ $sumPayer }} {{ $devise }}
                                            </span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span class="stats-cot-details">Montant à payer : <span class="badge  badge-info">
                                                {{ $client->categorieMib->price ?? 0 }} {{ $devise }} /mois
                                            </span>
                                        </span>
                                    </div>

                                    @if (!$client->end_cotisation)
                                        <h5 class="col-12 cotisation-details mb-4">
                                            Sélectionner un mois puis cliquer sur payer ma cotisation pour éffectuer le
                                            paiement.
                                        </h5>
                                        <p class="col-12 cotisation-details mb-4">
                                            <strong>NB:</strong> Notez que des frais supplémentaires destinés à
                                            l'agrégateur
                                            de la solution de paiement s'ajouteront à la somme de base.
                                        </p>
                                    @endif

                                    @foreach ($client->cotisations as $cotisation)
                                        <div class="col-6 col-lg-3 mb-3">
                                            <div class="col-12 text-center mounth-paid-box 
                                                            @if ($cotisation->status) paid  
                                                            @else
                                                                @if (intVal(date('m')) >= intVal($cotisation->numero_mois))
                                                                    @if (intVal(date('m')) == intVal($cotisation->numero_mois))
                                                                        @if (intVal(date('d')) > intVal($jour_fin))
                                                                            impaid 
                                                                            @if (!$client->end_cotisation || $client->status_cotisation) 
                                                                                initialiser-mib-mois @endif
@else
attente
                                                                            @if (!$client->end_cotisation || $client->status_cotisation) initialiser-mib-mois @endif
                                                                        @endif
@else
impaid 
                                                                            @if (!$client->end_cotisation || $client->status_cotisation) initialiser-mib-mois @endif
                                                                    @endif
@else
attente 
                                                                        @if (!$client->end_cotisation || $client->status_cotisation) initialiser-mib-mois @endif
                                                                @endif
                                                            @endif;"
                                                style="padding: 10px;border-radius: 6px;"
                                                data-cotisation="{{ $cotisation->slug }}">
                                                <h4
                                                    style="@if (intVal(date('m')) >= intVal($cotisation->numero_mois)) @if (intVal(date('d')) > intVal($jour_fin))
                                                                        color:#fff; @endif
                                                                @endif">
                                                    {{ $cotisation->mois }}</h4>
                                                <h5>
                                                    @if ($cotisation->status)
                                                        <span class="badge badge-success">payé</span>
                                                    @else
                                                        @if (intVal(date('m')) >= intVal($cotisation->numero_mois))
                                                            @if (intVal(date('m')) == intVal($cotisation->numero_mois))
                                                                @if (intVal(date('d')) > intVal($jour_fin))
                                                                    <span class="badge badge-danger">Impayé</span>
                                                                @else
                                                                    <span class="badge badge-warning">En attente</span>
                                                                @endif
                                                            @else
                                                                <span class="badge badge-danger">Impayé</span>
                                                            @endif
                                                        @else
                                                            <span class="badge badge-warning">En attente</span>
                                                        @endif
                                                    @endif
                                                </h5>
                                            </div>
                                        </div>
                                    @endforeach
                                    @if (!$client->end_cotisation)
                                        @if (intVal(date('Y')) == intVal($year))
                                            <input type="hidden" id="paiement-due" name="have-to-paid[]">
                                            <div class="col-12 text-right">
                                                <button class="btn btn-lg btn-primary"
                                                    data-boutique="{{ $boutique->slug }}"
                                                    data-url="{{ route('cotisation.mib.client') }}"
                                                    id="btn-paiement-cotisation" style="width: 100%; border: none">Payer
                                                    ma cotisation</button>
                                            </div>
                                        @endif
                                    @else
                                        <div class="col-12">
                                            <div class="alert alert-success">
                                                Vous avez finalisé le paiement des cotisations de panier mib dues de
                                                l'année
                                                {{ $year }}.
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="col-12">
                                    <div class="alert alert-success">
                                        Votre panier a été livrer avec succès. <strong> Bonne et joyeuse fête à
                                            vous.</strong>
                                    </div>
                                    @if ($client->commentaire == '' || $client->commentaire == null)
                                        <form action="{{ route('client.commentaire.mib') }}" method="post"
                                            class="mt-4">
                                            @csrf
                                            <div class="form-group">
                                                <label for="client_mib_commentaire">Laissez nous un commentaire.</label>
                                                <textarea name="commentaire" id="client_mib_commentaire" class="form-control" rows="10"></textarea>
                                            </div>
                                            <input type="hidden" name="client_mib_slug" value="{{ $client->slug }}">
                                            <div class="text-right mt-3">
                                                <button class="btn btn-light btn-sm" type="submit">Envoyer</button>
                                            </div>
                                        </form>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="tab-pane fade shadow rounded bg-white pt-0" id="v-pills-profile" role="tabpanel"
                        aria-labelledby="v-pills-profile-tab">
                        <div class="col-12" style="background: #f8f8f8; border-radius: 10px">
                            <div class="row">
                                <h4 class="col-12 mb-4">INFORMATIONS PERSONNELLES</h4>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="nom">Nom</label>
                                        <input type="text" class="form-control" value="{{ $client->nom }}" readonly>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="prenom">Prenom</label>
                                        <input type="text" class="form-control" value="{{ $client->prenom }}"
                                            readonly>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="tel">Téléphone</label>
                                        <input type="number" class="form-control" value="{{ $client->tel }}" readonly>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="adresse">Adresse</label>
                                        <input type="text" class="form-control" value="{{ $client->adresse }}"
                                            readonly>
                                    </div>
                                </div>
                                @if (isset($client->nom_mandataire))
                                    <h4 class="col-lg-12">Mandataire</h4>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="nom_mandataire">Nom et prenom du mandataire</label>
                                            <input type="text" class="form-control"
                                                value="{{ $client->nom_mandataire }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="tel_mandataire">Téléphone du mandataire</label>
                                            <input type="number" class="form-control"
                                                value="{{ $client->tel_mandataire }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="adresse_mandataire">Adresse du mandataire</label>
                                            <input type="text" class="form-control"
                                                value="{{ $client->adresse_mandataire }}" readonly>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="col-12 mt-3" style="background: #f8f8f8; border-radius: 10px">
                            <div class="row">
                                <h4 class="col-12 mb-4">INFORMATION SUR L'OFFRE CHOISI</h4>
                                @if ($client->categorieMib)
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="update_name">Nom du panier</label>
                                            <input type="text" class="form-control"
                                                value="{{ $client->categorieMib->name }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="update_price">Prix</label>
                                            <input type="text" class="form-control"
                                                value="{{ $client->categorieMib->price . ' ' . $devise }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="update_bonus">Les bonus</label>
                                            <textarea type="text" class="form-control" readonly>{{ $client->categorieMib->bonus }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="update_description">Description</label>
                                            <textarea type="text" class="form-control" readonly>{{ $client->categorieMib->description }}</textarea>
                                        </div>
                                    </div>
                                @else
                                    Aucune information disponible
                                @endif

                            </div>
                        </div>

                        <div class="col-12 mt-3" style="background: #f8f8f8; border-radius: 10px">
                            <div class="row">
                                <h4 class="col-12 mb-4">INFORMATION SUR LE LOT CHOISI</h4>
                                @if ($client->lotMib)
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="nom">Nom du panier</label>
                                            <input type="text" class="form-control"
                                                value="{{ $client->lotMib->nom ?? '' }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="valeur_produit">Valeur produit panier</label>
                                            <input type="text" class="form-control"
                                                value="{{ $client->lotMib->valeur_produit . ' ' . $devise }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="numeraire">Numéraire</label>
                                            <input type="text" class="form-control"
                                                value="{{ $client->lotMib->numeraire . ' ' . $devise }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="nombre_possibilite_emballage">Possibilité
                                                d'emballage</label>
                                            <input type="number" class="form-control"
                                                value="{{ $client->lotMib->nombre_possibilite_emballage }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="info_plus">Information supplémentaire</label>
                                            <textarea type="text" class="form-control" readonly>{{ $client->lotMib->info_plus }}</textarea>
                                        </div>
                                    </div>
                                @else
                                    Aucune information disponible
                                @endif
                            </div>
                        </div>

                    </div>
                    @if ($client->categorieMib)
                        @if ($client->brunch && isset($can_have_carte_brunch) && $client->categorieMib->price >= $can_have_carte_brunch)
                            <div class="tab-pane fade shadow rounded bg-white" id="v-pills-messages" role="tabpanel"
                                aria-labelledby="v-pills-messages-tab">
                                <div class="">
                                    @if (intVal(date('Y')) == intVal($year))
                                        <div class="">
                                            <button class="btn btn-light btn-sm" id="make_demande_carte">Faire une
                                                demande</button>
                                        </div>
                                        <div class="" id="demand_form" style="display: none">
                                            <form action="{{ route('demande.brunch.mib') }}" class="row"
                                                method="post">
                                                @csrf
                                                <h4 class=" mb-4 col-12">Faire une demande de carte brunch</h4>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <label for="demande">Pour quelle occasion faites vous cette
                                                            demande ? Veuillez fournir tous les détails pour avoir
                                                            satisfaction.</label>
                                                        <textarea required rows="10" class="form-control" name="demande" placeholder="Ecrire ici"></textarea>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="client_mib_slug"
                                                    value="{{ $client->slug }}">
                                                <div class="col-12 text-right">
                                                    <button class="btn btn-light btn-sm" type="button"
                                                        id="close_demande_carte">Fermer</button>
                                                    <button class="btn btn-primary btn-sm" type="submit">Faire la
                                                        demande</button>
                                                </div>

                                            </form>
                                        </div>
                                    @endif
                                    @if (isset($demandeBrunchs) && $demandeBrunchs != null)
                                        <table class="table table-responsive table-striped table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Demande</th>
                                                    <th>Status</th>
                                                    <th>Emise le</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php($i = 1)
                                                @foreach ($demandeBrunchs as $demande)
                                                    <tr>
                                                        <td>{{ $demande->demande }}</td>
                                                        <td>
                                                            @if ($demande->status == 'en_attente')
                                                                <span class="badge badge-warning">en attente</span>
                                                            @elseif($demande->status == 'accepte')
                                                                <span class="badge badge-success">Validé</span>
                                                            @else
                                                                <span class="badge badge-danger">Annuler</span>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            {{ $demande->created_at->format('d-m-y à H:i') }}
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                            </div>
                        @endif
                    @endif

                </div>
            </div>
        </div>
    </div>
@else
    <div class="col-md-12">
        <div class="alert alert-warning">
            Compte Panier MIB non configurer. Veuillez patientez ...
        </div>
    </div>
    @endif
@else
    <div class="col-md-12 mt-5 pt-5">
        <div class="alert alert-warning text-center">
            Oups! Vous devez vous connecter ou créer un compte pour accéder à cette page.
        </div>
        <div class="col-12 mt-3 mb-5 pb-5 text-center">
            <a href="#" data-target="#BoutiqueAuthModal" class="btn btn-sm btn-light" data-toggle="modal"> se
                connecter</a>
        </div>
    </div>
    @endif
    </div>
    </div>
    </div>

    <div id="detailsCategorieModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-body col-lg-12">
                    <div class="col-lg-12">
                        <div class="row">
                            @csrf

                            <div class="col-lg-12 mb-3">
                                <img src="" id="img_filename" alt="categorie mib img" width="100%">
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="update_name">Nom du panier</label>
                                    <input type="text" class="form-control" readonly name="name" id="update_name">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="update_price">Prix</label>
                                    <input type="number" class="form-control" name="price" id="update_price"
                                        readonly>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="update_bonus">Les bonus</label>
                                    <textarea type="text" class="form-control" name="bonus" id="update_bonus" readonly></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="update_description">Description</label>
                                    <textarea type="text" class="form-control" name="description" id="update_description" readonly></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12 text-right" style="margin-bottom: 30px">
                                <button type="button" class="btn btn-default btn-sm "
                                    data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.kkiapay.me/k.js"></script>
    <script>
        $(document).ready(function() {
            $(document).on('click', '.initialiser-mib-mois', function() {
                let btn = $(this),
                    slug = btn.data('cotisation'),
                    cotisations_data = $('#paiement-due').val();
                !cotisations_data ? cotisations_data = [] : cotisations_data = cotisations_data.split(',');
                if (btn.hasClass('selected-cotisation')) {
                    if (cotisations_data.indexOf(slug) > -1) {
                        cotisations_data.splice(cotisations_data.indexOf(slug), 1)
                    }
                    $('#paiement-due').val(cotisations_data);
                    btn.removeClass('selected-cotisation')
                } else {
                    cotisations_data.push(slug);
                    $('#paiement-due').val(cotisations_data);
                    btn.addClass('selected-cotisation')
                }
            })
            $(document).on('click', '#btn-step1', function() {
                $('#step1').fadeOut('slow', function() {
                    $('#step2').fadeIn('slow')
                });
            })

            $(document).on('click', '#make_demande_carte', function() {
                $('#demand_form').fadeIn('slow', function() {
                    $('#make_demande_carte').fadeOut('slow');
                });
            })
            $(document).on('click', '#close_demande_carte', function() {
                $('#demand_form').fadeOut('slow', function() {
                    $('#make_demande_carte').fadeIn('slow');
                });
            })
            $(document).on('click', '.btn-step2', function() {
                let btn = $(this),
                    url = btn.data('url'),
                    categorie_mib = btn.data('slug'),
                    price_cat = btn.data('price'),
                    carte_brunch = $('#categorie_price_mib_').val(),
                    old = btn.html();
                if (parseInt(price_cat) >= parseInt(carte_brunch)) {
                    $('#carte_brunch_box').fadeIn();
                } else {
                    $('#carte_brunch_box').fadeOut();
                }
                btn.attr('disabled', true).html(
                    '<img src="{{ asset('images/loader.gif') }}" width="20px"> en cours...');
                $('#categorie_mib_slug').val(categorie_mib)
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: url,
                    method: "GET",
                    success: function(data) {
                        btn.attr('disabled', false).html(old);
                        $('#data-lot_list').html(data)
                        $('#step2').fadeOut('slow', function() {
                            $('#step3').fadeIn('slow')
                        });
                    },
                    error: function(data) {
                        btn.attr('disabled', false).html(old);
                    }
                })

            })
            $(document).on('click', '#btn-step3', function() {
                let btn = $(this),
                    lot_mib = btn.data('slug');
                $('#lot_mib_slug').val(lot_mib)
                $('#step3').fadeOut('slow', function() {
                    $('#step4').fadeIn('slow')
                });
            })
            $(document).on('click', '#btn-previous-step2', function() {
                $('#step2').fadeOut('slow', function() {
                    $('#step1').fadeIn('slow')
                });
            })
            $(document).on('click', '#btn-previous-step4', function() {
                $('#step4').fadeOut('slow', function() {
                    $('#step3').fadeIn('slow')
                });
            })
            $(document).on('click', '#btn-previous-step3', function() {
                $('#step3').fadeOut('slow', function() {
                    $('#step2').fadeIn('slow')
                });
            })

            $(document).on('click', '.detailsCategorieMib', function(e) {
                e.preventDefault();
                let btn = $(this),
                    url = btn.attr('href'),
                    oldText = btn.html();
                btn.attr('disabled', true).html(
                    '<img src="{{ asset('images/loader.gif') }}" width="20px"> en cours');
                $.ajax({
                    url: url,
                    method: "GET",
                    success: function(data) {
                        btn.attr('disabled', false).html(oldText);
                        data = JSON.parse(data);
                        $('#img_filename').attr('src', location.origin +
                            '/Uploads/Categories_mib/full/' + data.filename);
                        $('#update_name').val(data.name);
                        $('#update_price').val(data.price);
                        $('#update_description').val(data.description);
                        $('#update_bonus').val(data.bonus);
                        $('#detailsCategorieModal').modal('show')
                    },
                    error: function(data) {
                        btn.attr('disabled', false).html(oldText);
                        $.notify(
                            'Une erreur s\'est est survenue au cours du processus. Veuillez réactualiser la page et reéssayer si elle persiste.',
                            'error')
                    }
                })
            });

        })
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
@endsection