@extends('layouts.app')
@section('title', 'Add Product');
@section('content')
<a href="{{ route('admin.products.index') }}">View All</a>
<div class="card" v-init:post="{{json_encode( @$product ? $product : ['variant' =>  [],'banner_image_' => []])}}">
    <!-- /.card-header -->
    <div class="card-body">
        <form action="" method="post" @@submit.prevent="
            validateProduct({{@$product}})" autofocus>
            <b-input :slugable="main_url+'product/'"
                validate="required" name="product_name" label="Product Name" v-model="post.product_name"></b-input>
                <b-select2 placeholder="Select Catgegory" :multiple="true" validate="required|max:10" name="category_id" ajax-url="admin/categories/json/search" :set-data="{value:'id',text:'name'}" label="Category" v-model="post.category_id"></b-select2>
            <div class="row">
                <div class="col">
                    <b-input validate="required|max:10" name="sku"
                        label="SKU" v-model="post.sku"></b-input>
                </div>
                <div class="col">
                    <b-input type="number" validate="required" name="stock"
                        label="In Stock" v-model="post.stock"></b-input>
                </div>

                <div class="col">
                    <b-input type="number" validate="required"
                        name="buy_price" label="Buy Price" v-model="post.buy_price"></b-input>
                </div>
                <div class="col">
                    <b-input type="number" validate="required"
                        name="sale_price" label="Sale Price" v-model="post.sale_price"></b-input>
                </div>
                <div class="col">
                    <b-input type="number" validate="required"
                        name="offer_price" label="Offer Price" v-model="post.offer_price"></b-input>
                </div>
            </div>
            <b-file default="{{ @$product ? $product->thumb_image : '' }}" :upload-to-server="true" validate="required"
                name="thumb_image" label="Thumb Image" v-model="post.thumb_image"></b-file>
            <div class="row">
                <div class="col">
                    <b-file validate="required" :multiple="true" :upload-to-server="true" name="banner_image"
                        label="Banner Image" v-model="post.banner_image">
                    </b-file>
                </div>
            </div>
            <b-editor validate="required" height="50"
                name="short_description" label="Short Description" v-model="post.short_description">
            </b-editor>
            <b-editor validate="required" name="description"
                label="Course Description" v-model="post.description">
            </b-editor>
            <b-checkbox name="status" label="Status" v-model="post.status"></b-checkbox>
            <b-select2 placeholder="Related Proaducts" :multiple="true" name="product_related" ajax-url="admin/products/json/search" :set-data="{value:'id',text:'product_name'}" label="Related Proaducts" v-model="post.product_related"></b-select2>
            <div v-if="post.variant && post.variant.length" class="row" v-for="(variants,i) in post.variant">
                <div class="col-3">
                    <b-input validate="alpha_spaces" :name="'thumb_image_'+i" label="Name"
                        v-model="post.variant[i].name" />
                </div>
                <div class="col-3">
                    <b-input :validate="{required:post.variant[i].name !== ''}"  :name="'value'+i" label="value" v-model="post.variant[i].value">
                        <small class="d-block" slot="remark">Please enter varient with <b>,</b> seperation.</small>
                    </b-input>
                </div>
                <div class="col-3">
                    <b-select :validate="{required:post.variant[i].name !== ''}" :options="[{text:'Input',value:'input'},{text:'Select',value:'select'},{text:'Radio',value:'radio'}]" :set-data="{text:'text',value:'value'}"  :name="'input_type'+i" label="Input Type" v-model="post.variant[i].input_type">
                        <small class="d-block" slot="remark">Please enter varient with <b>,</b> seperation.</small>
                    </b-select>
                </div>

                <div class="col-3">
                    <i @@click="removeVariants(i)" class="fa fa-trash text-danger mt-4"></i>
                </div>
            </div>
            <button type="button" @@click.prevent="post.variant.push({name:'',value:''})"
                class="d-block btn btn-info mb-2">Add Varient</button>

            <button type="submit" class="btn btn-primary"> Create Product</button>
        </form>
    </div>
</div>
@endsection