@extends('dashboard.Boutique.Boutique_template.layouts.grocery.app')
@section("css")
    @include("dashboard.Boutique.Boutique_template.layouts.grocery.css_other_page")
    @include('dashboard.Boutique.Boutique_template.styles.modern_compte_mib_styles')
@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 compte-mib-back-button">
            <a href="{{ url($boutique->nom_boutique.'/mib/index/') }}" class="btn">
                <i class="fas fa-arrow-left"></i> Mes Paniers MIB
            </a>
        </div>
        <div class="col-lg-12 col-sm-12 col-xs-12 compte-mib-container">
            <div class="compte-mib-header">
                <h4><i class="fas fa-folder-open"></i> Liste des comptes Panier MIB {{ $year }} que vous gérez</h4>
                <p>Cliquez sur chaque compte pour voir les statistiques et valider vos paiements. </p>
            </div>
            <div class="row">
                @if(intVal(date('Y')) == intVal($year))
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                        <a href="{{ url($boutique->nom_boutique.'/create/mib/index/'.$year) }}" class="compte-mib-card compte-mib-add-card">
                            <div class="add-card-content">
                                <div class="add-icon">
                                    <i class="fas fa-plus"></i>
                                </div>
                                <h4>Ajouter un compte</h4>
                            </div>
                        </a>
                    </div>
                @endif
                @foreach($clients as $client)
                <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div class="compte-mib-card">
                        <div class="compte-mib-card-body">
                            <div class="compte-mib-avatar">
                                <img data-src="{{asset('images/user.png')}}" src="{{asset('images/user.png')}}" alt="mib_user" class="lazy">
                            </div>
                            <div class="compte-mib-name">
                                <h4>{{ $client->nom.' '.$client->prenom  }}</h4>
                            </div>
                            <div class="compte-mib-stats">
                                <span class="stat-badge impayer">
                                    <i class="fas fa-times-circle"></i>
                                    <span>Impayé: {{$client->impayer}} mois</span>
                                </span>
                                <span class="stat-badge payer">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Payé: {{$client->payer}} mois</span>
                                </span>
                                <span class="stat-badge reste">
                                    <i class="fas fa-clock"></i>
                                    <span>Reste: {{$client->resteApayer}} mois</span>
                                </span>
                            </div>
                            <a href="{{ url($boutique->nom_boutique.'/mib/index/'.$year.'/'.$client->slug) }}" class="compte-mib-manage-btn">
                                Gérer le compte <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
            </div>
        </div>   
    @else
    <div class="col-md-12 compte-mib-container">
        <div class="compte-mib-alert alert-warning text-center">
           <i class="fas fa-exclamation-triangle"></i> Oups! Vous devez vous connecter ou créer un compte pour accéder à cette page.
        </div>
        <div class="col-12 text-center">
            <a href="#" data-target="#BoutiqueAuthModal" class="btn compte-mib-back-button" data-toggle="modal" style="display: inline-flex;">
                <i class="fas fa-sign-in-alt"></i> Se connecter
            </a>
        </div>
    </div>
    @endif   
@endsection