{{-- @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')s --}}

@section('sidebar')
    @include('../dashboard._sidebar')
@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;
        }

        :root {
            --card-line-height: 1.2em;
            --card-padding: 1em;
            --card-radius: 0.5em;
            --color-green: #558309;
            --color-gray: #e2ebf6;
            --color-dark-gray: #c4d1e1;
            --radio-border-width: 2px;
            --radio-size: 1.5em;
        }

        .grid {
            display: grid;
            grid-gap: var(--card-padding);
            margin: 0 auto;
            max-width: 60em;
            padding: 0;

            @media (min-width: 42em) {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .card {
            background-color: #fff;
            border-radius: var(--card-radius);
            position: relative;

            &:hover {
                box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
            }
        }

        .radio {
            font-size: inherit;
            margin: 0;
            position: absolute;
            right: calc(var(--card-padding) + var(--radio-border-width));
            top: calc(var(--card-padding) + var(--radio-border-width));
        }

        @supports(-webkit-appearance: none) or (-moz-appearance: none) {
            .radio {
                -webkit-appearance: none;
                -moz-appearance: none;
                background: #fff;
                border: var(--radio-border-width) solid var(--color-gray);
                border-radius: 50%;
                cursor: pointer;
                height: var(--radio-size);
                outline: none;
                transition:
                    background 0.2s ease-out,
                    border-color 0.2s ease-out;
                width: var(--radio-size);

                &::after {
                    border: var(--radio-border-width) solid #fff;
                    border-top: 0;
                    border-left: 0;
                    content: '';
                    display: block;
                    height: 0.75rem;
                    left: 25%;
                    position: absolute;
                    top: 50%;
                    transform:
                        rotate(45deg) translate(-50%, -50%);
                    width: 0.375rem;
                }

                &:checked {
                    background: var(--color-green);
                    border-color: var(--color-green);
                }
            }

            .card:hover .radio {
                border-color: var(--color-dark-gray);

                &:checked {
                    border-color: var(--color-green);
                }
            }
        }

        .plan-details {
            border: var(--radio-border-width) solid var(--color-gray);
            border-radius: var(--card-radius);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            padding: var(--card-padding);
            transition: border-color 0.2s ease-out;
        }

        .card:hover .plan-details {
            border-color: var(--color-dark-gray);
        }

        .radio:checked~.plan-details {
            border-color: var(--color-green);
        }

        .radio:focus~.plan-details {
            box-shadow: 0 0 0 2px var(--color-dark-gray);
        }

        .radio:disabled~.plan-details {
            color: var(--color-dark-gray);
            cursor: default;
        }

        .radio:disabled~.plan-details .plan-type {
            color: var(--color-dark-gray);
        }

        .card:hover .radio:disabled~.plan-details {
            border-color: var(--color-gray);
            box-shadow: none;
        }

        .card:hover .radio:disabled {
            border-color: var(--color-gray);
        }

        .plan-type {
            color: var(--color-green);
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 1em;
        }

        .plan-cost {
            font-size: 2.5rem;
            font-weight: bold;
            padding: 0.5rem 0;
        }

        .slash {
            font-weight: normal;
        }

        .plan-cycle {
            font-size: 2rem;
            font-variant: none;
            border-bottom: none;
            cursor: inherit;
            text-decoration: none;
        }

        .hidden-visually {
            border: 0;
            clip: rect(0, 0, 0, 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }
    </style>
@endsection

@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="row">
                                <h2 class="col-md-6 col-xs-12"><img src="{{ asset('images/produit.png') }}" alt=""
                                        width="20px"> Produits <small>
                                        Liste des produits disponibles</small></h2>
                            </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="alert alert-info">
                                <div style="display:flex; justify-content:space-between; align-items:center;">
                                    <div style=" font-size: 18px">
                                        <h3>Abonnement</h3>
                                        @if ($abonnement == null || $abonnement->remaining_publication <= 0)
                                            <small> Nombre de produit à ajouter :
                                                <span style="font-size: 15px; font-weight:bold;">
                                                    0
                                                </span>
                                            </small>
                                        @else
                                            <small> Nombre de produit à ajouter :
                                                <span style="font-size: 15px; font-weight:bold;">
                                                    {{ isset($abonnement->remaining_publication) && $abonnement->remaining_publication <= 0 ? 0 : $abonnement->remaining_publication }}
                                                </span>
                                            </small>
                                        @endif
                                        {{-- @if (isset($abonnement) && $abonnement !== null)
                                        <small> Nombre de produit à ajouter : 
                                            <span style="font-size: 15px; font-weight:bold;">
                                                {{ isset($abonnement->remaining_publication) && $abonnement->remaining_publication <= 0 ? 0 : $abonnement->remaining_publication }}
                                            </span>
                                        </small>
                                    @else
                                        <small>Nombre de produit à ajouter : Données d'abonnement non disponibles</small>
                                    @endif --}}

                                    </div>
                                    <div  style="font-size: 18px">
                                        <button id="subscribe_article" data-toggle="modal" data-slug="{{$user->slug}}" data-target="#subscribeModal"
                                            class="btn btn-primary brn-sm"><i class="fa fa-plus-circle"></i> Cummuler le
                                            nombre de produit à ajouter
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="row" style="margin-bottom: 10px;">
                                <a href="#" 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;
                                @if ($abonnement == null || $abonnement->remaining_publication <= 0)
                                    <button id="subscribe_article" data-toggle="modal" data-slug="{{$user->slug}}" data-target="#subscribeModal"
                                        class="btn btn-primary brn-sm"><i class="fa fa-plus-circle"></i> Ajouter un produit
                                    </button>
                                @else
                                    <button id="add_article" data-toggle="modal" data-target="#articleModal"
                                        class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i> Ajouter un produit
                                    </button>
                                @endif

                            </div>
                            <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 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 XOF</th>
                                            <th title="pourcentage producteur">Gain</th>
                                            <th title="Bénéfice par article">Bénéfice par produit</th>
                                            <th title="Quantité de l'article">Quantité</th>
                                            <th title="Nombres d'ajout">Ajouté dans</th>
                                            <th>
                                                <div style="display: flex; justify-content:end;">
                                                    <div></div>
                                                    <div>Action</div>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($articleProducteur as $index => $item)
                                            <tr>
                                                <td>{{ $loop->index + 1 }}</td>
                                                <td>{{ $item->reference }}</td>
                                                <td>
                                                    @if ($item->categorie)
                                                        {{ $item->categorie->intitule }}
                                                    @else
                                                        Catégorie introuvable
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    @if (isset($item) && $item->file != null)
                                                        <img src="{{ url('storage/productor_products/' . $item->file) }}"
                                                            alt="{{ $item->file }}" style="height: 40px">
                                                    @else
                                                        <a href="" class="image_edit btn btn-dark btn-xs"
                                                            data-url="" data-image="">Ajouter</a>
                                                    @endif
                                                </td>
                                                <td>{{ $item->name }}</td>
                                                <td><span class="badge badge-info">{{ $item->price }} XOF</span> </td>
                                                <td>
                                                    @if ($producerPercentage == null)
                                                        0 %
                                                    @else
                                                        {{ $producerPercentage->percentage }} %
                                                    @endif
                                                </td>
                                                <td><span class="badge badge-success">
                                                        @if ($producerPercentage == null)
                                                            0 XOF
                                                        @else
                                                            {{ $item->price * ($producerPercentage->percentage / 100) }}
                                                            XOF
                                                        @endif
                                                    </span> </td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>
                                                    <span class="badge badge-info" style="cursor: pointer"
                                                        data-toggle="modal" data-target="#boutiquesModal"
                                                        onclick="openBoutiquesModal({{ json_encode($item->articles) }})">
                                                        {{ count(array_unique(array_column(is_array($item->articles) ? $item->articles : [], 'boutique_slug'))) }}
                                                        boutique(s)
                                                    </span>
                                                </td>
                                                <td>
                                                    <div style="display: flex; justify-content:end;">
                                                        <a data-slug="{{ $item->slug }}"
                                                            data-url="{{ route('supplier_get_article', $item->slug) }}"
                                                            data-url2="{{ route('supplier_update_article', $item->slug) }}"
                                                            class="modify_article btn btn-xs btn-warning"
                                                            style="margin-right: 5px;" style="color: #fff;"><i
                                                                class="fa fa-edit"></i> Modifier</a>
                                                        @if ($item->corbeil == 0)
                                                            <a href="{{ route('supplier_delete_article', $item->slug) }}"
                                                                class="delete-action  btn btn-xs btn-danger"
                                                                style="color: #fff;"><i class="fa fa-trash"></i>
                                                                Désactivé</a>
                                                        @else
                                                            <a href="{{ route('supplier_active_article', $item->slug) }}"
                                                                class="delete-action  btn btn-xs btn-success"
                                                                style="color: #fff;"><i class="fa fa-check"></i> Activé</a>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div style="float: right !important;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="subscribeModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <form method="post" id="subscribe_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> Cummuler un abonnement
                        </h4>
                    </div>
                    <div class="modal-body">
                        <h6>Faites le choix de l'abonnement qui vous convient pour profiter de nos services.</h6>
                        <div class="grid">
                            <input type="hidden" id="catalogue_for_abonnement_update">
                            @foreach ($etatCatalogue as $key => $item)
                                <a data-slug="{{ $item->slug }}"
                                    data-url="{{ route('get_abonnement_catalogue', $item->slug) }}"
                                    class="card abonnement_productor_init">
                                    <span class="plan-details">
                                        <span class="plan-type">{{ $item->name }}</span>
                                        <span class="plan-cost">
                                            {{ \Illuminate\Support\Facades\Session::has('continent')
                                                ? (\Illuminate\Support\Facades\Session::get('continent') != 'Africa'
                                                    ? 'USD'
                                                    : 'XOF')
                                                : 'XOF' }}
                                            {{ $item->price }}</span>
                                        <span>{{ $item->numberPublication }} produits à publier</span>
                                    </span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <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 id="creer_article">
                            <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>
                                        <h6 class="col-sm-12 col-xs-12" style="color:#D40025; text-align:left;">L'image
                                            est obligatoire
                                            pour l'ajout du produit.</h6>
                                    </label>
                                </div>
                            </div>
                            <div class="row" style="margin-top: 2%;">
                                <div class="form-group col-md-12 col-xs-12 pt-4">
                                    <label for="categorie">Catalogue </label><br>
                                    <select name="categorie_slug" id="categorie_slug" class="form-control choosen"
                                        required>
                                        {{-- {!! $listes !!} --}}
                                        <option></option>
                                        @foreach ($categories as $item)
                                            <option value="{{ $item->slug }}">{{ $item->intitule }}</option>
                                        @endforeach
                                    </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"
                                        required 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" required 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</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" required 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" required placeholder="Quantité disponible" value="0"
                                        style="width: 100%;">
                                    <span id="errorquantity" class="error"></span>
                                </div>

                            </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"
                                        value="{{ auth()->user()->last_name . ' ' . auth()->user()->first_name }}"
                                        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"
                                        value="{{ auth()->user()->country }}" 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="date" 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="date" 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="">
                            <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="submit" id="action_create" class="btn btn-sm"
                                    style="background-color: #0D3349;border-radius: 0px;color: white;">Ajouter</button>
                                <button type="button" class="btn btn-default btn-sm"
                                    data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="boutiquesModal" tabindex="-1" role="dialog" aria-labelledby="boutiquesModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div style="display:flex; justify-content:space-between; align-items: center; width:100%;">
                        <h4 class="modal-title" id="boutiquesModalLabel" style="">Liste des boutiques </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <div style="display:block">
                        <p style="font-size: 15px"> <span style="font-weight:bold">Produits :</span> <span
                                id="produitName"> </span></p>
                        <p style="font-size: 15px"> <span style="font-weight:bold">Prix :</span> <span id="produitPrice">
                            </span></p>
                    </div>
                    <table class="table table-responsive-xs table-bordered">
                        <thead>
                            <tr>
                                <th>Nom de la boutique</th>
                                <th>Pays</th>
                                <th>Gain</th>
                                {{-- <th>Nombre d'achat</th>
                                <th>Revenu</th> --}}
                                <th>Nombre d'achats</th>
                                <th>Revenu</th>
                                <th>
                                    <div style="display: flex; justify-content:end;">
                                        <div></div>
                                        <div>Action</div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="boutiquesModalBody">
                            <!-- Les données seront ajoutées ici par JavaScript -->
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </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
                <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 ou changer l'image en avant</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>
    @include('dashboard.paiement_box.choose')
@endsection
@section('script')
    <script>
        $(document).ready(function() {

            $(document).on('click', '.modify_article', function() {
                $('#overlay').slideDown();
                $("#choice_maker_panel").fadeOut('slow', function() {
                    $("#catalogue_article").fadeOut('slow', function() {
                        $("#creer_article").fadeIn();
                    });
                });
                var url = $(this).data('url');
                var url2 = $(this).data('url2');
                var slug = $(this).data('slug');
                $.ajax({
                    url: url,
                    method: "GET",
                    success: function(data) {
                        $('#articleModal').modal('show');
                        $('#image_article').fadeOut();
                        data = JSON.parse(data);
                        $('#name').val(data['name']);
                        $('#price').val(data['price']);
                        $('#quantity').val(data['quantity']);
                        $('#reference').val(data['reference']);
                        $('#description').val(data['description']);
                        $('#maker').val(data['maker']);
                        $('#maker_country').val(data['maker_country']);
                        $('#create').val(data['create']);
                        $('#expire').val(data['expire']);
                        $('#categorie_slug').val(data['categorie_slug']).trigger(
                            'chosen:updated');

                        $('#title_modal_article').html(
                            "<i class='fa fa-edit'></i> Modifier le produit");
                        $('#action').val('Modifier');
                        $('#text-nb').fadeOut();
                        $('#article_form').attr('action', url2);
                        $('#article_form').append('<input type="hidden" name="slug" value="' +
                            slug + '">');
                        $('#article_form').append(
                            '<input type="hidden" name="_method" value="PUT" id="update_method">'
                        );
                        $('#overlay').slideUp();
                    },
                    error: function(data) {
                        // console.log(data);
                    }
                });
            });


            $(document).on('click', '#add_article', function() {
                $('#article_form')[0].reset();
                $('#article_form').attr("action", "{{ route('suppliers_create_article') }}");
                $('#update_method').val('');
                $('#text-nb').fadeIn();
                $('#caracteritique_display').html('');
                caracteristique();
                let $user = $('#user_connect').val();
                // if($user!=1){
                //     $('#creer_article').fadeOut('slow',function(){
                //         $('#catalogue_article').fadeIn('slow',function () {
                //             $('#choice_maker_panel').fadeIn('slow',function(){
                //                 catalogue_add_article();
                //             });
                //         });
                //     })
                // }successsuccesssuccesssuccess
                $('.modal-title').html("<i class='fa fa-plus'></i> Ajouter un nouveau produit");
                $('#image_article').fadeIn();
                $('#action_article').val('Ajouter');
                $('#weight_panel').slideToggle();
                $('#international_shipping').attr('checked', false);
                var categorie = $('#choice_catalogue_categorie_article').val();
                var url = $('#choice_catalogue_categorie_article').data('url');
                $.ajax({
                    url: url,
                    method: "POST",
                    data: {
                        _token: '{{ csrf_token() }}',
                        categorie: categorie
                    },
                    success: function(data) {
                        // console.log(data);
                        if (data.status == 1) {
                            $('#article_display_catalogue').html(data.articleProducteur);
                            // $.notify(data.message,'success')
                            // $('#articleModal').modal('hide');
                        } else {
                            console.log(data.message);
                            $('#action_create').attr('disabled', false);
                            // $.notify(data.message,'danger')
                            // $('#articleModal').modal('show');
                        }
                    },
                    error: function(data) {
                        // console.log(data);
                    }
                });
            });

            $(document).on('click', '#action_subscribe', function() {
                $('#choosePaiementOptionsModal').modal('show');
            });

            $(document).on('click', '.image_edit', function(e) {
                e.preventDefault();
                $('#imagesModal').modal('show');
                $('#overlay').slideDown();
                //  let $image=$(this).data('image');
                //     $('#photo_enseigne').css('background','url('+$image+')').css('background-size','cover');
                //     var url=$(this).data('url');
                //     $.ajax({
                //         url:url,
                //         method:"GET",
                //     success:function(data) {
                        console.log(data);
                //         data=JSON.parse(data)
                //             $('#list_img3').html(data);
                //         $('#overlay').slideUp();
                //         $('#imagesModal').modal('show');
                //         },error:function (data) {
                            console.log(data);
                //         }
                //     });


            });

            //$(document).on('click', '#subscribe_article', function () {
            // $('#subscribe_form')[0].reset();
            // $('#subscribe_form').attr("action", "{{ route('suppliers_subscribe') }}");
            // $('#text-nb').fadeIn();
            // $('.modal-title').html("<i class='fa fa-plus'></i> Souscrire à un abonnement");
            // $('#image_article').fadeIn();
            // $('#action_subscribe').val('Payer');
            // var categorie       =  $('#choice_catalogue_categorie_article').val();
            // var url             =  $('#choice_catalogue_categorie_article').data('url');
            // $.ajax({
            //     url:url,
            //     method:"POST",
            //     data:{_token:'{{ csrf_token() }}',categorie:categorie},
            //     success:function(data) {
                    console.log(data);
            //         if (data.status == 1) {
            //             $('#article_display_catalogue').html(data.articleProducteur);
            //         } else {
            //             console.log(data.message);
            //             $('#action_create').attr('disabled', false);
            //         }
            //     },error:function (data) {
                    console.log(data);
            //     }
            // });
            //});
        });


        // function openBoutiquesModal(articles) {
        //     let modalBody = document.getElementById('boutiquesModalBody');
        //     modalBody.innerHTML = ''; // Effacer le contenu précédent du modal

        //     let produitName = document.getElementById('produitName');
        //     let produitPrice = document.getElementById('produitPrice');
        //     let producerPercentage = @json($producerPercentage);
        //     let boutiquesInfo = []; // Tableau pour stocker les informations des boutiques

        //     console.log(producerPercentage.percentage);
        //     articles.forEach(function(article) {
        //         let foundBoutique = boutiquesInfo.find(boutique => boutique.slug === article.boutique_slug);
        //         if (!foundBoutique) {
        //             boutiquesInfo.push({
        //                 slug: article.boutique_slug,
        //                 nom_boutique: article.boutique.nom_boutique,
        //                 continent: article.boutique.continent,
        //                 count: 1,
        //                 totalGain: article.price * (producerPercentage.percentage / 100)
        //             });
        //         } else {
        //             foundBoutique.count++;
        //             foundBoutique.totalGain += article.price * (producerPercentage.percentage / 100);
        //         }
        //     });

        //     console.log(boutiquesInfo);

        //     // Ajouter les données des boutiques au modal  
        //     boutiquesInfo.forEach(function(boutique) {
        //         let tr = document.createElement('tr');
        //         tr.innerHTML = `
    //         <td>${boutique.nom_boutique}</td>
    //         <td>${boutique.continent}</td>
    //         <td><span class="badge badge-primary">${boutique.totalGain.toFixed(2)} XOF</span></td>
    //         <td><span class="badge badge-info">x${boutique.count}</span></td>
    //         <td>
    //             <span class="badge badge-success">
    //                 ${(boutique.count * boutique.totalGain).toFixed(2)}   XOF
    //             </span> 
    //         </td>
    //         <td>
    //             <div style="display: flex; justify-content:end;">
    //                 <a href="/${boutique.nom_boutique}/product/${articles[0].slug}" target="_blank"
    //                     class="btn btn-xs btn-warning"
    //                     style="margin-right: 2px;" style="color: #fff;"><i
    //                         class="fa fa-edit"></i> Aller à la boutique</a>
    //             </div>
    //         </td>
    //     `;
        //         modalBody.appendChild(tr);
        //     });

        //     // Mettre à jour le nom et le prix du produit dans le modal
        //     produitName.textContent = articles[0].name;
        //     produitPrice.textContent = articles[0].price + ' XOF';
        // }

        function openBoutiquesModal(articles) {
            let modalBody = document.getElementById('boutiquesModalBody');
            modalBody.innerHTML = '';

            let produitName = document.getElementById('produitName');
            let produitPrice = document.getElementById('produitPrice');
            let producerPercentage = @json($producerPercentage);
            let boutiquesInfo = [];

            console.log(producerPercentage.percentage);
            articles.forEach(function(article) {
                let foundBoutique = boutiquesInfo.find(boutique => boutique.slug === article.boutique_slug);
                console.log('boutiquesInfo', article);

                let nombreAchats = article.nombre_achats || 0;
                let articlePrice = article.price || 0;

                if (!foundBoutique) {
                    boutiquesInfo.push({
                        slug: article.boutique_slug,
                        nom_boutique: article.boutique.nom_boutique,
                        continent: article.boutique.continent,
                        count: nombreAchats,
                        totalGain: article.price * (producerPercentage.percentage / 100),
                        // totalGain: articlePrice * (producerPercentage.percentage / 100) * nombreAchats, 
                        totalRevenue: articlePrice * nombreAchats
                    });
                } else {
                    foundBoutique.count += nombreAchats;
                    foundBoutique.totalGain += articlePrice * (producerPercentage.percentage / 100) * nombreAchats;
                    foundBoutique.totalRevenue += articlePrice * nombreAchats;
                }
            });

            // Ajouter les données des boutiques au modal
            boutiquesInfo.forEach(function(boutique) {
                let tr = document.createElement('tr');
                tr.innerHTML = `
        <td>${boutique.nom_boutique}</td>
        <td>${boutique.continent}</td>
        <td><span class="badge badge-primary">${boutique.totalGain.toFixed(2)} XOF</span></td>
        <td><span class="badge badge-info">${boutique.count} achats</span></td>
        <td>
            <span class="badge badge-success">
                ${boutique.totalRevenue.toFixed(2)} XOF
            </span>
        </td>
        <td>
            <div style="display: flex; justify-content:end;">
                <a href="/${boutique.nom_boutique}/product/${articles[0].slug}" target="_blank"
                    class="btn btn-xs btn-warning"
                    style="margin-right: 2px;" style="color: #fff;"><i
                        class="fa fa-edit"></i> Aller à la boutique</a>
            </div>
        </td>
    `;
                modalBody.appendChild(tr);
            });

            // Mettre à jour le nom et le prix du produit dans le modal
            produitName.textContent = articles[0].name;
            produitPrice.textContent = articles[0].price + ' XOF';
        }
    </script>
@endsection