@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>
        /* Modern MIB Page Styles */
        :root {
            --primary-color: #88b121;
            --primary-dark: #6d8f1a;
            --success-color: #28a745;
            --success-light: #9ece9e;
            --danger-color: #dc3545;
            --danger-light: #f8d7da;
            --warning-color: #ffc107;
            --warning-light: #fff3cd;
            --info-color: #17a2b8;
            --light-bg: #f8f9fa;
            --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
            --border-radius: 15px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #contact-us-page {
            padding: 20px 0;
            animation: fadeIn 0.6s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Profile Card Sidebar */
        .profile-sidebar {
            position: sticky;
            top: 100px;
        }

        .profile-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px 20px;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
            transition: var(--transition);
            text-align: center;
        }

        .profile-card:hover {
            box-shadow: var(--card-shadow-hover);
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 20px;
            border: 4px solid var(--primary-color);
            box-shadow: 0 4px 12px rgba(136, 177, 33, 0.2);
            transition: var(--transition);
        }

        .profile-card:hover .profile-avatar {
            transform: scale(1.05);
        }

        .profile-name {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
            margin: 0;
        }

        /* Info Cards */
        .info-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            border-left: 4px solid var(--primary-color);
        }

        .info-card:hover {
            transform: translateX(5px);
            box-shadow: var(--card-shadow-hover);
        }

        .info-card-title {
            font-size: 14px;
            font-weight: 600;
            color: #6c757d;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .info-card-value {
            font-size: 18px;
            font-weight: 700;
            color: #2c3e50;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 500;
        }

        .status-badge.active {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
            color: white;
        }

        .status-badge.closed {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
        }

        .status-badge.completed {
            background: linear-gradient(135deg, #28a745 0%, #218838 100%);
            color: white;
        }

        .status-badge.delivered {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
        }

        /* Social Share Buttons */
        .share-section {
            padding: 15px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            border-radius: var(--border-radius);
        }

        .share-title {
            color: white;
            font-size: 12px;
            text-align: center;
            margin-bottom: 15px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .share-link {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 10px;
            border-radius: 8px;
            font-size: 10px;
            word-break: break-all;
            margin-bottom: 15px;
            text-align: center;
        }

        .social-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .social-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: var(--transition);
            text-decoration: none;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        .social-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
            color: white;
        }

        .social-btn.whatsapp { background: #25D366; }
        .social-btn.facebook { background: #1877F2; }
        .social-btn.linkedin { background: #0A66C2; }
        .social-btn.share { background: #6c757d; }

        /* Navigation Tabs */
        .nav-pills-custom {
            gap: 15px;
        }

        .nav-pills-custom .nav-link {
            border-radius: var(--border-radius);
            padding: 18px 24px;
            background: white;
            border: 2px solid #e9ecef;
            color: #6c757d;
            font-weight: 600;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .nav-pills-custom .nav-link:hover {
            background: #f8f9fa;
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateX(5px);
        }

        .nav-pills-custom .nav-link.active {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            border-color: var(--primary-color);
            color: white;
            transform: translateX(10px);
            box-shadow: 0 4px 12px rgba(136, 177, 33, 0.3);
        }

        .nav-pills-custom .nav-link i {
            font-size: 20px;
        }

        /* Tab Content */
        .tab-content {
            display: block;
        }

        .tab-pane {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--card-shadow);
            animation: slideInRight 0.4s ease;
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* Statistics Bar */
        .stats-bar {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: var(--border-radius);
            padding: 25px;
            margin-bottom: 30px;
        }

        .stats-bar h4 {
            font-size: 18px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .stat-label {
            font-size: 13px;
            color: #6c757d;
            font-weight: 600;
        }

        .stat-value {
            font-size: 16px;
            font-weight: 700;
        }

        .stat-value .badge {
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 20px;
        }

        /* Month Cards */
        .months-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .month-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            border: 3px solid #e9ecef;
            position: relative;
            overflow: hidden;
        }

        .month-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .month-card:hover::before {
            left: 100%;
        }

        .month-card.paid {
            background: linear-gradient(135deg, var(--success-color) 0%, #20c997 100%);
            border-color: var(--success-color);
            color: white;
            cursor: not-allowed;
        }

        .month-card.unpaid {
            background: linear-gradient(135deg, var(--danger-color) 0%, #c82333 100%);
            border-color: var(--danger-color);
            color: white;
        }

        .month-card.unpaid:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
        }

        .month-card.pending {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border: 3px dashed #dee2e6;
            color: #6c757d;
        }

        .month-card.pending:hover {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            transform: translateY(-3px);
        }

        .month-card.selected {
            border-color: var(--warning-color);
            box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
            transform: translateY(-5px) scale(1.02);
            animation: pulseGlow 2s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
            }
            50% {
                box-shadow: 0 8px 30px rgba(255, 193, 7, 0.6);
            }
        }

        .month-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .month-card .badge {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        /* Action Buttons */
        .action-btn {
            padding: 14px 32px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 16px;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }

        .action-btn-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
        }

        .action-btn-outline {
            background: white;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }

        /* Form Styles */
        .form-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: var(--border-radius);
            padding: 30px;
            margin-bottom: 25px;
        }

        .form-section h4 {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--primary-color);
        }

        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 12px 16px;
            transition: var(--transition);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(136, 177, 33, 0.15);
        }

        .form-control[readonly] {
            background: white;
            cursor: default;
        }

        /* Table Styles */
        .modern-table {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }

        .modern-table thead {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
        }

        .modern-table thead th {
            padding: 15px;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 13px;
            letter-spacing: 0.5px;
        }

        .modern-table tbody tr {
            transition: var(--transition);
        }

        .modern-table tbody tr:hover {
            background: #f8f9fa;
            transform: scale(1.01);
        }

        .modern-table tbody td {
            padding: 15px;
            vertical-align: middle;
        }

        /* Alerts */
        .alert-modern {
            border-radius: var(--border-radius);
            padding: 20px 25px;
            border: none;
            box-shadow: var(--card-shadow);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .alert-modern i {
            font-size: 24px;
        }

        .alert-success-modern {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            color: #155724;
        }

        .alert-warning-modern {
            background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
            color: #856404;
        }

        /* Mobile Responsiveness */
        @media (max-width: 991px) {
            .profile-sidebar {
                position: static;
                margin-bottom: 30px;
            }

            .nav-pills-custom .nav-link {
                padding: 15px 20px;
            }

            .nav-pills-custom .nav-link.active {
                transform: translateX(0);
            }

            .nav-pills-custom .nav-link:hover {
                transform: translateX(0);
            }

            .tab-pane {
                padding: 20px;
            }

            .months-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                gap: 12px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .months-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .month-card {
                padding: 15px 10px;
            }

            .month-card h4 {
                font-size: 14px;
            }

            .action-btn {
                width: 100%;
                justify-content: center;
            }

            .social-buttons {
                gap: 8px;
            }

            .social-btn {
                width: 40px;
                height: 40px;
            }
        }

        /* Back Button */
        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 25px;
            background: #2c3e50;
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            margin-bottom: 20px;
        }

        .back-btn:hover {
            background: #1a252f;
            transform: translateX(-5px);
            color: white;
            text-decoration: none;
        }

        /* Wallet Card */
        .wallet-card {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: 0 8px 20px rgba(136, 177, 33, 0.3);
        }

        .wallet-amount {
            font-size: 28px;
            font-weight: 700;
            margin: 15px 0;
        }

        .wallet-btn {
            background: white;
            color: var(--primary-color);
            padding: 10px 20px;
            border-radius: 20px;
            border: none;
            font-weight: 600;
            transition: var(--transition);
            cursor: pointer;
        }

        .wallet-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* Bonus Badge */
        .bonus-indicator {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            border-radius: 25px;
            font-weight: 600;
        }

        .bonus-indicator.active {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }

        .bonus-indicator.lost {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
        }

        /* Payment Summary Box */
        .payment-summary {
            background: linear-gradient(135deg, #f8f8f8 0%, #f8f8f8 50%);
            color: #353434;
            border-radius: var(--border-radius);
            padding: 25px;
            margin-top: 30px;
            box-shadow: 0 8px 20px rgba(210, 210, 210, 0.3);
            animation: slideInUp 0.5s ease;
            display: none;
        }

        .payment-summary.active {
            display: block;
        }

        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .payment-summary-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
        }

        .payment-summary-title {
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .payment-summary-count {
            background: rgba(255, 255, 255, 0.25);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .payment-summary-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .payment-detail-item {
            background: rgba(255, 255, 255, 0.55);
            padding: 15px;
            border-radius: 10px;
        }

        .payment-detail-label {
            font-size: 12px;
            opacity: 0.9;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .payment-detail-value {
            font-size: 24px;
            font-weight: 700;
        }

        .payment-summary-actions {
            display: flex;
            gap: 12px;
        }

        .payment-summary-actions .action-btn {
            flex: 1;
        }

        .action-btn-light {
            background: white;
            color: #007bff;
        }

        .action-btn-light:hover {
            background: #f8f9fa;
        }

        @media (max-width: 576px) {
            .payment-summary-details {
                grid-template-columns: 1fr;
            }

            .payment-summary-actions {
                flex-direction: column;
            }
        }

        /* Selection Hint */
        .selection-hint {
            text-align: center;
            padding: 40px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: var(--border-radius);
            margin-top: 30px;
            border: 2px dashed #dee2e6;
        }

        .selection-hint i {
            font-size: 48px;
            color: #adb5bd;
            margin-bottom: 15px;
            display: block;
        }

        .selection-hint-text {
            color: #6c757d;
            font-size: 16px;
            font-weight: 500;
        }

        .selection-hint.hidden {
            display: none;
        }
    </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)

                        <!-- Back Button -->
                        <div class="col-12 mb-4">
                            <a href="{{ url($boutique->nom_boutique . '/mib/client/list/' . $year) }}" class="back-btn">
                                <i class="mdi mdi-arrow-left"></i> Retour à mes comptes
                            </a>
                        </div>

                        <!-- Sidebar -->
                        <div class="col-lg-4 col-md-12">
                            <div class="profile-sidebar">
                                <!-- Profile Card -->
                                <div class="profile-card">
                                    <img data-src="{{ asset('images/user.png') }}" class="lazy profile-avatar" alt="Profile">
                                    <h3 class="profile-name">{{ $client->nom }} {{ $client->prenom }}</h3>
                                </div>

                                <!-- Wallet Card -->
                                @if (intVal(date('Y')) == intVal($year))
                                    <div class="wallet-card">
                                        <div class="info-card-title" style="color: rgba(255,255,255,0.9);">Portefeuille Sungrocery</div>
                                        <div class="wallet-amount">
                                            {{ $client->user->portefeuilleDevice($devise) ? $client->user->portefeuilleDevice($devise)->montant : 0 }} {{ $devise }}
                                        </div>
                                        <button class="wallet-btn" id="retrait_mib">
                                            <i class="fa fa-money"></i> Faire un retrait
                                        </button>
                                    </div>

                                    <!-- Share Section -->
                                    <div class="info-card share-section mt-3">
                                        <div class="share-title">Partagez votre lien de parrainage</div>
                                        <div class="share-link">
                                            {{ route('boutique.mib.client', $boutique['nom_boutique']) }}?prn-mib={{ str_replace('user', 'prn-mib', \Illuminate\Support\Facades\Auth::user()->slug) }}
                                        </div>
                                        <div class="social-buttons">
                                            <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) }}" class="social-btn whatsapp">
                                                <i class="fab fa-whatsapp"></i>
                                            </a>
                                            <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) }}" class="social-btn facebook">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                            <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) }}" class="social-btn linkedin">
                                                <i class="fab fa-linkedin-in"></i>
                                            </a>
                                            <a href="#" class="social-btn share 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"></i>
                                            </a>
                                        </div>
                                    </div>
                                @endif

                                <!-- Status Cards -->
                                <div class="info-card">
                                    <div class="info-card-title">Status Panier MIB {{ $year }}</div>
                                    @if ($client->status_cotisation && intVal(date('Y')) == intVal($year))
                                        <span class="status-badge active">
                                            <i class="fa fa-circle-o-notch fa-spin"></i> En cours
                                        </span>
                                    @else
                                        <span class="status-badge closed">
                                            <i class="fa fa-times-circle"></i> Fermé
                                        </span>
                                    @endif
                                </div>

                                <div class="info-card">
                                    <div class="info-card-title">Status Cotisation MIB</div>
                                    @if (!$client->end_cotisation)
                                        <span class="status-badge active">
                                            <i class="fa fa-clock-o"></i> En cours
                                        </span>
                                    @else
                                        @if ($client->livrer)
                                            <span class="status-badge delivered">
                                                <i class="fa fa-check-circle"></i> Terminé - Livré
                                            </span>
                                        @else
                                            <span class="status-badge completed">
                                                <i class="fa fa-check-circle"></i> Terminé
                                            </span>
                                        @endif
                                    @endif
                                </div>

                                <div class="info-card">
                                    <div class="info-card-title">Solde cotisation</div>
                                    <div class="info-card-value">{{ $sumPayer }} {{ $devise }}</div>
                                </div>

                                <div class="info-card">
                                    <div class="info-card-title">Bonus Panier MIB</div>
                                    <span class="bonus-indicator @if($client->bonus) active @else lost @endif">
                                        <i class="fa @if($client->bonus) fa-star @else fa-star-o @endif"></i>
                                        @if ($client->bonus) Actif @else Perdu @endif
                                    </span>
                                </div>

                                <!-- Navigation -->
                                <div class="nav flex-column nav-pills nav-pills-custom mt-4" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                    <a class="nav-link 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-credit-card"></i>
                                        <span>Ma Cotisation</span>
                                    </a>

                                    <a class="nav-link" 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-user"></i>
                                        <span>Mes Informations</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" 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"></i>
                                                <span>Carte Brunch</span>
                                            </a>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Main Content -->
                        <div class="col-lg-8 col-md-12">
                            <div class="tab-content" id="v-pills-tabContent">
                                <!-- Cotisation Tab -->
                                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                                    @if (!$client->livrer)
                                        <!-- Statistics -->
                                        <div class="stats-bar">
                                            <h4><i class="fa fa-bar-chart"></i> Statistiques</h4>
                                            <div class="stats-grid">
                                                <div class="stat-item">
                                                    <span class="stat-label">Impayés</span>
                                                    <span class="stat-value">
                                                        <span class="badge badge-danger">{{ $impayer }} mois</span>
                                                    </span>
                                                </div>
                                                <div class="stat-item">
                                                    <span class="stat-label">Payés</span>
                                                    <span class="stat-value">
                                                        <span class="badge badge-success">{{ $payer }} mois</span>
                                                    </span>
                                                </div>
                                                <div class="stat-item">
                                                    <span class="stat-label">Reste à payer</span>
                                                    <span class="stat-value">
                                                        <span class="badge badge-warning">{{ $resteApayer }} mois</span>
                                                    </span>
                                                </div>
                                                <div class="stat-item">
                                                    <span class="stat-label">Total actif</span>
                                                    <span class="stat-value">
                                                        <span class="badge badge-info">{{ $sumPayer }} {{ $devise }}</span>
                                                    </span>
                                                </div>
                                                <div class="stat-item">
                                                    <span class="stat-label">Montant/mois</span>
                                                    <span class="stat-value">
                                                        <span class="badge badge-primary">{{ $client->categorieMib->price ?? 0 }} {{ $devise }}</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        @if (!$client->end_cotisation)
                                            <div class="alert alert-modern alert-warning-modern mb-4">
                                                <i class="fa fa-info-circle"></i>
                                                <div>
                                                    <strong>Comment payer :</strong> Sélectionnez un ou plusieurs mois puis cliquez sur "Payer ma cotisation".
                                                    <br><small><strong>NB:</strong> Des frais supplémentaires de l'agrégateur de paiement s'ajouteront.</small>
                                                </div>
                                            </div>
                                        @endif

                                        <!-- Months Grid -->
                                        <div class="months-grid">
                                            @foreach ($client->cotisations as $cotisation)
                                                <div class="month-card
                                                    @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))
                                                                    unpaid @if (!$client->end_cotisation || $client->status_cotisation) initialiser-mib-mois @endif
                                                                @else
                                                                    pending @if (!$client->end_cotisation || $client->status_cotisation) initialiser-mib-mois @endif
                                                                @endif
                                                            @else
                                                                unpaid @if (!$client->end_cotisation || $client->status_cotisation) initialiser-mib-mois @endif
                                                            @endif
                                                        @else
                                                            pending @if (!$client->end_cotisation || $client->status_cotisation) initialiser-mib-mois @endif
                                                        @endif
                                                    @endif"
                                                    data-cotisation="{{ $cotisation->slug }}">
                                                    <h4>{{ $cotisation->mois }}</h4>
                                                    @if ($cotisation->status)
                                                        <span class="badge badge-success"><i class="fa fa-check"></i> 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"><i class="fa fa-times"></i> Impayé</span>
                                                                @else
                                                                    <span class="badge badge-warning"><i class="fa fa-clock-o"></i> En attente</span>
                                                                @endif
                                                            @else
                                                                <span class="badge badge-danger"><i class="fa fa-times"></i> Impayé</span>
                                                            @endif
                                                        @else
                                                            <span class="badge badge-light"><i class="fa fa-clock-o"></i> À venir</span>
                                                        @endif
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>

                                        @if (!$client->end_cotisation)
                                            @if (intVal(date('Y')) == intVal($year))
                                                <input type="hidden" id="paiement-due" name="have-to-paid[]">
                                                <input type="hidden" id="monthly-price" value="{{ $client->categorieMib->price ?? 0 }}">
                                                <input type="hidden" id="devise" value="{{ $devise }}">

                                                <!-- Selection Hint -->
                                                <div class="selection-hint" id="selection-hint">
                                                    <i class="fa fa-hand-pointer-o"></i>
                                                    <div class="selection-hint-text">
                                                        Sélectionnez un ou plusieurs mois à payer en cliquant dessus
                                                    </div>
                                                </div>

                                                <!-- Payment Summary Box -->
                                                <div class="payment-summary" id="payment-summary">
                                                    <div class="payment-summary-header">
                                                        <div class="payment-summary-title">
                                                            <i class="fa fa-calculator"></i>
                                                            Récapitulatif du paiement
                                                        </div>
                                                        <span class="payment-summary-count">
                                                            <span id="selected-months-count">0</span> mois sélectionné(s)
                                                        </span>
                                                    </div>

                                                    <div class="payment-summary-details">
                                                        <div class="payment-detail-item">
                                                            <div class="payment-detail-label">Prix par mois</div>
                                                            <div class="payment-detail-value">
                                                                <span id="monthly-amount">{{ $client->categorieMib->price ?? 0 }}</span>
                                                                <small style="font-size: 16px;">{{ $devise }}</small>
                                                            </div>
                                                        </div>

                                                        <div class="payment-detail-item">
                                                            <div class="payment-detail-label">Total à payer</div>
                                                            <div class="payment-detail-value">
                                                                <span id="total-amount">0</span>
                                                                <small style="font-size: 16px;">{{ $devise }}</small>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="payment-summary-actions">
                                                        <button class="action-btn action-btn-light" id="clear-selection">
                                                            <i class="fa fa-times"></i> Annuler
                                                        </button>
                                                        <button class="action-btn action-btn-primary" data-boutique="{{ $boutique->slug }}" data-url="{{ route('cotisation.mib.client') }}" id="btn-paiement-cotisation">
                                                            <i class="fa fa-credit-card"></i> Payer <span id="total-amount-btn">0</span> {{ $devise }}
                                                        </button>
                                                    </div>
                                                </div>
                                            @endif
                                        @else
                                            <div class="alert alert-modern alert-success-modern mt-4">
                                                <i class="fa fa-check-circle"></i>
                                                <div>
                                                    <strong>Félicitations !</strong> Vous avez finalisé le paiement des cotisations de panier MIB de l'année {{ $year }}.
                                                </div>
                                            </div>
                                        @endif
                                    @else
                                        <div class="alert alert-modern alert-success-modern">
                                            <i class="fa fa-gift"></i>
                                            <div>
                                                <strong>Livraison effectuée !</strong> Votre panier a été livré avec succès. Bonne et joyeuse fête à vous.
                                            </div>
                                        </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"><strong>Laissez-nous un commentaire</strong></label>
                                                    <textarea name="commentaire" id="client_mib_commentaire" class="form-control" rows="8" placeholder="Partagez votre expérience avec nous..."></textarea>
                                                </div>
                                                <input type="hidden" name="client_mib_slug" value="{{ $client->slug }}">
                                                <div class="text-right mt-3">
                                                    <button class="action-btn action-btn-primary" type="submit">
                                                        <i class="fa fa-paper-plane"></i> Envoyer
                                                    </button>
                                                </div>
                                            </form>
                                        @endif
                                    @endif
                                </div>

                                <!-- Personal Info Tab -->
                                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                                    <div class="form-section">
                                        <h4><i class="fa fa-user"></i> Informations personnelles</h4>
                                        <div class="row">
                                            <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">Prénom</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="text" 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>
                                        </div>

                                        @if (isset($client->nom_mandataire))
                                            <h5 class="mt-4 mb-3"><i class="fa fa-user-plus"></i> Mandataire</h5>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label for="nom_mandataire">Nom et prénom</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</label>
                                                        <input type="text" class="form-control" value="{{ $client->tel_mandataire }}" readonly>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <label for="adresse_mandataire">Adresse</label>
                                                        <input type="text" class="form-control" value="{{ $client->adresse_mandataire }}" readonly>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="form-section">
                                        <h4><i class="fa fa-shopping-basket"></i> Information sur l'offre choisie</h4>
                                        @if ($client->categorieMib)
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>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>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>Les bonus</label>
                                                        <textarea class="form-control" readonly rows="3">{{ $client->categorieMib->bonus }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <label>Description</label>
                                                        <textarea class="form-control" readonly rows="4">{{ $client->categorieMib->description }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="alert alert-modern alert-warning-modern">
                                                <i class="fa fa-info-circle"></i>
                                                <span>Aucune information disponible</span>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="form-section">
                                        <h4><i class="fa fa-cubes"></i> Information sur le lot choisi</h4>
                                        @if ($client->lotMib)
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>Nom du lot</label>
                                                        <input type="text" class="form-control" value="{{ $client->lotMib->nom ?? '' }}" readonly>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>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>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>Possibilité d'emballage</label>
                                                        <input type="text" class="form-control" value="{{ $client->lotMib->nombre_possibilite_emballage }}" readonly>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="form-group">
                                                        <label>Information supplémentaire</label>
                                                        <textarea class="form-control" readonly rows="3">{{ $client->lotMib->info_plus }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="alert alert-modern alert-warning-modern">
                                                <i class="fa fa-info-circle"></i>
                                                <span>Aucune information disponible</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <!-- Brunch Card Tab -->
                                @if ($client->categorieMib)
                                    @if ($client->brunch && isset($can_have_carte_brunch) && $client->categorieMib->price >= $can_have_carte_brunch)
                                        <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                                            @if (intVal(date('Y')) == intVal($year))
                                                <div class="mb-4">
                                                    <button class="action-btn action-btn-primary" id="make_demande_carte">
                                                        <i class="fa fa-plus-circle"></i> Faire une demande
                                                    </button>
                                                </div>

                                                <div id="demand_form" style="display: none">
                                                    <form action="{{ route('demande.brunch.mib') }}" method="post" class="form-section">
                                                        @csrf
                                                        <h4><i class="fa fa-file-text"></i> Demande de carte brunch</h4>
                                                        <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="8" class="form-control" name="demande" placeholder="Décrivez votre demande en détail..."></textarea>
                                                        </div>
                                                        <input type="hidden" name="client_mib_slug" value="{{ $client->slug }}">
                                                        <div class="text-right">
                                                            <button class="action-btn action-btn-outline mr-2" type="button" id="close_demande_carte">
                                                                <i class="fa fa-times"></i> Annuler
                                                            </button>
                                                            <button class="action-btn action-btn-primary" type="submit">
                                                                <i class="fa fa-paper-plane"></i> Envoyer la demande
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            @endif

                                            @if (isset($demandeBrunchs) && $demandeBrunchs != null && count($demandeBrunchs) > 0)
                                                <div class="mt-4">
                                                    <h5 class="mb-3"><i class="fa fa-list"></i> Historique des demandes</h5>
                                                    <table class="table modern-table">
                                                        <thead>
                                                            <tr>
                                                                <th>Demande</th>
                                                                <th>Status</th>
                                                                <th>Date</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($demandeBrunchs as $demande)
                                                                <tr>
                                                                    <td>{{ \Illuminate\Support\Str::limit($demande->demande, 50) }}</td>
                                                                    <td>
                                                                        @if ($demande->status == 'en_attente')
                                                                            <span class="badge badge-warning"><i class="fa fa-clock-o"></i> En attente</span>
                                                                        @elseif($demande->status == 'accepte')
                                                                            <span class="badge badge-success"><i class="fa fa-check"></i> Validé</span>
                                                                        @else
                                                                            <span class="badge badge-danger"><i class="fa fa-times"></i> Annulé</span>
                                                                        @endif
                                                                    </td>
                                                                    <td>{{ $demande->created_at->format('d/m/Y à H:i') }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @endif
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="col-12">
                            <div class="alert alert-modern alert-warning-modern text-center">
                                <i class="fa fa-exclamation-triangle"></i>
                                <div>
                                    <strong>Configuration en attente</strong><br>
                                    Le compte Panier MIB n'est pas encore configuré. Veuillez patienter...
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    <div class="col-12 text-center py-5">
                        <div class="alert alert-modern alert-warning-modern d-inline-block">
                            <i class="fa fa-lock" style="font-size: 48px; margin-bottom: 20px;"></i>
                            <h4>Authentification requise</h4>
                            <p>Vous devez vous connecter ou créer un compte pour accéder à cette page.</p>
                            <a href="#" data-target="#BoutiqueAuthModal" class="action-btn action-btn-primary mt-3" data-toggle="modal">
                                <i class="fa fa-sign-in"></i> Se connecter
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div id="detailsCategorieModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content" style="border-radius: 15px; border: none;">
                <div class="modal-body p-4">
                    @csrf
                    <div class="row">
                        <div class="col-12 mb-3">
                            <img src="" id="img_filename" alt="categorie mib img" style="width: 100%; border-radius: 10px;">
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>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>Prix</label>
                                <input type="text" class="form-control" name="price" id="update_price" readonly>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label>Les bonus</label>
                                <textarea class="form-control" name="bonus" id="update_bonus" readonly rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea class="form-control" name="description" id="update_description" readonly rows="4"></textarea>
                            </div>
                        </div>
                        <div class="col-12 text-right">
                            <button type="button" class="action-btn action-btn-outline" data-dismiss="modal">
                                <i class="fa fa-times"></i> Fermer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            // Update payment summary
            function updatePaymentSummary() {
                let cotisations_data = $('#paiement-due').val();
                let selectedCount = 0;

                if (cotisations_data && cotisations_data !== '') {
                    let dataArray = cotisations_data.split(',').filter(item => item !== '');
                    selectedCount = dataArray.length;
                }

                let monthlyPrice = parseFloat($('#monthly-price').val()) || 0;
                let totalAmount = selectedCount * monthlyPrice;
                let devise = $('#devise').val() || '';

                // Update display
                $('#selected-months-count').text(selectedCount);
                $('#total-amount').text(totalAmount.toLocaleString('fr-FR'));
                $('#total-amount-btn').text(totalAmount.toLocaleString('fr-FR'));

                // Show/hide payment summary and selection hint
                if (selectedCount > 0) {
                    $('#payment-summary').addClass('active');
                    $('#selection-hint').addClass('hidden');
                } else {
                    $('#payment-summary').removeClass('active');
                    $('#selection-hint').removeClass('hidden');
                }
            }

            // Month selection
            $(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')) {
                    if (cotisations_data.indexOf(slug) > -1) {
                        cotisations_data.splice(cotisations_data.indexOf(slug), 1)
                    }
                    $('#paiement-due').val(cotisations_data);
                    btn.removeClass('selected')
                } else {
                    cotisations_data.push(slug);
                    $('#paiement-due').val(cotisations_data);
                    btn.addClass('selected')
                }

                // Update payment summary reactively
                updatePaymentSummary();
            });

            // Clear selection
            $(document).on('click', '#clear-selection', function() {
                // Remove all selected classes
                $('.month-card.selected').removeClass('selected');
                // Clear hidden input
                $('#paiement-due').val('');
                // Update summary
                updatePaymentSummary();
            });

            // Brunch card form
            $(document).on('click', '#make_demande_carte', function() {
                $('#demand_form').slideDown(300);
                $('#make_demande_carte').fadeOut(200);
            });

            $(document).on('click', '#close_demande_carte', function() {
                $('#demand_form').slideUp(300);
                setTimeout(function() {
                    $('#make_demande_carte').fadeIn(200);
                }, 300);
            });

            // Category details modal
            $(document).on('click', '.detailsCategorieMib', function(e) {
                e.preventDefault();
                console.log('This is something i want to do');
                let btn = $(this),
                    url = btn.attr('href'),
                    oldText = btn.html();

                btn.attr('disabled', true).html('<img src="{{ asset('images/loader.gif') }}" width="20px"> Chargement...');

                $.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 produite. Veuillez réessayer.', 'error')
                    }
                })
            });

            // Smooth scroll to top when switching tabs
            $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
                $('html, body').animate({
                    scrollTop: $('.tab-content').offset().top - 100
                }, 400);
            });
        })
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
@endsection