@extends("../dashboard._blank")

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

@section('css_add')
<style>
    /* Modern Boutique Page - Sharp Edges Design */
    :root {
        --boutique-primary: #6d8f1a;
        --boutique-primary-dark: #5a7515;
        --boutique-primary-light: #88b121;
        --boutique-warning: #f59e0b;
        --boutique-danger: #dc2626;
        --boutique-success: #10b981;
        --boutique-text: #1f2937;
        --boutique-text-muted: #6b7280;
        --boutique-border: #e5e7eb;
        --boutique-bg: #ffffff;
        --boutique-bg-gray: #f9fafb;
    }

    .activation {
        display: block;
    }

    #description_include_livraison {
        display: none;
    }

    #button {
        display: block;
        margin: 20px auto;
        padding: 10px 30px;
        background-color: #eee;
        border: solid #ccc 1px;
        cursor: pointer;
    }

    .is-hide {
        display: none;
    }

    input[type="checkbox"][id^="myCheckbox"] {
        display: none;
    }

    label {
        border: 1px solid #fff;
        padding-top: 10px;
        display: block;
        position: relative;
        margin-top: 10px;
    }

    label:before {
        background-color: white;
        color: white;
        content: " ";
        display: block;
        border: 1px solid grey;
        position: absolute;
        top: -5px;
        left: -5px;
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 28px;
        transition-duration: 0.4s;
        transform: scale(0);
    }

    label img {
        height: 100%;
        width: 100%;
        transition-duration: 0.2s;
        transform-origin: 50% 50%;
    }

    :checked+label {
        border-color: #ddd;
    }

    :checked+label:before {
        content: "✓";
        background-color: grey;
        transform: scale(1);
    }

    :checked+label img {
        transform: scale(0.9);
        z-index: -1;
    }

    /* Modern Boutique Page Header */
    .boutique-page-header {
        background: var(--boutique-bg);
        border-bottom: 1px solid var(--boutique-border);
        padding: 24px 0;
        margin-bottom: 24px;
    }

    .boutique-page-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 700;
        color: var(--boutique-text);
        margin: 0;
    }

    .boutique-page-title i {
        color: var(--boutique-primary);
        font-size: 28px;
    }

    /* Wallet Display - Sharp Edges */
    .boutique-wallet-container {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

    .boutique-wallet-card {
        background: linear-gradient(135deg, var(--boutique-primary) 0%, var(--boutique-primary-dark) 100%);
        color: #ffffff;
        padding: 12px 20px;
        border: 1px solid var(--boutique-primary-dark);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .boutique-wallet-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(109, 143, 26, 0.2);
    }

    .boutique-wallet-label {
        color: rgba(255, 255, 255, 0.9);
        font-size: 10pt;
    }

    .boutique-wallet-amount {
        color: #ffffff;
        font-weight: 700;
        font-size: 11pt;
    }

    /* Action Buttons - Sharp Edges */
    .boutique-actions-container {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }

    .boutique-btn {
        padding: 10px 20px;
        font-weight: 600;
        font-size: 10pt;
        border: 1px solid transparent;
        transition: all 0.3s ease;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .boutique-btn-primary {
        background: var(--boutique-primary);
        color: #ffffff;
        border-color: var(--boutique-primary);
    }

    .boutique-btn-primary:hover {
        background: var(--boutique-primary-dark);
        border-color: var(--boutique-primary-dark);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(109, 143, 26, 0.2);
    }

    .boutique-btn-success {
        background: var(--boutique-success);
        color: #ffffff;
        border-color: var(--boutique-success);
    }

    .boutique-btn-success:hover {
        background: #059669;
        border-color: #059669;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .boutique-btn-warning {
        background: var(--boutique-warning);
        color: #ffffff;
        border-color: var(--boutique-warning);
    }

    .boutique-btn-warning:hover {
        background: #d97706;
        border-color: #d97706;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .boutique-btn-default {
        background: #ffffff;
        color: var(--boutique-text);
        border-color: var(--boutique-border);
    }

    .boutique-btn-default:hover {
        background: var(--boutique-bg-gray);
        border-color: var(--boutique-text-muted);
        color: var(--boutique-text);
    }

    .boutique-btn-danger {
        background: var(--boutique-danger);
        color: #ffffff;
        border-color: var(--boutique-danger);
    }

    .boutique-btn-danger:hover {
        background: #b91c1c;
        border-color: #b91c1c;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .pulse-button {
        animation: pulse-animation 2s infinite;
    }

    @keyframes pulse-animation {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(109, 143, 26, 0.7);
        }
        50% {
            box-shadow: 0 0 0 10px rgba(109, 143, 26, 0);
        }
    }

    /* Modern Tabs - Sharp Edges */
    .boutique-tabs {
        display: flex;
        background: var(--boutique-bg-gray);
        border: 1px solid var(--boutique-border);
        margin-bottom: 30px;
        overflow: hidden;
    }

    .boutique-tab {
        flex: 1;
        text-align: center;
        position: relative;
    }

    .boutique-tab-link {
        display: block;
        padding: 16px 20px;
        font-size: 12pt;
        font-weight: 600;
        color: var(--boutique-text-muted);
        transition: all 0.3s ease;
        border-bottom: 3px solid transparent;
        position: relative;
        text-decoration: none;
    }

    .boutique-tab-link:hover {
        color: var(--boutique-text);
        background: rgba(109, 143, 26, 0.05);
    }

    .boutique-tab.active .boutique-tab-link {
        color: var(--boutique-primary);
        background: #ffffff;
        border-bottom-color: var(--boutique-primary);
    }

    .boutique-tab.warning-tab.active .boutique-tab-link {
        color: var(--boutique-warning);
        border-bottom-color: var(--boutique-warning);
    }

    .boutique-tab.danger-tab.active .boutique-tab-link {
        color: var(--boutique-danger);
        border-bottom-color: var(--boutique-danger);
    }

    .boutique-tab-badge {
        display: inline-block;
        padding: 2px 8px;
        font-size: 9pt;
        font-weight: 700;
        margin-left: 8px;
        background: var(--boutique-text-muted);
        color: #ffffff;
    }

    .boutique-tab.active .boutique-tab-badge {
        background: var(--boutique-primary);
    }

    .boutique-tab.warning-tab.active .boutique-tab-badge {
        background: var(--boutique-warning);
    }

    .boutique-tab.danger-tab.active .boutique-tab-badge {
        background: var(--boutique-danger);
    }

    /* Boutique Cards - Sharp Edges */
    .boutique-card {
        background: var(--boutique-bg);
        border: 1px solid var(--boutique-border);
        transition: all 0.3s ease;
        margin-bottom: 30px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .boutique-card:hover {
        border-color: var(--boutique-primary);
        box-shadow: 0 8px 20px rgba(109, 143, 26, 0.15);
        transform: translateY(-4px);
    }

    .boutique-card-header {
        position: relative;
        height: 160px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--boutique-border);
    }

    .boutique-card-header-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    }

    .boutique-card-title {
        position: relative;
        z-index: 2;
        color: #ffffff;
        font-size: 16pt;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        padding: 20px;
    }

    .boutique-card-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: rgba(255, 255, 255, 0.95);
        color: var(--boutique-text);
        padding: 6px 12px;
        font-size: 9pt;
        font-weight: 600;
        z-index: 3;
        max-width: calc(100% - 120px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .boutique-card-notifications {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
        display: flex;
        gap: 8px;
    }

    .boutique-notification-badge {
        background: rgba(255, 255, 255, 0.95);
        color: var(--boutique-danger);
        padding: 6px 10px;
        font-size: 9pt;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
        animation: pulse 2s infinite;
    }

    .boutique-card-balance {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(109, 143, 26, 0.95);
        color: #ffffff;
        padding: 8px 16px;
        font-size: 10pt;
        font-weight: 700;
        z-index: 3;
    }

    .boutique-card-body {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .boutique-card-description {
        color: var(--boutique-text-muted);
        font-size: 10pt;
        line-height: 1.6;
        margin-bottom: 16px;
        text-align: center;
    }

    .boutique-card-footer {
        padding: 16px;
        border-top: 1px solid var(--boutique-border);
        background: var(--boutique-bg-gray);
    }

    .boutique-card-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 12px;
    }

    .boutique-card-action-btn {
        padding: 10px 12px;
        font-size: 9pt;
        font-weight: 600;
        text-align: center;
        transition: all 0.3s ease;
        border: 1px solid;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        text-decoration: none;
    }

    .boutique-card-action-full {
        grid-column: 1 / -1;
    }

    .boutique-card-countdown {
        text-align: center;
        padding: 12px;
        background: #ffffff;
        border: 1px solid var(--boutique-border);
        margin-top: 10px;
    }

    .boutique-card-countdown-label {
        font-size: 10pt;
        color: var(--boutique-text-muted);
        margin-bottom: 4px;
    }

    .boutique-card-countdown-timer {
        font-size: 11pt;
        font-weight: 700;
        font-family: monospace;
    }

    /* Social Share Buttons */
    .boutique-share-container {
        position: absolute;
        right: 12px;
        top: 180px;
        z-index: 99;
        display: none;
        flex-direction: column;
        gap: 8px;
    }

    .boutique_liste:hover .boutique-share-container {
        display: flex;
    }

    .boutique-share-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-weight: bold;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .boutique-share-btn:hover {
        transform: scale(1.1);
    }

    .boutique-share-btn.whatsapp {
        background: #25d366;
    }

    .boutique-share-btn.facebook {
        background: #1877f2;
    }

    .boutique-share-btn.linkedin {
        background: #0a66c2;
    }

    .boutique-share-btn.share {
        background: var(--boutique-text);
    }

    /* Empty State */
    .boutique-empty-state {
        text-align: center;
        padding: 60px 20px;
    }

    .boutique-empty-state img {
        max-width: 200px;
        margin-bottom: 20px;
        opacity: 0.7;
    }

    .boutique-empty-state-text {
        color: var(--boutique-danger);
        font-size: 12pt;
        font-weight: 600;
    }

    ul {
        list-style-type: disc;
    }

    ul ul {
        list-style-type: circle;
    }

    ul ul ul {
        list-style-type: decimal-leading-zero;
    }

    h5 {
        color: var(--boutique-primary);
    }

    .btn-primary {
        border: none;
    }

    .btn {
        border-radius: 0px;
    }

    .supression_demande sup {
        font-size: 8pt;
        color: red;
    }

    /* The container */
    .container-checkbox {
        display: block;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default checkbox */
    .container-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    /* Create a custom checkbox */
    .container-checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 15px;
        width: 15px;
        background-color: var(--boutique-primary-dark);
    }

    /* On mouse-over, add a background color */
    .container-checkbox:hover input~.checkmark {
        background-color: var(--boutique-primary);
    }

    /* When the checkbox is checked */
    .container-checkbox input:checked~.checkmark {
        background-color: var(--boutique-primary);
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .container-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container-checkbox input:checked~.checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container-checkbox .checkmark:after {
        left: 5px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    /* The container */
    .container-radio {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default radio button */
    .container-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    /* Create a custom radio button */
    .container-radio .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 15px;
        width: 15px;
        background-color: var(--boutique-primary-dark);
        border-radius: 50%;
    }

    /* On mouse-over */
    .container-radio:hover input~.checkmark {
        background-color: var(--boutique-primary);
    }

    /* When the radio button is checked */
    .container-radio input:checked~.checkmark {
        background-color: var(--boutique-primary);
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .container-radio .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .container-radio input:checked~.checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .container-radio .checkmark:after {
        top: 4px;
        left: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }

    .myOptionBtn .row {
        margin: 0;
    }

    .myOptionBtn .btn {
        width: 100%;
        margin: 1px;
    }

    .myOptionBtn .col-xs-4 {
        padding: 2px;
    }

    .btn-sm {
        font-size: 8pt;
    }

    .nav-pills>li.active>#pills-home-tab,
    .nav-pills>li.active>#pills-home-tab:focus,
    .nav-pills>li.active>#pills-home-tab:hover {
        background: none;
        border-bottom: 3px solid var(--boutique-warning);
        color: var(--boutique-warning);
        border-radius: 0;
    }

    .nav-pills>li.active>#pills-contact-tab,
    .nav-pills>li.active>#pills-contact-tab:focus,
    .nav-pills>li.active>#pills-contact-tab:hover {
        background: none;
        border-bottom: 3px solid var(--boutique-primary);
        color: var(--boutique-primary);
        border-radius: 0;
    }

    .nav-pills>li.active>#pills-profile-tab,
    .nav-pills>li.active>#pills-profile-tab:focus,
    .nav-pills>li.active>#pills-profile-tab:hover {
        background: none;
        border-bottom: 3px solid var(--boutique-danger);
        color: var(--boutique-danger);
        border-radius: 0;
    }

    .nav-item a {
        font-size: 12pt;
        font-weight: 500;
    }

    #pills-tab {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-flow: row;
        width: 100%;
    }

    #pills-tab>li {
        width: 33.33%;
        text-align: center;
    }

    @media (max-width: 991px) {
        .nav-item a {
            font-size: 9pt;
            font-weight: 500;
        }

        .number_badge {
            font-size: 7pt;
        }

        .boutique-card-actions {
            grid-template-columns: 1fr;
        }

        .boutique-actions-container {
            flex-direction: column;
        }
    }

    .number_badge {
        position: absolute;
        right: 3px;
        top: 5px;
    }

    #internationalisation_label {
        display: none;
    }

    /* Payment Toggle Styling */
    .boutique-payment-toggle {
        text-align: center;
        padding: 12px;
        background: #ffffff;
        border: 1px solid var(--boutique-border);
        margin-top: 10px;
    }

    .boutique-payment-toggle-label {
        font-size: 9pt;
        font-weight: 600;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .boutique-manager-badge {
        background: #3b82f6;
        color: #ffffff;
        padding: 8px 12px;
        text-align: center;
        font-size: 9pt;
        font-weight: 600;
        margin-top: 10px;
    }

    .boutique-manager-badge a {
        color: #ffffff;
        text-decoration: underline;
    }

    .boutique-manager-badge a:hover {
        color: #dbeafe;
    }
</style>
<script>
    const second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24;
        let countDown=0;
        let target=0;
        let dt=0;
        let $day = 0;
        let $hour = 0;
        let min= 0;
        let seconde=0;
        let distance=0;
        let now=0;
        let time=0;
        let x;
        function add_months(dt, n)
        {
            return new Date(dt.setMonth(dt.getMonth() + n)).getTime();
        }
</script>
@endsection
@section("content")
<div class="right_col" role="main">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel" style="border: none">
                    <!-- Modern Boutique Page Header -->
                    <div class="boutique-page-header">
                        <h1 class="boutique-page-title">
                            <i class="fas fa-store"></i>
                            <span>Mes Boutiques</span>
                        </h1>
                    </div>

                    <div class="x_content">
                        <!-- Modern Wallet Display -->
                        @if($boutiqueExist>0 && count($portefeuilles) > 0)
                        <div class="boutique-wallet-container">
                            @foreach($portefeuilles as $portefeuille)
                            <div class="boutique-wallet-card" data-toggle="tooltip" title="Gain généré par vos ventes">
                                <span class="boutique-wallet-label">Portefeuille {{$portefeuille->devise}}</span>
                                <span class="boutique-wallet-amount">{{$portefeuille->montant}} {{$portefeuille->devise}}</span>
                                <img src="{{asset('images/loader.gif')}}" width="15px" alt="">
                            </div>
                            @endforeach
                        </div>
                        @endif

                        <!-- Modern Action Buttons -->
                        <div class="boutique-actions-container">
                            <a href="{{route('boutique_liste')}}" class="boutique-btn boutique-btn-success">
                                <i class="fa fa-list-ul"></i>
                                <span>Toutes les boutiques</span>
                            </a>
                            <a data-toggle="modal" data-target="#boutiqueModal" id="add_boutique"
                                class="boutique-btn boutique-btn-primary @if($boutiqueExist<=0)pulse-button @endif">
                                <i class="fa fa-plus-circle"></i>
                                <span>Créer une nouvelle boutique</span>
                            </a>
                            @if($boutiqueExist>0)
                            @if(\Illuminate\Support\Facades\Session::get('user')['doc_validated'])
                            <a id="btn_menu_boutique" class="boutique-btn boutique-btn-default" data-toggle="tooltip"
                                title="Visualisez vos demandes de retraits ou effectuez de nouvelle demande">
                                <i class="fa fa-bank"></i>
                                <span>Retrait</span>
                            </a>
                            @endif
                            @endif
                        </div>

                        <!-- Withdrawal Menu (Hidden by default) -->
                        <div id="menu_boutique" style="display: none; margin-bottom: 20px;">
                            <div class="row">
                                <div class="col-md-6 col-xs-12" style="margin-bottom: 10px;">
                                    <button class="boutique-btn boutique-btn-warning retrait" style="width: 100%;">
                                        <i class="fa fa-money"></i>
                                        <span>Faire une demande de retrait</span>
                                    </button>
                                </div>
                                <div class="col-md-6 col-xs-12">
                                    <a href="{{route('list_retrait_user')}}" class="boutique-btn boutique-btn-default" style="width: 100%;">
                                        <i class="fa fa-list-ol"></i>
                                        <span>Liste des retraits effectués</span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12 col-xs-12 col-lg-12" style="margin-top: 20px;">
                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist" style="">
                                    <li class="nav-item active" style="border:1px solid #fff;background: #ededed;">
                                        <a class="nav-link active" id="pills-contact-tab" data-toggle="pill"
                                            href="#pills-contact" role="tab" aria-controls="pills-contact"
                                            aria-selected="false">
                                            En ligne <sup class="badge badge-default number_badge"
                                                style="background-color:#176e2c;color:#ffffff;">
                                                {{(count($boutiqueActifs))}} </sup>
                                        </a>
                                    </li>
                                    <li class="nav-item" style="border:1px solid #fff;background: #ededed;">
                                        <a class="nav-link" id="pills-home-tab" data-toggle="pill" href="#pills-home"
                                            role="tab" aria-controls="pills-home" aria-selected="true">
                                            Non installées <sup class="badge badge-default number_badge"
                                                style="background-color:#ba9412;color:#ffffff;">
                                                {{(count($boutiqueNonInstaller))}} </sup>
                                        </a>
                                    </li>
                                    <li class="nav-item" style="border:1px solid #fff;background: #ededed;">
                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
                                            href="#pills-profile" role="tab" aria-controls="pills-profile"
                                            aria-selected="false">
                                            Expirées <sup class="badge badge-default number_badge"
                                                style="background-color:#d21d19;color:#fff;">
                                                {{(count($boutiqueExpirer))}}</sup>
                                        </a>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tabContent" style="margin-top: 20px;">
                                    @if(count($boutiqueNonInstaller)>0)
                                    <div class="col-sm-12 col-xs-12 col-lg-12 tab-pane fade" id="pills-home"
                                        role="tabpanel" aria-labelledby="pills-home-tab">
                                        <div class="row">
                                            @foreach($boutiqueNonInstaller as $boutique)
                                            @php
                                            $banner="";
                                            foreach($boutique->publicites as $banner){
                                            $banner=$banner->image;
                                            }
                                            @endphp
                                            <div class="col-lg-4 col-xs-12 col-sm-12 col-md-6"
                                                id="boutique{{$boutique->slug}}">
                                                <div class="boutique-card">
                                                    <!-- Card Header with Banner -->
                                                    <div class="boutique-card-header" style="background-image: url({{$banner}});">
                                                        <div class="boutique-card-header-overlay"></div>
                                                        <div class="boutique-card-title">
                                                            {{strtoupper(str_replace('_', ' ', \Illuminate\Support\Str::limit($boutique->nom_boutique,18)))}}
                                                        </div>

                                                        <!-- Business Sector Badge -->
                                                        <div class="boutique-card-badge">
                                                            @foreach($metiers as $metier)
                                                            @if($metier->slug==$boutique->metier_slug)
                                                            {{\Illuminate\Support\Str::limit($metier->intitule_metier,32)}}
                                                            @endif
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                    <!-- Card Body -->
                                                    <div class="boutique-card-body boutique_body" data-slug="{{$boutique->slug}}">
                                                        <div class="boutique-card-description">
                                                            <a href="#" class="description" data-toggle="tooltip"
                                                                title="{{$boutique->description}}"
                                                                data-slug="{{$boutique->slug}}"
                                                                data-description="{{$boutique->description}}"
                                                                style="color: inherit; text-decoration: none;">
                                                                {{\Illuminate\Support\Str::limit($boutique->description,100)}}
                                                            </a>
                                                        </div>
                                                    </div>

                                                    <!-- Card Footer -->
                                                    <div class="boutique-card-footer" id="boutique_footer{{$boutique->slug}}">
                                                        <div class="boutique-card-actions">
                                                            <a href="{{route('supprimerBoutique')}}"
                                                                data-name="{{$boutique->nom_boutique}}"
                                                                data-slug="{{$boutique->slug}}"
                                                                class="boutique-card-action-btn boutique-btn-danger delete-action corbeil">
                                                                <i class="fas fa-trash-alt"></i>
                                                                <span>Supprimer</span>
                                                            </a>
                                                            <button data-target="#installModal" data-toggle="modal"
                                                                class="btn_installer boutique-card-action-btn boutique-btn-success"
                                                                data-nom="{{$boutique->nom_boutique}}"
                                                                data-slug="{{$boutique->slug}}"
                                                                data-url="{{route('newBoutique_installation',$boutique->slug)}}">
                                                                <i class="fas fa-file-download"></i>
                                                                <span>Installer</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @else
                                    <div class="col-sm-12 col-xs-12 col-lg-12 tab-pane fade" id="pills-home"
                                        role="tabpanel" aria-labelledby="pills-home-tab">
                                        <div class="boutique-empty-state">
                                            <img src="{{asset('images/empty.png')}}" alt="">
                                            <div class="boutique-empty-state-text">
                                                Aucune boutique non installée !
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if(count($boutiqueExpirer)>0)
                                    <div class="col-sm-12 col-xs-12 col-lg-12 tab-pane fade" id="pills-profile"
                                        role="tabpanel" aria-labelledby="pills-profile-tab">
                                        <div class="row" style="padding-top: 0;">
                                            @foreach($boutiqueExpirer as $boutique)
                                            @php
                                            $banner="";
                                            foreach($boutique->publicites as $banner){
                                            $banner=$banner->image;
                                            }
                                            @endphp
                                            <div class="col-lg-4 col-xs-12 col-sm-12 col-md-6"
                                                id="boutique{{$boutique->slug}}">
                                                <div class="boutique-card">
                                                    <!-- Card Header with Banner -->
                                                    <div class="boutique-card-header" style="background-image: url({{$banner}});">
                                                        <div class="boutique-card-header-overlay"></div>
                                                        <div class="boutique-card-title">
                                                            {{strtoupper(str_replace('_', ' ', \Illuminate\Support\Str::limit($boutique->nom_boutique,18)))}}
                                                        </div>

                                                        <!-- Business Sector Badge -->
                                                        <div class="boutique-card-badge">
                                                            @foreach($metiers as $metier)
                                                            @if($metier->slug==$boutique->metier_slug)
                                                            {{\Illuminate\Support\Str::limit($metier->intitule_metier,32)}}
                                                            @endif
                                                            @endforeach
                                                        </div>

                                                        <!-- Balance Badge (if owner) -->
                                                        @if($boutique->user_slug==\Illuminate\Support\Facades\Auth::user()->slug)
                                                        <div class="boutique-card-balance" data-toggle="tooltip"
                                                            title="Gain généré par vos ventes sur la boutique {{$boutique->nom_boutique}}">
                                                            Solde: {{$boutique->commande->sum('total_price')}} {{$boutique->meta->currency_admin}}
                                                        </div>
                                                        @endif
                                                    </div>

                                                    <!-- Card Body -->
                                                    <div class="boutique-card-body boutique_body" data-slug="{{$boutique->slug}}">
                                                        <div class="boutique-card-description">
                                                            <a href="#" class="description" data-toggle="tooltip"
                                                                title="{{$boutique->description}}"
                                                                data-slug="{{$boutique->slug}}"
                                                                data-description="{{$boutique->description}}"
                                                                style="color: inherit; text-decoration: none;">
                                                                {{\Illuminate\Support\Str::limit($boutique->description,100)}}
                                                            </a>
                                                        </div>
                                                    </div>

                                                    <!-- Card Footer -->
                                                    <div class="boutique-card-footer" id="boutique_footer{{$boutique->slug}}">
                                                        <button data-target="#AbonnementModal" data-toggle="modal"
                                                            class="btn_update_abonnement boutique-card-action-btn boutique-btn-danger boutique-card-action-full"
                                                            data-nom="{{$boutique->nom_boutique}}"
                                                            data-slug="{{$boutique->slug}}"
                                                            data-url="{{route('newBoutique_installation',$boutique->slug)}}">
                                                            <i class="fas fa-sync-alt"></i>
                                                            <span>Mettre à jour l'abonnement</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    @else
                                    <div class="col-sm-12 col-xs-12 col-lg-12 tab-pane fade"
                                        id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                                        <div class="boutique-empty-state">
                                            <img src="{{asset('images/empty.png')}}" alt="">
                                            <div class="boutique-empty-state-text">
                                                Aucune boutique expirée !
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                    <div class="col-sm-12 col-xs-12 col-lg-12 tab-pane fade active in"
                                        id="pills-contact" role="tabpanel" aria-labelledby="pills-profile-tab">
                                        @if(count($boutiqueActifs)>0)
                                        <div class="row">
                                            @foreach($boutiqueActifs as $boutique)
                                            @php
                                            $banner="";
                                            foreach($boutique->publicites as $banner){
                                            $banner=$banner->image;
                                            }
                                            @endphp
                                            <div class="col-lg-6 col-xs-12 col-sm-12 col-md-6 boutique_liste"
                                                id="boutique{{$boutique->slug}}">
                                                <div class="boutique-card">
                                                    <!-- Card Header with Banner -->
                                                    <div class="boutique-card-header" style="background-image: url({{$banner}});">
                                                        <div class="boutique-card-header-overlay"></div>
                                                        <div class="boutique-card-title" data-toggle="tooltip" title="{{$boutique->nom_boutique}}">
                                                            {{strtoupper(str_replace('_', ' ', \Illuminate\Support\Str::limit($boutique->nom_boutique,18)))}}
                                                        </div>

                                                        <!-- Business Sector Badge -->
                                                        <div class="boutique-card-badge">
                                                            @foreach($metiers as $metier)
                                                            @if($metier->slug==$boutique->metier_slug)
                                                            {{\Illuminate\Support\Str::limit($metier->intitule_metier,32)}}
                                                            @endif
                                                            @endforeach
                                                        </div>

                                                        <!-- Notification Badges -->
                                                        <div class="boutique-card-notifications">
                                                            @if(isset($boutique->message) && $boutique->message_count > 0)
                                                            <div class="boutique-notification-badge">
                                                                <i class="fas fa-envelope"></i>
                                                                <span>{{$boutique->message_count}}</span>
                                                            </div>
                                                            @endif
                                                            @if(isset($boutique->commande) && $boutique->commande_count > 0)
                                                            <div class="boutique-notification-badge">
                                                                <i class="fas fa-cart-plus"></i>
                                                                <span>{{$boutique->commande_count}}</span>
                                                            </div>
                                                            @endif
                                                        </div>

                                                        <!-- Balance Badge (if owner) -->
                                                        @if($boutique->user_slug==\Illuminate\Support\Facades\Auth::user()->slug)
                                                        <div class="boutique-card-balance" data-toggle="tooltip"
                                                            title="Gain généré par vos ventes sur la boutique {{$boutique->nom_boutique}}">
                                                            Solde: {{$boutique->commande->sum('total_price')}} {{$boutique->meta->currency_admin}}
                                                        </div>
                                                        @endif
                                                    </div>

                                                    <!-- Card Body -->
                                                    <div class="boutique-card-body boutique_body" data-slug="{{$boutique->slug}}">
                                                        <div class="boutique-card-description">
                                                            <a href="#" class="description" data-toggle="tooltip"
                                                                title="{{$boutique->description}}"
                                                                data-slug="{{$boutique->slug}}"
                                                                data-description="{{$boutique->description}}"
                                                                style="color: inherit; text-decoration: none;">
                                                                {{\Illuminate\Support\Str::limit($boutique->description,95)}}
                                                            </a>
                                                        </div>
                                                    </div>

                                                    <!-- Social Share Container (appears on hover) -->
                                                    <div class="boutique-share-container" data-toggle="tooltip"
                                                        title="Partager votre boutique pour gagner de la clientèle">
                                                        <a href="https://api.whatsapp.com/send?text=Visitez%20ma%20boutique%20en%20ligne%20avec%20le%20lien%20{{url('/')}}%2F{{$boutique->nom_boutique}}"
                                                            target="_blank" class="boutique-share-btn whatsapp">
                                                            <i class="fab fa-whatsapp"></i>
                                                        </a>
                                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{url('/')}}%2F{{$boutique->nom_boutique}}"
                                                            target="_blank" class="boutique-share-btn facebook">
                                                            <i class="fab fa-facebook-f"></i>
                                                        </a>
                                                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{url('/')}}%2F{{$boutique->nom_boutique}}"
                                                            target="_blank" class="boutique-share-btn linkedin">
                                                            <i class="fab fa-linkedin-in"></i>
                                                        </a>
                                                        <a href="#" class="boutique-share-btn share share_btn"
                                                            data-title="{{$boutique->nom_boutique}}"
                                                            data-test="{{\Illuminate\Support\Str::limit($boutique->description,150)}}"
                                                            data-url="{{url('/').'/'.$boutique->nom_boutique}}">
                                                            <i class="fas fa-share"></i>
                                                        </a>
                                                    </div>
                                                        <p class="col-xs-12 col-sm-12">
                                                            @php
                                                            if($boutique->desactivationDate!=null)
                                                            $date=$boutique->desactivationDate;
                                                            @endphp
                                                            @if($boutique->installer && !$boutique->expired)
                                                            <script>
                                                                distance=0;
                                                time=0;
                                                x= setInterval(function() {
                                                    dt = new Date('{{$date}}').getTime();
                                                    now=new Date().getTime();
                                                    distance = dt - now;

                                                    if(distance>0) {
                                                        $day = Math.floor(distance / (day));
                                                        $hour = Math.floor((distance % (day)) / (hour));
                                                        min = Math.floor((distance % (hour)) / (minute));
                                                        seconde = Math.floor((distance % (minute)) / second);

                                                        switch (true) {
                                                            case $day<=30:
                                                                time='#fd9900';
                                                                break;
                                                            case $day<=15:
                                                                time='#fd6134';
                                                                break;
                                                                case $day<=7:
                                                                time='#d21d19';
                                                                break;
                                                            default:
                                                                time='#1e3551';
                                                                break;
                                                        }
                                                        $('#counter' + '{{$boutique->slug}}').html('<span style="color:'+time+'">'+$day + ' J : ' + $hour + ' H : ' + min + ' M : ' + seconde + ' S </span>');
                                                        //do something later when date is reached
                                                    }
                                                    if (distance < 0) {
                                                        clearInterval(x);
                                                        let url = '{{route('newBoutique_desinstallation')}}';
                                                        let slug = '{{$boutique->slug}}';
                                                        $.ajax({
                                                            url: url,
                                                            method: "POST",
                                                            data: {_token: '{{csrf_token()}}', slug: slug},
                                                            success: function (data) {
                                                                $('#boutique_footer' + '{{$boutique->slug}}').html('<div class="col-sm-12 col-md-12 col-xs-12 text-center"><button style="border-radius: 0px;background-color: #b40808;border: none;color: #ffffff;" data-target="#AbonnementModal" data-toggle="modal" class="btn_update_abonnement btn btn-default btn-sm" data-nom="{{$boutique->nom_boutique}}" data-slug="{{$boutique->slug}}" data-url="{{route('newBoutique_installation',$boutique->slug)}}">\n' +
                                                                    '                    Mettre à jour \n' +
                                                                    '                </button></div>')
                                                            }, error: function (data) {
                                                                console.log(data);
                                                            }
                                                        }).done(function (data) {
                                                            setTimeout(function () {
                                                                $("#overlay").fadeOut(300);
                                                            }, 500);

                                                        })
                                                    }
                                                }, 1000)
                                                            </script>
                                                            @endif
                                                        </p>
                                                    </div>
                                                    <!-- Card Footer -->
                                                    <div class="boutique-card-footer" id="boutique_footer{{$boutique->slug}}">
                                                        @php $maboutique= str_replace(' ','_',$boutique->nom_boutique); @endphp

                                                        @if($boutique->maintenance)
                                                        <!-- Maintenance Mode Active -->
                                                        <a href="{{route('maintainBoutique',$boutique->slug)}}"
                                                            class="boutique-card-action-btn boutique-btn-warning boutique-card-action-full delete-action">
                                                            <i class="fas fa-cogs"></i>
                                                            <span>Désactiver mode maintenance</span>
                                                        </a>
                                                        @else
                                                        <!-- Normal Mode - Action Buttons -->
                                                        <div class="boutique-card-actions">
                                                            <a href="{{route('maintainBoutique',$boutique->slug)}}"
                                                                class="boutique-card-action-btn boutique-btn-danger delete-action">
                                                                <i class="fas fa-cogs"></i>
                                                                <span>Maintenance</span>
                                                            </a>
                                                            <a href="{{route('gerer_boutique',$boutique->slug)}}"
                                                                class="boutique-card-action-btn boutique-btn-default">
                                                                <i class="fas fa-tachometer-alt"></i>
                                                                <span>MENU</span>
                                                            </a>
                                                            <a href="{{route('boutique.index',$boutique->nom_boutique)}}"
                                                                target="_blank"
                                                                class="boutique-card-action-btn boutique-btn-success">
                                                                <i class="fas fa-long-arrow-alt-right"></i>
                                                                <span>Accéder</span>
                                                            </a>
                                                        </div>

                                                        <!-- Subscription Renewal Button -->
                                                        <a href="#" class="boutique-card-action-btn boutique-btn-default boutique-card-action-full btn_update_abonnement"
                                                            data-target="#AbonnementModal"
                                                            data-toggle="modal"
                                                            data-nom="{{$boutique->nom_boutique}}"
                                                            data-slug="{{$boutique->slug}}"
                                                            data-url="{{route('newBoutique_installation',$boutique->slug)}}"
                                                            data-id="{{$boutique->id}}">
                                                            <i class="fas fa-exchange-alt"></i>
                                                            <span>Cumuler votre abonnement</span>
                                                        </a>
                                                        @endif

                                                        <!-- Payment Toggle -->
                                                        @if($boutique->adminActivatePaiement)
                                                        <div class="boutique-payment-toggle">
                                                            <label for="boutique_paiement_active{{$boutique->slug}}"
                                                                class="container-checkbox boutique-payment-toggle-label"
                                                                style="margin: 0;">
                                                                <input id="boutique_paiement_active{{$boutique->slug}}"
                                                                    data-href="{{route('activerBoutique_paiment',$boutique->slug)}}"
                                                                    value="{{$boutique->paiement_and_livraison}}"
                                                                    @if($boutique->paiement_and_livraison) checked @endif
                                                                    class="paiement_active_or_desable" type="checkbox">
                                                                <span style="position: absolute; left: 20px; color: @if(!$boutique->paiement_and_livraison) var(--boutique-primary) @else var(--boutique-danger) @endif;"
                                                                    id="spanboutique_paiement_active{{$boutique->slug}}">
                                                                    @if(!$boutique->paiement_and_livraison) Activer @else Désactiver @endif le paiement en ligne
                                                                </span>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        @else
                                                        <div class="boutique-payment-toggle">
                                                            <label style="font-weight: 600; color: var(--boutique-text-muted);">PAIEMENT EN LIGNE INACTIF</label>
                                                        </div>
                                                        @endif

                                                        <!-- Manager Badge -->
                                                        @if($boutique->user_slug!=\Illuminate\Support\Facades\Auth::user()->slug)
                                                        <div class="boutique-manager-badge">
                                                            <span>Mode gestionnaire</span>
                                                        </div>
                                                        @else
                                                        @if($boutique->marketer!=null && $boutique->marketer->user)
                                                        <div class="boutique-manager-badge">
                                                            Géré par: <a href="{{route('sunmarketer_single',$boutique->marketer->user->slug)}}">
                                                                {{$boutique->marketer->user->first_name}} {{$boutique->marketer->user->last_name}}
                                                            </a>
                                                        </div>
                                                        @endif
                                                        @endif

                                                        <!-- Countdown Timer -->
                                                        @if(!$boutique->expired)
                                                        <div class="boutique-card-countdown">
                                                            <div class="boutique-card-countdown-label">Expiration dans:</div>
                                                            <div class="boutique-card-countdown-timer" id="counter{{$boutique->slug}}"></div>
                                                        </div>
                                                        @endif
                                                    </div>

                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                        @else
                                        <div class="boutique-empty-state">
                                            <img src="{{asset('images/empty.png')}}" alt="">
                                            <div class="boutique-empty-state-text">
                                                Aucune boutique active !
                                            </div>
                                        </div>
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->

