@php
$admin=false;
if($id==1) {
$admin=true;
$maboutique=[];
}else{
$maboutique=\Illuminate\Support\Facades\Session::get('boutique');
}
$privilegecheck=new \App\Users_controle();
$check_privilege=$privilegecheck->has_privilege(\Illuminate\Support\Facades\Session::get('user')['id'],'super_administrateur');
@endphp

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

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

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
<script>
        function setFormFieldsFromCookies() {
            const price = Cookies.get('price') || '';
            const produit = Cookies.get('produit') || '';
            const category_slug = Cookies.get('category_slug') || '';
    
            $('input[name="price"]').val(price);
            $('input[name="produit"]').val(produit);
            $('#filter-category').val(category_slug);
        }
    setFormFieldsFromCookies();

    $('#clear-filtre').on('click', function(event) {
        event.preventDefault();

        Cookies.remove('price');
        Cookies.remove('produit');
        Cookies.remove('category_slug');

        $('input[name="price"]').val('');
        $('input[name="produit"]').val('');
        $('#filter-category').val('');

        window.location.href = `${location.origin}/articles/listes/2`;
    });
    
    $('#produit-filter-form').on('submit', function(event) {
        event.preventDefault();
        const price = $('input[name="price"]').val();
        const produit = $('input[name="produit"]').val();
        const category_slug = $('#filter-category').val();

        Cookies.set('price', price, { expires: 7 });
        Cookies.set('produit', produit, { expires: 7 });
        Cookies.set('category_slug', category_slug, { expires: 7 });

        const params = $.param({
            price: price,
            produit: produit,
            category_slug: category_slug
        });
        const baseUrl = `${location.origin}/articles/listes/2`;
        const urlWithParams = `${baseUrl}?${params}`;
        window.location.href = urlWithParams;
    });
</script>
@endsection

@section('css_add')
<style>
    .list-media {
        display: inline-block;
        text-align: center;
    }

    .list-media div {
        margin-left: 3%;
    }

    .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

    .inputfile+label {
        font-size: 1em;
        display: inline-block;
    }

    .inputfile:focus+label,
    .inputfile+label:hover {}

    .inputfile+label {
        cursor: pointer;
        /* "hand" cursor */
    }

    .inputfile:focus+label {
        outline: 1px dotted #000;
        outline: -webkit-focus-ring-color auto 5px;
    }

    #upload:hover {
        color: #D40025;
        border: #D40025 2px solid;
    }

    #selectedFiles img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom: 10px;
    }

    #upload2 {}

    #upload2:hover {
        color: #D40025;
        border: #D40025 2px solid;
    }

    #selectedFiles2 img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom: 10px;
    }

    .error {
        color: red;
    }

    .btn {
        border-radius: 0px;
    }

    .article_catalogue_show {
        border: 1px solid #ddd;
        margin-top: 5px;
    }
