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

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

@section("css_add")
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" integrity="sha512-0nkKORjFgcyxv3HbE4rzFUlENUMNqic/EzDIeYCgsKa/nwqr2B91Vu/tNAu4Q0cBuG4Xe/D1f/freEci/7GDRA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen-sprite.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen-sprite@2x.png">
    <style>
        .error {
            color: red;
        }


        .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;
        }
    </style>
@endsection

@section("content")

    <style>
        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }

        .btn {
            border-radius: 0px;
        }

        .contact {
            border: 1px solid #ddd;
            border-radius: 50px;
        }
    </style>
    <div class="right_col" role="main">

        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel text-uppercase">
                    <div class="x_title" style="padding-left: 20px;">
                        <h5 class="col-md-12 col-sm-12 col-xs-12">panierS </h5>
                        <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;">
                            <button onclick="reset()"  data-toggle="modal" data-target="#articleModal"
                                    class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i> Ajouter une
                                panier
                            </button>
                           
                        </div>

                        <div class="row">
                            <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                <thead>
                                <tr>
                                    <th>Action</th>
                                    <th>Slug</th>
                                    <th title="image">Image</th>
                                    <th title="Nom">Nom</th>
                                    <th title="Type">Prix</th>
                                    <th title="Actif">Actif</th>
                                    <th>Créer</th>
                                    
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($paniers as $panier)
                                    <tr>
                                        <td>
                                            <div>
                                                <a title="Détail" data-slug="{{$panier->slug}}"
                                                    class="detail_data btn btn-xs btn-info" style="color: #fff;"><i
                                                         class="fa fa-list"></i> </a>
                                                   <a title="Modifier" data-slug="{{$panier->slug}}"
                                                       class="modifier_panier btn btn-xs btn-warning"
                                                       style="color: #fff;"><i
                                                            class="fa fa-edit"></i> </a>
                                                    <a title="Suprimer"
                                                       href="{{route('panier.delete_panier',$panier->slug)}}"
                                                       class="delete-action btn btn-xs btn-danger" style="color: #fff;"><i
                                                            class="fa fa-trash"></i> </a>
                                            </div>
                                        </td>
                                        <td>{{$panier->slug}}</td>
                                        <td><img src="{{$panier->image}}" width="30" alt=""></td>
                                        <td>{{$panier->name}}</td>
                                        <td>{{$panier->price}} XOF</td>
                                      <td>
                                            <a href="javascript:void(0)"
                                               onclick="visibility(@if($panier->state==1) 'cloturer' @else 'activer' @endif,'{{route("panier.visibility",[$panier->slug])}}')">
                                                @if($panier->actif==1) <span class="badge"
                                                                                style="background-color: #0d82d3">Actif</span> @else
                                                    <span class="badge"
                                                          style="background-color: #4F0800">Désactivé</span> @endif
                                            </a>
                                        </td>
                                        <td>{{date("d-m-Y h:i:s",strtotime($panier->created_at))}}</td>
                                       
                                    </tr>
                                     @endforeach

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

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

    <div id="articleModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <form name="panier_form" method="post" id="panier_form" enctype="multipart/form-data"
                  action="{{route("panier.add_up")}}">
                @csrf

                <div class="modal-content" style="border-radius: 0px;">
                    <div class="modal-header">
                        <h4 class="modal-title"><i class="fa fa-plus"></i>
                            <span id="textTitleModel">Ajouter</span> un nouveau
                            panier </h4>
                    </div>
                    <div class="modal-body">

                        <div>
                            <div class="row">
                                <div class="text-center col-12" id="image_article">
                                    <h6 class="col-sm-12 col-xs-12">Ajouter une image 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="row">
                                        <div class="col-lg-3 col-xs-12"></div>
                                        <div class="col-lg-6 col-xs-12">
                                            <input type="file" accept="image/*" name="image" 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>
                                    </div>
                                </div>

                                <div class="form-group col-md-12 col-xs-12">
                                    <label>Nom du panier </label><span style="color: red"> (requis)</span><br>
                                    <input type="text" id="name"
                                           name="name" class="form-control"
                                           placeholder="Nom" style="width: 100%;" value="">
                                </div>
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Resumé</label>
                                    <input type="text" id="resume"
                                    name="resume" class="form-control"
                                    placeholder="resume" style="width: 100%;" value="">
                                </div>
                                
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label for="">Pris total des produits associés en CFA</label>
                                    <input type="text" id="price"
                                    name="price" class="form-control" readonly
                                    placeholder="prix produit" style="width: 100%;" value="0">
                                </div>
                                <input type="hidden" id="productLists" data-product="{{ json_encode($produitLists) }}">
                                <div class="form-group col-md-12 col-sm-12 col-xs-12" id="firstInputData">
                                    <div class="row">
                                    <div class="form-group col-md-10 col-sm-12 col-xs-12">
                                        <label class="text-uppercase">Liste des produits utilisés</label>
                                        <select class="produits" id="produits" name="produits[]" class="form-control" placeholder="Choisir un ou plusieur produit" style="width: 100%;" value="">
                                            @foreach($produitLists as $produit)
                                                <option value="{{ $produit->slug }}" data-price="{{ $produit->price }}">{{ $produit->name }} ({{ $produit->price }} CFA)</option> 
                                            @endforeach
                                            
                                        </select>
                                    </div>
                                    <div class="form-group col-md-2 col-sm-12 col-xs-12">
                                        <label for="">Quantité</label>
                                        <input type="number" id="qte"
                                        name="qte[]" class="form-control qte" placeholder="quantité du produit" style="width: 100%;" value="0">
                                    </div>
                                  </div>
                                </div>
                                <div class="form-group col-md-12 col-sm-12 col-xs-12" id="produitDatas"></div>
                                  <div class="form-group col-md-12 mt-5 col-sm-12 col-xs-12">
                                    <button id="duplicateBtn" type="button" class="btn btn-primary">+ Ajouter</button>
                                </div>
                            </div>
                            <input type="hidden" name="slug" id="slug">
                        </div>
                        <div class="row">
                            <div class="modal-footer">
                                <input type="submit" name="action" id="action_add_article"
                                       class="btn btn-sm btn-primary"
                                       value="Enregistrer"/>

                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="articleDetail" class="modal fade">
        <div class="modal-dialog modal-md">

            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fa fa-plus"></i>
                        <span>Détails</span></h4>

                </div>
                <div class="modal-body pt-4">
                    <div class="col-12">
                        <div class="row">
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <h2>Nom: <strong><span id="detail_name"></span> (<span id="detail_type"></span>)</strong></h2>
                            </div>
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <h4>Prix Total de vente  : <strong id="detail_price"></strong> CFA</h4>
                            </div>
                            
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <div><img id="detail_image" src="" width="100%" alt=""></div>
                            </div>
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <label class="text-uppercase">Résumé: </label>
                                <div id="detail_resume"></div>
                            </div>
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <label for="">Produits associés</label>
                                <div id="detail_produits">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.proto.js" integrity="sha512-XEKnwpoekmNfXV4yq6lC/BUEtLYMsWmlndUSfnPIKOzZuOGCSlNIpfpiQdxlArqW5lDBbs9HwZWDRAjK2dxiNw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
   
        function reset() {
            $('#firstInputData').fadeIn();
            $("#textTitleModel").html("Ajouter");
        }

        function visibility(text, url) {
            $.Zebra_Dialog('Etes vous sur de vouloir ' + text + ' ce panier ?', {
                'type': 'question',
                'title': 'Mise à jour ',
                'buttons': [
                    {
                        caption: 'Oui', callback: function () {

                            window.location.href = url;

                        }
                    }, {
                        caption: 'Non', callback: function () {
                            $.notify('Mise à jour annuler', 'error')
                        }
                    }
                ]
            });
        }

        $(document).ready(function () {
            
            $(document).on('click', '.removeDom', function () {
                $(this).closest('.pdr').remove(); 
            });
            $(document).on('click', '#duplicateBtn', function () {
                let productLists= $('#productLists').data("product");
                let options="";
                productLists.forEach(produit => {
                    options+=`<option value="${ produit.slug }">${ produit.name } (${ produit.price } CFA)</option>`;
                });
                let datas=`<div style="background: #dedede; margin-bottom:5px;padding: 10px" class="pdr">
                                <div class="row">
                                    <div class="form-group col-md-9 col-sm-12 col-xs-12" >
                                            <label class="text-uppercase">Liste des produits utilisés</label>
                                            <select class="produits" id="produits" name="produits[]" class="form-control" placeholder="Choisir un ou plusieur produit" style="width: 100%;" value="">
                                                ${options}
                                            </select>
                                    </div>
                                    <div class="form-group col-md-2 col-sm-12 col-xs-12">
                                            <label for="">Quantité</label>
                                            <input type="number" id="qte"
                                            name="qte[]" class="qte form-control" placeholder="quantité du produit" style="width: 100%;" value="0">
                                    </div>
                                    <div class="form-group col-md-1 col-sm-12 col-xs-12" style="padding:25px 0px 0px 0px;border-radius:6px">
                                            <button  type="button" class="btn btn-danger removeDom"> <i class="fa fa-minus"></i></button>
                                    </div>
                                </div>    
                            </div>`;
                                  $('#produitDatas').append(datas);
                                  $('.produits').chosen({width: "100%",height:"48px"});
            });

            $('.produits').chosen({width: "100%",height:"48px"});

            $("form[name='panier_form']").validate({
                rules: {
                    title: "required",
                },
                messages: {
                    title: "Champ requis",
                },
                submitHandler: function (form) {
                    $('#action_add_article').attr('disabled', true);
                    $('#action_add_article').val('Patientez ...');
                    $('form#panier_form').submit();
                }
            });
            $(document).on('change', '.qte', function () {
                    //let btn = $(this);
                    var products = [];
                    $('.produits').each(function() {
                        var value = $(this).val();
                        products.push(value);
                    });
                    var qtes = [];
                    $('input[name="qte[]"]').each(function() {
                        var value = $(this).val();
                        qtes.push(value);
                    });
                    $.ajax({
                        url: "{{route('panier.get_product_sum')}}",
                        method: 'post',
                        data: {products: products,qtes:qtes},
                        success: function (result) {
                           $("#price").val(result.data);
                        },
                            error: function (result) {
                                console.log(result,'***')
                        },
                    });
            })
             $(document).on('change', '.produits', function () {
                    //let btn = $(this);
                    var products = [];
                    $('.produits').each(function() {
                        var value = $(this).val();
                        products.push(value);
                    });
                    var qtes = [];
                    $('input[name="qte[]"]').each(function() {
                        var value = $(this).val();
                        qtes.push(value);
                    });
                    $.ajax({
                        url: "{{route('panier.get_product_sum')}}",
                        method: 'post',
                        data: {products: products,qtes:qtes},
                        success: function (result) {
                           $("#price").val(result.data);
                        },
                            error: function (result) {
                                console.log(result,'***')
                        },
                    });
            })
            $(document).on('click', '.modifier_panier', function () {
                let slug = $(this).attr("data-slug");
                $.ajax({
                    url: "{{route('panier.get_panier')}}",
                    method: 'post',
                    data: {slug: slug},
                    success: function (result) {
                        $("#textTitleModel").html("Modifier");
                        $("#name").val(result.data.name);
                        $("#resume").val(result.data.resume);
                        $("#price").val(result.data.price);
                        let productLists= $('#productLists').data("product"),
                        productSlecteds= result.data.produits,  
                        datas="";  
                        productSlecteds.forEach(res=>{
                            options="";
                            productLists.forEach(produit => {
                                if(res.product_slug===produit.slug){
                                    options+=`<option selected value="${ produit.slug }">${ produit.name } (${ produit.price } CFA)</option>`;
                                }else{
                                    options+=`<option value="${ produit.slug }">${ produit.name } (${ produit.price } CFA)</option>`;
                                }
                            });
                            datas+=`<div style="background: #dedede; margin-bottom:5px;padding: 10px" class="pdr">
                                <div class="row">
                                    <div class="form-group col-md-9 col-sm-12 col-xs-12" >
                                            <label class="text-uppercase">Liste des produits utilisés</label>
                                            <select class="produits" id="produits" name="produits[]" class="form-control" placeholder="Choisir un ou plusieur produit" style="width: 100%;" value="">
                                                ${options}
                                            </select>
                                    </div>
                                    <div class="form-group col-md-2 col-sm-12 col-xs-12">
                                            <label for="">Quantité</label>
                                            <input type="number" id="qte"
                                            name="qte[]" class="qte form-control" placeholder="quantité du produit" style="width: 100%;" value="${res.number}">
                                    </div>
                                    <div class="form-group col-md-1 col-sm-12 col-xs-12" style="padding:25px 0px 0px 0px;border-radius:6px">
                                            <button  type="button" class="btn btn-danger removeDom"> <i class="fa fa-minus"></i></button>
                                    </div>
                                </div>    
                            </div>`;
                        })
                        $('#firstInputData').fadeOut();
                        $('#produitDatas').append(datas);
                        $('.produits').chosen({width: "100%",height:"48px"});
                        $("#slug").val(result.data.slug);
                        $('#articleModal').modal('show');
                    },
                    error: function (result) {

                    },

                });
            });
            $(document).on('click', '.detail_data', function () {
                let slug = $(this).attr("data-slug");
                console.log(slug);
                $.ajax({
                    url: "{{route('panier.get_panier')}}",
                    method: 'post',
                    data: {slug: slug},
                    success: function (result) {
                        $("#detail_image").attr('src',result.data.image);
                        $("#detail_name").html(result.data.name);
                        $("#detail_resume").html(result.data.resume);
                        $("#detail_price").html(result.data.price);
                        let productLists= $('#productLists').data("product"),
                        productSlecteds= result.data.produits,  
                        datas="";  
                        productSlecteds.forEach(res=>{
                            let product=productLists.filter(pdt=>res.product_slug===pdt.slug)[0],
                                image=product?.images[0];
                            datas+=`<tr>
                                        <td><strong>${res.number}</strong></td>
                                        <td><img src="${image?.filename}" width="30px"> &nbsp; ${product.name}</td>
                                        <td><strong>${res.price} CFA </strong></td>
                                    </tr>`;
                        })
                        let data=`<table class="table table-active table-bordered table-hover">
                                        <thead>
                                            <th>Quantité</th>
                                            <th>Nom</th>
                                            <th>Prix Unitaire</th>
                                        </thead>
                                        <tbody>
                                                ${datas}
                                        </tbody>
                                    </table>`;
                        $('#detail_produits').html(data);
                        $('#articleDetail').modal('show');
                    },
                    error: function (result) {

                    },

                });
            });
        })
    </script>

@endsection