@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

@section('title', 'Supplier Item | Create Supplier Item')

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4> Create Supplier Item</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">
			<div class="card-header header-elements-inline">
			</div>
			<div class="card-body">
				<form id="submit_arrange_code" class="form-validate-jquery" action="{{ route('stock.store')}}" method="post">
                    @csrf
                    <fieldset class="mb-3">
                        <legend class="text-uppercase font-size-sm font-weight-bold">Data Supplier Item</legend>

                        <input type="hidden" name="hotel_id" id="hotel_id" value="{{ \Session::get('hotel_id') ?? \Auth::user()->hotel_id }}">

                        <div class="row">
                            <div class="col-lg-5">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Main Group <span class="text-danger">*</span></label>
                                            <select name="main_group_id" id="main_group_id" class="form-control form-control-select2" autocomplete="off" onchange="getSubGroup(this.value)">
                                                <option value="">-- Select Main Group --</option>

                                                @foreach($mains as $m_idx => $main)
                                                    <option value="{{$main->id}}">{{ $m_idx+1 }} - {{$main->description}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Sub Group <span class="text-danger">*</span></label>
                                            <select name="sub_group_id" id="sub_group_id" class="form-control form-control-select2" autocomplete="off">
                                                <option value="">-- Select Sub Group --</option>
                                                {{-- @foreach($subs as $sub)
                                                    <option value="{{$sub->id}}">{{ @$sub->nomor ?? '' }} - {{$sub->description}}</option>
                                                @endforeach --}}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Article No <span class="text-danger">*</span></label>
                                            <input type="text" name="article_no" id="article_no" class="form-control" autocomplete="off" value="" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Description <span class="text-danger">*</span></label>
                                            <input type="text" name="description" id="description" class="form-control" autocomplete="off" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3 font-weight-bold">Status stock?</label>
                                    <div class="col-lg-8 ml-4 pt-1">
                                        <input class="form-check-input" type="checkbox" name="status_stock" value="1" id="status_stock" checked><span class="text-danger">*check to enable this stock.</span>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Origin</label>
                                            <input type="text" name="origin" id="origin" class="form-control" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label>Receipt Unit</label>
                                            <div class="d-flex align-items-center">
                                                <input type="text" name="recipe_unit" id="recipe_unit" class="form-control mr-2 " autocomplete="off">
                                                <span id="recipe_scale"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Mass Unit <span class="text-danger">*</span></label>
                                            <select name="mass_unit" id="mass_unit" class="form-control form-control-select2" autocomplete="off">
                                                <option value="">-- Select Mass Unit --</option>
                                                @foreach($units as $unit)
                                                    <option value="{{ $unit->id }}">{{ $unit->description }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Content <span class="text-danger">*</span></label>
                                            <input type="text" name="content_mass_unit" id="content_mass_unit" class="form-control masked-comma" autocomplete="off" readonly required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Delivery Unit <span class="text-danger">*</span></label>
                                            <select name="delivery_unit" id="delivery_unit" class="form-control form-control-select2" autocomplete="off">
                                                <option value="">-- Select Delivery Unit --</option>
                                                @foreach($units as $unit)
                                                    <option value="{{ $unit->id }}">{{ $unit->description }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Content <span class="text-danger">*</span></label>
                                            <input type="text" name="content_delivery_unit" id="content_delivery_unit" class="form-control masked-comma" autocomplete="off" readonly required>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="stock" id="stock" value="0">
                                {{-- <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label>Stock <span class="text-danger">(*for first default value stock)</span> </label>
                                            <input type="text" name="stock" id="stock" class="form-control masked" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Min Stock</label>
                                            <input type="text" name="min_stock" id="min_stock" class="form-control masked" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>VAT(%)</label>
                                            <input type="text" name="vat" id="vat" class="form-control masked-comma" autocomplete="off">
                                        </div>
                                    </div>
                                </div> --}}
                                {{-- <div class="row">
                                    <div class="col-md-4">
                                        <div class="fo1rm-group">
                                            <label>Max Stock</label>
                                            <input type="text" name="max_stock" id="max_stock" class="form-control masked" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div> --}}
                            </div>

                            <div class="col-lg-1"></div>

                            <div class="col-lg-5">

                                {{-- <div class="row">
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label>Change Description</label>
                                            <select name="change_description" id="change_description" class="form-control form-control-select2" autocomplete="off">
                                                <option value="0">NO</option>
                                                <option value="1">YES</option>
                                            </select>
                                        </div>
                                    </div>
                                </div> --}}
                                {{-- <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Actual Purchase Price</label>
                                            <input type="text" name="actual_price" id="actual_price" class="form-control masked" autocomplete="off" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Last Purchase Price</label>
                                            <input type="text" name="last_price" id="last_price" class="form-control masked" autocomplete="off" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Average Purchase Price</label>
                                            <input type="text" name="avg_price" id="avg_price" class="form-control masked" autocomplete="off" readonly>
                                        </div>
                                    </div>
                                </div> --}}

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Inventory Account No <span class="text-danger">*</span></label>
                                            <select name="coa_id" id="coa_id" class="form-control-select2 select-icons" data-fouc required>
                                                <option value="">-- Select COA --</option>
                                                @foreach($coas as $coa)
                                                    <option value="{{ $coa->id }}">({{ $coa->account_no }}) {{ $coa->description }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-5">
                                        <div class="form-group">
                                            <label>DML-Article</label>
                                            <select name="dml_article" id="dml_article" class="form-control form-control-select2" autocomplete="off">
                                                <option value="0">NO</option>
                                                <option value="1">YES</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {{-- <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Recipe No</label>
                                            <input type="text" name="recipe_no" id="recipe_no" class="form-control" autocomplete="off">
                                        </div>
                                    </div>
                                </div> --}}

                                {{-- <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Purchase Frequent</label>
                                            <input type="text" name="purchase_frequent" id="purchase_frequent" class="form-control" autocomplete="off">
                                        </div>
                                    </div>
                                </div> --}}

                            </div>
                        </div>

                        <h4><b>Supplier</b></h4>
                        <div class="row mt-2">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label>Supplier<span class="text-danger">*</span></label>
                                    <select name="supplier_id[]" id="supplier_id0" class="form-control form-control-select2" autocomplete="off" required>
                                        <option value="">-- Select Supplier --</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{$supplier->id}}">{{$supplier->id}} - {{ $supplier->company_title }}, {{$supplier->company_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="button" onclick="addSupplier()" class="btn btn-success" style="margin-top: 26px">
                                    <i class="fas fa-plus-circle"></i>
                                </button>
                            </div>
                            {{-- <div class="col-lg-1"></div> --}}
                            {{-- <div class="col-lg-4">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label>Supplier ArtNo</label>
                                        <input type="text" name="supplier_art_no[]" id="supplier_art_no0" class="form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div> --}}
                            {{-- <div class="col-lg-1">
                                <button type="button" onclick="addSupplier()" class="btn btn-success" style="margin-top: 26px">
                                    <i class="fas fa-plus-circle"></i>
                                </button>
                            </div> --}}
                        </div>
                        <div id="content-suppliers">

                        </div>
                        {{-- <div class="row">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label>Supplier 2</label>
                                    <select name="supplier_id2" id="supplier_id2" class="form-control form-control-select2" autocomplete="off">
                                        <option value="">-- Select Supplier 2 --</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{$supplier->id}}">{{$supplier->id}} - {{ $supplier->company_title }}, {{$supplier->company_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-1"></div>
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label>Supplier ArtNo</label>
                                        <input type="text" name="supplier_art_no2" id="supplier_art_no2" class="form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-5">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label>Supplier 3</label>
                                    <select name="supplier_id3" id="supplier_id3" class="form-control form-control-select2" autocomplete="off">
                                        <option value="">-- Select Supplier 3 --</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{$supplier->id}}">{{$supplier->id}} - {{ $supplier->company_title }}. {{$supplier->company_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-1"></div>
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label>Supplier ArtNo</label>
                                        <input type="text" name="supplier_art_no3" id="supplier_art_no3" class="form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div> --}}

                        {{-- <h4><b>Container</b></h4>
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label>Article(1)</label>
                                    <input type="text" name="container_art_id1" id="container_art_id1" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-lg-1"></div>
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label>Unit Content(1)</label>
                                        <input type="text" name="container_unit_content1" id="container_unit_content1" class="form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label>Article(2)</label>
                                    <input type="text" name="container_art_id2" id="container_art_id2" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-lg-1"></div>
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label>Unit Content(2)</label>
                                        <input type="text" name="container_unit_content2" id="container_unit_content2" class="form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label>Article(3)</label>
                                    <input type="text" name="container_art_id3" id="container_art_id3" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-lg-1"></div>
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <div class="form-group">
                                        <label>Unit Content(3)</label>
                                        <input type="text" name="container_unit_content3" id="container_unit_content3" class="form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div> --}}


                    </fieldset>
                    <div class="text-right">
                        <a href="{{route('stock.index')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
                        <button type="submit" id="submit" class="btn btn-primary submitBtn">Submit <i class="icon-paperplane ml-2"></i></button>
                    </div>
                </form>
			</div>

		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->
@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

<!-- <script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script> -->

<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/switch.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script type="text/javascript">
// Basic initialization
$('.daterange-single').daterangepicker({
	singleDatePicker: true,
    responsive: true,
	locale: {
	  format: 'DD-MM-YYYY'
	}
});

// Accessibility labels
$('.pickadate-accessibility').pickadate({
    labelMonthNext: 'Go to the next month',
    labelMonthPrev: 'Go to the previous month',
    labelMonthSelect: 'Pick a month from the dropdown',
    labelYearSelect: 'Pick a year from the dropdown',
    selectMonths: true,
    selectYears: true,
    format: 'dd-mm-yyyy',
});

function countMassDeliverUnit(countReceiptUnit = true) {
    const mass = $('#mass_unit').val();
    const delivery = $('#delivery_unit').val();

    const content_mass = $('#content_mass_unit');
    const content_delivery = $('#content_delivery_unit');
    const recipe_unit = $('#recipe_unit');
    const recipe_scale = $('#recipe_scale');

    if(mass && delivery){
        $.ajax({
            method: "GET",
            url: `/stock-generate-content/${mass}/${delivery}`,
            success: function (data) {
                content_mass.val(data.mass.toLocaleString('ID-id'))
                content_delivery.val(data.delivery.toLocaleString('ID-id'))
                if(countReceiptUnit){
                    recipe_unit.val(data.recipe_unit.toLocaleString('ID-id'))
                }
                recipe_scale.text(data.recipe_scale)
                console.log(data);
            }
        })
    }
}

$('#main_group_id, #sub_group_id').on('change', function(){
    const main = $('#main_group_id').val();
    const sub = $('#sub_group_id').val();

    if(main && sub){
        $.ajax({
            method: "GET",
            url: `/stock-generate-article/${main}/${sub}`,
            success: function (data) {
                $('#article_no').val(data);
            }
        })
    }
})

$('#mass_unit, #delivery_unit').on('change', function(){
    countMassDeliverUnit()
})

$(document).on("input", ".masked", function () {
    $(this).mask("#,##0", {reverse: true})
});

$(document).on("input", ".masked-comma", function () {
    $(this).mask("#,##0.00", {reverse: true})
});

let supplier_idx = 1;
function addSupplier(){

    // <div class="col-lg-4">
    //     <div class="form-group">
    //         <div class="form-group">
    //             <label>Supplier ArtNo</label>
    //             <input type="text" name="supplier_art_no[]" id="supplier_art_no${supplier_idx}" class="form-control" autocomplete="off">
    //         </div>
    //     </div>
    // </div>

    let this_html = `
        <div class="row" id="supplier_row_${supplier_idx}">
            <div class="col-lg-5">
                <div class="form-group">
                    <label>Supplier<span class="text-danger">*</span></label>
                    <select name="supplier_id[]" id="supplier_id${supplier_idx}" class="form-control form-control-select2" autocomplete="off">
                        <option value="">-- Select Supplier --</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{$supplier->id}}">{{$supplier->id}} - {{ $supplier->company_title }}, {{$supplier->company_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <button type="button" onclick="deleteSupplier(${supplier_idx})" style="margin-top:26px" class="btn btn-danger">
                    <i class="fas fa-times-circle"></i>
                </button>
            </div>
        </div>
    `;

    $('#content-suppliers').append(this_html)
    $('.form-control-select2').select2()
    supplier_idx++;
}

function deleteSupplier(params) {
    $('#supplier_row_'+params).remove()
    supplier_idx--;
}

function getSubGroup(main_id){
    $.ajax({
        type: 'GET',
        url: "{{ url('/getsubgrouplist/')}}/"+main_id+"/"+null,
        success: function (data) {
            $('#sub_group_id').html(data);
        }
    });
}

var FormValidation = function() {

    // Validation config
    var _componentValidation = function() {
        if (!$().validate) {
            console.warn('Warning - validate.min.js is not loaded.');
            return;
        }

        // Initialize
        var validator = $('.form-validate-jquery').validate({
            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',
            //successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            // success: function(label) {
            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
            //},

            // Different components require proper error label placement
            errorPlacement: function(error, element) {

                // Unstyled checkboxes, radios
                if (element.parents().hasClass('form-check')) {
                    error.appendTo( element.parents('.form-check').parent() );
                }

                // Input with icons and Select2
                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo( element.parent() );
                }

                // Input group, styled file input
                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                    error.appendTo( element.parent().parent() );
                }

                // Other elements
                else {
                    error.insertAfter(element);
                }
            }
        });

        // Reset form
        $('#reset').on('click', function() {
            validator.resetForm();
        });
    };

    // Return objects assigned to module
    return {
        init: function() {
            _componentValidation();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    FormValidation.init();
});
</script>
<script type="text/javascript">
function preview() {
	frame.src=URL.createObjectURL(event.target.files[0]);
}

$( document ).ready(function() {

	var $select = $('.form-control-select2').select2();

	// Default style
    @if(session('error'))
        new PNotify({
            title: 'Error',
            text: '{{ session('error') }}.',
            icon: 'icon-blocked',
            type: 'error'
        });
    @endif
    @if ( session('success'))
        new PNotify({
            title: 'Success',
            text: '{{ session('success') }}.',
            icon: 'icon-checkmark3',
            type: 'success'
        });
    @endif
	@if ($errors->any())
		@foreach ($errors->all() as $error)
			new PNotify({
				title: 'Error',
				text: '{{ $error }}.',
				icon: 'icon-blocked',
				type: 'error'
			});
		@endforeach
	@endif
});

$('form').submit(function() {
    $(".masked").unmask();
});
</script>
@endsection