<div id="AbonnementModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.12);">
            <div class="modal-header" style="background: linear-gradient(135deg, var(--boutique-primary-light) 0%, var(--boutique-primary) 100%); border-bottom: none; padding: 24px 30px;">
                <h4 class="modal-title" style="color: white; font-weight: 700; font-size: 22px; display: flex; align-items: center; gap: 12px; width: 100%;">
                    <i class="fa fa-credit-card"></i> Abonnement
                    <span class="float-right" style="font-size: 14px; cursor: pointer; margin-left: auto;" data-dismiss="modal">
                        <i class="fa fa-times"></i> Fermer
                    </span>
                </h4>
            </div>
            <div class="modal-body" style="padding: 30px;">
                <div class="text-center" style="margin-bottom: 30px;">
                    <h2 style="font-size: 26px; font-weight: 700; color: #1a202c; margin-bottom: 10px;">
                        Choisir une option d'abonnement
                    </h2>
                    <p style="color: #64748b; max-width: 600px; margin: 0 auto;">
                        Faites le choix de l'abonnement qui vous convient pour profiter de nos services.
                    </p>
                </div>

                <div class="row" style="margin-top: 20px;">
                    <input type="hidden" id="boutique_for_abonnement_update">
                    @foreach($abonnements as $abonnement)
                    <div class="col-sm-12 col-md-4 col-xs-12" style="margin-bottom: 20px;">
                        <div class="subscription-card-boutique abonnement_init" data-slug="{{$abonnement->slug}}" data-url="{{route('get_abonnement',$abonnement->slug)}}">
                            <div class="subscription-header">
                                <span class="subscription-badge">{{$abonnement->name}}</span>
                                <p class="subscription-duration">+ {{$abonnement->numberMonth}} mois</p>
                            </div>
                            <div class="subscription-price">
                                <h3>{{$abonnement->price}} <span>{{\Illuminate\Support\Facades\Session::has('continent') ? (\Illuminate\Support\Facades\Session::get('continent')!='Africa' ? 'USD' : 'XOF' ) : 'XOF' }}</span></h3>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Modern Subscription Cards - Sharp Edges */
    .subscription-card-boutique {
        background: white;
        border: 2px solid var(--boutique-border);
        padding: 30px 20px;
        text-align: center;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        overflow: hidden;
        height: 100%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        position: relative;
    }

    .subscription-card-boutique::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--boutique-primary-light), var(--boutique-primary));
        opacity: 0;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .subscription-card-boutique:hover {
        transform: translateY(-5px);
        border-color: var(--boutique-primary);
        box-shadow: 0 4px 12px rgba(109, 143, 26, 0.15);
    }

    .subscription-card-boutique:hover::before {
        opacity: 1;
    }

    .subscription-card-boutique.selected {
        border-color: var(--boutique-primary);
        box-shadow: 0 0 0 3px rgba(109, 143, 26, 0.15), 0 4px 12px rgba(109, 143, 26, 0.15);
        transform: translateY(-5px);
    }

    .subscription-card-boutique.selected::before {
        opacity: 1;
    }

    .subscription-header {
        margin-bottom: 20px;
    }

    .subscription-badge {
        background: var(--boutique-primary);
        color: #ffffff;
        padding: 8px 16px;
        font-size: 11pt;
        font-weight: 700;
        display: inline-block;
        margin-bottom: 10px;
    }

    .subscription-duration {
        font-size: 10pt;
        color: var(--boutique-text-muted);
        margin: 5px 0 0 0;
    }

    .subscription-price {
        margin-top: 10px;
    }

    .subscription-price h3 {
        font-size: 28pt;
        font-weight: 700;
        color: var(--boutique-text);
        margin: 0;
    }

    .subscription-price span {
        font-size: 14pt;
        color: var(--boutique-text-muted);
    }
