@extends('admin.layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a class="breadcrumb_link" href="{{route('admin.dashboard')}}">Home</a></li>
                <li><a class="breadcrumb_link" href="">Add Product</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            <div class="portlet-title page_heading">
                <div class="row">
                    <div class="col-md-9">
                        <div class="caption">
                            <h2 style="font-weight: 600; margin-top: 0;">New Product</h2>
                            <span class="subtitle"> Add a new product selling across all your linked business in Salesoft solution.</span>
                        </div>
                    </div>
                    <div class="col-md-3 text-right">
                        <a href="" class="btn theme_btn_round ">
                            Back
                        </a>
                    </div>
                </div>
            </div>

            <!-- BEGIN PAGE BAR -->
            <div class="row">
                <div class="col-md-12">
                    <!--THIS IS CONTENT DIV START-->
                    <div class="portlet-body flip-scroll">
                        <form class="product_form" id="newproduct_form" method="post" enctype="multipart/form-data">
                            <!-- Product Information -->
                            <div class="row">
                                <div class="col-sm-4 trash">
                                    <div class="new_product_left">
                                        <h4>General Details</h4>
                                        <p>What all are the general information about your new product?</p>
                                        <p>Add product name, supplier info, tags, product description and images for
                                            your <br> new product in this section.</p>
                                    </div>
                                    <div style="height: 845px;"></div>
                                </div>
                                <div class="col-sm-8 new_product_form">
                                    <div class="row">

                                    <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_name">Product Code*</label>
                                            </div>
                                            <div class="col-md-8 no-padding-left">
                                                <div class="form-group">
                                                    <input type="text" class="form-control validate" id="product_code" name="product_code" placeholder="Enter product name here" autocomplete="off">
                                                    <p class="text-danger product_name validation_error hidden"></p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Product Name -->
                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_name">Product Name*</label>
                                            </div>
                                            <div class="col-md-8 no-padding-left">
                                                <div class="form-group">
                                                    <input type="text" class="form-control validate" id="product_name" name="product_name" placeholder="Enter product name here" autocomplete="off">
                                                    <p class="text-danger product_name validation_error hidden"></p>
                                                </div>
                                            </div>
                                        </div>
                                   
                                        <!-- Product Brand Name -->
                                   
                                        <!-- Product Description -->
                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_description">Product Description</label>
                                            </div>
                                            <div class="col-md-8 no-padding-left">
                                                <div class="form-group">
                                                    <textarea rows="2" class="form-control" id="product_description" placeholder="Enter product Description here" name="product_description"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Product Category -->
                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_category">Product Category*</label>
                                            </div>
                                            <div class="col-md-8 no-padding-left">
                                                <div class="form-group">
                                                    <select class="form-control select2 add_category validate"
                                                            id="product_category" name="product_category">
                                                            <option></option>
                                                            @foreach($data['category'] as $key => $value)
                                                        <option value='{{$value->product_category_uuid}}'>{{$value->title}}</option>
                                                        @endforeach
                                                        
                                                    </select>
                                                    <p class="text-danger product_category validation_error hidden"></p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Product Tags -->
                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_tags">Tags</label>
                                            </div>
                                            <div class="col-md-8 no-padding-left">
                                                <div class="form-group">
                                                    <select class="form-control select2 add_tags" id="find_category" name="tags">
                                                        <option></option>
                                                        @foreach($data['tags'] as $key => $value)
                                                        <option value='{{$value}}'>{{$value}}</option>
                                                        @endforeach
                                                       
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="col-md-2"></div>
                                            <div class="col-md-10 no-padding">
                                                <div class="product_selected_tags" id="product_tags"></div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_tags">Related Products</label>
                                            </div>
                                            <div class="col-md-8 no-padding-left">
                                                <div class="form-group">
                                                <select class="form-control select2" multiple id="products_related" name="related_products[]">
                                                        <option></option>
                                                        @foreach($data['products_related'] as $key => $value)
                                                        <option value='{{$value->product_uuid}}'>{{$value->name}}</option>
                                                        @endforeach
                                                        </select>
                                                </div>
                                            </div>
                                        </div>
                                        <!--- Product Selected Tags List -->
                                        
                                     
                                       
                                    
                                        <div class="clearfix"></div>
                                        <div class="col-sm-12 lg-margin-bottom"></div>

                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_description">Upload  Images</label>
                                            </div>
                                            <div class="col-md-10 no-padding">
                                                <div class="multi_image_upload_box" id="drop-area">
                                                    <div class="preview-images-zone"></div>
                                                    <div class="multi_image_upload_footer">
                                                        <p>Drag images here or
                                                            <span>browse<input type="file" id="browse_image"
                                                                               multiple/></span>text-danger
                                                            to upload</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_description">Attachments</label>
                                            </div>
                                            <div class="col-md-10 no-padding">
                                                <div class="multi_image_upload_box" id="drop-area">
                                                    <div class="preview-files-zone"></div>
                                                    <div class="multi_image_upload_footer">
                                                        <p>Drag images here or
                                                            <span>browse<input type="file" id="attachments_file"
                                                                               multiple/></span>text-danger
                                                            to upload</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left">
                                                <label for="product_tags">Vendor</label>
                                            </div>
                                            <div class="col-md-8 no-padding-left">
                                                <div class="form-group">
                                                    <select class="form-control select2 " id="vendor" name="vendor">
                                                        <option></option>
                                                        @foreach($data['vendor'] as $key => $value)
                                                        <option value='{{$value->master_data_uuid}}'>{{$value->title}}</option>
                                                        @endforeach
                                                       
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                      

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

                            <!--- Product Inventory Information -->
                            <div class="row">
                                <div class="col-sm-4 trash">
                                    <div class="new_product_left">
                                        <h4>Inventory Information</h4>
                                        <p>How you want to store, list track and sell your new product?</p>
                                        <p>You can set product supply details, suppliers, selling channels, supply
                                            &amp; sales <br> details in this section</p>
                                    </div>

                                </div>
                                <div class="col-sm-8 new_product_form">
                                    <div class="row">
                                        <!-- Product Type -->
                                       
                                        <div class="standard_product_details">
                                            <!--- Product SKU -->
                                            <div class="col-sm-12">
                                                <div class="col-md-2 no-padding-left">
                                                </div>
                                                <div class="col-md-3 no-padding">
                                                    <label class="radio_container">Automatically Generate SKU
                                                        <input type="radio" name="product_sku_radio"
                                                               value="automatic" checked>
                                                        <span class="checkmark"></span>
                                                    </label>
                                                    <label class="radio_container">Enter Custom SKU
                                                        <input type="radio" name="product_sku_radio" value="manual">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </div>
                                                <div class="col-md-6 no-padding-right sm-no-padding">
                                                    <div class="form-group">
                                                        <label>SKU* <span>Only use uppercase letters and numbers, no symbols and spaces.</span></label>

                                                        <input type="text" class="form-control validate product_sku" id="product_sku" name="product_sku_value" placeholder="Enter product SKU here" onkeyup="nospaces(this)" onkeypress="return block_specialchar(event)" value="">
                                                        <p class="text-danger validation_error product_sku_value hidden"></p>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Product Item Code -->
                                            <div class="col-sm-12">
                                                <div class="col-md-2 no-padding-left">
                                                </div>
                                        
                                            </div>
                                            <!-- Product Item Code -->

                                            <!--- Product Purchase Information -->
                                            <div class="col-sm-12 composite_hide">
                                                <div class="col-md-2 no-padding-left" style="margin: 15px 0 0;">
                                                    <label>Purchase Information</label>
                                                </div>
                                                <div class="col-md-3 sm-no-padding">
                                                    <div class="form-group">
                                                        <label for="product_supplier">Supplier</label>
                                                        <select class="form-control select2" name="prod_supplier" id="product_supplier">
                                                            <option></option>
                                                            @foreach($data['supplier'] as $key => $value)
                                                        <option value='{{$value->supplier_uuid}}'>{{$value->business_name}}</option>
                                                        @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3 sm-no-padding">
                                                    <div class="form-group">
                                                        <label for="product_supplier_cost">Supplier/Cost<span
                                                                class="md-hide">Excluding Tax</span></label>
                                                        <input type="number" min="0" class="form-control" id="product_supplier_cost" name="supplier_cost" placeholder="Enter product Supplier cost here" onkeydown="priceValidation(this)">
                                                    </div>
                                                </div>
                                                <div class="col-md-3 sm-no-padding no-padding-right">
                                                    <div class="form-group">
                                                        <label for="purchase_vat">Purchase VAT</label>
                                                        <select class="form-control select2" multiple id="purchase_vat" name="purchase_vat[]">
                                                        <option></option>
                                                        @foreach($data['purchase_vat'] as $key => $value)
                                                        <option value='{{$value->tax_uuid}}'>{{$value->name}}</option>
                                                        @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--- Product Selling Information-->
                                          
                                           
                                        
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--- Variant Information -->
                            <div class="row hidden variants">
                                <div class="col-sm-4">
                                    <div class="new_product_left">
                                        <h4>Variants Information</h4>
                                        <p>What all variants are you planning for this product?</p>
                                        <p>You can set product variants and sub classifications with SKU, pricing
                                            and <br> listing details in this section.</p>
                                        <p>Choose up to three variable attributes for your product to create and
                                            manage<br> SKUs and their inventory levels.</p>
                                    </div>
                                </div>
                                <div class="col-sm-8 new_product_form" style="padding-top: 0;">
                                    <div class="row">
                                        <!-- Product Variants -->
                                        <div class="col-sm-12">
                                            <div class="col-md-2 no-padding-left" style="padding-top: 22px;">
                                                <label for="variant_attributes">Variant Attributes*</label>
                                            </div>
                                            <div class="col-md-9">
                                                <div class="row product_variants hidden"></div>
                                                <div class="row">
                                                    <div class="col-sm-12" style="margin:30px 0 0;">
                                                        <button class="btn theme_btn_round add_attributes sm-no-margin"
                                                                type="button">+ Add Attribute
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!--- Variants Table -->
                                        <div class="col-sm-12 product_variants_table hidden"
                                             style="margin-top: 40px;">
                                            <div class="col-md-2">
                                            </div>
                                            <div class="col-md-10 sm-no-padding">
                                                <div class="table-responsive variants_table">
                                                    <table class="table table-bordered table-hover">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 12%;">Variant Name</th>
                                                                <th>SKU*</th>
                                                                <th>Item Code*</th>
                                                                <th>Cost</th>
                                                                <th>Retail Price*</th>
                                                                <th>Stock</th>
                                                                <th>Kitchen(KOT)</th>
                                                                <th></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="variants_table_body"></tbody>
                                                    </table>
                                                </div><!--end of .table-responsive-->
                                            </div>
                                        </div>

                                        <!-- Setup Inventory -->
                                        <div class="col-sm-12" style="margin:30px 0 0;">
                                            <div class="col-md-2 col-sm-12">
                                            </div>
                                            <div class="col-md-9 col-sm-12 sm-no-padding">
                                                <button class="btn theme_btn_round setup_inventory sm-no-margin"
                                                        type="button">Setup Inventory
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                    <div class="col-sm-12 sm-no-padding">
                                        <button class="btn theme_btn_round pull-right save_new_product"
                                                type="button">
                                            Save
                                        </button>
                                        <button class="btn action_btn cancel pull-right" type="button"
                                                onclick="history.go(-1);
                                                        return false">
                                            Cancel
                                        </button>
                                    </div>
                                </div>

                            <!--- Custom Modifiers -->
                          
                        </form>
                    </div> <!--THIS IS CONTENT DIV END-->
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Product Attributes Modal Begins -->
<div class="modal fade bs-modal" id="product_attributes_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
   
    <!-- /.modal-dialog -->
</div>
<!-- Product Attributes Modal End -->

<!-- Product Category Modal Begins -->validation_error
<div class="modal fade bs-modal" id="category_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    
</div>
<!-- Product Category Modal End -->



<!-- Product Tags Modal Begins -->
<div class="modal fade bs-modal" id="tags_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
   
</div>
<!-- Product Tags Modal End -->





<!-- Product Modifiers Modal Begins -->
<div class="modal fade bs-modal" id="product_modifiers_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  
</div>
<!-- Product Modifiers Modal End -->

<!-- Product New Brand Modal Begins -->

<!-- Product New Brand Modal End -->

<!-- Product New Kitchen Modal Begins -->
<div class="modal fade bs-modal" id="new_kitchen_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
   
    <!-- /.modal-dialog -->
</div>
<!-- Product New Kitchen Modal End -->

<!-- New Supplier Modal Start-->
<div class="modal fade bs-modal right modal-fullscreen" id="new_supplier_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
   
    <!-- /.modal-dialog -->
</div>
<!-- New Supplier Modal End-->

<!-- Custom Bundle Product Modal Begins -->
<div class="modal fade bs-modal" id="custom_bundle_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  
    <!-- /.modal-dialog -->
</div>

<!--new brand form-->
<div class="modal fade bs-modal" id="new_brand_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
   
</div>

@endsection
@section('styles')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/global/plugins/jquery-ui/jquery-ui.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('css/croppie.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css"/>
<style>
    input.sku-exist{
        border:1px solid red !important;
    }
    .toogle_class {
        float: left;
        width: 115px;
        margin-bottom: 4px;
    }
    .toogle_class span {
        float: left;
        line-height: 26px;
    }
    .toogle_class label {float: right;}
    .validation_error{
        margin: 0;
     }
     .portlet-body .reove_label {height: 14px;}
     .portlet-body .remove_label {height: 15px;}
     #product_attribute_form .portlet-body .row .top_nice_bar:after {
content: '';
position: relative;
 top: -14px;
border-top: 1px solid #EFEFEF;
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
border-bottom: inherit;
}
#custom_bundle_form .portlet-body .row .top_nice_bar:after {
content: '';
position: relative;
 top: -14px;
border-top: 1px solid #EFEFEF;
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
border-bottom: inherit;
}


</style>
@stop
@section('admin_js')
<script src="{{asset('js/general.js')}}"></script>
@include('admin.products.js.product_create')

@stop