@extends('layouts.admin')
@section('otherStyles')
{{--    <link rel="stylesheet" href="{{ asset('assets/admin_styles/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}">--}}
{{--    <link rel="stylesheet" href="{{ asset('assets/admin_styles/css/color_skins.css') }}">--}}
{{--    <link rel="stylesheet" href="../assets/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.css" />--}}

@endsection
@section('content')

    <div id="main-content" class="file_manager">
        <div class="container-fluid">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-5 col-md-8 col-sm-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/admin"><i class="icon-home"></i></a></li>
                            <li class="breadcrumb-item active">Gérer les produits</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="accordion" id="accordion">
                                <div>
                                    <div class="card-header" id="headingOne" style="background: #fff;">
                                        <h5 class="mb-2">
                                            <div class="align-items-center">
                                                <ul class="list-unstyled text-center team-info margin-0" style="background: #fff;">
                                                    <li class="text-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                        Ajouter des produits
                                                        <img src="{{asset('plus.svg')}}"
                                                             data-original-title="Add Product">
                                                    </li>
                                                </ul>
                                            </div>
                                        </h5>
                                    </div>
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                                        <form novalidate enctype="multipart/form-data">
                                            @csrf
                                            <div class="row text-center">
                                                <div class="col-6">
                                                    <div class="">
                                                        <img src="" id="existingImg"  alt="" style=" height:200px;">
                                                    </div>
                                                    <div class="">
                                                        <div class="form-group">
                                                            <label>Nom du produit</label>
                                                            <input type="text" id="product_title" v-model="product.title" class="form-control"  value="">
                                                            <div v-if="titleIssue" style="height: 1px; width: 100%; border: 1px solid darkred"></div>
                                                        </div>
                                                    </div>
                                                    <div class="">
                                                        <div class="form-group">
                                                            <label>Code</label>
                                                            <input type="text" id="product_code" v-model="product.code" class="form-control" value="">
                                                            <div v-if="codeIssue === true" style="height: 1px; width: 100%; border: 1px solid darkred"></div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-6">
                                                            <div class="form-group">
                                                                <label>Prix</label>
                                                                <input type="number" id="product_price" v-model="product.price" class="form-control" value="">
                                                                <div v-if="priceIssue === true" style="height: 1px; width: 100%; border: 1px solid darkred"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="form-group">
                                                                <label>Poids du produit (gram 1000g = 1kg)</label>
                                                                <input type="number" id="product_weight" v-model="product.weight" class="form-control" value="">
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label>Prix d'expédition (se réfère au produit en lui-même)</label>
                                                                <input type="number" id="product_shipping" v-model="product.shipping_price" class="form-control" value="">
                                                            </div>
                                                        </div>


                                                    </div>
                                                    <div class="">
                                                        <div class="form-group">
                                                            <label>Description du produit</label>
                                                            <textarea type="text" id="product_desc" class="form-control editor" v-model="product.prod_desc" style="min-height:120px;min-width:100%;max-width:100%;">@{{ product.prod_desc }}</textarea>
                                                            <div v-if="descIssue === true" style="height: 1px; width: 100%; border: 1px solid darkred"></div>
                                                        </div>
                                                    </div>
                                                    <div class="">
                                                        <div class="form-group">
                                                            <label>Catégorie / Sous-catégorie</label>
                                                            <div class="row" v-if="categories.length > 0">
                                                                <div class="col-6">
                                                                    <select class="form-control show-tick ms select2" data-placeholder="Select" name="category" id="category" v-model="selectedCat" @change="selectCatChange()">
                                                                        <option></option>
                                                                        <option v-for="cat in categories" v-if="cat.sub_categories.length > 0" :value="cat.id"> @{{ cat.title }}</option>
                                                                    </select>
                                                                </div>

                                                                <div class="col-6">
                                                                    <select class="form-control show-tick ms select2" data-placeholder="Select" name="sCat" v-model="selectedSubCat" :disabled="subCategories.length <=0">
                                                                        <option></option>
                                                                        <option v-for="sCat in subCategories" :value="sCat.id"> @{{ sCat.title }}</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="">
                                                        <div class="body" >
                                                            <input type="file" id="image" name="image" class="dropify-product" v-on:change="onImageChange" data-allowed-file-extensions="png jpg jpeg">
                                                        </div>
                                                    </div>
                                                    <el-upload
                                                        action="#"
                                                        list-type="picture-card"
                                                        :file-list="fileList"
                                                        :on-change="handlePreview"
                                                        multiple
                                                        :auto-upload="false">
                                                        <i slot="default" class="el-icon-plus"></i>
                                                        <div slot="file" slot-scope="{file}">
                                                            <img
                                                                class="el-upload-list__item-thumbnail"
                                                                :src="file.url" alt=""
                                                            >
                                                            <span class="el-upload-list__item-actions">
                                                            {{--                                            <span--}}
                                                                {{--                                                class="el-upload-list__item-preview"--}}
                                                                {{--                                                @click="handlePictureCardPreview(file)"--}}
                                                                {{--                                            >--}}
                                                                {{--                                              <i class="el-icon-zoom-in"></i>--}}
                                                                {{--                                            </span>--}}
                                                                {{--                                            <span--}}
                                                                {{--                                                v-if="!disabled"--}}
                                                                {{--                                                class="el-upload-list__item-delete"--}}
                                                                {{--                                                @click="handleDownload(file)"--}}
                                                                {{--                                            >--}}
                                                                {{--                                              <i class="el-icon-download"></i>--}}
                                                                {{--                                            </span>--}}
                                                        <span
                                                            v-if="!disabled"
                                                            class="el-upload-list__item-delete"
                                                            @click="handleRemove(file)"
                                                        >
                                                          <i class="el-icon-delete"></i>
                                                        </span>
                                                      </span>
                                                        </div>
                                                    </el-upload>
                                                    <el-dialog :visible.sync="dialogVisible">
                                                        <img width="100%" :src="dialogImageUrl" alt="">
                                                    </el-dialog>
                                                    <div class="text-center mt-4">
                                                        <button type="button" class="btn btn-dark" :disabled="noSize" @click="anotherSize()" style="width: 45%">
                                                            Ajouter une taille
                                                        </button>
{{--                                                        <a class="btn btn-dark" style="color: #fff0ff; width: 45%"  ></a>--}}
                                                        <div class="form-group" style="margin-bottom: 0!important; margin-top: 0.8rem;">
                                                            <br/>
                                                            <label class="fancy-checkbox">
                                                                <input type="checkbox" name="no_size" data-parsley-errors-container="#error-checkbox" v-model="noSize" @change="changeOneSize()">
                                                                <span>Pas de taille</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <hr>
                                            <div class="row" v-if="noSize">
                                                <div class="col-12 text-center">
                                                    <a class="btn btn-dark mt-10 mb-10" style="color: #fff0ff; margin-top: 1.6rem !important; width: 45%;" @click="addColorToSize(0)">Ajouter de la couleur</a>
                                                </div>
                                            </div>
                                            <div v-for="(item, sizeIndex) in sizes" class="ml-4">
                                                <div class="row" v-if="!noSize">
                                                    <div class="col-lg-4 col-md-6 col-sm-11">
                                                        <div class="form-group">
                                                            <label>Taille</label>
                                                            <input type="text" class="form-control" :id="sizeIndex+'sizeSz'" v-model="item.size">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4 col-md-6 col-sm-12">
                                                        <div class="form-group">
                                                            <label>Stock total de taille</label>
                                                            <input type="number" class="form-control" :id="sizeIndex+'sizeStck'" v-model="item.stock" disabled>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-1 col-md-1 col-sm-11">
                                                        <a class="btn btn-danger mt-10" style="color: #fff0ff; margin-top: 1.6rem !important; width: 100%;" @click="removeSize(sizeIndex)">X</a>
                                                    </div>
                                                    <div class="col-lg-3 col-md-5 col-sm-12">
                                                        <a class="btn btn-dark mt-10" style="color: #fff0ff; margin-top: 1.6rem !important; width: 100%;" @click="addColorToSize(sizeIndex)">Ajouter de la couleur</a>
                                                    </div>

                                                </div>
                                                <div v-for="(color, colorIndex) in item.colors" class="ml-4">
                                                    <div class="row">
                                                        <div class="col-lg-3 col-md-3 col-sm-12">
                                                            <div class="form-group">
                                                                <label>Couleur</label>
                                                                <input type="text" class="form-control"  v-model="color.color">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-2 col-md-2 col-sm-12">
{{--                                                            <b>HEX CODE</b>--}}
                                                            <div class="input-group colorpicker">
                                                                <input type="color" id="primary_color" name="favcolor" v-model="color.color_code" class="mx-auto">
{{--                                                                <div class="input-group-append">--}}
{{--                                                                    <span class="input-group-text"><span class="input-group-addon"> <i></i> </span></span>--}}
{{--                                                                </div>--}}
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-5 col-md-5 col-sm-12">
                                                            <div class="form-group">
                                                                <label>Stock de couleur</label>
                                                                <input @change="colorStockChange(color.stock, sizeIndex, colorIndex)" @keyup="colorStockChange(color.stock, sizeIndex, colorIndex)"type="number" class="form-control" v-model="color.stock" >
                                                                <div v-if="color.danger === true" style="height: 1px; width: 100%; border: 1px solid darkred"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-1 col-md-1 col-sm-11">
                                                            <a class="btn btn-danger mt-10" style="color: #fff0ff; margin-top: 1.6rem !important; width: 100%;" @click="removeColor(sizeIndex, colorIndex)">X</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row text-center">
                                                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 ml-auto">
                                                    <a class="btn btn-primary mt-2" style=" color: #fff0ff; width: 100%"  v-if="isUploading">
                                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled></span>
                                                        Sauver...
                                                    </a>
                                                    <a class="btn btn-primary mt-2" v-else style="color: #fff0ff; width: 100%" @click="saveProduct()">Sauver le produit</a>
                                                </div>
                                                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mr-auto" v-if="added && product.status == 0">
                                                    <a class="btn btn-success mt-2" style=" color: #fff0ff; width: 100%"  v-if="isActivating">
                                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled></span>
                                                        Activation...
                                                    </a>
                                                    <a class="btn btn-success mt-2"  v-else style="color: #fff0ff; width: 100%" @click="deleteProd('activate')">Activer le produit</a>
                                                </div>
                                                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mr-auto" v-if="added && product.status == 0">
                                                    <a class="btn btn-danger mt-2" style=" color: #fff0ff; width: 100%"  v-if="isDeleting">
                                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled></span>
                                                        Suppression...
                                                    </a>
                                                    <a class="btn btn-danger mt-2"  v-else style="color: #fff0ff; width: 100%" @click="deleteProd('delete')">Supprimer le produit</a>
                                                </div>
                                                <div v-if="added && product.status == 1" class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mr-auto">
                                                    <a class="btn btn-warning mt-2" style=" color: #fff0ff; width: 100%"  v-if="isDeleting">
                                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled></span>
                                                        Désactiver...
                                                    </a>
                                                    <a class="btn btn-warning mt-2"  v-else style="color: #fff0ff; width: 100%" @click="deleteProd('deactivate')">Désactiver le produit</a>
                                                </div>
{{--                                                <div class="col-12">--}}
{{--                                                </div>--}}

                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="card" v-if="apiData">
                    <div class="header">
                        <h2>Gérer les produits</h2>

                        <div class="ml-auto" id="startList">
                            <div class="user-account">
                                <div class="dropdown" style="float: right">
                                    <a href="javascript:void(0);" class="dropdown-toggle user-name" data-toggle="dropdown">Produits par page: @{{ paginate }}</a>
                                    <ul class="dropdown-menu dropdown-menu-right account animated flipInY">
                                        <li><a href="javascript:void(0);" v-on:click="changePag(15)">15</a></li>
                                        <li class="divider"></li>
                                        <li><a href="javascript:void(0);" v-on:click="changePag(30)">30</a></li>
                                        <li class="divider"></li>
                                        <li><a href="javascript:void(0);" v-on:click="changePag(45)">45</a></li>
                                        <li class="divider"></li>
                                        <li><a href="javascript:void(0);" v-on:click="changePag(60)">60</a></li>
                                    </ul>
                                </div>
                            </div>
                            <button class="btn btn-dark" :disabled="apiData.prev_page_url === null" v-on:click="prevPage()">
                                Page précédente
                            </button>
                            <button class="btn btn-dark" :disabled="apiData.next_page_url === null" v-on:click="nextPage()">
                                Page suivante
                            </button>
                            <input type="text" placeholder="Search Products" class="form-control" v-model="search" v-on:keyUp="getProducts()" style="width: auto !important; display: initial !important;">
                            {{--                            <button class="btn btn-dark" :disabled="apiData.prev_page_url === null" v-on:click="prevPage()">--}}
                            {{--                                Previous Page--}}
                            {{--                            </button>--}}
                            {{--                            <button class="btn btn-dark" :disabled="apiData.next_page_url === null" v-on:click="nextPage()">--}}
                            {{--                                Next Page--}}
                            {{--                            </button>--}}

                        </div>
                    </div>
                    <div class="body">
                        <div class="table-responsive" v-if="products.length > 0">
                            <table class="table table-hover table-custom">
                                <thead class="thead-dark">
                                <tr>
                                    <th>Image</th>
                                    <th>ID</th>
                                    <th>Produit</th>
                                    <th>Description</th>
                                    <th>Créer</th>
                                    <th>Statut</th>
                                    <th>Prix</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(prod, i) in products" >
                                    <td><img :src="prod.image" alt="img" class="img-fluid" style="height: 100px"></td>
                                    <td><p><b>@{{ prod.id }}</b></p></td>
                                    <td>@{{ prod.title }}</td>
                                    <td>@{{ prod.description.length > 200 ? 'Oui' : 'Non' }}</td>
                                    <td>@{{ formatDate(prod.created_at) }}</td>
                                    <td><span class="badge badge-success" v-if="prod.status == 1">Actif</span><span class="badge badge-danger" v-else>Inactif</span></td>
                                    <td>@{{ prod.price }}{{$conf->currency}}</td>
                                    <td><a class="btn btn-outline-primary" v-on:click="editProd(prod.id)">Modifier le produit</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div v-else>
                            <h1 class="text-center" style="font-style: italic;">Aucun produit disponible.</h1>
                        </div>
                    </div>
                    <div class="footer">

                        <div class="body text-right">
                            <button class="btn btn-dark" :disabled="apiData.prev_page_url === null" v-on:click="prevPage(true)">
                                Page précédente
                            </button>
                            <button class="btn btn-dark" :disabled="apiData.next_page_url === null" v-on:click="nextPage(true)">
                                Page suivante
                            </button>
{{--                            <input type="text" placeholder="Search Products" class="form-control" v-model="search" v-on:keyUp="getProducts()" style="width: auto !important; display: initial !important;">--}}
                            {{--                            <button class="btn btn-dark" :disabled="apiData.prev_page_url === null" v-on:click="prevPage()">--}}
                            {{--                                Previous Page--}}
                            {{--                            </button>--}}
                            {{--                            <button class="btn btn-dark" :disabled="apiData.next_page_url === null" v-on:click="nextPage()">--}}
                            {{--                                Next Page--}}
                            {{--                            </button>--}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
{{--        <div class="row" v-if="products.length > 0">--}}
{{--            <div class="col-lg-3 col-md-4 col-sm-12" v-for="(prod, i) in products" >--}}
{{--                <div class="card" >--}}
{{--                    <div class="file">--}}
{{--                        <a v-bind:href="'{{url('/')}}/admin/addProd/'+ prod.id">--}}
{{--                            <div class="hover">--}}
{{--                                <button type="button" class="btn btn-icon btn-danger">--}}
{{--                                    <i class="fa fa-trash"></i>--}}
{{--                                </button>--}}
{{--                            </div>--}}
{{--                            <div class="image text-center">--}}
{{--                                <img :src="prod.image" alt="img" class="img-fluid">--}}
{{--                            </div>--}}
{{--                            <div class="file-name">--}}
{{--                                <h2 class="m-b-5 text-primary">@{{ prod.title }}</h2>--}}
{{--                                <small>@{{ prod.description }}</small>--}}
{{--                            </div>--}}
{{--                        </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>
    <style>
        #primary_color{
            border-radius: 100%;
            height: 60px;
            width: 60px;
            border: none;
            outline: none;
            -webkit-appearance: none;
        }

        #primary_color::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        #primary_color::-webkit-color-swatch {
            border: none;
            border-radius: 100%;
        }
    </style>

    <script>
        let myEditor;
        const Vue_comp = new Vue({
            el:"#main-content",
            data: {
                products: [],
                isLoading: true,
                apiData: null,
                paginate: 30,
                search: '',
                link: '/api/V1/getAllProducts',
                id:0,
                sizes: [],
                stockIssue: false,
                titleIssue: false,
                codeIssue: false,
                descIssue: false,
                priceIssue: false,
                imageIssue: false,
                added: false,
                isDeleting: false,
                isActivating: false,
                myImage: null,
                existingImg:null,
                isUploading: false,
                product: {
                    title: '',
                    prod_desc: '',
                    code: '',
                    price: 0,
                    shipping_price: 0,
                    weight: 0
                },
                categories: [], subCategories: [], selectedCat: null, selectedSubCat: null,
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: [],
                disabled: false,
                noSize: false, tmpSizes: []
            },
            methods: {
                formatDate(date) {
                    return moment(date).format('DD MMM, YYYY');
                },
                changeOneSize() {
                  if (this.noSize) {
                      if (this.tmpSizes[0] && this.tmpSizes[0].status === 3) {
                          let t = this.sizes;
                          this.sizes = this.tmpSizes;
                          this.tmpSizes = t;
                      } else {
                          this.tmpSizes = this.sizes;
                          this.sizes = [];
                          let s = {
                              id:0,
                              size: 'One Size',
                              stock: 0,
                              colors: [],
                              status: 3
                          }
                          this.sizes.push(s);
                      }
                  } else {
                      if (this.tmpSizes.length > 0 && this.tmpSizes[0].status && this.tmpSizes[0].status !== 3) {
                          let t = this.sizes;
                          this.sizes = this.tmpSizes;
                          this.tmpSizes = t;
                      } else {
                          this.tmpSizes = this.sizes;
                          this.sizes = [];
                      }
                  }
                },
                getProducts() {
                    const self = this;
                    axios.post( this.link, {number: this.paginate ,search: this.search}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        if (response.data.status) {
                            self.apiData = response.data.values;
                            self.products = self.apiData.data;
                        } else {
                            showToast('warning',response.message);
                        }
                        self.isLoading = false;
                        // console.log('all products', response);
                    }).catch(function(error){});
                },
                prevPage(scroll = false) {
                    if (this.apiData && this.apiData.prev_page_url) {
                        this.link = this.apiData.prev_page_url;
                        this.getProducts();
                        if (scroll) {
                            $('html, body').animate({
                                scrollTop: $("#startList").offset().top
                            }, 'slow');
                        }
                    }
                },
                nextPage(scroll = false) {
                    if (this.apiData && this.apiData.next_page_url) {
                        this.link = this.apiData.next_page_url;
                        this.getProducts();
                        if (scroll) {
                            $('html, body').animate({
                                scrollTop: $("#startList").offset().top
                            }, 'slow');
                        }
                    }
                },
                changePag(val) {
                    this.paginate = val;
                    this.getProducts();
                },
                anotherSize: function () {
                    let s = {
                        id:0,
                        size: '',
                        stock: 0,
                        colors: [],
                        status: 1
                    }
                    this.sizes.push(s);
                },
                onImageChange(e){
                    this.myImage = e.target.files[0];
                },
                addColorToSize: function (sizeIndex) {
                    let c = {
                        id:0,
                        color: '',
                        color_code: '#000000',
                        stock: 0,
                        danger: false
                    };
                    this.sizes[sizeIndex].colors.push(c);
                },
                handleRemove(file){
                    let ind = this.fileList.indexOf(file);
                    this.fileList.splice(ind, 1);
                },
                colorStockChange: function (val, sizeIndex, colorIndex) {
                    let sumC = 0;
                    for (let i=0; i< this.sizes[sizeIndex].colors.length; i++) {
                        sumC += parseInt(this.sizes[sizeIndex].colors[i].stock);
                    }
                    this.sizes[sizeIndex].stock = sumC;
                    if (!this.sizes[sizeIndex].stock) {
                        this.stockIssue = true;
                        this.sizes[sizeIndex].colors[colorIndex].danger = true;
                        if (!this.stockIssue) {
                            showToast('warning', 'Please make sure that the stocks you entered correspond with each other.');
                        }
                    }  else {
                        this.stockIssue = false;
                        this.sizes[sizeIndex].colors[colorIndex].danger = false;
                    }
                    // if (parseInt(val) > parseInt(this.sizes[sizeIndex].stock) || sumC > parseInt(this.sizes[sizeIndex].stock) || parseInt(val) < 0) {
                    //     if (!this.stockIssue) {
                    //         showToast('warning', 'Please make sure that the stocks you entered correspond with each other.');
                    //     }
                    //     this.stockIssue = true;
                    //     this.sizes[sizeIndex].colors[colorIndex].danger = true;
                    // }  else {
                    //     this.stockIssue = false;
                    //     this.sizes[sizeIndex].colors[colorIndex].danger = false;
                    // }
                },
                removeSize: function (sizeIndex) {
                    this.sizes.splice(sizeIndex, 1);
                },
                removeColor: function (sizeIndex, colorIndex) {
                    this.sizes[sizeIndex].colors.splice(colorIndex, 1);
                    let sumC = 0;
                    for (let i=0; i< this.sizes[sizeIndex].colors.length; i++) {
                        sumC += parseInt(this.sizes[sizeIndex].colors[i].stock);
                    }
                    this.sizes[sizeIndex].stock = sumC;
                },
                see(val) {
                  console.log('variable', val);
                },
                saveProduct: function() {
                    const self = this;
                    if (this.product.title === '') {
                        this.prodIssue = true;
                        showToast('warning', 'Please enter the name of the product.');
                    }
                    else if (this.product.code === '') {
                        this.codeIssue = true;
                        showToast('warning', 'Please enter a code that will be a unique referer for the product.');
                    }
                    else if (this.product.price <= 0) {
                        this.priceIssue = true;
                        showToast('warning', 'Please enter a valid price for your product.');
                    }
                    else {
                        this.prodIssue = false;
                        this.descIssue = false;
                        this.product.prod_desc = myEditor.getData();
                        this.codeIssue = false;
                        this.priceIssue = false;
                        this.imageIssue = false;
                        if (!this.stockIssue && this.sizes.length > 0) {
                            let colIssue = false;
                            for (let i = 0; i<this.sizes.length; i++) {
                                if(this.sizes[i].colors.length === 0) {
                                    colIssue = true;
                                    break;
                                }
                            }
                            if (colIssue) {
                                showToast('warning', 'Please provide your sizes with available attributes.');
                                return ;
                            }
                            if (!this.selectedCat || !this.selectedSubCat) {
                                showToast('warning', 'Make sure to place the product in its category.');
                                return;
                            }
                            let formData = new FormData();
                            if (this.fileList.length > 0) {
                                $.each(this.fileList, function (index,value){
                                    if(value.raw === undefined)
                                        formData.append('files['+index+']',value.url);
                                    else
                                        formData.append('files['+index+']',value.raw);
                                });
                            }
                            if (this.noSize && this.sizes.length ===1) {
                                this.sizes[0].status = 3;
                            }
                            formData.append('image', this.myImage);
                            formData.append('product', JSON.stringify(this.product));
                            formData.append('sizes', JSON.stringify(this.sizes));
                            formData.append('category', JSON.stringify({cat: this.selectedCat, sub_cat: this.selectedSubCat}));
                            self.isUploading = true;
                            axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
                            axios.defaults.headers.post['X-CSRF-TOKEN'] = '{{csrf_token()}}';
                            axios.post('/admin/product' + '/'+self.id, formData).then(response => {
                                if (response.status) {
                                    // self.product = response.data.values.product;
                                    // self.id = response.data.values.product.id
                                    // self.product.prod_desc = response.data.values.product.description;
                                    // self.sizes = response.data.values.sizes;
                                    // self.existingImg = self.product.image;
                                    // self.added = true;
                                    // $('#existingImg').attr("src",self.existingImg);
                                    self.getProducts();
                                    self.clearProd();
                                    // self.product =  {
                                    //     title: '',
                                    //     prod_desc: '',
                                    //     code: '',
                                    //     price: 0
                                    // };
                                    // self.product.prod_desc = '';
                                    // self.sizes = [];
                                    // $('#existingImg').attr("src",'');
                                    // this.selectedCat =  null; this.selectedSubCat = null;
                                    // self.added = false;
                                    // self.id = 0;
                                    showToast('success', 'You have successfully saved your product.');
                                } else {
                                    showToast('warning', response.message);
                                }
                                self.isUploading = false;
                            })
                        } else {
                            showToast('warning', 'Please first make regulations with the sizes and stocks of your product.');
                        }
                    }
                },
                deleteProd(type) {
                    const self = this;
                    if (type !== 'activate') {
                        self.isDeleting = true;
                    } else {
                        self.isActivating = true;
                    }
                    axios.post( 'admin/deleteProduct/'+self.id, {type}).then(response=>{
                        console.log(response);
                        if (response.status) {
                            if (type == 'delete'){
                                self.product =  {
                                    title: '',
                                    prod_desc: '',
                                    code: '',
                                    price: 0
                                };

                                self.product.prod_desc = '';
                                self.sizes = [];
                                $('#existingImg').attr("src",'');
                                self.added = false;
                                self.id = 0;
                            } else {
                                self.product = response.data.values;
                                self.product.prod_desc = response.data.values.description;
                                self.sizes = response.data.values.sizes;
                                self.existingImg = self.product.image;
                                $('#existingImg').attr("src",self.existingImg);
                            }
                            self.getProducts();
                        }
                        showToast('success', response.data.message);
                        self.isDeleting = false;
                        self.isActivating = false;
                    });
                },
                selectCatChange() {
                    if (this.selectedCat) {
                        this.categories.find(cat => {
                            if (cat.id === this.selectedCat){
                                this.subCategories = cat.sub_categories;
                            }
                        });
                    } else {
                        this.subCategories = [];
                    }
                },
                disableSelect(){
                    return this.subCategories <=0;
                },
                getSingleProd(id) {
                    let self = this;
                    self.id = id;
                    axios.post( 'api/V1/getSingleProductAdmin',{'id':self.id}, {
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{csrf_token()}}'
                            },
                        }
                    ).then(function(response){
                        self.product = response.data.values;
                        self.product.prod_desc = response.data.values.description;
                        self.sizes = response.data.values.sizes;
                        if (self.sizes[0].status === 3) {
                            self.noSize = true;
                        }
                        self.existingImg = self.product.image;
                        self.added = true;
                        self.fileList = [];
                        if (response.data.values.images.length > 0) {
                            $.each(response.data.values.images, function (index,value){
                                if (index !== 0) {
                                    self.fileList.push({url: value.image, id: value.id})
                                }
                            });
                        }
                        // for (let i = 0; i<response.data.values.images.length; i++) {
                        //     this.fileList.push({url: response.data.values.images[i].image, id: response.data.values.images[i].image.id, prod_id: response.data.values.images[i].image.prod_id});
                        // }
                        // response.data.values.images.foreach(el => {
                        //     self.fileList.push({url: el.image, id: el.id, prod_id: el.prod_id});
                        // })
                        // self.fileList = response.data.values.images;
                        self.selectedCat = response.data.values.sub_cat.cat_id;
                        self.selectedSubCat = response.data.values.sub_cat.id;
                        self.selectCatChange();
                        $('#existingImg').attr("src",self.existingImg);
                        myEditor.setData(self.product.prod_desc);
                    }).catch(function(error){});
                },
                clearProd() {
                    self = this;
                    self.id = 0;
                    self.product.prod_desc = '';
                    self.product.title = '';
                    self.product.code = '';
                    self.product.price = 0;
                    self.product.weight = 0;

                    self.sizes = [];
                    self.tmpSizes = [];
                    self.existingImg = '';
                    self.added = false;
                    self.selectedCat = null;
                    self.selectedSubCat = null;
                    self.fileList = [];
                    self.selectCatChange();
                    // console.log(self.product);
                    $('#existingImg').attr("src",'');
                },
                editProd(id) {
                    this.getSingleProd(id);
                    let acc = $('#collapseOne');
                    acc.collapse('show');
                    window.scrollTo(0,0);
                },
                handlePreview(file) {
                    console.log('file', file, this.fileList);
                    // this.bnrDesc.push('');
                    this.fileList.push(file);
                },
            },
            created(){
                let self = this;
                this.getProducts();
                axios.post( 'api/V1/getCategories', {}, {
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                    }
                ).then(function(res){
                    console.log('categories', res);
                    self.categories = res.data.values;
                }).catch(function(error){});
            }


        });
    </script>
@endsection
@section('footer')
    <script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>

    <script src=" {{asset('assets/admin_styles/js/pages/tables/jquery-datatable.js') }}"></script>
    <script src=" {{asset('assets/admin_styles/bundles/datatablescripts.bundle.js') }}"></script>
    <script src=" {{asset('assets/admin_styles/js/pages/forms/advanced-form-elements.js') }}"></script>
    <script src=" {{asset('assets/admin_styles/vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script>
    <script>
        $(document).ready(function(){
            ClassicEditor.create(document.querySelector('#product_desc'))
                .then(editor => {
                    myEditor = editor;
                }).catch(error=>{console.error( error );});
        });
    </script>
@endsection