@extends('layouts.app')

@section('content')
<style>
</style>
<section class="content" style="background:blue">
    <div class="box box-solid">
    {!! Form::open(['url' => action('ProductController@store'), 'class' => 'product_form', 'method' => 'post', 'id' => 'product_add_form' , 'files' => true]) !!}
        <div class="box-body"  style="margin-left:20px;margin-right:20px;">
            <table>
                <tbody>
                    <tr>
                        
                        <td colspan="4">STOCk LEDGER</td>
                    </tr>
                </tbody>
            </table>
            <br>
            <div class="row" style="border: 1px solid black !important;">
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Item code:</p>
                        <input type="text" class="form-control" id="code" name="code" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Product Type:</p>
                        <select class="form-control" name="type" required>
                            <option value="">Select one</option>
                            <option value="1">Local</option>
                            <option value="2">Import</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Group:</p>
                        <select class="form-control" name="group_id" required>
                            <option value="">Select one</option>
                            @foreach($groups as $group)
                                <option value="{{$group->id}}">{{$group->code}} - {{$group->description}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Description:</p>
                        <input type="text" class="form-control" id="description" name="name" required>
                    </div>
                </div>
            </div>
            <div class="row" style="border-right: 1px solid black !important;border-left: 1px solid black !important;">
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Unit :</p>
                        <select class="form-control" name="unit_id" style='width:100%;'>
                            <option value=" ">Select one</option>
                            @foreach($units as $unit)
                                <option value="{{$unit->id}}">{{$unit->code}} - {{$unit->description}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Pack(Y/N) :</p>
                        {!! Form::select('is_pack', ['N' => 'N', 'Y' => 'Y'],'N', ['class' => 'form-control', 'maxlength' => '1']); !!}
                    </div>
                </div>
                <!-- <div class="col-md-3">
                    <div class="form-group">
                        <p>Fraction :</p>
                        {!! Form::number('fraction', 0, ['class' => 'form-control', 'style'=>'width:80%']); !!}
                    </div>
                </div> -->
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Weight(Y/N) :</p>
                        {!! Form::select('is_weight', ['N' => 'N', 'Y' => 'Y'], 'N', ['class' => 'form-control', 'maxlength' => '1']); !!}
                    </div>
                </div> 
            </div>
            <div class="row" style="border-right: 1px solid black !important;border-left: 1px solid black !important;">
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Retail Price : *</p>
                        {!! Form::text('retail_price', null, ['class' => 'form-control input-sm input_number', 'style'=>'width:80%', 'required']); !!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Whole Sale Price : *</p>
                        {!! Form::text('wholesale_price', null, ['class' => 'form-control input-sm input_number', 'style'=>'width:80%', 'required']); !!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Reorder Level :</p>
                        {!! Form::number('reorder_level', 0, ['class' => 'form-control', 'style'=>'width:80%']); !!}
                    </div>
                </div>
            </div>
            <div class="row" style="border-right: 1px solid black !important;border-left: 1px solid black !important;">
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Reorder Quantity :</p>
                        {!! Form::number('reorder_quantity', 0, ['class' => 'form-control', 'style'=>'width:80%']); !!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Purchase Rate :</p>
                        {!! Form::text('purchase_rate', 0, ['class' => 'form-control input-sm input_number', 'style'=>'width:80%']); !!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Avr.Cost : </p>
                        {!! Form::number('avr_cost', 0, ['class' => 'form-control', 'style'=>'width:80%']); !!}
                    </div>
                </div>
            </div>
            <div class="row" style="border-right: 1px solid black !important;border-left: 1px solid black !important;border-bottom: 1px solid black !important;">
                <div class="col-md-3">
                    <div class="form-group">
                        <p>VAT (Y/N) :</p>
                        {!! Form::select('is_vat', ['N' => 'N', 'Y' => 'Y'], 'N', ['class' => 'form-control', 'style'=>'width:20%',  'maxlength' => '1']); !!}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <p>Vat % :</p>
                        {!! Form::number('vat_percentage', 0, ['class' => 'form-control', 'style'=>'width:80%']); !!}
                    </div>
                </div>
                <!-- <div class="col-md-3">
                    <div class="form-group">
                        <p>NBT (Y/N) :</p>
                        {!! Form::select('is_nbt', ['N' => 'N', 'Y' => 'Y'], 'N', ['class' => 'form-control', 'style'=>'width:20%',  'maxlength' => '1']); !!}
                    </div>
                </div> -->
                <div class="col-md-3">
                    <div class="form-group">
                        <p>Size / Gage (Y/N) :</p>
                        {!! Form::select('is_size', ['N' => 'N', 'Y' => 'Y'], 'N', ['class' => 'form-control', 'style'=>'width:20%',  'maxlength' => '1']); !!}
                    </div>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-12" style="float:right">
                    <button type="submit" class="btn btn-lg btn-primary pull-right">SAVE</button>
                </div>
            </div>
        </div>
    {!! Form::close() !!}   
    </div>
</section>
@endsection
@section('javascript')
<script>
var allFields = document.querySelectorAll(".register_form");
    console.log(allFields)

    let count = 0;

    for (var i = 0; i < allFields.length; i++) {
        console.log(i)
        allFields[i].addEventListener("keyup", function(event) {

            if (event.keyCode === 13) {
                // event.preventDefault();
                var n = f.name.value;
                if (this.parentElement.nextElementSibling
                        .querySelector('input')
                        && n1) {
                    count = count + 1;
                    this.parentElement.nextElementSibling.querySelector(
                            'input').focus();
                }
            }
        });

    }
    </script>
    @endsection