@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section("css")
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.css_other_page")
    <style>
        .p-5{
            padding: 30px;
            font-weight: bold;
        }
        .card{
            text-align: center;
            background: #f8f8f8;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
            transition: 300ms;
            }
        .card:hover{
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
            }
    </style>
@endsection
@section('content')
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.banner",["page_title"=> "PANIER MADE IN AFRICA MIB ".$year])
    @if(\Illuminate\Support\Facades\Auth::check())
        <div class="col-12 mb-3">
            <a href="{{ url($boutique->nom_boutique.'/mib/index/') }}" class="btn btn-dark btn-sm"><i class="mdi mdi-arrow-left-thin"></i> Mes Paniers MIB</a>
        </div>
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <h4>Liste des comptes Panier MIB {{ $year }} que vous gérer.</h4>
            <p>Cliquez sur chaque compte pour voir les statistiques et valider vos paiements. </p>
            <div class="row">
                @if(intVal(date('Y')) == intVal($year))
                    <a href="{{ url($boutique->nom_boutique.'/create/mib/index/'.$year) }}" class="col-lg-3 col-xs-6 col-sm-6 col-12">
                        <div class="card p-0" style="border: 2px dashed #ddd;background:#f8f8f8 !important;height:210px;">
                                <div class="card-body text-center p-0">
                                    <h4 class="text-center" style="padding-top:90px"> Ajouter un compte</h4>
                                </div>
                        </div>
                    </a>
                @endif
                @foreach($clients as $client)
                <div class="col-lg-3 col-xs-6 col-sm-6 col-12">
                    <div class="card p-0">
                            <div class="card-body text-center p-0">
                                <img data-src="{{asset('images/user.png')}}" alt="mib_user" class="mt-3 lazy" style="width:50px; height:50px;border-radius:100%;padding:10px;border: 2px solid #000">
                                <h4 class="text-center mt-2 pt-2">{{ $client->nom.' '.$client->prenom  }}</h4>
                                <div style="background-color: white;" class="pb-3 pt-3">
                                        <span class="stats-cot-details badge badge-danger">Impayer: <span>
                                            {{$client->impayer}} mois
                                        </span></span> &nbsp;&nbsp;
                                    <span class="stats-cot-details badge badge-success"> Payer: <span>
                                            {{$client->payer}} mois
                                        </span></span>&nbsp;&nbsp;
                                    <span class="stats-cot-details badge badge-warning"> Reste à Payer: <span>
                                            {{$client->resteApayer}} mois
                                        </span></span>
                                </div>
                                <div>
                                    <a style="width:100%;border-radius:0px;" href="{{ url($boutique->nom_boutique.'/mib/index/'.$year.'/'.$client->slug) }}" class="btn btn-success btn-sm p-3">Gerer le compte <i class="mdi mdi-arrow-right-thin"></i> </a>
                                </div>
                            </div>
                    </div>
                </div>
            @endforeach
            </div>
        </div>   
    @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   
@endsection