@extends('layouts.app')
@section('head')

@endsection
@section('content')
<div class="page-container" ng-controller="productController" ng-init="getcategory('1');getquantitytype();getstatus();getsubcategory('1');getpermissions();" ng-cloak>
    <div class="left-content">
	       <div class="mother-grid-inner">
		    <div id="loadercontainer" style="display:none" ><div class="loader pull-right"></div></div>
            <div class="clearfix"> </div>
            	<div class="validation-form" ng-if="!newproductshow">
                 	<form>
                         <div class="vali-form">
                         	<div class="col-md-2 form-group1 group-mail">
                                <input type="text" ng-model="search.category_id" placeholder = "CATEGORY" uib-typeahead="category.id as category.name for category in categorylist | filter:$viewValue"  class="form-control" typeahead-show-hint="true" typeahead-input-formatter="formatInputsearch($model)" typeahead-min-length="0"> 
                            </div>
                            <div class="col-md-2 form-group1 group-mail">
                                <input type="text" ng-model="search.sub_category_id" placeholder="SUB CATEGORY" uib-typeahead="category.id as category.name for category in subcategorylist | filter:$viewValue"  class="form-control" typeahead-show-hint="true" typeahead-input-formatter="formatInputsearchsub($model)" typeahead-min-length="0"> 
                            </div>
                            <div class="col-md-2 form-group1 group-mail">
                              <!-- <label class="control-label">Email</label> -->
                                <input type="text" placeholder="PRODUCT NAME" ng-model="search.product_name" ng-blur="getproductbysearch()" >
                            </div>
                            <div class="col-md-3 form-group2 group-mail">
                              <!-- <label class="control-label">Phone Number</label> -->
                                <select ng-model="search.status" ng-change="getproductbysearch()">
                                    <option value=''>Search By Status</option>
                                    <option ng-repeat="status in statuslist" value="{$status.id$}">{$status.name$}</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group margin-top">
                                <button type="button" ng-click="getproductbysearch()" class="btn btn-default searchbutton">Go</button>
                                <span  ng-click="reset()" data-toggle="tooltip" data-placement="right" title="refresh" id="refresh" style="cursor: pointer;padding: 4px;"><i class="fa fa-refresh" aria-hidden="true" style="padding-top: 45px;"></i></span>
                                <button type="button" ng-click="addProduct()" class="btn btn-primary searchbutton">Add Product</button>
                            </div>
                            <div class="clearfix"> </div>
                        </div>
                    </form>
                    <div class="inbox-mail">
                    	<div ng-if="!newproductshow">
                    	    <div class="w3l-table-info">
                    			<table id="table">
                    				<thead>
                    				    <tr>
                        					<th>Product Name</th>
                                            <th>Category</th>
                                            <th>Subcategory</th>
                        					<th>Status</th>
                        					<th>Price</th>
                        					<th>Actions</th>
                    				    </tr>
                    				</thead>
                    				<tbody>
                    				    <tr ng-repeat="product in productsfinallist track by $index">
                        					<td>{$product.product_name$}</td>
                                            <td>{$product.category.name$}</td>
                                            <td>{$product.sub_category.name$}</td>
                        					<td ng-repeat="status in statuslist track by $index" ng-if="status.id == product.status">{$status.name$}</td>
                        					<td>{$product.quantity$} {$product.quantity_type_name$} - {$product.price $}</td>
                        					<td><a href="javascript:void(0)"><i class="fa fa-pencil" ng-click="editproduct(product)" aria-hidden="true"></i></a></td>
                        				</tr>
                    				</tbody>
                    			</table>
                    		</div>
                            <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 pagin">
                    			<div class="short_pul pull-right" ng-if="!mailread" ng-cloak ng-show="total=='true'">
                    			{$begin$} - {$end$} of {$totallength$} <a href="javascript:void(0)"><i class="fa fa-fast-backward i-arrow" ng-click="previouspage()" ng-show="previousdisable=='true'"></i></a>  <a href="javascript:void(0)"><i class="fa fa-fast-forward i-arrow" ng-click="nextpage()" ng-show="nextdisable=='true'"></i></a>
                    		    </div>
                    	    </div>
                        </div>
                    </div>
                </div>
                	<div class="validation-form" ng-if="newproductshow">
                 	    <form>
                         	<div class="vali-form">
                                <div class="col-md-6 form-group1">
                                    <label class="control-label">Product Name *</label>
                                    <input type="text" ng-model="newproduct.product_name" placeholder="Product Name" >
                                </div>
                                <div class="col-md-6 form-group1 form-last">
                                    <label class="control-label">Product SKU *</label>
                                    <input type="text" ng-model="newproduct.product_sku" placeholder="Product SKU" >
                                </div>
                            </div>
                            <div class="col-md-6 form-group2 group-mail">
                                <label class="control-label">Category *</label>
                                <input type="text" ng-model="newproduct.category_id" placeholder="Type Category" uib-typeahead="category.id as category.name for category in categorylist | filter:$viewValue"  class="form-control" typeahead-show-hint="true" typeahead-input-formatter="formatInput($model)" typeahead-min-length="0"> 
                            </div>
                            <div class="col-md-6 form-group2 group-mail">
                                <label class="control-label">Sub Category</label>
                                <input type="text" ng-model="newproduct.sub_category_id" id="sub_category_id" placeholder="Type Sub Category" uib-typeahead="category.sub_category.id as category.sub_category.name for category in subcategoriesbycatid | filter:$viewValue"  typeahead-input-formatter="formatInputsubcategory($model)" class="form-control" typeahead-show-hint="true" typeahead-min-length="0"> 
                            </div>
                             <div class="clearfix"> </div>
                             <div class="col-md-6 form-group2 group-mail"  ng-if="role_name == 'ADMIN' && edittrue">
                                <label class="control-label">Status</label>
                                <select ng-model="newproduct.status" >
                                    <option value=''>Search By Status</option>
                                    <option ng-repeat="status in statuslist" value="{$status.id$}">{$status.name$}</option>
                                </select>
                            </div> 
                            <div class="clearfix"> </div>
                            <div class="col-md-12 form-group1 ">
                                <label class="control-label">Description *</label>
                                <textarea  ng-model="newproduct.description" placeholder="Description" ></textarea>
                            </div>
                            <div class="clearfix"> </div>
                            <div class="col-md-12 form-group1 ">
                                <label class="control-label">Ingredients *</label>
                                <textarea  ng-model="newproduct.ingredients" placeholder="Ingredients" ></textarea>
                            </div>
                            <div class="col-md-12 form-group1 ">
                                <label class="control-label">Keywords</label>
                                <textarea  ng-model="newproduct.keywords" placeholder="Keywords To Get This Product (Optional)" ></textarea>
                            </div>
                            <div class="clearfix"> </div>
                            <div class="col-md-12 form-group1 group-mail">
                                <div class="col-md-12 w3l-table-info">
                                    <label class="control-label">Add Branch</label><span style="padding-left: 30px;"><input type="checkbox" value="1" ng-model="newproduct.selectall" ng-click="selectallBranch(newproduct.selectall);" > Select All Branch</span>
                                    <table id="table">
                                        <thead>
                                            <tr>
                                                <th>Branch</th>
                                                <th>Stock</th>
                                                <th>Actions </th>
                                                <th><a  ng-click="addnewbranch()" href="javascript:void(0)"><i class="fa fa-plus i-black" aria-hidden="true"></a></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="branch in branch_stock track by $index">
                                                <td>
                                                    <select class="padding-middle" ng-model="branch.s_branch" id="sellerbranch">
                                                        <option ng-repeat="branch in sellerbranches" value="{$branch.id$}">{$branch.branch_name$} - {$branch.city.city_name$}</option>
                                                    </select> 
                                                </td>
                                                <td>
                                                   <input type="number" ng-model="branch.stock" placeholder="In Stock Count" >
                                                </td>
                                                <td><i class="fa fa-trash" ng-click="removebranch($index)" aria-hidden="true"></i></td>
                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12 form-group1 group-mail">
                                <div class="col-md-12 w3l-table-info">
                                    <table id="table">
                                        <thead>
                                            <tr>
                                                <th>Quantity_Type</th>
                                                <th>Quantity</th>
                                                <th>Price</th>
                                                <th>Actions </th>
                                                <th><a ng-if="!edittrue" ng-click="addnewprice()" href="javascript:void(0)"><i class="fa fa-plus i-black" aria-hidden="true"></a></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="price in pricelist track by $index">
                                                <td ng-repeat="quantity in quantitylist" ng-if="quantity.id == price.quantity_type_id">{$quantity.name$}</td>
                                                <td>{$price.quantity$}</td>
                                                <td>{$price.price$}</td>
                                                <td><a ng-if="edittrue" href="javascript:void(0)"><i class="fa fa-pencil" ng-click="editprice(price,$index)" aria-hidden="true"></i></a>
                                                <a ng-if="!edittrue" href="javascript:void(0)"><i class="fa fa-trash" ng-click="removeprice($index)" aria-hidden="true"></i></a></td>
                                               <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="clearfix"> </div>
                            <div class="col-md-12 form-group1">
                                <div class="col-md-3" ng-repeat="avatar in imagelist track by $index">
                                    <a href="javascript:void(0)" ng-click="deleteicon($index)"><i class="fa fa-times" aria-hidden="true"  id="image{$index+1$}"></i></a>
                                    <img width = "100%" height = "100%" src="{{ asset('assets/products{$avatar.product_image$}') }}">
                                </div>
                            </div>
                            <div class="col-md-6 form-group" ng-if="!edittrue">
                                <button type="submit" ng-click="saveproduct()" class="btn btn-primary">Save</button>
                                <button type="reset" ng-click="showlistscrren()" class="btn btn-default">Cancel</button>
                            </div>
                            <div class="col-md-6 form-group1 pull-right">
                                <input type="file" size="60" class="upload_text hide_file" placeholder="Avatar" accept ="image/*" name="avatar_file" ngf-select="selectAvatar(avatarFile)" ngf-max-files="3" ng-model="avatarFile"/>
                            </div>
                            <div class="col-md-12 form-group" ng-if="edittrue">
                                <button type="submit" ng-click="saveproduct()" class="btn btn-primary">Update</button>
                                <button type="reset" ng-click="showlistscrren()" class="btn btn-default">Cancel</button>
                            </div>
                        </form>
                    </div>
                    <div class="inner-block"></div>
                     <!-- Modal -->
                    <div class="modal fade" id="addpricemodal" role="dialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Price List Of The Product</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="validation-form" ng-if="!newpershow || !newusershow">
                                        <form >
                                            <div class="vali-form" >
                                                <div class="col-md-12 form-group2 group-mail">
                                                    <label class="control-label">Quantity Type *</label>
                                                    <select ng-model="newprice.quantity_type_id">
                                                        <option value="" disabled selected>Tap to select your option</option>
                                                        <option ng-repeat="quantity in quantitylist" value="{$quantity.id$}">{$quantity.name$}</option>
                                                    </select> 
                                                </div>
                                                <div class="col-md-12 form-group1 group-mail">
                                                    <input type="number" placeholder="Quantity" ng-model="newprice.quantity">
                                                </div>
                                                <div class="col-md-12 form-group1 group-mail">
                                                    <input type="number" placeholder="Price" ng-model="newprice.price">
                                                </div>
                                                <div class="clearfix"> </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" ng-click="addprice(2)" >Save</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                
            </div>
    	   @include('users.sidebar')
    	</div>
    </div>
@endsection
@section('js')  
	<link rel="stylesheet" type="text/css" href="{{ asset('css/table-style.css') }}" />
	<link rel="stylesheet" type="text/css" href="{{ asset('css/basictable.css') }}" />
	<script type="text/javascript" src="{{ asset('js/jquery.basictable.min.js') }}"></script>
    <script src="{{ asset('bower_components/ng-file-upload/ng-file-upload.js')}}"></script>  
    <script src="{{ asset('js/angular_library/ng-file-upload-shim.min.js') }}"></script>
    <script src="{{ asset('js/angular_library/ng-file-upload.min.js') }}"></script>
    <script src="{{ asset('js/angular_library/ng-file-upload-all.min.js') }}"></script>
    <script src="{{ asset('js/angular_controllers/productcontroller.js') }}"></script>
@endsection