</style>

<div id="boutiqueModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <form method="post" id="boutique_creation" action="{{route('create_boutique')}}" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(135deg, var(--boutique-primary-light) 0%, var(--boutique-primary) 100%); color: white; border-bottom: none;">
                    <h4 class="modal-title" style="color: white; font-weight: 700;"><i class="fa fa-plus"></i> Création d'une nouvelle boutique</h4>
                </div>
                <div class="modal-body">

                    <div class="row">
                        @php
                        $metier=new \App\Http\Controllers\metierController();
                        @endphp

                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                            <label for="pays">Votre pays <span style='color:red'>*</span></label></label>
                            <select name="country" data-placeholder="Choisissez le pays"
                                class="form-control pays choosen"
                                @if(Illuminate\Support\Facades\Session::has('country'))
                                data-country="{{Illuminate\Support\Facades\Session::get('country')}}" @endif>
                                @foreach ($pays as $country)
                                <option value="{{$country->id}}" @if(Illuminate\Support\Facades\Session::has('country')
                                    && Illuminate\Support\Facades\Session::get('country')==$country->name) selected
                                    @endif>{{$country->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group regions-container col-sm-12 col-md-4 col-lg-4">
                            <div style="text-align: center;display: none" class="regions-loader text-center">
                                <img style="width: 50px;" src="{{asset('images/loader2.gif')}}">
                                <br> chargement régions
                            </div>
                        </div>
                        <div class="form-group villes-container col-sm-12 col-md-4 col-lg-4">
                            <div style="text-align: center;display: none" class="villes-loader text-center">
                                <img style="width: 50px;" src="{{asset('images/loader2.gif')}}">
                                <br> chargement des villes
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <label for="currency_selected_creation" class="text-uppercase">
                                DEVISE
                            </label>
                            <small>Choisissez la devise avec laquelle vous exploiterez votre boutique</small>
                            <select name="currency_admin" id="currency_selected_creation" data-input="currency_admin"
                                class="form-control">
                                <option value="USD">USD DOLLARD</option>
                                <option value="EUR">EUR EURO</option>
                                <option value="XOF">XOF FCFA</option>
                            </select>
                        </div>


                        <div class="form-group col-md-12 col-xs-12 col-sm-12">
                            <label class="text-uppercase">Secteur d'activité <span style='color:red'>*</span></label>
                            <small>Définissez le secteur d'activité de votre boutique</small>
                            <select name="metier_slug" id="metier_slug" data-input_name="secteur d'activité"
                                onblur="check_error(['metier_slug']);" class="choosen form-control">
                                {{$metier->liste_output_metier()}}
                            </select>
                            <span id="metier_slugerror"></span>
                        </div>

                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Nom de votre boutique (a-z)<span
                                    style='color:red'>*</span></label>
                            <small>Les caractères spéciaux tels que : () ! : ; , . § / * $ ne sont pas autorisés</small>
                            <input type="text" id="nom_boutique" name="nom_boutique"
                                data-input_name="nom de l'entreprise" onblur="check_error(['nom_boutique']);"
                                required="required" class="form-control col-xs-12"
                                placeholder="Saisissez le nom de votre boutique">
                            <span id="nom_boutiqueerror"></span>
                        </div>

                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label class="text-uppercase">Description </label>
                            <textarea name="description" id="description" data-input_name="Description"
                                onblur="check_error(['description']);" required="required" style="width: 100%" rows="5"
                                minlength="100"
                                placeholder="Décrivez les  différentes activitées de votre boutique.( Le client se réferera à cela pour consulter vos produits.)"></textarea>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding-top: 10px">
                            <label for="international" class="text-uppercase" id="international_label">
                                <input type="checkbox" value="0" name="international" id="international">
                                JE VEUX QUE MA BOUTIQUE SOIT VU à l'international,
                            </label>
                            <small>Requière des validations supplémentaires.(activation sous 24h)</small>
                            <label for="internationalisation_condition" class="text-uppercase"
                                id="internationalisation_label">
                                <input type="checkbox" value="1" name="internationalisation_condition"
                                    id="internationalisation_condition">
                                J'ACCEPTE les modalitées et conditions de ventes international imposées, ET PAYER LES
                                FRAIS QUI Y serons affiliés. <span style="color: red">(Lire les conditions)</span>
                            </label>
                        </div>
                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label for="checkPaiment" class="text-uppercase">
                                <input type="checkbox" id="checkPaiment" name="paiement_and_livraison" value="0">
                                Activer le service de paiement en ligne <br> <span style="color: green"> (MOBILE MONEY ,
                                    CARTE BANCAIRE ET PAYPAL).</span>

                            </label>
                            <a href="#" id="no-more-about-paiement-and-livraison"> <span
                                    style="font-size: 10pt;color: red;">En savoir plus</span></a>
                        </div>


                        <div class="col-xs-12 col-sm-12" id="description_include_livraison">
                            <div class="col-sm-12 col-xs-12">
                                <h5 class="bold">Spécification sur le paiement en ligne et livraison.</h5>
                                <ul>
                                    <li> Vos clients peuvent passer des commandes 24h/24h et 7j/7j</li>

                                    <li> La livraison s'effectue, par vous et le meilleur moyen que vous aurez choisis
                                        pour facilité l'accès de vos produits au clients.
                                    </li>
                                    <li>
                                        Le clients dispose de plusieurs moyen pour vous faire savoir qu'il est
                                        interesser par un produit:
                                        <ul>
                                            <li>En effectuant le paiement immmédiat de votre produit par <span
                                                    style="color: #1a3a95"> mobile money</span> ou <span
                                                    style="color: #1a3a95">carte bancaire (visa).</span>

                                                <ul>
                                                    <li>
                                                        Vos clients devrons payer 3% des frais d'achat comme frais de
                                                        transfert. Ces frais sont déduits directement chez le client et
                                                        n'affecte en aucun cas le prix total de la commande.
                                                    </li>
                                                    <li>
                                                        Pour récupérer vos fonds (somme total des commandes) , vous
                                                        devez faire une demande de retrait vers un numéro de téléphone
                                                        ou votre compte bancaire dans votre espace d'administration des
                                                        boutiques.
                                                    </li>
                                                    <li>
                                                        Pour les paiments mobile money, vous ne pouvez faire un retrait
                                                        que lorsque vos fonds aurons atteint le palier de <span
                                                            style="font-weight: bold;">10.000 XOF</span>.
                                                        <br> <span style="color: red;"> SUNGROCERY n'est en aucun cas
                                                            responsable de cette contrainte.</span>
                                                    </li>
                                                    <li>
                                                        Toute demande de retrait par compte bancaire est imputable de
                                                        frais de transaction dont le montant s’élève à <span
                                                            style="font-weight: bold;"> 7000 XOF </span> par, quel que
                                                        soit le montant dudit retrait.
                                                        <br> <span style="color: red;"> SUNGROCERY n'est en aucun cas
                                                            responsable de cette contrainte.</span>
                                                    </li>
                                                </ul>

                                            </li>
                                            <li>En effectuant une demande de paiement à la livraison. Vous devez donc
                                                vous assurer que le client est bien réelle et qu'il est interesser par
                                                votre produit en le contactant pour confirmer sa commande.
                                                <br> Diverses raisons peuvent lui faire prendre la décision de payer à
                                                la livraions soit:
                                                <ul>
                                                    <li>verifier l'originalité ou la qualité de votre produit</li>
                                                    <li>s'assurer de la reception de sa commande</li>
                                                    <li>Tester votre service de vente.</li>
                                                </ul>
                                            </li>
                                            <li>Ou en vous contactant par appel téléphonique ou whatsapp.</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-xs-12 col-sm-12">
                                <h5 class="bold">Spécification sur l'exclusion du paiement en ligne et livraison.</h5>
                                Vos clients ne pourrons vous contactez que par appel ou whatsapp lorsqu'ils serons
                                interessé par l'achat de vos produits el ligne.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="user_fk_boutique" id="user_fk_boutique"
                        value="{{\Illuminate\Support\Facades\Session::get('user')['slug']}}" class="form-control"
                        required />
                    <button type="button" name="action" id="action-boutique" class="btn btn-primary">Créer ma
                        boutique</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="descriptionModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <form method="post" id="post_description" action="{{route('update_description')}}">
            @csrf
            <input type="hidden" value="" name="slug" id="boutique-slug">
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(135deg, var(--boutique-primary-light) 0%, var(--boutique-primary) 100%); color: white; border-bottom: none;">
                    <h4 class="modal-title" style="color: white; font-weight: 700;"><i class="fa fa-edit"></i> Détails description</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <label>Description <span style='color:red'>*</span></label>
                            <textarea name="description" id="description_show" style="width: 100%" rows="5"
                                placeholder="Décrivez les  différentes activités de votre boutique.( Le client se réferera à cela pour consulter vos articles.)"
                                required></textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <input type="hidden" name="user_fk_boutique" id="user_fk_boutique2"
                        value="{{\Illuminate\Support\Facades\Session::get('user')['slug']}}" class="form-control"
                        required />
                    <input type="submit" name="action" id="action2" class="btn btn-info"
                        style="background-color: #2a3f54;border-radius: 0px;color: white;" value="Modifier" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>

            </div>
        </form>
    </div>
</div>
<div id="installModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <form method="post" id="form_installer" action="" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(135deg, var(--boutique-primary-light) 0%, var(--boutique-primary) 100%); color: white; border-bottom: none;">
                    <h4 class="modal-title" style="color: white; font-weight: 700;"><i class="fa fa-download"></i> Installation de votre boutique</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            Un template par defaut sera choisis pour l'installation de votre boutique. Vous pourrez plus
                            tard faire une mise à jour vers un template plus recent.
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <h2 class="text-center" style="color: green">Default</h2>
                            <input type="checkbox" id="myCheckbox1" checked value="default" name="templatecheck" />
                            <label for="myCheckbox1">
                                <img src="{{asset('images/default_template.png')}}" width="100%" />
                            </label>
                        </div>
                        {{--<div class="col-md-4">--}}

                            {{--<h2 class="text-center" style="color: #b40100">Indisponible</h2>--}}
                            {{--<input type="checkbox" id="myCheckbox2" disabled />--}}
                            {{--<label for="myCheckbox2"><img
                                    src="{{asset('images/default_template.png')}}" /></label>--}}
                            {{--</div>--}}
                        {{--<div class="col-md-4">--}}
                            {{--<h2 class="text-center" style="color: #b40100">Indisponible</h2>--}}

                            {{--<input type="checkbox" id="myCheckbox3" disabled />--}}
                            {{--<label for="myCheckbox3"><img
                                    src="{{asset('images/default_template.png')}}" /></label>--}}
                            {{--</div>--}}
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" name="action" id="action_installer" class="btn btn-info"
                        style="background-color: #2a3f54;border-radius: 0px;color: white;">Installer</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>

            </div>
        </form>
    </div>
</div>
@include('dashboard.paiement_box.choose')
@if(\Illuminate\Support\Facades\Session::get('user')['doc_validated'])
@include('dashboard.paiement_box.retrait')
@endif

@endsection

{{-- @include('dashboard.scripts.script') --}}