@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{__('general.store_name')}}</a></li>
                        <li class="breadcrumb-item"><a href="{{route('admin.products')}}">Produits</a></li>
                        <li class="breadcrumb-item active">Création</li>
                    </ol>
                </div>
                <h4 class="page-title">Créer un produit</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->


    <form action="{{route('admin.products.update',$product->id)}}" method="POST" id="product_store" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-lg-6">

                <div class="card-box">
                    <h5 class="text-uppercase bg-light p-2 mt-0 mb-3">Général</h5>

                    <div class="form-group mb-3">
                        <label for="name">Nom <span class="text-danger">*</span></label>
                        <input type="text" id="name" class="form-control" placeholder="e.g : Apple iMac" name="name" value="{{$product->name}}">
                        <ul class="parsley-errors-list filled" id="name_errors">

                        </ul>
                    </div>


                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="category_id">Catégorie <span class="text-danger">*</span></label>
                                <select class="form-control select2" id="category_id" name="category_id">
                                    <option value=""></option>
                                    @foreach($categories as $categorie)
                                        <option value="{{$categorie->id}}" @if( $product->category_id == $categorie->id) selected @endif>{{$categorie->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="brand_id">Marque <span class="text-danger">*</span></label>
                                <select class="form-control select2" id="brand_id" name="brand_id">
                                    <option value=""></option>
                                    @foreach($brands as $brand)
                                        <option value="{{$brand->id}}" @if( $product->brand_id == $brand->id) selected @endif>{{$brand->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="taste_id">Goûts <span class="text-danger">*</span></label>
                                <select class="form-control select2" id="taste_id" name="taste_id">
                                    <option value=""></option>
                                    @foreach($tastes as $taste)
                                        <option value="{{$taste->id}}" @if( $product->taste_id == $taste->id) selected @endif>{{$taste->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="form-group mb-3">
                        <label class="mb-2">Statut <span class="text-danger">*</span></label>
                        <br/>
                        <div class="radio form-check-inline radio-success">
                            <input type="radio" id="inlineRadio1" value="1" name="status"  @if( $product->status == 1) checked @endif>
                            <label for="inlineRadio1"> Online </label>
                        </div>
                        <div class="radio form-check-inline radio-danger">
                            <input type="radio" id="inlineRadio2" value="0" name="status"  @if( $product->status == 0) checked @endif>
                            <label for="inlineRadio2"> Offline </label>
                        </div>

                    </div>


                </div> <!-- end card-box -->
                <div class="card-box">
                    <h5 class="text-uppercase mt-0 mb-3 bg-light p-2">Product Details</h5>
                    <div class="form-group mb-3">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="barcode">Barcode </label>
                                <input type="text" id="barcode" class="form-control" placeholder="Barcode"
                                       name="barcode" value="{{$product->barcode}}">
                                <ul class="parsley-errors-list filled" id="barcode_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="ref">ref </label>
                                <input type="text" id="ref" class="form-control" placeholder="REF" name="ref"  value="{{$product->ref}}">
                                <ul class="parsley-errors-list filled" id="ref_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="tva">TVA <span class="text-danger">*</span></label>
                                <input type="number" id="tva" class="form-control" placeholder="tva" name="tva"
                                       step=".001"  value="{{$product->tva}}">
                                <ul class="parsley-errors-list filled" id="tva_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="remise">Remise Maximal<span class="text-danger">*</span></label>
                                <input type="number" id="remise" class="form-control" placeholder="remise"
                                       name="remise" value="{{$product->remise}}">
                                <ul class="parsley-errors-list filled" id="remise_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="min_quantity">Quantité Minimale <span class="text-danger">*</span></label>
                                <input type="number" id="min_quantity" class="form-control" placeholder="MinQuantity"
                                       name="min_quantity"  value="{{$product->min_quantity}}">
                                <ul class="parsley-errors-list filled" id="MinQuantity_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="res_quantity">Quantité Réserve <span class="text-danger">*</span></label>
                                <input type="number" id="res_quantity" class="form-control" placeholder="ResQuantity"
                                       name="res_quantity"  value="{{$product->res_quantity}}">
                                <ul class="parsley-errors-list filled" id="res_quantity_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="unity">Unité </label>
                                <select name="unity" id="unity" class="form-control">
                                    <option value="p">Pièce</option>
                                    <option value="kg">Kilogramme</option>
                                    <option value="g">Gramme</option>
                                    <option value="l">Litre</option>
                                    <option value="gellule">Gellule</option>
                                    <option value="capsule">Capsule</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="value">Valeur </label>
                                <input type="number" id="value" class="form-control" placeholder="Value" name="value"  value="{{$product->value}}">
                            </div>
                            @if(auth()->user()->phone=='98611913' || auth()->user()->phone=='58189555')
                            <div class="col-md-4">
                                <label for="buying">Prix D'Achat <span class="text-danger">*</span></label>
                                <input type="number" id="buying" class="form-control" placeholder="buying"
                                       name="buying"  step="0.001" value="{{$product->buying}}">
                                <ul class="parsley-errors-list filled" id="buying_errors">

                                </ul>
                            </div>
                            @endif
                            <div class="col-md-4">
                                <label for="detail">Prix Détail <span class="text-danger">*</span></label>
                                <input type="number" id="detail" class="form-control" placeholder="Détail"
                                       name="detail"  step="0.001" value="{{$product->detail}}">
                                <ul class="parsley-errors-list filled" id="buying_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="sgros">Prix Semi-Gros <span class="text-danger">*</span></label>
                                <input type="number" id="sgros" class="form-control" placeholder="SGros" name="sgros"  step="0.001" value="{{$product->sgros}}">
                                <ul class="parsley-errors-list filled" id="buying_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="gros">Prix Gros <span class="text-danger">*</span></label>
                                <input type="number" id="gros" class="form-control" placeholder="Gros" name="gros"  step="0.001" value="{{$product->gros}}">
                                <ul class="parsley-errors-list filled" id="buying_errors">

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <label for="bonus">Bonus <span class="text-danger">*</span></label>
                                <input type="number" id="bonus" class="form-control" placeholder="bonus" name="bonus" step="0.001" value="{{$product->bonus}}">
                                <ul class="parsley-errors-list filled" id="buying_errors">

                                </ul>
                            </div>
                            <div class="col-md-12">
                                <label for="bonus_for">Commission Pour</label>
                                <select class="select2 form-control" multiple id="bonus_for"
                                        name="bonus_for[]">
                                    @foreach($admins as $admin)
                                        <option value="{{$admin->phone}}" @if(in_array($admin->phone,explode(',',$product->bonus_for))) selected @endif>{{$admin->name}}</option>
                                    @endforeach
                                </select>
                                <div class="table-responsive">


                                    <table id="bonuses" class="table table-striped mt-3">
                                    @foreach($product->boosters as $booster)
                                        <tr class="items" id="row{{$loop->index}}">

                                            <td>
                                                <div class="form-group mb-3">
                                                    <select class="select2 form-control" name="booster[{{$loop->index}}][admin_id]">
                                                        @foreach($admins as $admin)

                                                            <option value="{{$admin->id}}" @if($booster->admin_id==$admin->id) selected @endif>{{$admin->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-group mb-3">
                                                    <input type="number" class="form-control" name="booster[{{$loop->index}}][bonus]" value="{{$booster->bonus}}">
                                                </div>
                                            </td>

                                            <td >
                                                <a data-tr="row{{$loop->index}}" class="text-danger removeRow "><i class="fa fa-minus-circle"></i> </a>
                                            </td>

                                        </tr>
                                        @endforeach
                                    </table>
                                </div>
                                <button type="button" class="btn btn-rounded btn-info" onclick="addItem();">Add Booster</button>
                            </div>
                        </div>


                    </div>

                </div> <!-- end col-->
            </div> <!-- end col -->

            <div class="col-lg-6">


                <div class="card-box">
                    <h5 class="text-uppercase mt-0 mb-3 bg-light p-2">Website</h5>
                    <div class="form-group mb-3">
                        <label for="description">Description </label>
                        <textarea class="form-control" id="description" rows="5" placeholder="Please enter description"
                                  name="description"> {{$product->description}}</textarea>
                    </div>
                    <div class="form-group mb-3">
                        <label for="product-image">Image</label>
                        <input type="file" class="form-control" id="product-image" name="images[]" multiple>
                    </div>
                    <div class="form-group mb-3">
                        <label for="product-meta-title">Meta title</label>
                        <input type="text" class="form-control" id="product-meta-title" placeholder="Enter title"
                               name="metatitle" value="{{$product->metatitle}}">
                    </div>

                    <div class="form-group mb-3">
                        <label for="product-meta-keywords">Meta Keywords</label>
                        <input type="text" class="form-control" id="product-meta-keywords" placeholder="Enter keywords"
                               name="metakeys" value="{{$product->metakeys}}">
                    </div>

                    <div class="form-group mb-0">
                        <label for="product-meta-description">Meta Description </label>
                        <textarea class="form-control" rows="5" id="product-meta-description"
                                  placeholder="Please enter description" name="metadescription">{{$product->metadescription}}</textarea>
                    </div>
                </div> <!-- end card-box -->

            </div> <!-- end col-->
        </div>
        <!-- end row -->
        <div class="row">
            {{\App\Helpers\ImageHelper::showFiles($product->images)}}
        </div>
        <div class="row">
            <div class="col-12">
                <div class="text-center mb-3">


                    <button type="submit" class="btn w-sm btn-success waves-effect waves-light"
                            id="sa-success">{{__('Enregistrer')}}</button>
                </div>
            </div> <!-- end col -->
        </div>
        <!-- end row -->
    </form>





@stop
@include('admin.header')
@include('admin.topbar')
@include('admin.sidebar')
@include('admin.footer')

@yield('header')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<link href="{{asset('assets/libs/select2/select2.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/libs/ladda/ladda-themeless.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/css/general.css')}}" rel="stylesheet" type="text/css"/>
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
@yield('topbar')
@yield('sidebar')
@yield('content')
@yield('footer')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

<!-- Loading buttons js -->
<script src="{{asset('assets/libs/ladda/spin.js')}}"></script>
<script src="{{asset('assets/libs/ladda/ladda.js')}}"></script>
<!-- Buttons init js-->
<script src="{{asset('assets/js/pages/loading-btn.init.js')}}"></script>
<!-- Init js -->
<script src="{{asset('assets/js/pages/add-product.init.js')}}"></script>
{{--<script src="{{asset('assets/js/validation.js')}}"></script>--}}

<script>

    $("#product_store").submit(function (e) {
        e.preventDefault();
        var Form = $("#product_store")[0];
        var formData = new FormData(Form);
        $.ajax({
            type: 'POST',
            url: "{{route('admin.products.update',$product->id)}}",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function (data) {
                $('.is-invalid').removeClass('is-invalid');
                $('#preloader').show();
                $.toast({
                    heading: 'Succès',
                    text: 'Produits créé avec succés',
                    icon: 'success',
                    loader: true,
                    position: 'top-right',// Change it to false to disable loader
                    loaderBg: '#5ba035',  // To change the background
                    bgColor: '#1abc9c',  // To change the background
                });

            }, error: function (reject) {
                $('.is-invalid').removeClass('is-invalid');
                swal({
                    title: "Erreur!",
                    text: "Merci de suivre les indications",
                    type: "error",
                    confirmButtonClass: "btn btn-confirm mt-2"
                });
                var response = $.parseJSON(reject.responseText);
                $.each(response.errors, function (key, val) {
                    $("#" + key).addClass('is-invalid');
                    $("#" + key + "_errors").html('<li class="parsley-required">' + val + '</li>');

                });
            }
        });

    });
    function addItem(){
        let count=$('.items').length;
        let admins = '';
        @foreach($admins as $admin)
            admins+=' <option value="{{$admin->id}}">{{$admin->name}}</option>';
                @endforeach
        let item = `<tr class="col-lg-12 items" id="row${count}">

                                <td>
                                    <div class="form-group mb-3">
                                        <select class="select2 form-control" name="booster[${count}][admin_id]">
                                            ${admins}
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group mb-3">
                                        <input type="number" class="form-control" name="booster[${count}][bonus]">
                                    </div>
                                </td>

                                 <td >
                                    <a data-tr="row${count}" class="text-danger removeRow "><i class="fa fa-minus-circle"></i> </a>
                                </td>

                        </tr> `;
        $('#bonuses').append(item);



    }
    $(document).on('click', '.removeRow', function () {
        let tr = $(this).attr("data-tr");
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonClass: 'btn btn-confirm mt-2',
            cancelButtonClass: 'btn btn-cancel ml-2 mt-2',
            confirmButtonText: 'Yes, delete it!'
        }).then(function (result) {
            if (result.value==true) {
                $('#'+tr).remove();

            }
        });

    });
</script>
<style>
    input.chk-btn {
        display: none;
    }

    .label-chk-btn {
        width: 60px;
    }

    .label-chk-btn img {
        filter: grayscale(100%);
        height: 60px;
        transition: ease .3s;
        width: 45px;
        margin: auto;
        display: block;
    }

    input.chk-btn:checked + label img {
        transform: scale(1.1);
        filter: grayscale(0);
    }

    .is-invalid {
        border-color: #dc3545;
        padding-right: calc(1.5em + .75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
</style>
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

@include('admin.end')