@extends('st::layouts.app')

@section('head')

<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<script>
    var add_permission = "{{ Auth::user()->can('st_product_add')}} ";
    var edit_permission = "{{ Auth::user()->can('st_product_edit')}} ";
</script>
@endsection

@section('content')

<div class="page-header">
    <div>
        <h3></h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Pages</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Form Page</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <form method="POST" id="productForm" enctype="multipart/form-data">
                {{ csrf_field() }}
                <div class="card-body">
                    <h6 class="card-title">Product</h6>
                    <ul class="nav nav-pills mb-3" role="tablist" id="navMenuItem">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-general-tab" data-toggle="pill" href="#tbGeneral" role="tab" aria-controls="pills-general" aria-selected="true">General</a>
                        </li>
                    </ul>
                    <br>


                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tbGeneral" role="tabpanel" aria-labelledby="pills-general-tab">

                            <div class="row">
                                <!--Left!-->
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="col-md-4 mb-2">
                                            <label for="ProductId">Product ID</label>
                                            <input type="text" class="form-control required-input" name="productId" id="txtProductId" placeholder="Product Id">
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter product id</label>
                                            </div>
                                        </div>
                                        <div class="col-md-8 mb-2">
                                            <label for="ProductName">Name</label>
                                            <input type="text" class="form-control required-input" name="productName" id="txtProductName" placeholder="Product Name">
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter product name</label>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="description">Description</label>
                                            <textarea class="form-control" id="txtDescription" name="description"></textarea>
                                            <!--<div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter product description</label>
                                            </div>!-->
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <label for="size">Size</label>
                                            <input type="text" class="form-control required-input" name="size" id="txtSize" value="0">
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter Size</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <label for="unitOfMesurement">Weight</label>
                                            <input type="text" class="form-control required-input" name="weight" id="txtWeight" value="0">
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter Unit Of Mesurement</label>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <label for="unitOfMesurement">Unit Of Mesurement</label>
                                            {{-- <input type="text" class="form-control required-input" name="unitOfMesurement" id="txtUnitOfMesurement" placeholder="00.cm"> --}}
                                            <select name="unitOfMesurement" id="txtUnitOfMesurement" class="form-control required-input">
                                                <option selected="true" disabled="" value="">Unit Of Mesurement</option>
                                            </select>
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter Unit Of Mesurement</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <label for="sku">SKU</label>
                                            <input type="text" class="form-control" name="sku" id="txtSKU" placeholder="SKU">
                                            <!--<div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter SKU</label>
                                            </div>!-->
                                        </div>
                                    </div>


                                    <div class="row">

                                        <div class="col-md-6 mb-2">
                                            <label for="GroupLevel1">Group Level 1</label>
                                            <select id="selcGroupLevel1" name="groupLevel1" class="form-control required-input">
                                                <option selected="true" disabled="" value="">Select Group Level1</option>
                                            </select>
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please select group level1</label>
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-2">
                                            <label for="GroupLevel2">Group Level2</label>
                                            <select id="selcGroupLevel2" name="groupLevel2" class="form-control required-input">
                                                <option selected="true" disabled="" value="">Select Group Level2</option>
                                            </select>
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please select group level2</label>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <label for="GroupLevel3">Group Level3</label>
                                            <select id="selcGroupLevel3" name="groupLevel3" class="form-control required-input">
                                                <option selected="true" disabled="" value="">Select Group Level3</option>
                                            </select>
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please select group level3</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <label for="ReorderLevel">Reorder Level</label>
                                            <input type="text" class="form-control" name="reorderLevel" id="txtReorderLevel" placeholder="Reorder Level">
                                            <!--<div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter reorder level</label>
                                            </div>!-->
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <label for="ReorderQuantity">Reorder Quantity</label>
                                            <input type="text" class="form-control" name="reorderQuantity" id="txtReorderQuantity" placeholder="Reorder Quantity">
                                            <!--<div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter reorder quantity</label>
                                            </div>!-->
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <label for="ProductType">Product Type</label>
                                            <select id="selcProductType" name="productType" class="form-control required-input">
                                                <option selected="true" disabled="" value="">Select Product type</option>
                                            </select>
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please select product type</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="GLACPost">GL A/C Post</label>
                                            <select id="selcGlAnalysis" name="glAnalysis" class="form-control required-input">
                                                <option selected="true" disabled="" value="">Select GL A/C Post</option>
                                            </select>
                                            <div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please select GL A/C Post</label>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12 mb-2">
                                            <label for="Note">Notes</label>
                                            <textarea class="form-control" id="txtNote" name="note"></textarea>
                                            <!--<div class="required-feedback">
                                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                                <label class="text-danger">Please enter notes</label>
                                            </div>!-->
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-3 mb-2">
                                            <input type="checkbox" id="checkSms" name="sms" value="true">SMS
                                        </div>
                                        <div class="col-md-3 mb-2">
                                            <input type="checkbox" id="checkEmail" name="email" value="true">Email
                                        </div>
                                        <div class="col-md-3 mb-2">
                                            <input type="checkbox" id="checkNotification" name="notification" value="true">Notification
                                        </div>
                                        <div class="col-md-3 mb-2">
                                            <input type="checkbox" id="checkActive" name="active" value="true">Active
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card-footer employeeSave">
                <div class="row">
                    <div class="col-md-1">
                        <button type="button" class="btn btn-primary" id="btnAction">Save</button>
                    </div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-warning" id="btnReset" onclick="resetProduct()">Reset</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')

<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>

<script src="{{ Module::asset('st:js/rquired_input.min.js') }}?random=67dd10e3e9815"></script>
<script src="{{ Module::asset('st:js/product.js') }}?random=67dd10e3e9817"></script>
@endsection