@extends('../dashboard._blank')
@include('../dashboard.Boutique.check_is_user_boutique')

@section('sidebar')
    @include('../dashboard._sidebar')
@endsection

@section('css_add')
    <style>
        :root {
            --primary-color: {{ $metas->background_color ?? '#88b121' }};
            --primary-dark: {{ $metas->background_color ? 'color-mix(in srgb, ' . $metas->background_color . ' 80%, black)' : '#6d8f1a' }};
            --primary-light: {{ $metas->background_color ? 'color-mix(in srgb, ' . $metas->background_color . ' 90%, white)' : '#e8f0d4' }};
            --primary-lighter: {{ $metas->background_color ? 'color-mix(in srgb, ' . $metas->background_color . ' 10%, white)' : '#f4f8e8' }};
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
            --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --border-radius: 16px;
            --border-radius-sm: 10px;
        }

        /* Reset and Base */
        * {
            box-sizing: border-box;
        }

        /* Modern Page Layout */
        .modern-settings-page {
            background: linear-gradient(135deg, #f8fafb 0%, #f1f4f6 100%);
            min-height: 100vh;
            padding: 24px 0;
        }

        .container-fluid {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Modern Header with Gradient */
        .modern-header {
            background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
            padding: 32px 36px;
            margin-bottom: 28px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(0,0,0,0.04);
            position: relative;
            overflow: hidden;
        }

        .modern-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
        }

        .modern-header h1 {
            font-size: 32px;
            font-weight: 700;
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0 0 10px 0;
            display: flex;
            align-items: center;
            gap: 14px;
            line-height: 1.2;
        }

        .modern-header h1 img {
            opacity: 0.9;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }

        .modern-header p {
            color: #64748b;
            margin: 0;
            font-size: 15px;
            font-weight: 400;
        }

        .header-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* Enhanced Buttons */
        .btn-modern {
            padding: 12px 24px;
            border-radius: var(--border-radius-sm);
            font-weight: 600;
            font-size: 14px;
            transition: var(--transition);
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }

        .btn-modern::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            transform: translate(-50%, -50%);
            transition: width 0.4s, height 0.4s;
        }

        .btn-modern:hover::before {
            width: 300px;
            height: 300px;
        }

        .btn-modern-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(136, 177, 33, 0.25);
        }

        .btn-modern-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(136, 177, 33, 0.35);
            color: white;
        }

        .btn-modern-primary:active {
            transform: translateY(0);
        }

        .btn-modern-outline {
            background: white;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
            box-shadow: var(--shadow-sm);
        }

        .btn-modern-outline:hover {
            background: var(--primary-lighter);
            color: var(--primary-dark);
            border-color: var(--primary-dark);
            box-shadow: var(--shadow-md);
        }

        /* Modern Tabs with Enhanced Design */
        .modern-tabs-container {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.04);
        }

        .modern-tabs-nav {
            display: flex;
            background: linear-gradient(to bottom, #fafbfc 0%, #f6f7f9 100%);
            border-bottom: 2px solid #e8eaed;
            padding: 0;
            margin: 0;
            list-style: none;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) #f1f3f5;
        }

        .modern-tabs-nav::-webkit-scrollbar {
            height: 6px;
        }

        .modern-tabs-nav::-webkit-scrollbar-track {
            background: #f1f3f5;
        }

        .modern-tabs-nav::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
            border-radius: 10px;
        }

        .modern-tabs-nav::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }

        .modern-tab-btn {
            flex: 1;
            min-width: 170px;
            padding: 20px 26px;
            background: transparent;
            border: none;
            color: #64748b;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .modern-tab-btn i {
            font-size: 16px;
            transition: var(--transition);
        }

        .modern-tab-btn:hover {
            background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
            color: var(--primary-color);
        }

        .modern-tab-btn:hover i {
            transform: scale(1.15);
        }

        .modern-tab-btn.active {
            color: var(--primary-color);
            font-weight: 700;
            background: white;
        }

        .modern-tab-btn.active i {
            transform: scale(1.1);
        }

        .modern-tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
            border-radius: 4px 4px 0 0;
        }

        .modern-tab-content {
            display: none;
            padding: 36px;
            animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modern-tab-content.active {
            display: block;
        }

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

        /* Enhanced Cards */
        .modern-card {
            background: white;
            border-radius: var(--border-radius-sm);
            padding: 28px;
            margin-bottom: 24px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            border: 1px solid rgba(0,0,0,0.04);
            position: relative;
        }

        .modern-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
            border-color: rgba(136, 177, 33, 0.15);
        }

        .modern-card-header {
            margin-bottom: 24px;
            padding-bottom: 18px;
            border-bottom: 2px solid #f3f4f6;
        }

        .modern-card-title {
            font-size: 20px;
            font-weight: 700;
            color: #1a202c;
            margin: 0 0 8px 0;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .modern-card-title i {
            font-size: 22px;
        }

        .modern-card-subtitle {
            font-size: 14px;
            color: #64748b;
            margin: 0;
            line-height: 1.5;
        }

        /* Module Cards with Enhanced Styling */
        .module-card {
            background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
            border-left: 5px solid var(--primary-color);
            position: relative;
            overflow: hidden;
        }

        .module-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, var(--primary-lighter) 0%, transparent 70%);
            opacity: 0.3;
            pointer-events: none;
        }

        .module-status {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            box-shadow: var(--shadow-sm);
        }

        .module-status.active {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .module-status.inactive {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
        }

        /* Form Elements with Enhanced Design */
        .modern-form-group {
            margin-bottom: 26px;
            position: relative;
        }

        .modern-label {
            display: block;
            font-weight: 600;
            color: #374151;
            margin-bottom: 10px;
            font-size: 14px;
        }

        .modern-label small {
            display: block;
            font-weight: 400;
            color: #9ca3af;
            font-size: 13px;
            margin-top: 6px;
            line-height: 1.4;
        }

        .modern-input,
        .modern-select,
        .modern-textarea {
            width: 100%;
            padding: 13px 18px;
            border: 2px solid #e5e7eb;
            border-radius: var(--border-radius-sm);
            font-size: 14px;
            transition: var(--transition);
            background: white;
            font-family: inherit;
        }

        .modern-input:hover,
        .modern-select:hover,
        .modern-textarea:hover {
            border-color: #d1d5db;
        }

        .modern-input:focus,
        .modern-select:focus,
        .modern-textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px var(--primary-light);
        }

        .modern-textarea {
            resize: vertical;
            min-height: 120px;
            line-height: 1.6;
        }

        /* Enhanced Switch Design */
        .modern-switch {
            position: relative;
            display: inline-block;
            width: 56px;
            height: 30px;
            margin-right: 14px;
        }

        .modern-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
            transition: var(--transition);
            border-radius: 30px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        }

        .switch-slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background: white;
            transition: var(--transition);
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .modern-switch input:checked + .switch-slider {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            box-shadow: 0 0 12px rgba(136, 177, 33, 0.4);
        }

        .modern-switch input:checked + .switch-slider:before {
            transform: translateX(26px);
        }

        .switch-label {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .switch-label:hover .switch-slider {
            filter: brightness(1.05);
        }

        /* Alert Messages with Icons */
        .modern-alert {
            padding: 18px 22px;
            border-radius: var(--border-radius-sm);
            margin-bottom: 24px;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            font-size: 14px;
            border-left: 5px solid;
            box-shadow: var(--shadow-sm);
            line-height: 1.6;
        }

        .modern-alert i {
            font-size: 20px;
            margin-top: 2px;
        }

        .modern-alert-success {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            border-color: #10b981;
            color: #065f46;
        }

        .modern-alert-danger {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
            border-color: #ef4444;
            color: #991b1b;
        }

        .modern-alert ul {
            margin: 0;
            padding-left: 20px;
        }

        /* Badge with Enhanced Styling */
        .modern-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            box-shadow: var(--shadow-sm);
        }

        .modern-badge i {
            font-size: 14px;
        }

        .modern-badge-info {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            color: #1e40af;
            border: 1px solid #93c5fd;
        }

        .modern-badge-success {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            color: #065f46;
            border: 1px solid #6ee7b7;
        }

        /* Image Upload with Enhanced UX */
        .modern-image-upload {
            position: relative;
            width: 200px;
            height: 200px;
            border: 3px dashed #d1d5db;
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            background-size: cover;
            background-position: center;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .modern-image-upload:hover {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 6px var(--primary-light), var(--shadow-md);
            transform: scale(1.02);
        }

        .modern-image-upload input[type="file"] {
            display: none;
        }

        .image-upload-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            font-weight: 600;
            opacity: 0;
            transition: var(--transition);
            flex-direction: column;
            gap: 10px;
        }

        .image-upload-overlay i {
            font-size: 28px;
        }

        .modern-image-upload:hover .image-upload-overlay {
            opacity: 1;
        }

        /* Link Copy Box */
        .link-copy-box {
            display: flex;
            gap: 12px;
            align-items: stretch;
        }

        .link-copy-input {
            flex: 1;
            background: #f8f9fa;
            cursor: pointer;
            font-weight: 500;
        }

        .link-copy-input:hover {
            background: #e9ecef;
            border-color: var(--primary-color);
        }

        /* Utility Classes */
        .text-primary {
            color: var(--primary-color) !important;
        }

        .bg-primary {
            background-color: var(--primary-color) !important;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
        }

        /* Section Headers */
        .section-header {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 28px;
            color: #1a202c;
            display: flex;
            align-items: center;
            gap: 14px;
            padding-bottom: 16px;
            border-bottom: 3px solid var(--primary-lighter);
        }

        .section-header i {
            font-size: 28px;
            color: var(--primary-color);
        }

        /* Modal Enhancements */
        .modal-content {
            border-radius: var(--border-radius);
            border: none;
            box-shadow: var(--shadow-lg);
        }

        .modal-header {
            border-bottom: 2px solid #f1f5f9;
            padding: 20px 28px;
            background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
        }

        .modal-title {
            font-weight: 700;
            color: #1a202c;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .modal-body {
            padding: 28px;
        }

        .modal-footer {
            border-top: 2px solid #f1f5f9;
            padding: 18px 28px;
            background: #fafbfc;
        }

        /* Info Cards for Modules */
        .info-banner {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 20px 24px;
            border-radius: var(--border-radius-sm);
            box-shadow: var(--shadow-sm);
            border: 1px solid;
        }

        .info-banner i {
            font-size: 36px;
        }

        .info-banner.warning {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-color: #f59e0b;
            color: #92400e;
        }

        .info-banner.success {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            border-color: #10b981;
            color: #065f46;
        }

        .info-banner h4 {
            margin: 0 0 6px 0;
            font-weight: 700;
            font-size: 18px;
        }

        .info-banner p {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
        }

        /* MIB Pricing Box */
        .mib_pricing_box {
            cursor: pointer;
            text-align: center;
            padding: 24px;
            transition: var(--transition);
            border: 3px solid #e5e7eb;
        }

        .mib_pricing_box:hover {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px var(--primary-light), var(--shadow-lg);
            transform: translateY(-5px) scale(1.02);
        }

        .mib_pricing_box h5 {
            font-weight: 700;
            margin-bottom: 14px;
            font-size: 18px;
            color: #1a202c;
        }

        .mib_pricing_box h4 {
            color: #f59e0b;
            font-weight: 800;
            margin: 12px 0 0 0;
            font-size: 24px;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .modern-header h1 {
                font-size: 26px;
            }

            .modern-tab-content {
                padding: 24px;
            }

            .section-header {
                font-size: 22px;
            }
        }

        @media (max-width: 768px) {
            .container-fluid {
                padding: 0 16px;
            }

            .modern-header {
                padding: 24px 20px;
            }

            .modern-header h1 {
                font-size: 22px;
            }

            .modern-tabs-nav {
                flex-direction: column;
            }

            .modern-tab-btn {
                min-width: 100%;
                justify-content: flex-start;
                padding: 16px 20px;
            }

            .modern-tab-content {
                padding: 20px;
            }

            .header-actions {
                flex-direction: column;
                width: 100%;
            }

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

            .grid-2,
            .grid-3 {
                grid-template-columns: 1fr;
            }

            .modern-card {
                padding: 20px;
            }

            .section-header {
                font-size: 20px;
            }

            .info-banner {
                flex-direction: column;
                text-align: center;
            }
        }

        /* Loading Animation */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        .loading {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Smooth Scroll */
        html {
            scroll-behavior: smooth;
        }

        /* Focus Visible for Accessibility */
        *:focus-visible {
            outline: 3px solid var(--primary-color);
            outline-offset: 3px;
        }
    </style>
@endsection

@section('content')
    <div class="right_col modern-settings-page" role="main">
        <div class="container-fluid">
            {{-- Modern Header --}}
            <div class="modern-header">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h1>
                            <img src="{{ asset('images/settings.png') }}" width="32" alt="Settings icon">
                            Paramétrage {{ $maboutique['nom_boutique'] }}
                        </h1>
                        <p>Gérez et personnalisez tous les aspects de votre boutique en ligne</p>
                    </div>
                    <div class="col-md-6">
                        <div class="header-actions" style="justify-content: flex-end;">
                            <a href="{{ route('gerer_boutique', $maboutique['slug']) }}" class="btn-modern btn-modern-outline">
                                <i class="fa fa-arrow-left"></i> Retour au menu
                            </a>
                            <a href="{{ route('boutique.index', $maboutique['nom_boutique']) }}" target="_blank" class="btn-modern btn-modern-primary">
                                <i class="fa fa-external-link"></i> Voir la boutique
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Alerts --}}
            @if ($errors->any())
                <div class="modern-alert modern-alert-danger">
                    <i class="fa fa-exclamation-circle"></i>
                    <div>
                        <ul style="margin: 0; padding-left: 20px;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            @if (session('success'))
                <div class="modern-alert modern-alert-success">
                    <i class="fa fa-check-circle"></i>
                    <span>{{ session('success') }}</span>
                </div>
            @elseif(session('error'))
                <div class="modern-alert modern-alert-danger">
                    <i class="fa fa-exclamation-circle"></i>
                    <span>{{ session('error') }}</span>
                </div>
            @endif

            {{-- Modern Tabs Container --}}
            <div class="modern-tabs-container">
                <ul class="modern-tabs-nav" role="tablist">
                    <li>
                        <button class="modern-tab-btn" data-tab="modules" role="tab" aria-label="Modules tab">
                            <i class="fa fa-puzzle-piece"></i> Modules
                        </button>
                    </li>
                    <li>
                        <button class="modern-tab-btn" data-tab="general" role="tab" aria-label="General tab">
                            <i class="fa fa-cog"></i> Général
                        </button>
                    </li>
                    <li>
                        <button class="modern-tab-btn" data-tab="appearance" role="tab" aria-label="Appearance tab">
                            <i class="fa fa-paint-brush"></i> Apparence
                        </button>
                    </li>
                    <li>
                        <button class="modern-tab-btn" data-tab="information" role="tab" aria-label="Information tab">
                            <i class="fa fa-info-circle"></i> Informations
                        </button>
                    </li>
                    <li>
                        <button class="modern-tab-btn" data-tab="advanced" role="tab" aria-label="Advanced tab">
                            <i class="fa fa-sliders"></i> Avancé
                        </button>
                    </li>
                </ul>

                {{-- Tab: Modules --}}
                <div class="modern-tab-content" data-tab-content="modules">
                    <h2 class="section-header">
                        <i class="fa fa-puzzle-piece"></i> Modules Activables
                    </h2>

                    <div class="grid-2">
                        {{-- Paiement Échelonné --}}
                        <div class="modern-card module-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-credit-card" style="color: #f59e0b;"></i>
                                    Paiement Échelonné
                                    @php
                                        if ($boutique->paiement_echelonner) {
                                            $date_echelonner = \Carbon\Carbon::parse($boutique->paiement_echelonner->expired_at);
                                        }
                                    @endphp
                                    @if (isset($boutique->paiement_echelonner) && $date_echelonner && !$date_echelonner->isPast())
                                        <span class="module-status active">
                                        <i class="fa fa-check-circle"></i> Actif
                                    </span>
                                    @else
                                        <span class="module-status inactive">
                                        <i class="fa fa-times-circle"></i> Inactif
                                    </span>
                                    @endif
                                </h3>
                                <p class="modern-card-subtitle">
                                    Permettez à vos clients de payer vos produits par tranche
                                </p>
                            </div>
                            <p style="color: #64748b; font-size: 14px; margin-bottom: 18px; line-height: 1.6;">
                                La commande ne peut être validée et livrée qu'après finalisation du paiement.
                            </p>
                            @if (isset($boutique->paiement_echelonner) && new \DateTime($boutique->paiement_echelonner->expired_at) > new \DateTime(date('Y-m-d H:i:s')))
                                <p style="color: #10b981; margin-bottom: 14px; font-weight: 600;">
                                    <i class="fa fa-check-circle"></i>
                                    Vos clients peuvent payer en <strong>{{ $boutique->paiement_echelonner->max }}</strong> tranches
                                </p>
                                <span class="modern-badge modern-badge-info">
                                <i class="fa fa-calendar"></i>
                                Expire le {{ date('d/m/Y', strtotime($boutique->paiement_echelonner->expired_at)) }}
                            </span>
                            @else
                                <span class="modern-badge modern-badge-info">
                                <i class="fa fa-tag"></i>
                                {{ env('PAIEMENT_ECHELONNER') }} FCFA / AN
                            </span>
                            @endif
                            <div style="margin-top: 22px;">
                                <button class="btn-modern btn-modern-primary" data-toggle="modal" data-target="#paiementEchelonnerModal">
                                    <i class="fa fa-{{ isset($boutique->paiement_echelonner) ? 'refresh' : 'plus' }}"></i>
                                    {{ isset($boutique->paiement_echelonner) ? 'Cumuler' : 'Activer' }}
                                </button>
                            </div>
                        </div>

                        {{-- Panier MIB --}}
                        <div class="modern-card module-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-shopping-basket" style="color: #f59e0b;"></i>
                                    Panier MIB
                                    @php
                                        if ($boutique->mibSubscribe) {
                                            $date_mib = \Carbon\Carbon::parse($boutique->mibSubscribe->expired_at);
                                        }
                                    @endphp
                                    @if (isset($boutique->mibSubscribe) && $date_mib && !$date_mib->isPast())
                                        <span class="module-status active">
                                        <i class="fa fa-check-circle"></i> Actif
                                    </span>
                                    @else
                                        <span class="module-status inactive">
                                        <i class="fa fa-times-circle"></i> Inactif
                                    </span>
                                    @endif
                                </h3>
                                <p class="modern-card-subtitle">
                                    Gérez vos offres de Panier MIB
                                </p>
                            </div>
                            <p style="color: #64748b; font-size: 14px; margin-bottom: 18px; line-height: 1.6;">
                                Faites souscrire vos clients à vos offres Panier MIB. Ce module offre toutes les possibilités de gestion et statistiques de vos offres MIB.
                            </p>
                            @if (isset($boutique->mibSubscribe) && $date_mib && !$date_mib->isPast())
                                <span class="modern-badge modern-badge-info">
                                <i class="fa fa-calendar"></i>
                                Expire le {{ date('d/m/Y', strtotime($boutique->mibSubscribe->expired_at)) }}
                            </span>
                            @endif
                            <div style="margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap;">
                                <button class="btn-modern btn-modern-primary" data-toggle="modal" data-target="#sosucription_mib">
                                    <i class="fa fa-{{ isset($boutique->mibSubscribe) ? 'edit' : 'plus' }}"></i>
                                    {{ isset($boutique->mibSubscribe) ? 'Changer d\'offre' : 'Choisir une offre' }}
                                </button>
                                @if (isset($boutique->mibSubscribe) && $date_mib && !$date_mib->isPast())
                                    <a href="{{ route('admin.boutique.mib.year.list') }}" class="btn-modern btn-modern-outline">
                                        <i class="fa fa-cog"></i> Gérer
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>

                    @if ($metas->internationalize && !$metas->pay_internationalize)
                        <div class="modern-card info-banner warning">
                            <i class="fa fa-globe"></i>
                            <div style="flex: 1;">
                                <h4>Rendez votre boutique internationale</h4>
                                <p>Élargissez votre audience et vendez à l'international</p>
                            </div>
                            <button class="btn-modern pay_internationalize" data-slug="{{ $maboutique['slug'] }}" style="background: #f59e0b; color: white;">
                                <i class="fa fa-credit-card"></i> Payer maintenant
                            </button>
                        </div>
                    @endif

                    @if ($metas->internationalize && $metas->pay_internationalize)
                        <div class="modern-card info-banner success">
                            <i class="fa fa-check-circle"></i>
                            <div>
                                <h4>Boutique Internationale Active</h4>
                                <p>La visibilité de votre boutique s'étend à l'international</p>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- Tab: Général --}}
                <div class="modern-tab-content" data-tab-content="general">
                    <h2 class="section-header">
                        <i class="fa fa-cog"></i> Paramètres Généraux
                    </h2>

                    {{-- Lien Boutique --}}
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <h3 class="modern-card-title">
                                <i class="fa fa-link"></i> Lien de votre boutique
                            </h3>
                            <p class="modern-card-subtitle">Cliquez pour copier le lien</p>
                        </div>
                        <div class="link-copy-box">
                            <input type="text" class="modern-input link-copy-input" id="boutique_link"
                                   onclick="clipboard(this,'Le lien de votre boutique a été copié avec succès')"
                                   readonly value='{{ url('/' . $maboutique['nom_boutique']) }}' />
                            <button class="btn-modern btn-modern-primary" onclick="clipboard(document.getElementById('boutique_link'),'Copié!')">
                                <i class="fa fa-copy"></i> Copier
                            </button>
                        </div>
                    </div>

                    {{-- Options de Paiement et Livraison --}}
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <h3 class="modern-card-title">
                                <i class="fa fa-credit-card"></i> Paiement et Livraison
                            </h3>
                            <p class="modern-card-subtitle">Configurez les options de paiement et de livraison</p>
                        </div>

                        {{-- Mode Paiement --}}
                        <div class="modern-form-group">
                            <label class="switch-label">
                                <div class="modern-switch">
                                    <input type="checkbox" value="1" id="boutique_check"
                                           data-input="paiement_and_livraison" class="metaEventBoutique"
                                           @if ($boutique['paiement_and_livraison'] == 1) checked @endif
                                           data-href="{{ route('activerBoutique_paiment', $boutique['slug']) }}">
                                    <span class="switch-slider"></span>
                                </div>
                                <div>
                                    <strong>Mode de paiement en ligne</strong>
                                    <p style="margin: 4px 0 0 0; font-size: 13px; color: #64748b;">
                                        @if (!$boutique['paiement_and_livraison'] == 1)
                                            Activez pour permettre les paiements en ligne
                                        @else
                                            Les paiements en ligne sont activés
                                        @endif
                                    </p>
                                </div>
                            </label>
                        </div>

                        @if ($boutique['international'] == 1)
                            <div class="modern-form-group">
                                <label class="switch-label">
                                    <div class="modern-switch">
                                        <input type="checkbox" value="1" id="shipping_international"
                                               @if ($boutique['shipping_international'] == 1) checked @endif
                                               data-input="shipping_international"
                                               class="shipping_international metaEventBoutique">
                                        <span class="switch-slider"></span>
                                    </div>
                                    <div>
                                        <strong>Livraison internationale depuis {{ Session::get('user')['country'] }}</strong>
                                        <p style="margin: 4px 0 0 0; font-size: 13px; color: #64748b;">
                                            <a href="{{ route('livraisons.client.index', $boutique['slug']) }}" class="text-primary" style="text-decoration: none;">
                                                <i class="fa fa-cog"></i> Configurer les tarifs de livraison
                                            </a>
                                        </p>
                                    </div>
                                </label>
                            </div>
                        @endif

                        <div class="modern-form-group">
                            <label class="switch-label">
                                <div class="modern-switch">
                                    <input type="checkbox" value="1" id="shipping_local"
                                           data-input="shipping_local"
                                           @if ($boutique['shipping_local'] == 1) checked @endif
                                           class="shipping_local metaEventBoutique">
                                    <span class="switch-slider"></span>
                                </div>
                                <div>
                                    <strong>Livraison locale au {{ Session::get('user')['country'] }}</strong>
                                    <p style="margin: 4px 0 0 0; font-size: 13px; color: #64748b;">
                                        <a href="{{ route('livraisons.client.index', $boutique['slug']) }}" class="text-primary" style="text-decoration: none;">
                                            <i class="fa fa-cog"></i> Configurer les tarifs de livraison
                                        </a>
                                    </p>
                                </div>
                            </label>
                        </div>

                        <div class="modern-form-group">
                            <label class="switch-label">
                                <div class="modern-switch">
                                    <input type="checkbox" value="1" id="satisfy"
                                           @if ($metas->satisfied_or_refunded == 1) checked @endif
                                           data-input="satisfied_or_refunded" class="metaEvent">
                                    <span class="switch-slider"></span>
                                </div>
                                <strong>Satisfait ou remboursé</strong>
                            </label>
                        </div>

                        <div class="modern-form-group">
                            <label class="switch-label">
                                <div class="modern-switch">
                                    <input type="checkbox" value="1" id="exchange_after_ship"
                                           @if ($metas->exchange_after_ship == 1) checked @endif
                                           data-input="exchange_after_ship" class="metaEvent">
                                    <span class="switch-slider"></span>
                                </div>
                                <strong>Produits échangeables après livraison</strong>
                            </label>
                        </div>

                        <div id="exchange_after_ship_label" class="modern-form-group" style="margin-left: 70px; @if ($metas->exchange_after_ship == 1) display:block; @else display:none; @endif">
                            <label class="modern-label">
                                Délai d'échange (en jours)
                            </label>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <input type="number"
                                       @if ($metas->day_exchange_after_ship > 0) value="{{ $metas->day_exchange_after_ship }}" @else value="0" @endif
                                       id="day_exchange_after_ship" data-input="day_exchange_after_ship"
                                       class="modern-input day_exchange_after_ship metaEventInput" style="width: 140px;">
                                <span style="color: #64748b;">jour(s) après la livraison</span>
                            </div>
                        </div>

                        <div class="modern-form-group">
                            <label class="switch-label">
                                <div class="modern-switch">
                                    <input type="checkbox" value="5"
                                           data-input="offer_return_delivery_to_customer"
                                           @if ($metas->offer_return_delivery_to_customer == 1) checked @endif
                                           id="offer_return_delivery_to_customer"
                                           class="offer_return_delivery_to_customer metaEvent">
                                    <span class="switch-slider"></span>
                                </div>
                                <strong>Offrir la livraison retour aux clients</strong>
                            </label>
                        </div>
                    </div>

                    {{-- Adresse Retour --}}
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <h3 class="modern-card-title">
                                <i class="fa fa-map-marker"></i> Adresse de retour client
                            </h3>
                            <p class="modern-card-subtitle">Adresse pour le retour des produits</p>
                        </div>
                        <textarea class="modern-textarea metaEventInput" name="address" data-input="address">{{ $metas->address !== null ? $metas->address : $metas->adresse_boutique }}</textarea>
                    </div>

                    {{-- Gestion des Devises --}}
                    <div class="modern-card">
                        <div class="modern-card-header">
                            <h3 class="modern-card-title">
                                <i class="fa fa-money"></i> Gestion des devises
                            </h3>
                            <p class="modern-card-subtitle">Configurez les devises de votre boutique</p>
                        </div>
                        <div class="grid-2">
                            <div class="modern-form-group">
                                <label class="modern-label">
                                    Devise d'administration
                                    <small>Devise dans laquelle vos produits sont définis</small>
                                </label>
                                <select class="modern-select metaEventInput" data-input="currency_admin">
                                    <option value="XOF" @if ($metas->currency_admin == 'XOF') selected @endif>XOF - FCFA</option>
                                    <option value="USD" @if ($metas->currency_admin == 'USD') selected @endif>USD - Dollar</option>
                                    <option value="EUR" @if ($metas->currency_admin == 'EUR') selected @endif>EUR - Euro</option>
                                </select>
                                <p style="color: #dc2626; font-size: 12px; margin-top: 10px; font-weight: 600;">
                                    <i class="fa fa-exclamation-triangle"></i> <strong>Important :</strong> Ne modifiez que si nécessaire
                                </p>
                            </div>

                            <div class="modern-form-group">
                                <label class="modern-label">
                                    Devise pour les clients
                                    <small>Les prix seront affichés dans cette devise</small>
                                </label>
                                <select class="modern-select metaEventInput" data-input="currency_client" disabled>
                                    <option value="XOF" @if ($metas->currency_client == 'XOF') selected @endif>XOF - FCFA</option>
                                    <option value="USD" @if ($metas->currency_client == 'USD') selected @endif>USD - Dollar</option>
                                    <option value="EUR" @if ($metas->currency_client == 'EUR') selected @endif>EUR - Euro</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tab: Apparence --}}
                <div class="modern-tab-content" data-tab-content="appearance">
                    <h2 class="section-header">
                        <i class="fa fa-paint-brush"></i> Apparence de la boutique
                    </h2>

                    <form id="boutique_update_data_options" enctype="multipart/form-data" method="post" action="{{ route('boutiques.customize') }}">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="boutique_id" value="{{ $boutique->id }}">
                        <input type="hidden" name="boutique" value="{{ $boutique->slug }}">
                        <input type="hidden" name="boutique_url" value="@if ($metas->boutique_url) {{ $metas->boutique_url }} @endif">

                        {{-- Bannière --}}
                        <div class="modern-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-image"></i> Bannière d'entête
                                </h3>
                                <p class="modern-card-subtitle">Taille minimum recommandée : 1200px × 300px</p>
                            </div>
                            <button type="button" class="btn-modern btn-modern-primary" data-toggle="modal" data-target="#publiciteModal">
                                <i class="fa fa-{{ count($publicites) > 0 ? 'edit' : 'plus' }}"></i>
                                {{ count($publicites) > 0 ? 'Modifier' : 'Ajouter' }} une bannière
                            </button>

                            @if(count($publicites) > 0)
                                <div class="grid-3" style="margin-top: 24px;">
                                    @foreach ($publicites as $publicite)
                                        <div class="modern-card" style="padding: 18px;">
                                            <img src="{{ $publicite->image }}" alt="{{ $publicite->description }}" style="width: 100%; border-radius: 8px; margin-bottom: 14px; box-shadow: var(--shadow-sm);">
                                            <p style="margin: 0 0 14px 0; font-size: 13px; color: #64748b; line-height: 1.4;">{{ $publicite->description }}</p>
                                            <a href="{{ route('publicites.destroy', $publicite->slug) }}" class="btn-modern" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; width: 100%; justify-content: center;">
                                                <i class="fa fa-trash"></i> Retirer
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                        {{-- Couleurs et Police --}}
                        <div class="modern-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-palette"></i> Couleurs et police
                                </h3>
                                <p class="modern-card-subtitle">Personnalisez l'apparence de votre boutique</p>
                            </div>

                            <div class="grid-3">
                                <div class="modern-form-group">
                                    <label class="modern-label">Police principale</label>
                                    <input id="font-picker" type="text" name="font" class="modern-input"
                                           value="{{ $metas->font != null ? $metas->font : 'Montserrat' }}">
                                </div>

                                <div class="modern-form-group">
                                    <label class="modern-label">Couleur arrière-plan</label>
                                    <input type='text' class='basic modern-input' name="background_color"
                                           value='{{ $metas->background_color != null ? (strpos($metas->background_color, '#') ? $metas->background_color : '#' . $metas->background_color) : '#88b121' }}' />
                                </div>

                                <div class="modern-form-group">
                                    <label class="modern-label">Couleur du texte</label>
                                    <input type='text' class='basic modern-input' name="text_color"
                                           value='{{ $metas->text_color != null ? (strpos($metas->text_color, '#') ? $metas->text_color : '#' . $metas->text_color) : 'white' }}' />
                                </div>
                            </div>
                        </div>

                        <div style="text-align: right;">
                            <button type="submit" class="btn-modern btn-modern-primary">
                                <i class="fa fa-save"></i> Enregistrer les modifications
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Tab: Informations --}}
                <div class="modern-tab-content" data-tab-content="information">
                    <h2 class="section-header">
                        <i class="fa fa-info-circle"></i> Informations de la boutique
                    </h2>

                    <form id="boutique_info_form" enctype="multipart/form-data" method="post" action="{{ route('boutiques.customize') }}">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="boutique_id" value="{{ $boutique->id }}">
                        <input type="hidden" name="boutique" value="{{ $boutique->slug }}">
                        <input type="hidden" name="boutique_url" value="@if ($metas->boutique_url) {{ $metas->boutique_url }} @endif">

                        {{-- Logo et Contacts --}}
                        <div class="modern-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-building"></i> Identité et contacts
                                </h3>
                                <p class="modern-card-subtitle">Logo et informations de contact</p>
                            </div>

                            <div class="grid-2">
                                <div class="text-center">
                                    <label class="modern-label" style="display: block; margin-bottom: 18px;">Logo de la boutique</label>
                                    <label for="logo_input" class="modern-image-upload" id="photo_enseigne"
                                           style="@if ($metas->logo_boutique) background-image: url('{{ $metas->logo_boutique }}'); @else background-image: url('{{ asset('images/logo.png') }}'); @endif margin: 0 auto;">
                                        <input type="file" name="logo" id="logo_input" onchange="readURLImageBackground(this,'photo_enseigne')" accept="image/*" />
                                        <div class="image-upload-overlay">
                                            <i class="fa fa-camera"></i>
                                            <span>Changer</span>
                                        </div>
                                    </label>
                                    <p style="margin-top: 14px; font-size: 13px; color: #64748b;">Cliquez pour modifier</p>
                                </div>

                                <div>
                                    <div class="modern-form-group">
                                        <label class="modern-label">
                                            Téléphone
                                            <small>Contact de votre boutique pour les clients</small>
                                        </label>
                                        <input type="text" class="modern-input" name="telephone_boutique"
                                               value="{{ $metas->telephone_boutique == null ? '' : $metas->telephone_boutique }}"
                                               placeholder="+225 XX XX XX XX XX">
                                    </div>

                                    <div class="modern-form-group">
                                        <label class="modern-label">
                                            Adresse email
                                            <small>Email de contact de votre entreprise</small>
                                        </label>
                                        <input type="email" class="modern-input" name="email_boutique"
                                               value="{{ $metas->email_boutique == null ? '' : $metas->email_boutique }}"
                                               placeholder="contact@votreboutique.com">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Localisation --}}
                        <div class="modern-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-map-marker"></i> Localisation
                                </h3>
                                <p class="modern-card-subtitle">Adresse et localisation de votre boutique</p>
                            </div>

                            <div class="modern-form-group">
                                <label class="modern-label">
                                    Adresse complète
                                    <small>Adresse de localisation de votre point de vente</small>
                                </label>
                                <input type="text" class="modern-input" name="adresse_boutique"
                                       value="{{ $metas->adresse_boutique == null ? '' : $metas->adresse_boutique }}"
                                       placeholder="Ex: Cocody, Riviera Palmeraie, Abidjan">
                            </div>

                            <div class="grid-2">
                                <div class="modern-form-group">
                                    <label class="modern-label">Continent</label>
                                    <input type="text" class="modern-input" name="continent"
                                           value="{{ $metas->continent != null ? $metas->continent : '' }}"
                                           placeholder="Ex: Afrique">
                                </div>

                                <div class="modern-form-group">
                                    <label class="modern-label">Pays</label>
                                    <input type="text" class="modern-input" name="country"
                                           value="{{ $metas->country != null ? $metas->country : '' }}"
                                           placeholder="Ex: Côte d'Ivoire">
                                </div>

                                <div class="modern-form-group">
                                    <label class="modern-label">Région</label>
                                    <input type="text" class="modern-input" name="region"
                                           value="{{ $metas->region != null ? $metas->region : '' }}"
                                           placeholder="Ex: Abidjan">
                                </div>

                                <div class="modern-form-group">
                                    <label class="modern-label">Ville</label>
                                    <input type="text" class="modern-input" name="city"
                                           value="{{ $metas->city != null ? $metas->city : '' }}"
                                           placeholder="Ex: Cocody">
                                </div>
                            </div>
                        </div>

                        <div style="text-align: right;">
                            <button type="submit" class="btn-modern btn-modern-primary">
                                <i class="fa fa-save"></i> Enregistrer les informations
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Tab: Avancé --}}
                <div class="modern-tab-content" data-tab-content="advanced">
                    <h2 class="section-header">
                        <i class="fa fa-sliders"></i> Paramètres avancés
                    </h2>

                    <form id="boutique_advanced_form" enctype="multipart/form-data" method="post" action="{{ route('boutiques.customize') }}">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="boutique_id" value="{{ $boutique->id }}">
                        <input type="hidden" name="boutique" value="{{ $boutique->slug }}">
                        <input type="hidden" name="boutique_url" value="@if ($metas->boutique_url) {{ $metas->boutique_url }} @endif">

                        {{-- Description --}}
                        <div class="modern-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-file-text"></i> Description de la boutique
                                </h3>
                                <p class="modern-card-subtitle">Cette description sera visible sur votre boutique</p>
                            </div>
                            <textarea class="modern-textarea" name="description" rows="6" placeholder="Décrivez les activités de votre boutique...">{{ $boutique['description'] !== null ? $boutique['description'] : '' }}</textarea>
                        </div>

                        {{-- Tags --}}
                        <div class="modern-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-tags"></i> Tags (Mots d'ordre)
                                </h3>
                                <p class="modern-card-subtitle">Définissez 4 critères de vente</p>
                            </div>
                            <div class="grid-2">
                                @php $tab=['Livraison','Remboursement','Paiement mobile et carte de crédit','Promotion']; @endphp
                                @for ($i = 0; $i < 4; $i++)
                                    <div class="modern-form-group">
                                        <label class="modern-label">Tag {{ $i + 1 }}</label>
                                        <input type="text" class="modern-input" name="mot_d_ordres[]"
                                               value="@if (isset($metas->mot_d_ordres[$i])) {{ $metas->mot_d_ordres[$i] }} @else {{ $tab[$i] }} @endif">
                                    </div>
                                @endfor
                            </div>
                        </div>

                        {{-- Conditions Générales --}}
                        <div class="modern-card">
                            <div class="modern-card-header">
                                <h3 class="modern-card-title">
                                    <i class="fa fa-file-text-o"></i> Conditions générales d'achat
                                </h3>
                                <p class="modern-card-subtitle">Conditions propres à votre boutique</p>
                            </div>
                            <textarea name="general_condition" id="general_condition" rows="8"
                                      placeholder="Saisissez vos conditions générales d'achat...">{{ $boutique['meta']['general_condition'] !== null ? $boutique['meta']['general_condition'] : '' }}</textarea>
                        </div>

                        <div style="text-align: right;">
                            <button type="submit" class="btn-modern btn-modern-primary">
                                <i class="fa fa-save"></i> Enregistrer les paramètres
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modals --}}
    <div id="publiciteModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <form method="post" id="consultation_form" enctype="multipart/form-data"
                  action="@if (count($publicites) > 0) {{ route('publicites.update', $publicites[0]['slug']) }}  @else{{ route('publicites.store') }} @endif">
                @csrf
                @if (count($publicites) > 0)
                    {{ method_field('put') }}
                @endif
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">
                            <i class="fa fa-plus"></i>
                            @if (count($publicites) <= 0)
                                Nouvelle bannière
                            @else
                                Mise à jour de votre bannière
                            @endif
                        </h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="boutique_id" value="{{ $boutique->id }}">
                        @php
                            $image = '';
                            $description = '';
                        @endphp
                        @if (count($publicites) > 0)
                            @foreach ($publicites as $publicite)
                                @php
                                    $image = $publicite->image;
                                    $description = $publicite->description;
                                @endphp
                            @endforeach
                        @endif
                        <div class="row">
                            <div class="col-md-4">
                                <label for="pub" style="cursor: pointer; display: block;">
                                    <img id="image_pub" src="{{ $image }}" alt="bannière"
                                         style="width: 100%; border-radius: 8px; border: 2px dashed #e5e7eb;" />
                                    <input type="file" name="image_pub" id="pub"
                                           onchange="readURLImage(this,'image_pub');" style="display: none" accept="image/*">
                                    <p class="text-center" style="margin-top: 14px; color: #64748b; font-size: 13px;">
                                        Cliquer pour @if (count($publicites) > 0) changer l'image @else ajouter une image @endif
                                    </p>
                                </label>
                            </div>
                            <div class="col-md-8">
                                <label class="modern-label">Description de la bannière</label>
                                <textarea class="modern-textarea" name="description" rows="6" placeholder="Texte d'entête">{{ $description }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn-modern btn-modern-primary">
                            <i class="fa fa-save"></i> {{ count($publicites) > 0 ? 'Mettre à jour' : 'Ajouter' }}
                        </button>
                        <button type="button" class="btn-modern btn-modern-outline" data-dismiss="modal">
                            <i class="fa fa-times"></i> Fermer
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="paiementEchelonnerModal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <form method="post" id="paiementEchelonnerForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            <i class="fa fa-credit-card"></i> Activation du paiement échelonné
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="modern-form-group">
                            <label class="modern-label">
                                Nombre maximal de tranches
                                <small>Définissez le nombre maximum de paiements échelonnés pour un panier</small>
                            </label>
                            <input name="max" id="max_paiement" type="number" min="1" max="10"
                                   value="3" class="modern-input" style="width: 150px;"
                                   data-input_name="max" onblur="check_error(['max_paiement'])"
                                   required />
                            <p style="margin-top: 14px; font-size: 13px; color: #64748b; line-height: 1.5;">
                                <i class="fa fa-info-circle"></i> <strong>NB:</strong> Vous ne pouvez modifier cette valeur qu'en faisant un cumul.
                            </p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="abonnement_paiement_echalonner"
                                data-slug="{{ $maboutique['slug'] }}" onclick="return check_error(['max_paiement'])"
                                class="btn-modern btn-modern-primary">
                            <i class="fa fa-check"></i> Activer
                        </button>
                        <button type="button" class="btn-modern btn-modern-outline" data-dismiss="modal">
                            <i class="fa fa-times"></i> Fermer
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="sosucription_mib" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <form method="post" id="panierMibForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            <i class="fa fa-shopping-basket"></i> Activation Panier MIB
                        </h4>
                    </div>
                    <div class="modal-body">
                        <h3 style="margin-bottom: 22px; font-weight: 700; font-size: 20px; color: #1a202c;">Choisir une option d'abonnement</h3>
                        <div class="row">
                            @foreach ($mib_pricings as $pricing)
                                <div class="col-md-6 mib_box_choice" style="margin-bottom: 16px;">
                                    <div class="modern-card mib_pricing_box" data-mib="{{ $pricing->name }}">
                                        <h5>{{ $pricing->name }}</h5>
                                        <p style="margin-bottom: 10px; color: #64748b;">
                                            Utilisateurs max: <strong style="color: var(--primary-color); font-size: 16px;">{{ $pricing->max_user }}</strong>
                                        </p>
                                        <h4>
                                            {{ $pricing->price . ' ' . $pricing->devise }} / an
                                        </h4>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <input type="hidden" id="mib_choice">
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="abonnement_mib"
                                data-url="{{ route('admin.boutique.pricing') }}" data-slug="{{ $maboutique['slug'] }}"
                                onclick="return check_error(['mib_choice'])" class="btn-modern btn-modern-primary">
                            <i class="fa fa-check"></i> Activer
                        </button>
                        <button type="button" class="btn-modern btn-modern-outline" data-dismiss="modal">
                            <i class="fa fa-times"></i> Fermer
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @include('dashboard.paiement_box.choose')

    <script>
        // Tab Management with URL Hash Persistence and Smooth Transitions
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.modern-tab-btn');
            const tabContents = document.querySelectorAll('.modern-tab-content');

            // Function to activate a tab with smooth transition
            function activateTab(tabName) {
                // Remove active class from all
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));

                // Add active class to current
                const activeButton = document.querySelector(`[data-tab="${tabName}"]`);
                const activeContent = document.querySelector(`[data-tab-content="${tabName}"]`);

                if (activeButton && activeContent) {
                    activeButton.classList.add('active');
                    activeContent.classList.add('active');

                    // Update URL hash without scrolling
                    history.replaceState(null, null, `#${tabName}`);

                    // Smooth scroll to tabs container
                    const tabsContainer = document.querySelector('.modern-tabs-container');
                    if (tabsContainer) {
                        const yOffset = -20;
                        const y = tabsContainer.getBoundingClientRect().top + window.pageYOffset + yOffset;
                        window.scrollTo({top: y, behavior: 'smooth'});
                    }
                }
            }

            // Tab button click handlers
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    activateTab(tabName);
                });
            });

            // Check URL hash on page load
            function initializeTabs() {
                const hash = window.location.hash.substring(1); // Remove #
                if (hash && document.querySelector(`[data-tab="${hash}"]`)) {
                    activateTab(hash);
                } else {
                    // Default to first tab
                    activateTab('modules');
                }
            }

            // Handle browser back/forward buttons
            window.addEventListener('hashchange', function() {
                const hash = window.location.hash.substring(1);
                if (hash && document.querySelector(`[data-tab="${hash}"]`)) {
                    activateTab(hash);
                }
            });

            // Initialize tabs
            initializeTabs();

            // Exchange after ship toggle with animation
            const exchangeCheckbox = document.getElementById('exchange_after_ship');
            const exchangeLabel = document.getElementById('exchange_after_ship_label');

            if (exchangeCheckbox && exchangeLabel) {
                exchangeCheckbox.addEventListener('change', function() {
                    if (this.checked) {
                        exchangeLabel.style.display = 'block';
                        setTimeout(() => {
                            exchangeLabel.style.opacity = '1';
                        }, 10);
                    } else {
                        exchangeLabel.style.opacity = '0';
                        setTimeout(() => {
                            exchangeLabel.style.display = 'none';
                        }, 250);
                    }
                });
            }

            // MIB pricing selection with visual feedback
            document.querySelectorAll('.mib_pricing_box').forEach(box => {
                box.addEventListener('click', function() {
                    document.querySelectorAll('.mib_pricing_box').forEach(b => {
                        b.style.borderColor = '#e5e7eb';
                        b.style.background = 'linear-gradient(135deg, #fafbfc 0%, #ffffff 100%)';
                        b.style.transform = 'scale(1)';
                    });
                    this.style.borderColor = 'var(--primary-color)';
                    this.style.background = 'linear-gradient(135deg, var(--primary-lighter) 0%, #ffffff 100%)';
                    this.style.transform = 'scale(1.03)';
                    document.getElementById('mib_choice').value = this.getAttribute('data-mib');
                });
            });

            // Add smooth fade-in for alert messages
            const alerts = document.querySelectorAll('.modern-alert');
            alerts.forEach((alert, index) => {
                alert.style.opacity = '0';
                alert.style.transform = 'translateY(-10px)';
                setTimeout(() => {
                    alert.style.transition = 'all 0.4s ease-out';
                    alert.style.opacity = '1';
                    alert.style.transform = 'translateY(0)';
                }, 100 * (index + 1));
            });
        });
    </script>
@endsection

@section('script')
    <script src="https://cdn.tiny.cloud/1/imnai4k01hp1s5jemj6974k5x25h7ncbmq8osv1jnlq0i4rs/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="https://cdn.tiny.cloud/1/imnai4k01hp1s5jemj6974k5x25h7ncbmq8osv1jnlq0i4rs/tinymce/5/jquery.tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        $('textarea#general_condition').tinymce({
            height: 400,
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
        });
    </script>
@endsection