@extends('layouts.app')

@section('content')
<style>
</style>
<section class="content" style="background:black;color:skyblue;">
    <div class="box box-solid" style="background:black;color:skyblue;">
    {!! 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>
            <input type="hidden" value="{{$serial}}" id="serial_number">
            <input type="hidden" value="" id="group-code">
            <input type="hidden" value="" id="sub-group-code">
            <input type="hidden" value="" id="net-group-code">
            <div class="row" style="border: 1px solid black !important;">
                <div class="col-md-4">
                    <img src="{{asset('img/default.png')}}" alt="image" style="width:210px;height:210px;"
                        class="mb-5 object-cover" id="previewImg"/>
                        <input class="form-control" id="file-upload" type="file" name="image" accept="image/*" onchange="readURL(this)"/  style="width:210pX">
                        <span id="fileSizeMessage" style="color:rgb(237, 13, 13);"></span>
                </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  id="select-group-id">
                            <option value="">Select one</option>
                            @foreach($groups as $group)
                                <option value="{{$group->id}}" data-code="{{$group->code}}">{{$group->code}} - {{$group->description}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Sub Group:</p>
                        <select class="form-control" name="sub_group_id" id="select-sub-group-id">
                            <option value="">Select one</option>
                            
                        </select>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <p>Nested Group:</p>
                        <select class="form-control" name="nested_group_id"  id="select-nested-group-id">
                            <option value="">Select one</option>
                           
                        </select>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <p>Item code:</p>
                        <input type="text" class="form-control" id="item-code" name="code" required>
                    </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', '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', 'required']); !!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Reorder Level :</p>
                        {!! Form::number('reorder_level', 0, ['class' => 'form-control']); !!}
                    </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']); !!}
                    </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']); !!}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <p>Avr.Cost : </p>
                        {!! Form::number('avr_cost', 0, ['class' => 'form-control']); !!}
                    </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 class="col-md-3">
                    <div class="form-group">
                        <p>Is Variant Product? :</p>
                        {!! Form::select('is_variant', ['0' => 'N', '1' => 'Y'], 0, ['class' => 'form-control', 'style'=>'width:20%',  'maxlength' => '1']); !!}
                    </div>
                </div>
                <!-- <div class="col-md-3">
                    <div class="form-group">
                        <p>Per Quantity Value :</p>
                        {!! Form::number('per_quantity_value', null, ['class' => 'form-control', 'style'=>'width:80%']); !!}
                    </div>
                </div> -->
                <div class="col-md-3">
                    <!-- <div class="form-group">
                        <p>Qty Unit :</p>
                        <select class="form-control" name="quantity_unit_id" style='width:100%;'>
                            <option value=" ">Select one</option>
                            @foreach($units as $per_unit)
                                <option value="{{$per_unit->id}}">{{$per_unit->code}} - {{$per_unit->description}}</option>
                            @endforeach
                        </select>
                    </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();
                }
            }
        });

    }

    function readURL(input) {
        if (input.files && input.files[0]) {
        
        var reader = new FileReader();
        reader.onload = function (e) { 
            document.querySelector("#previewImg").setAttribute("src",e.target.result);
        };

        reader.readAsDataURL(input.files[0]); 
        }
    }

    $(document).on('change', 'select#select-group-id', function () {
        var id = $(this).val();
        var code = $(this).find(':selected').data('code');
        $('input#group-code').val(code);
        genCode();
        getSubGroup(id);
        
    });

    function getSubGroup(val)
    {
        const url = "{{action('GroupController@getSubGroup')}}";
        $.ajax({
            method: "GET",
            url: url,
            dataType: "html",
            data: {
                'group_id':val
            },
            success: function (ordinary) {
                if (ordinary) {
                    $('select#select-sub-group-id').html(ordinary);
                }
            }
        });
    }

    $(document).on('change', 'select#select-sub-group-id', function () {

        var id = $(this).val();
        var code = $(this).find(':selected').data('code');
        $('input#sub-group-code').val(code);
        genCode();
        getNetGroup(id);
    });

    function getNetGroup(val)
    {
        const url = "{{action('GroupController@getSubGroup')}}";
        $.ajax({
            method: "GET",
            url: url,
            dataType: "html",
            data: {
                'group_id':val
            },
            success: function (ordinary) {
                if (ordinary) {
                    $('select#select-nested-group-id').html(ordinary);
                }
            }
        });
    }
    $(document).on('change', 'select#select-nested-group-id', function () {

        var id = $(this).val();
        var code = $(this).find(':selected').data('code');
        $('input#net-group-code').val(code);
        genCode();
    });

    function genCode()
    {
        var serial = $('input#serial_number').val();

        var code = $('input#group-code').val();
        var sub_code = $('input#sub-group-code').val();
        var net_code = $('input#net-group-code').val();
        var serial_code = code + sub_code + net_code + serial;

        $('input#item-code').val(serial_code);
    }
    </script>
    @endsection