@extends("../dashboard._blank")
@section("sidebar")
@include("../dashboard._sidebar")
@endsection
@section("content")
<style>
    .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-radius: 50%;
        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);
        /* box-shadow: 0 0 5px #333; */
        z-index: -1;
    }

    .card-1 {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        border: 1px solid #060e1c;
    }

    .card-1:hover {
        box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        transition: all 1000ms ease;
        border: 1px solid #060e1c;
    }

    .list-media a {
        font-size: 12pt;
        color: #fff;
        margin-bottom: 2px;
    }

    .list-media {
        margin-bottom: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    .list-media:hover {
        box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
        transition: all 500ms ease;
    }

    .boutique_liste:hover #media-share {
        display: block;
    }

    #media-share {
        z-index: 99;
        display: none;
    }

    .whatsapp {
        width: 30px;
        height: 30px;
        line-height: 32px;
        text-align: center;
        background: green;
        border-radius: 100%;
        font-weight: bold;
    }

    .facebook {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #0e0ea0;
        border-radius: 100%;
        font-weight: bold;
    }

    .instagram {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #48aed6;
        border-radius: 100%;
        font-weight: bold;
    }

    ul {
        list-style-type: disc;
    }

    ul li {}

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

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

    h5 {
        color: green;
    }

    .btn-primary {
        border: none;
    }

    .btn {
        border-radius: 0px;
    }

    .supression_demande sup {
        border-radius: 100%;
        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: #2a3f54;
    }

    /* On mouse-over, add a grey background color */
    .container-checkbox:hover input~.checkmark {
        background-color: #2a3f54;
    }

    /* When the checkbox is checked, add a blue background */
    .container-checkbox input:checked~.checkmark {
        background-color: #2a3f54;
    }

    /* 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: #2a3f54;
        border-radius: 50%;
    }

    /* On mouse-over, add a grey background color */
    .container-radio:hover input~.checkmark {
        background-color: #2a3f54;
    }

    /* When the radio button is checked, add a blue background */
    .container-radio input:checked~.checkmark {
        background-color: #2a3f54;
    }

    /* 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: 6px solid #ba9412;
        background: #ba9412;
        color: #000;
        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: 6px solid #176e2c;
        background: #176e2c;
        color: #fff;
        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: 6px solid #d21d19;
        background: #d21d19;
        color: #fff;
        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: 5pt;
            font-weight: 500;
        }

        .number_badge {
            font-size: 5pt;
        }
    }

    .number_badge {
        position: absolute;
        right: 3px;
        top: 5px;
        border- radius: 50px;
    }

    td .btn {
        display: block !important;
    }
</style>

<div class="right_col" role="main">
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Liste des boutiques. <small></small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    @if(session("success"))

                    <div class="alert alert-success">
                        {{session('success')}}
                    </div>

                    @elseif(session("error"))
                    <div class="alert alert-danger">
                        {{session('error')}}
                    </div>
                    @endif
                    <div class="col-lg-12 col-xs-12">
                        <button class="btn btn-warning btn-xs btn_update_abonnement" data-target="#AbonnementModal"
                            data-toggle="modal" data-slug="all">cumuler l' abonnement de toute les boutiques
                            actives</button>
                    </div>

                    <div class="col-lg-12 col-xs-12">
                        <table id="categoriedatatable-buttons"
                            class="table table-responsive-xs table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Action</th>
                                    <th>Expirer</th>
                                    <th>boutique</th>
                                    <th>administrateur</th>
                                    <th>Tel</th>
                                    <th>Email</th>
                                    <th>International</th>
                                    <th>installer </th>
                                    <th>créer le </th>
                                    <th>Abonnement en cours</th>

                                </tr>
                            </thead>
                            <tbody>
                                @php $i=1; @endphp
                                @foreach($boutiques as $boutique)
                                <tr>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-light btn-sm dropdown-toggle"
                                                style="display: inline-flex;" type="button"
                                                data-toggle="dropdown">action <i
                                                    style="margin-top: 4px;margin-left: 3px;"
                                                    class="fa fa-chevron-down"></i> </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a data-target="#AbonnementModal" data-toggle="modal"
                                                        class="btn_update_abonnement"
                                                        data-nom="{{$boutique->nom_boutique}}"
                                                        data-slug="{{$boutique->slug}}"
                                                        data-url="{{route('newBoutique_installation',$boutique->slug)}}">Activer
                                                        ou cumuler un abonnement</a>
                                                </li>
                                                <li>
                                                    <a href="{{route('internationalize',$boutique->id)}}"
                                                        class=" @if($boutique->meta!=null && !$boutique->meta->internationalize) btn-warning @else btn-danger @endif"
                                                        onclick="return confirm('Êtes vous sur de vouloir effectué cette action ? Elle pourrais avoir un impact sur les ventes de cette boutique.')">@if($boutique->meta!=null
                                                        && !$boutique->meta->internationalize) Activer internatonal
                                                        @else Desactiver internatonal @endif</a>
                                                </li>
                                                <li>
                                                    <a href="{{route('admin.panier.mib.year',$boutique->slug)}}">Panier
                                                        MIB</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>{{$boutique->nom_boutique}}</td>
                                    <td>{!! $boutique->expired ? '<span class="badge badge-danger"
                                            style="background:red">oui</span>' : '<span class="badge badge-success"
                                            style="background:green">non</span>' !!}</td>
                                    <td>{{$boutique->user!=null ? $boutique->user->first_name.'
                                        '.$boutique->user->last_name : ''}}</td>
                                    <td>{{$boutique->user!=null ? $boutique->user->telephone : ''}}</td>
                                    <td>{{$boutique->user!=null ? $boutique->user->email : ''}}</td>
                                    <td>{!! $boutique->meta!=null && $boutique->meta->internationalize ? '<span
                                            class="badge badge-danger" style="background:green">oui</span>' : '<span
                                            class="badge badge-success" style="background:red">non</span>' !!}</td>
                                    <td>{!! $boutique->installer ? '<span class="badge badge-success"
                                            style="background:green">oui</span>' : '<span class="badge badge-success"
                                            style="background:red">non</span>' !!}</td>
                                    <td>
                                        {{$boutique->created_at!=null ? $boutique->created_at->format('d-m-Y H:i:s') :
                                        'inconnu'}}
                                    </td>
                                    <td>
                                        @if($boutique->abonnements!=null && count($boutique->abonnements)>0)
                                        @foreach($boutique->abonnements as $abonnement)
                                        <span class="badge badge-warning" style="background-color: #fd9900">
                                            {{$abonnement->etat_abonnement->name}} </span>
                                        @break
                                        @endforeach
                                        @else
                                        <span class="badge badge-warning" style="background: #942a25"> Aucun </span>
                                        @endif
                                    </td>

                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div style="float: right !important;">
                            {{ $boutiques->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<div id="AbonnementModal" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 0px;background: #f8f8f8">
            <div class="modal-header">
                <h4 class="modal-title" style="width:100%">
                    <i class="fa fa-plus"></i> ABONNEMENT <span class="float-right"
                        style="font-size: 9pt;float:right;cursor:pointer" data-dismiss="modal">Fermer</span>
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        Faites le choix de l'abonnement qui vous convient pour profiter de nos services.
                    </div>
                </div>
                <div class="row" style="margin-top: 30px;">
                    <input type="hidden" id="boutique_for_abonnement_update">
                    @foreach($abonnements as $abonnement)
                    <div class="col-sm-12 col-lg-4 col-xs-6">
                        <a data-slug="{{$abonnement->slug}}" data-url="{{route('adminrenewAbonnement')}}"
                            class="col-sm-12 col-lg-12 card-1 col-xs-12 abonnement_init_admin"
                            style="padding: 40px 20px;cursor:pointer;border-radius:10px;border:none">
                            <h3 class="" style="text-transform: uppercase;font-size: 14pt">{{$abonnement->name}}</h3>
                            <h6>+ {{$abonnement->numberMonth}} mois</h6>
                            <h2
                                style="margin-top: 20px;background: #d21d19;padding: 5px 10px;color: #fff;text-align: center;border-radius:50px;font-size:11pt">
                                {{$abonnement->price}} XOF
                            </h2>
                        </a>
                    </div>
                    @endforeach
                </div>

            </div>
        </div>
    </div>
</div>



<!-- /page content -->
@endsection