</style>
<style>
    .card {
        width: 200px;
        border: 1px solid #ccc;
        margin: 10px;
        display: inline-block;
    }


    .card-image {
        height: 150px;
        background-size: cover;
        background-position: center;
    }

    .card-content {
        padding: 8px;
    }

    .card-title {
        font-size: 18px;
        margin: 5px 0;
    }

    .card-price {
        font-weight: bold;
        color: green;
        margin-bottom: 10px;
        font-size: 12px;
    }

    input[type="checkbox"] {
        margin-right: 5px;
    }

    .article-detail-container {
        position: fixed;
        top: 10%;
        right: 0;
        width: 300px;
        height: auto;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        z-index: 1050;
        border-left: 1px solid #ddd;
    }

    .article-detail-container .card {
        border: none;
    }

    .article-detail-container .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .article-detail-container .card-header .close {
        cursor: pointer;
    }

    .loadingRow {
        width: 48px;
        height: 48px;
        border: 5px solid #FFF;
        border-bottom-color: #88b121;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 
</style>
@endsection

@section("content")
<!-- page content -->
<!-- page content -->
<input type="hidden" value="{{$id}}" id="user_connect">
<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">
                    <div class="x_title">
                        <div class="row">
                            <h2 class="col-md-6 col-xs-12">@if(!$admin)<img src="{{asset('images/produit.png')}}" alt=""
                                    width="20px"> PRODUITS <small>Liste
                                    des produits disponibles sur {{$maboutique['nom_boutique']}}</small>@else <img
                                    src="{{asset('images/produit.png')}}" alt="" width="20px"> Produits <small>
                                    Liste des produits disponibles dans le catalogue</small>@endif </h2>
                            @if(!$admin)
                            <div class="col-md-6 col-xs-12 text-right">
                                <a class="btn btn-default btn-sm" style="border-radius: 0px"
                                    href="{{route('boutique.index',$maboutique['nom_boutique'])}}" target="_blank"><i
                                        class="fas fa-store"></i> Accéder
                                    à {{$maboutique['nom_boutique']}}</a>
                                <a href="#" data-target="#helpModal" data-toggle="modal"
                                    class="btn btn-default btn-sm"><i class="fa fa-exclamation-circle"></i>
                                    Comment ça marche ?</a>
                            </div>
                            @endif
                        </div>
                        <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="row" style="margin-bottom: 10px;">
                            <div style="display:flex; justify-content:space-between; align-items:center;">
                                <div>
                                    @if(!$admin)
                                    <a href="{{route('gerer_boutique',$maboutique['slug'])}}" class="btn btn-default"
                                        style="border: 1px solid #000; color: #0D3349;text-align: center;"><i
                                            class="fas fa-long-arrow-alt-left"></i></a>&nbsp;&nbsp;
                                    @endif
                                    <button id="add_article" data-toggle="modal" data-target="#articleModal"
                                        class="btn btn-primary brn-sm"><i class="fa fa-plus-circle"></i> Ajouter un
                                        produit
                                    </button>
                                </div>
                            </div>
                        </div>

                        <form action="" id="produit-filter-form" class="col-md-12" style="padding: 0; margin-bottom: 20px">
                            <div class="row">
                                <div class="col-md-3 form-group">
                                    <label for="">Intitulé & Fabriquant & Ref</label>
                                    <input type="text" name="produit" class="form-control" />
                                </div>
                                <div class="col-md-3 form-group">
                                    <label for="">Prix en XOF</label>
                                    <input type="number" name="price" class="form-control" />
                                </div>
                                <div class="col-md-3 form-group">
                                    <label for="">Catégorie</label>
                                    <label for="categories">Catégorie du produit</label><br>
                                    @php
                                        $categories=new \App\Http\Controllers\CategorieCatalogue();
                                        $listes=$categories->list_option_article($id);
                                    @endphp
                                    <select name="category_slug" id="filter-category" class="form-control">
                                        <option value="all">Tous</option>
                                        {!! $listes !!}
                                    </select>
                                </div>
                                <div class="col-md-3 form-group" style="padding-top:25px">
                                    <input type="submit" value="Filtrer" class="btn btn-success btn-md">
                                    <input type="button" id="clear-filtre" value="effacer" class="btn btn-light btn-md">
                                </div>
                            </div>
                        </form>

                        <div class="row">
                            <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                <thead>
                                    <tr>
                                        <th>N°</th>
                                        <th title="reference de l'article">ref</th>
                                        <th title="catégorie de l'article">Catégorie</th>
                                        <th>Image</th>
                                        <th title="nom de l'article">intitulé</th>

                                        <th title="prix de vente de l'article">Prix
                                            en {{isset($maboutique['meta']) ?
                                            ($maboutique['meta']['currency_admin']!=null ?
                                            $maboutique['meta']['currency_admin'] : 'XOF') : 'undefined'}}</th>
                                        <th title="Prix visible de l'article">% réduction promo</th>
                                        <th title="Article en promotion">Promo</th>
                                        <th>Mise en avant</th>
                                        <th>Visibilité</th>
                                        <th>stock disponible</th>
                                        @if(isset($maboutique['meta']) && $maboutique['meta']['internationalize'])

                                        <th>Livraison internationnale</th>
                                        <th>Poids (en kg)</th>
                                        @endif
                                        <th>Statistique</th>
                                        <th>Partage</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @php $i=1;
                                    $article_m=new \App\Http\Controllers\HelperController();
                                    @endphp
                                    @foreach($articles as $article)
                                    @php
                                    if(\Illuminate\Support\Facades\Session::has('boutique')&& $admin==false){
                                    $price=$article_m->get_meta_article('price',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $reference=$article_m->get_meta_article('reference',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $name=$article_m->get_meta_article('name',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $quantity=$article_m->get_meta_article('quantity',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $categorie=$article_m->get_meta_article('categorie',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $description=$article_m->get_meta_article('description',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $active=$article_m->get_meta_article('active',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $show_price=$article_m->get_meta_article('show_price',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $on_sale=$article_m->get_meta_article('on_sale',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $state=$article_m->get_meta_article('state',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $stock=$article_m->get_meta_article('stock',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $weight=$article_m->get_meta_article('weight',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    $international_shipping=$article_m->get_meta_article('international_shipping',$article->slug,\Illuminate\Support\Facades\Session::get('boutique')['slug']);
                                    }
                                    @endphp
                                    @if($admin==false)
                                    <tr>
                                        <td>
                                            {{$i++}}
                                        </td>
                                        <td>
                                            @if(isset($reference) && $reference['statut']==true)
                                            {{$reference['value']}}
                                            @else
                                            {{$article->reference}}
                                            @endif
                                        </td>

                                        <td>

                                            @if(isset($categorie) && $categorie['statut']==true)
                                            @foreach($categories as $category)
                                            @if($category->slug==$categorie['value'])
                                            <span class="badge badge-info"> {{$category->intitule}}</span>
                                            @break
                                            @endif
                                            @endforeach
                                            @else
                                            @if($article->categorie!=null)
                                            <span class="badge badge-info"> {{$article->categorie->intitule}}</span>
                                            @endif
                                            @endif

                                        </td>


                                        <td class="text-center">
                                            @php $image=
                                            $article_m->get_simple_image($article->slug,$maboutique['slug']); @endphp
                                            @if(isset($image) && $image->filename!=null)
                                            <a href="" class="image_show"
                                                data-url="{{route('get_image_add',$article->slug)}}"
                                                data-image="{{$image->filename}}"><img style="height: 40px"
                                                    src="{{$image->filename}}" alt="{{$article->name}}"></a>
                                            @else
                                            <a href="" class="image_show btn btn-dark btn-xs"
                                                data-url="{{route('get_image_add',$article->slug)}}"
                                                data-image="">Ajouter</a>
                                            @endif
                                        </td>

                                        <td>
                                            <a class="btn-details-description"
                                                data-url="{{route('get_article',$article->slug)}}"
                                                data-article="{{$article->name}}"
                                                style="cursor: pointer;color: #ff171a;"
                                                data-description="@if(isset($description) && $description['statut']==true){{$description['value']}}@else{{$article->description}}@endif">
                                                @if(isset($name) && $name['statut']==true)
                                                {{$name['value']}}
                                                @else
                                                {{$article->name}}
                                                @endif
                                            </a>
                                        </td>

                                        <td class="text-center">
                                            @if(isset($price) && $price['statut']==true)

                                            @if(isset($show_price) && $show_price['statut']==true)

                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$price['value']}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($price['value']-($show_price['value']*$price['value'])/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            @if($article->show_price>0)
                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$price['value']}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($price['value']-($article->show_price*$price['value'])/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{$price['value']}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>

                                            @endif
                                            @endif

                                            @else
                                            @if(isset($show_price) && $show_price['statut']==true)

                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$article->price}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($article->price-($show_price['value']*$article->price)/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            @if($article->show_price>0)
                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$article->price}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($article->price-($article->show_price*$article->price)/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{$article->price}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>

                                            @endif
                                            @endif
                                            @endif


                                        </td>
                                        <td class="text-center">
                                            @if(isset($show_price) && $show_price['statut']==true)
                                            <input type="text" class="show_price_input form-control"
                                                data-url="{{route('make_show_price',$id)}}"
                                                data-slug="{{$article->slug}}" style="width: 70px;text-align: center;"
                                                value="{{$show_price['value']}}">
                                            @else
                                            <input type="text" class="show_price_input form-control"
                                                data-url="{{route('make_show_price',$id)}}"
                                                data-slug="{{$article->slug}}" style="width: 70px;text-align: center;"
                                                value="{{$article->show_price}}">
                                            @endif

                                        </td>
                                        <td class="text-center">
                                            @if(isset($on_sale) && $on_sale['statut']==true)

                                            @if($on_sale['value']==1)
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$on_sale['value']}}" checked
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$on_sale['value']}}"
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @endif
                                            @else
                                            @if($article->on_sale==1)
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$article->on_sale}}" checked
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$article->on_sale}}"
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @endif
                                            @endif

                                        </td>


                                        <td class="text-center">
                                            @if( $article->en_avant==true)
                                            <input type="checkbox" class="en_avant js-switch"
                                                data-en_avant="{{$article->en_avant}}" checked
                                                data-url="{{route('make_en_avant',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="en_avant js-switch"
                                                data-en_avant="{{$article->en_avant}}"
                                                data-url="{{route('make_en_avant',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @endif

                                        </td>


                                        <td class="text-center">
                                            @if(isset($active) && $active['statut']==true)

                                            @if($active['value']==1)
                                            <input type="checkbox" class="visibility js-switch" checked
                                                data-active="{{$active['value']}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="visibility js-switch"
                                                data-active="{{$active['value']}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @endif
                                            @else
                                            @if($article->active==1)
                                            <input type="checkbox" class="visibility js-switch" checked
                                                data-active="{{$article->active}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="visibility js-switch"
                                                data-active="{{$article->active}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @endif

                                            @endif

                                        </td>


                                        <td class="text-center">
                                            @if(isset($quantity) && $quantity['statut']==true) @php
                                            $qte=$quantity['value'] @endphp
                                            @else
                                            @php $qte=$article->quantity@endphp
                                            @endif
                                            <input type="text" class="stock_input form-control"
                                                data-url="{{route('make_stock',$id)}}" data-slug="{{$article->slug}}"
                                                style="width: 70px;text-align: center;" value="{{$qte}}">
                                        </td>

                                        @if($maboutique['meta']['internationalize'])

                                        <td class="text-center">
                                            @if(isset($international_shipping) &&
                                            $international_shipping['statut']==true) @php
                                            $si=$international_shipping['value'] @endphp
                                            @else
                                            @php $si=$article->international_shipping@endphp
                                            @endif

                                            @if($si)
                                            <span class="badge badge-success" style="background:#037100">Oui</span>
                                            @else
                                            <span class="badge badge-warning" style="background:#fd9900">Non</span>
                                            @endif

                                        </td>

                                        <td class="text-center">
                                            @if(isset($weight) && $weight['statut']==true) @php $wt=$weight['value']
                                            @endphp
                                            @else
                                            @php $wt=$article->weight@endphp
                                            @endif
                                            <input type="text" @if(!$si) disabled
                                                onmouseover="return $.notify('Vous devez modifier le produit et activer la livraison internationnale pour se produit','error');"
                                                @endif class="weight_input form-control"
                                                data-url="{{route('make_weight',$id)}}" data-slug="{{$article->slug}}"
                                                style="width: 70px;text-align: center;" value="{{$wt}}">
                                        </td>
                                        @endif

                                        {{--<td class="text-center">--}}
                                            {{--@if(isset($state) && $state['statut']==true)--}}
                                            {{--@if($state['value']==1)--}}
                                            {{--<input type="checkbox" class="state js-switch" checked
                                                data-state="{{$state['value']}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@else--}}
                                            {{--<input type="checkbox" class="state js-switch"
                                                data-state="{{$state['value']}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@endif--}}
                                            {{--@else--}}
                                            {{--@if($article->state==1)--}}
                                            {{--<input type="checkbox" class="state js-switch" checked
                                                data-state="{{$article->state}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@else--}}
                                            {{--<input type="checkbox" class="state js-switch"
                                                data-state="{{$article->state}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@endif--}}
                                            {{--@endif--}}
                                            {{--</td>--}}

                                        <td class="text-center">
                                            <span class="badge badge-primary" style="background: #2fa360"><i
                                                    class="fa fa-eye"></i> {{$article->vu}}</span>
                                            <span href="" class="badge badge-warning" style="background: #857b26"><i
                                                    class="fa fa-shopping-bag"></i> {{$article->command}}</span>
                                            <span href="" class="badge badge-dark" style="background: #2c094a;"><i
                                                    style="color: red" class="fa fa-heart"></i>
                                                {{$article->favoris}}</span>

                                        </td>
                                        <td class="text-center">
                                            <div class="col-sm-12 mt-2">
                                                <div class="list-media whatsapp">
                                                    <a href="https://api.whatsapp.com/send?text=Decouvrez%20notre%20produit%20
                                                                     @if(isset($name) && $name['statut']==true)
                                                            {{$name['value']}}
                                                            @else
                                                            {{$article->name}}
                                                            @endif
                                                                %20dans%20notre%20boutique%20en%20ligne%20avec%20le%20lien%20{{url('/')}}%2F{{str_replace(' ','_',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}%2Fproduct%2F{{$article->slug}}"
                                                        target="_blank"><i class="fab fa-whatsapp"></i></a>
                                                </div>
                                                <div class="list-media facebook">
                                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{url('/')}}%2F{{str_replace(' ','_',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}%2Fproduct%2F{{$article->slug}}"
                                                        target="_blank"><i class="fab fa-facebook-f"></i></a>
                                                </div>

                                                <div class="list-media instagram">
                                                    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{url('/')}}%2F{{str_replace(' ','_',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique'])}}%2Fproduct%2F{{$article->slug}}"
                                                        target="_blank"><i class="fab fa-linkedin-in"></i></a>
                                                </div>
                                                <div class="list-media share">
                                                    <a href="#" class="share_btn" data-title="{{$article->name}}"
                                                        data-test="{{\Illuminate\Support\Str::limit($article->description,150)}}"
                                                        data-url="{{url('/').'/'.str_replace(' ','_',\Illuminate\Support\Facades\Session::get('boutique')['nom_boutique']).'/product/'.$article->slug}}"><i
                                                            class="fas fa-share"></i>
                                                    </a>
                                                </div>

                                            </div>
                                        </td>

                                        <td>
                                            <div>
                                                <a data-slug="{{$article->slug}}"
                                                    data-url="{{route('get_article',$article->slug)}}"
                                                    data-url2="{{route('update_article',2)}}"
                                                    class="modifier_article btn btn-xs btn-warning"
                                                    style="color: #fff;"><i class="fa fa-edit"></i> Modifier</a>
                                                <a href="{{route('delete_article',$article->slug)}}"
                                                    class="btn btn-xs btn-danger delete-action" style="color: #fff;"><i
                                                        class="fa fa-trash"></i> Suprimer</a>
                                            </div>
                                        </td>
                                    </tr>
                                    @else
                                    <tr>
                                        <td>
                                            {{$i++}}
                                        </td>
                                        <td>
                                            @if(isset($reference) && $reference['statut']==true)
                                            {{$reference['value']}}
                                            @else
                                            {{$article->reference}}
                                            @endif
                                        </td>
                                        <td>
                                            @if(isset($categorie) && $categorie['statut']==true)
                                            @foreach($categories as $category)
                                            @if($category->slug==$categorie['value'])
                                            {{$category->intitule}}
                                            @break
                                            @endif
                                            @endforeach
                                            @else
                                            @foreach($categories as $category)
                                            @if($category->slug==$article->categorie_slug)
                                            {{$category->intitule}}
                                            @break
                                            @endif
                                            @endforeach
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @php $image= $article_m->get_simple_image($article->slug,'all'); @endphp
                                            @if(isset($image) && $image->filename!=null)
                                            <a href="" class="image_show"
                                                data-url="{{route('get_image_add',$article->slug)}}"
                                                data-image="{{$image->filename}}"><img style="height: 40px"
                                                    src="{{$image->filename}}" alt="{{$article->name}}"></a>
                                            @else
                                            <a href="" class="image_show btn btn-dark btn-xs"
                                                data-url="{{route('get_image_add',$article->slug)}}"
                                                data-image="">Ajouter</a>

                                            @endif
                                        </td>
                                        <td>
                                            <a class="btn-details-description"
                                                data-url="{{route('get_article',$article->slug)}}"
                                                data-article="{{$article->name}}"
                                                style="cursor: pointer;color: #ff171a;"
                                                data-description="@if(isset($description) && $description['statut']==true){{$description['value']}}@else{{$article->description}}@endif">
                                                @if(isset($name) && $name['statut']==true)

                                                {{$name['value']}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}
                                                @else
                                                {{$article->name}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}

                                                @endif
                                            </a>
                                        </td>
                                        <td class="text-center">
                                            @if(isset($price) && $price['statut']==true)
                                            @if(isset($show_price) && $show_price['statut']==true)

                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$price['value']}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($price['value']-($show_price['value']*$price['value'])/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            @if($article->show_price>0)
                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$price['value']}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($price['value']-($article->show_price*$price['value'])/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{$price['value']}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>

                                            @endif
                                            @endif
                                            @else
                                            @if(isset($show_price) && $show_price['statut']==true)

                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$article->price}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($article->price-($show_price['value']*$article->price)/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            @if($article->show_price>0)
                                            <span class="badge badge-info"
                                                style="background: #e65c2b;color: #fff;text-decoration: line-through;">
                                                {{$article->price}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{($article->price-($article->show_price*$article->price)/100)}}
                                                {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>
                                            @else
                                            <span class="badge badge-info" style="background: green;color: #fff;">
                                                {{$article->price}} {{isset($maboutique['meta']) ?
                                                ($maboutique['meta']['currency_admin']!=null ?
                                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}}</span>

                                            @endif
                                            @endif
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if(isset($show_price) && $show_price['statut']==true)
                                            <input type="text" class="show_price_input form-control"
                                                data-url="{{route('make_show_price',$id)}}"
                                                data-slug="{{$article->slug}}" style="width: 70px;text-align: center;"
                                                value="{{$show_price['value']}}">
                                            @else
                                            <input type="text" class="show_price_input form-control"
                                                data-url="{{route('make_show_price',$id)}}"
                                                data-slug="{{$article->slug}}" style="width: 70px;text-align: center;"
                                                value="{{$article->show_price}}">
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if(isset($on_sale) && $on_sale['statut']==true)

                                            @if($on_sale['value']==1)
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$on_sale['value']}}" checked
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$on_sale['value']}}"
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @endif
                                            @else
                                            @if($article->on_sale==1)
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$article->on_sale}}" checked
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="promo js-switch"
                                                data-promo="{{$article->on_sale}}"
                                                data-url="{{route('make_promo',$id)}}" data-slug="{{$article->slug}}">
                                            @endif
                                            @endif
                                        </td>
                                        {{-- <td>
                                            {{$article->minimal_quantity}}
                                        </td>--}}

                                        <td class="text-center">
                                            @if(isset($active) && $active['statut']==true)

                                            @if($active['value']==1)
                                            <input type="checkbox" class="visibility js-switch" checked
                                                data-active="{{$active['value']}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="visibility js-switch"
                                                data-active="{{$active['value']}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @endif
                                            @else
                                            @if($article->active==1)
                                            <input type="checkbox" class="visibility js-switch" checked
                                                data-active="{{$article->active}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @else
                                            <input type="checkbox" class="visibility js-switch"
                                                data-active="{{$article->active}}"
                                                data-url="{{route('make_visibility',$id)}}"
                                                data-slug="{{$article->slug}}">
                                            @endif

                                            @endif

                                        </td>


                                        <td class="text-center">
                                            @if(isset($quantity) && $quantity['statut']==true)
                                            @php $qte=$quantity['value'] @endphp
                                            @else
                                            @php $qte=$article->quantity@endphp
                                            @endif
                                            <input type="text" class="stock_input form-control"
                                                data-url="{{route('make_stock',$id)}}" data-slug="{{$article->slug}}"
                                                style="width: 70px;text-align: center;" value="{{$qte}}">

                                        </td>

                                        {{--<td class="text-center">--}}


                                            {{--@if(isset($state) && $state['statut']==true)--}}

                                            {{--@if($state['value']==1)--}}
                                            {{--<input type="checkbox" class="state js-switch" checked
                                                data-state="{{$state['value']}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@else--}}
                                            {{--<input type="checkbox" class="state js-switch"
                                                data-state="{{$state['value']}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@endif--}}
                                            {{--@else--}}
                                            {{--@if($article->state==1)--}}
                                            {{--<input type="checkbox" class="state js-switch" checked
                                                data-state="{{$article->state}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@else--}}
                                            {{--<input type="checkbox" class="state js-switch"
                                                data-state="{{$article->state}}" data-url="{{route('make_state',$id)}}"
                                                data-slug="{{$article->slug}}">--}}
                                            {{--@endif--}}

                                            {{--@endif--}}


                                            {{--</td>--}}

                                        <td>
                                            <span class="badge badge-primary"><i class="fa fa-check-circle"></i>
                                                {{$article->ajouter}}</span>
                                        </td>
                                        <td></td>

                                        <td>
                                            <div>
                                                <a data-slug="{{$article->slug}}"
                                                    data-url="{{route('get_article',$article->slug)}}"
                                                    data-url2="{{route('update_article',1)}}"
                                                    class="modifier_article btn btn-xs btn-warning"
                                                    style="color: #fff;"><i class="fa fa-edit"></i> Modifier</a>
                                                <a href="{{route('delete_article',$article->slug)}}"
                                                    class="delete-action" style="color: #fff;"><i
                                                        class="fa fa-trash btn btn-xs btn-danger"></i> Suprimer</a>
                                            </div>
                                        </td>
                                    </tr>

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

<div id="articleModal" class="modal fade" >
    <div class="modal-dialog modal-lg">
        <form method="post" id="article_form" enctype="multipart/form-data">
            @csrf
            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <h4 class="modal-title" id="title_modal_article"><i class="fa fa-plus"></i> Ajouter un nouveau
                        produit </h4>
                </div>
                <div class="modal-body">
                    <div class="row" id="choice_maker_panel">
                        <div class="form-group col-md-6 col-xs-12">
                            <input type="radio" id="catalogue" name="choice_selection" checked class="choix_article_source" value="catalogue">
                            <label style="font-size: 10pt;margin-top: -3px;" for="catalogue">Ajouter depuis le
                                catalogue</label>
                        </div>
                        <div class="form-group col-md-6 text-right">
                            <input type="radio" id="new_article" name="choice_selection" class="choix_article_source"
                                value="creer">
                            <label style="font-size: 10pt;margin-top: -3px;" for="new_article">créer un nouveau
                                produit</label>
                        </div>
                    </div>
                    <div id="catalogue_article">
                        <div class="row">
                            <div class="form-group col-md-12 col-xs-12">
                                <label for="choice_catalogue_categorie">Catégorie du produit</label><br>
                                @php
                                $categories=new \App\Http\Controllers\CategorieCatalogue();
                                $listes=$categories->list_option_article($id);
                                @endphp
                                <select name="category_slug" id="choice_catalogue_categorie_article"
                                    class="form-control choosen" data-url="{{route('list_article_by_categorie')}}">
                                    {!! $listes !!}
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-12 col-xs-12">
                                <label for="choice_catalogue_categorie">Catalogue fournisseur</label><br>
                                <select name="productor_id" id="productor" class="form-control choosen">
                                    <option></option>
                                    @foreach ($productors as $productor)
                                    <option value="1">test</option>
                                    <option value="{{ $productor->id }}">
                                        {{ $productor->country }} - {{ $productor->first_name.'
                                        '.$productor->last_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                       
                        

                        <div class="row">
                            <div class="form-group col-md-12 col-xs-12" id="article_display_panel">
                                <label for="article_display">Produits du catalogue</label><br>
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                                    <div class="">
                                        <small>Cliquer sur <strong>Ajouter</strong> pour sélectionner les produits du catalogue. Vous pouvez choisir plusieurs produits.</small>
                                    </div>
                                    <div class="">
                                        <input type="text" class="form-control" id="searchInput" placeholder="Rechercher..." style="width: 200px;">
                                    </div>
                                </div>
                                
                                <table id="" class="table table-responsive-xs table-bordered">
                                    <thead>
                                        <tr>
                                            <th title="case à cocher de l'article">Cocher</th>
                                            <th title="image de l'article">Image</th>
                                            <th title="nom de l'article">Intitulé</th>
                                            <th title="prix de vente de l'article">Prix en {{ isset($maboutique['meta']) ? ($maboutique['meta']['currency_admin'] != null ? $maboutique['meta']['currency_admin'] : 'XOF') : 'undefined' }}</th>
                                            <th title="action à effectuer" style="text-align:right;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="article_display">
                                        <tr class="loadingRow" >
                                            <td colspan="5" style="text-align: center;">
                                                <div class="loader"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div style="float: right !important;">
                                    <nav>
                                        <ul class="pagination" id="pagination">
                                            <!-- Les éléments de pagination seront ajoutés ici dynamiquement -->
                                        </ul>
                                    </nav>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="choice_selection" id="choix_selection_input" value="catalogue">
                <div id="creer_article" style="display: none; padding:12px;">
                    <div class="row" id="image_article">
                        <h6 class="col-sm-12 col-xs-12">Ajouter une images de capacités inférieure ou égale à
                            2MB. Les images lourdes ralentirons votre espace de vente.</h6>
                        <div class="col-sm-12 col-xs-12 text-center mb-2">
                            <div class="text-center" id="list_img_">
                            </div>
                        </div>
                        <div class="col-lg-6 col-xs-12">
                            <input type="file" accept=".jpg, .jpeg, .png" name="images[]" id="file" class="inputfile"
                                data-multiple-caption="{count}  fichiers choisis" />
                            <label for="file" style="background: #060e1c;color: #fff;border: 1px double #060e1c;"
                                class="form-control col-form-label text-center text-sm-center btn subs_btn"><i
                                    id="upload" class="fa fa-upload col-2"></i> <span id="lab" style="color: #fff;">
                                    Mettre une image en avant </span></label>
                        </div>
                        <h6 class="col-sm-12 col-xs-12">Vous pouvez téléverser plus d'image dans les détails du
                            produit plus tard.</h6>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12 col-xs-12 pt-4">
                            <label for="categorie">Catégorie </label><br>
                            @php
                            $categories=new \App\Http\Controllers\CategorieCatalogue();
                            $listes=$categories->list_option_article($id);
                            @endphp
                            <select name="categorie_slug" id="categorie_slug" class="form-control choosen">
                                {!! $listes !!}
                            </select>
                        </div>

                    </div>
                    <div class="row">

                        <div class="form-group col-md-6 col-xs-12">
                            <label>Référence </label><span style="color: red"> (requis)</span><br>
                            <input type="text" id="reference" data-input_name="reference"
                                onblur="check_error(['reference'])" name="reference" class="form-control"
                                placeholder="Référence du produit" style="width: 100%;">
                            <span id="errorreference" class="error"></span>
                        </div>
                        <div class="form-group col-md-6 col-xs-12">
                            <label>intitule (nom du produit)</label><span style="color: red"> (requis)</span><br>
                            <input type="text" id="name" name="name" data-input_name="intitule du produit"
                                onblur="check_error(['name'])" class="form-control" placeholder="Nom du produit"
                                style="width: 100%;">
                            <span id="errorname" class="error"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6 col-xs-12">

                            <label>Prix de vente TTC
                                en {{isset($maboutique['meta']) ? ($maboutique['meta']['currency_admin']!=null ?
                                $maboutique['meta']['currency_admin'] : 'XOF') : 'XOF'}} </label><span
                                style="color: red"> (requis)</span><br>

                            <input type="number" id="price" name="price" required="required" value="1" min="0"
                                oninput="this.value = Math.round(this.value);" minlength="1"
                                data-input_name="prix de vente" onblur="check_error(['price'])" class="form-control"
                                placeholder="Prix de vente" style="width: 100%;">
                            <span id="errorprice" class="error"></span>
                        </div>


                        <div class="form-group col-md-6 col-xs-12">
                            <label>Quantité disponible</label><span style="color: red"> (requis)</span> <br>
                            <input type="number" id="quantity" name="quantity" required="required" min="0"
                                oninput="this.value = Math.round(this.value);" minlength="1" data-input_name="quantité"
                                onblur="check_error(['quantity'])" class="form-control"
                                placeholder="Quantité disponible" value="0" style="width: 100%;">
                            <span id="errorquantity" class="error"></span>
                        </div>

                        <div class="form-group col-md-6 col-xs-12 text-left">
                            <label>
                                <input type="checkbox" id="is_panier" name="is_panier">
                                Ce produit est il un ensemble de produit en Panier (coffret) ?</label> <br>

                        </div>


                        @if(isset($maboutique['meta']) && $maboutique['meta']['internationalize'])

                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
                            style="padding-top: 20px;padding-bottom:20px">
                            <label for="international_shipping" class="text-uppercase">
                                <input type="checkbox" value="1" id="international_shipping"
                                    data-input="international_shipping" class="metaEvent"> activer la
                                livraison internationnal pour ce produit
                            </label>
                        </div>

                        <div class="form-group col-md-12 col-xs-12" id="weight_panel" style="display:none">
                            <label>Poids </label><span style="color: red"> (requis)</span> <br>
                            <small>Le poids du produits est important pour le calcul des frais de livraison
                                internationnal. Veuillez donc à communiquer le poids réel du
                                produit.</small> <br>
                            <input type="number" id="weight" name="weight" required="required" min="0" minlength="1"
                                data-input_name="poids" onblur="check_error(['weight'])" class="form-control"
                                placeholder="Poids du produit " value="1" style="width: 100%;">
                            <span id="errorweight" class="error"></span>
                        </div>
                        @endif
                    </div>
                    <div class="row" id="caracteritique_display"></div>
                    <div class="row">
                        <h6 class="col-sm-12 col-xs-12" style="font-weight: bold;">Informations
                            supplémentaires</h6>
                        <div class="form-group col-sm-6 col-xs-12">
                            <label>Fabriquant</label><br>
                            <input type="text" id="maker" name="maker" class="form-control" placeholder="fabriquant"
                                style="width: 100%;">
                        </div>
                        <div class="form-group col-sm-6 col-xs-12">
                            <label>Pays du fabricant</label><br>
                            <input type="text" id="maker_country" name="maker_country" class="form-control"
                                placeholder="pays du fabricant" style="width: 100%;">
                        </div>
                        <div class="form-group col-sm-6 col-xs-12">
                            <label>Mis sur le marché le: <br> <small>Laissez vide si votre produit n'a pas de
                                    date d'expiration</small></label><br>
                            <input type="datetime-local" id="create" name="create" class="form-control"
                                placeholder="fournisseur" style="width: 100%;">
                        </div>
                        <div class="form-group col-sm-6 col-xs-12">
                            <label>Expire le: <br> <small>Laissez vide si votre produit n'a pas de date
                                    d'expiration</small></label>
                            <input type="datetime-local" id="expire" name="expire" class="form-control"
                                placeholder="data d'expiration" style="width: 100%;">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12 col-xs-12">
                            <label>Description</label><br>
                            <textarea name="description" class="form-control" id="description" style="width: 100%;"
                                rows="5" placeholder=""></textarea>
                        </div>
                    </div>
                    <div class="row" id="text-nb">
                        <div class="col-sm-12 col-xs-12">
                            <h6><span>NB:</span> Les images que vous telechargerez pourrons rallentir
                                l'enregistrement de votre produit. Toute fois si vous ne pouvez pas avoir des
                                images avec de plus faible qualitée, veuillez patienter lors de l'enregistrement
                                de votre produit.</h6>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="modal-footer">
                        <input type="hidden" name="id_page" value="{{$id}}">
                        <input type="submit" name="action" id="action_catalogue" class="btn btn-sm"
                            style="background-color: #0D3349;border-radius: 0px;color: white;" value="Ajouter" />
                        <input type="submit" name="action" id="action_create"
                            onclick="return check_error(['reference','name','price','quantity']);" class="btn btn-sm"
                            style="display:none;background-color: #0D3349;border-radius: 0px;color: white;"
                            value="Ajouter" />
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="decriptionModal" class="modal fade">
    <div class="modal-dialog">
        <div>
            @csrf

            <div class="modal-content" style="border-radius: 0px;">

                <div class="modal-body">
                    <div class="row">
                        <h6 class="col-sm-12 col-xs-12" style="font-weight: bold">Produit: <span
                                id="article_details_name"></span></h6>
                    </div>
                    <div class="row" style="background: #eeeeee">
                        <h6 class="col-sm-12 col-xs-12" style="font-weight: bold">Description</h6>

                        <div class="col-sm-12 col-xs-12" id="description_text_details"></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 text-center" style="margin-top: 20px;">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div id="detailsModal" class="modal fade">
    <div class="modal-dialog">
        <form method="post" id="m" enctype="multipart/form-data">
            @csrf

            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fa fa-eye-slash"></i> Détails <span
                            id="name_details_header"></span></h4>
                </div>
                <div class="modal-body">
                    <div id="details_article_view">
                        <div class="row">

                            <div class="form-group col-md-6 col-xs-12">
                                <label>Référence </label><br>
                                <input type="text" id="reference_details" class="form-control" style="width: 100%;"
                                    disabled>
                            </div>
                            <div class="form-group col-md-6 col-xs-12">
                                <label>intitule</label><br>
                                <input type="text" id="name_details" class="form-control" disabled style="width: 100%;">
                            </div>
                        </div>


                        <div class="row">

                            <div class="form-group col-md-6 col-xs-12">
                                <label>Prix de vente TTC</label><br>
                                <input type="text" id="price_details" class="form-control" disabled
                                    style="width: 100%;">
                            </div>


                            <div class="form-group col-md-6 col-xs-12">
                                <label>Quantité disponible</label><br>
                                <input type="text" id="quantity_details" name="quantity" class="form-control" disabled
                                    style="width: 100%;">
                            </div>

                        </div>

                        <div class="row" id="caracteritique_display_details"></div>

                        <div class="row">
                            <h6 class="col-sm-12 col-xs-12" style="font-weight: bold;">Informations
                                supplémentaires</h6>
                            <div class="form-group col-sm-6 col-xs-12">
                                <label>Fabriquant</label><br>
                                <input type="text" id="maker_details" class="form-control" placeholder="fabriquant"
                                    disabled style="width: 100%;">
                            </div>
                            <div class="form-group col-sm-6 col-xs-12">
                                <label>Pays du fabricant</label><br>
                                <input type="text" id="maker_country_details" name="maker_country" class="form-control"
                                    disabled placeholder="pays du fabricant" style="width: 100%;">
                            </div>
                            <div class="form-group col-sm-6 col-xs-12">
                                <label>Mis sur le marché le: <br> <small>Laissez vide si votre produit n'a pas de
                                        date d'expiration</small></label><br>
                                <input type="datetime-local" id="create_details" class="form-control" disabled
                                    placeholder="fournisseur" style="width: 100%;">
                            </div>
                            <div class="form-group col-sm-6 col-xs-12">
                                <label>Expire le: <br> <small>Laissez vide si votre produit n'a pas de date
                                        d'expiration</small></label>
                                <input type="datetime-local" id="expire_details" class="form-control" disabled
                                    placeholder="data d'expiration" style="width: 100%;">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-12 col-xs-12">
                                <label>Description</label><br>
                                <textarea class="form-control" id="description_details" disabled style="width: 100%;"
                                    rows="5" placeholder=""></textarea>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-xs-12" style="margin-top: 20px;">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>

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

<div id="imagesModal" class="modal fade">
    <div class="modal-dialog">
        <form method="post" id="image_form" action="{{route('update_image')}}" enctype="multipart/form-data">
            @csrf
            @if(!$admin)
            <input type="hidden" value="{{$maboutique['slug']}}" name="boutique_slug">
            @endif
            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><i class="fa fa-folder"></i> Images </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 col-xs-12">
                            <h6 class="col-sm-12 col-xs-12">Image en avant</h6>
                            <div class="col-ting" style="background: #c0c0c0">
                                <div class="control-group file-upload" id="file-upload1">
                                    <div class="image-box text-center" id="photo_enseigne" style="">
                                        <p
                                            style="background-size: contain;background-position: center;color: #2a3f54;font-weight: bold;">
                                            Ajouter une image<br><i class="fa fa-camera"></i></p><img src="" alt="">
                                    </div>
                                    <div class="controls"><input type="file" name="image_avant" /></div>
                                </div>
                            </div>

                        </div>
                        <div class="col-sm-12 col-xs-12">
                            <div class="container-fluid text-center mb-2 row">
                                <div id="list_img3">

                                </div>
                            </div>
                            <div class="" id="image_article">
                                <h6 class="col-sm-12 col-xs-12">Ajouter des images supplémentaires</h6>
                                <div class="col-lg-6 col-xs-12">
                                    <input type="file" accept="image/*" name="images[]" id="file2" class="inputfile"
                                        multiple="multiple" data-multiple-caption="{count}  fichiers choisis" />
                                    <label for="file2"
                                        style="background: #060e1c;color: #fff;border: 1px double #060e1c;"
                                        class="form-control col-form-label text-center text-sm-center btn subs_btn"><i
                                            id="upload2" class="fa fa-upload col-2"></i> <span id="lab"
                                            style="color: #fff;"> Ajouter</span></label>
                                </div>


                            </div>
                            <div class="container-fluid text-center mb-2">
                                <div id="list_img2">

                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-xs-12">
                            <h6 class="col-sm-12 col-xs-12">Ajouter une images de capacités inférieure ou égale à
                                2MB.</h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-xs-12" style="margin-top: 20px;">
                            <div class="col-sm-12 col-xs-12">
                                <button type="submit" class="btn btn-primary" id="add_new_image">Enregistrer
                                </button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

<div id="helpModal" class="modal fade">
    <div class="modal-dialog">
        <div>
            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fa fa-exclamation-circle"></i> Aide </h4>
                </div>
                <div class="modal-body">

                    <div>
                        <div class="row" style="padding: 20px;">
                            <h4 style="color: #1d2124;margin-bottom: 20px;">Ajout d'un nouveau produit</h4>

                            <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> Ajouter depuis le catalogue
                            </h6>
                            <div>Le catalogue des produits est une liste pré-établis de produit que vous pouvez
                                ajouter suivant une des catégories de votre catalogue de catégorie. Le catalogue
                                vous facilite la tâche en vous permettant d'ajouter de nouveau produit à votre
                                propre catalogue.

                            </div>
                            <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> Créer un nouveau produit</h6>
                            <div>Il s'agit d'ajouter un nouveau produit que vous n'arrivez pas à trouver dans le
                                catalogue à votre boutique.
                                &nbsp;&nbsp;&nbsp; <h6 style="color: #88b121;">caractéristique</h6>

                                <span>NB:</span> vous pouvez modifier ou supprimer cette catégorie commme bon vous
                                semble.
                            </div>
                        </div>


                        <div class="row" style="padding: 20px;">
                            <h4 style="color: #1d2124;margin-bottom: 20px;">Listes des produits de votre
                                catalogue</h4>

                            <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> % de réduction promo</h6>
                            <div>
                                C'est le pourcentage e promotion que vous attribuez à un produit.
                            </div>
                            <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> Promo</h6>
                            <div>Vous permet d'activer la promotion sur un produit.
                            </div>
                            <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> Visibilité</h6>
                            <div>Elle vous permet de retirer un produit de votre catalogue.
                            </div>
                            <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> Stock disponible</h6>
                            <div>Vous permet de modifier à votre guise votre stock, si des ventes eventuel ont été
                                effectué hors de votre boutique en ligne.
                            </div>
                            <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> Statistiques</h6>

                            <div>
                                <ul>
                                    <li><i class="fa fa-eye"></i> Nombre de client ayant vu votre produit</li>
                                    <li><i class="fa fa-shopping-bag"></i> Nombre de commande reçu et validé</li>
                                    <li><i class="fa fa-heart" style="color: red;"></i> Nombre de fois que votre
                                        produit est ajouté a la liste des favoris.
                                    </li>
                                </ul>
                            </div>
                        </div>


                        <h6 style="color: #88b121;"><i class="fa fa-circle-o"></i> Partages</h6>

                        <div>
                            <ul>
                                <li><i class="fab fa-facebook-f"></i> partager vos produits avec vos clients sur
                                    facebook.
                                </li>
                                <li><i class="fab fa-whatsapp"></i> Partager vos produits avec vos clients sur
                                    whatsapp.
                                </li>
                                <li><i class="fab fa-linkedin-in" style="color: red;"></i> Partager vos produits
                                    avec vos clients sur linkedin
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>


                <div class="">
                    <div class="modal-footer">
                        <button type="button" id="close_category_modal2" class="btn btn-default"
                            data-dismiss="modal">Fermer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- <div id="articleDetailContainer" class="article-detail-container" style="display: none;">
    <!-- Contenu des détails du produit -->
</div> --}}
<div id="articleDetailContainer"></div>

@endsection

@section('script')
<script>
    $(document).ready(function(){
        $('.loadingRow').hide();
        var articles = [];
        function loadProducts(url) {
            $('.loadingRow').show();
            $.get(url, function(data) {
                console.log('data', data);
                var productsContainer = $('#article_display');
                productsContainer.empty(); // Clear previous content

                if (data.data.length === 0) {
                    console.log('Aucune donnée disponible');
                    $("#article_display").text("Aucun produit trouvé");
                    $('.loadingRow').hide();
                } else {
                    articles = data.data;
                    data.data.forEach(function(article) {
                        productsContainer.append(`
                            <tr>
                                <td>
                                    <input type="checkbox" class="check" id="${article.id}" name="articles[]" value="${article.id}">
                                    <label for="${article.id}"></label>
                                </td>
                                <td>
                                    <img src="{{ url('storage/productor_products/${article.file}') }}" alt="${article.file}" style="height: 40px">
                                </td>
                                <td>${article.name}</td>
                                <td>${article.price}</td>
                                <td style="text-align:right;">
                                    <button type="button" class="btn btn-sm btn-primary detail-m" data-id="${article.id}">
                                        Voir détail
                                    </button>
                                    <button type="button" class="btn btn-sm btn-info" id="add_cart" data-id="${article.id}">
                                        Ajouter
                                    </button>
                                </td>
                            </tr>
                        `);
                    });

                    // Update pagination
                    updatePagination(data);
                     $('.loadingRow').hide();
                }
            }).fail(function() {
                // Masquer l'indicateur de chargement en cas d'erreur
                 $('.loadingRow').hide();
                console.log('Erreur lors du chargement des produits');
            });
        }

        $(document).on('click', '.detail-m', function() {
            console.log('detail', $(this).data());
            var articleId = $(this).data('id');
            var article = articles.find(a => a.id == articleId); 
            var detailContainer = $('#articleDetailContainer');
            console.log('article', article);
            // Remplir le conteneur de détails avec les informations du produit
            detailContainer.html(`
                <div class="modal fade" id="articleDetailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style='z-index:999999;'>
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Détails du produit</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body" style="display:flex; justify-content:space-between; align-items: center;">
                                <img src="{{asset('storage/productor_products/${article.file}')}}" alt="${article.name}" height="180" class="img-fluid">
                            </div>
                            <div style="padding:10px;">
                                <p> <span style="font-weight: bold;">Nom du produit: </span> ${article.name}</p>
                                <p> <span style="font-weight: bold;">Prix: </span> XOF ${article.price}</p>
                                <p> <span style="font-weight: bold;">Référence: </span> <span class="badge badge-info">${article.reference}</span></p>
                                <p> <span style="font-weight: bold;">Description: </span> ${article.description}</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
            `);

            // Afficher le modal
            $('#articleDetailModal').modal('show');
        });

        function updatePagination(data) {
            var paginationContainer = $('#pagination');
            paginationContainer.empty(); // Clear previous pagination

            // Previous Page Link
            if (data.prev_page_url) {
                paginationContainer.append(`<li class="page-item"><a class="page-link" href="${data.prev_page_url}" rel="prev" aria-label="« Précédent">‹</a></li>`);
            } else {
                paginationContainer.append(`<li class="page-item disabled" aria-disabled="true" aria-label="« Précédent"><span class="page-link" aria-hidden="true">‹</span></li>`);
            }

            // Page Links
            for (var i = 1; i <= data.last_page; i++) {
                var activeClass = data.current_page == i ? 'active' : '';
                paginationContainer.append(`<li class="page-item ${activeClass}" aria-current="page"><a class="page-link" href="${data.path}?page=${i}">${i}</a></li>`);
            }

            // Next Page Link
            if (data.next_page_url) {
                paginationContainer.append(`<li class="page-item"><a class="page-link" href="${data.next_page_url}" rel="next" aria-label="Suivant »">›</a></li>`);
            } else {
                paginationContainer.append(`<li class="page-item disabled" aria-disabled="true" aria-label="Suivant »"><span class="page-link" aria-hidden="true">›</span></li>`);
            }
        }

        // Load initial products
        // var productor_id = $('select[name="productor_id"]').val();
        // loadProducts('/get_productor_by_categorie/' + productor_id);

        // // Filter products on productor change
        // $('select[name="productor_id"]').on('change', function() {
        //     var productor_id = $(this).val();
        //     loadProducts('/get_productor_by_categorie/' + productor_id);
        // });

        $('#productor').change(function() {
            var productor_id = $(this).val();
            if (productor_id) {
                loadProducts('/get_productor_by_categorie/' + productor_id);
            }
        });

        // Handle pagination click
        $('#pagination').on('click', '.page-link', function(event) {
            event.preventDefault(); // Prevent page reload
            var url = $(this).attr('href');
            loadProducts(url);
        });

        $('#searchInput').on('keyup', function() {
            var searchText = $(this).val().toLowerCase();
            $('#article_display tr').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
            });
        });

       

    // Fermer le conteneur de détails
    $(document).on('click', '#closeDetailContainer', function() {
        $('#articleDetailContainer').hide();
    });


    $(document).on('click', '#btn_close', function () { 
        console.log('btn_close');
        $('.modalProd').modal('hide');
        })

        $(document).on('click', '#add_cart ', function () { 
        console.log('add-btn');
        var articleId = $(this).data('id');
        var checkbox = $(`#${articleId}`);
        checkbox.prop('checked', !checkbox.prop('checked'));
        $(`#${articleId}`).show();
        })


    })
</script>
@endsection