@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Item List')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</style>
@endsection

@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><span class="font-weight-semibold">Item List</span></h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
            <div class="d-flex right">
                <button class="btn btn-warning m-1" data-toggle="modal" data-target="#modal_download"> <i class="fas fa-download"></i>Download excel template</button>
                <button class="btn btn-success m-1" data-toggle="modal" data-target="#modal_upload"> <i class="far fa-file-excel"></i>Upload or import new input only</button>
            </div>
		</div>
	</div>
	<!-- /page header -->

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

		<div class="row">
			<div class="col-md-12">
				<!-- Hover rows -->
				<div class="card">

                    <div class="card-header">

                        <div class="form-group row">
                            <div id="btn_form_item" class="col-sm-8">
                                <a  data-toggle="modal"
                                    data-target="#modal_form_item"
								>
                                    <button type="button" class="btn btn-success rounded-round">
                                        <i class="icon-add mr-2"></i> Add
                                    </button>
                                </a>
                            </div>
                        </div>

                    </div>

                    <table class="table datatable-basic table-hover">
						<thead>
							<tr>
								<th class="d-none">no</th>
								<th>Item Name</th>
								<th>Item Type</th>
                                <th>Shop</th>
								<th>Price</th>
								<th>Status</th>
								<th width="100px">Cost Complimentary</th>
								<th class="text-center">Actions</th>
							</tr>
						</thead>
						<tbody>
                            @if(!$menus->isEmpty())
    							@foreach($menus as $menu)
    							<tr>
									<td class="d-none">{{ $loop->iteration }}</td>
    								<td>
                                        <div class="datatable-column-width">
                                            <img src="{{$menu->gambar}}" style="height: 25px" alt="">&nbsp;{{$menu->nama}}
                                        </div>
                                    </td>
    								<td><div class="datatable-column-width">{{$menu->tipeMenu->nama_tipe}}</div></td>
                                    <td><div class="datatable-column-width">{{$menu->tipeMenu->shop->nama}}</div></td>
    								{{-- <td><div class="datatable-column-width">Rp. {{number_format($menu->harga, 0, ',', '.')}}</div></td> --}}
    								<td><div class="datatable-column-width">Rp. {{ribuanWithComma($menu->harga)}}</div></td>
    								<td><div class="datatable-column-width">{{config('custom.status_menu')[$menu->status]}}</div></td>
    								<td><div class="datatable-column-width">{{$menu->cost_complimentary ? $menu->cost_complimentary."%" : '-' }}</div></td>
    								<td align="center">
                                        {{-- <a class="duplicatebtn" data-toggle="modal" onclick="duplicateBtn({{$menu->id}})" data-target="#modal_theme_duplicate">
                                            <button type="button" class="btn btn-warning btn-icon"
                                                        title="Duplicate"><i class="icon-copy4"></i></button>
                                        </a> --}}
    									<button type="button"
                                                class="btn btn-primary btn-icon editbutton"
                                                title="Ubah"
                                                {{-- data-target="#modal_form_item" --}}
                                                {{-- data-toggle="modal" --}}
                                                onclick="editMenu({{$menu->id}});"
                                        >
                                            <i class="icon-pencil7"></i>
                                        </button>
                                        @if ($count_menus[$menu->id] <= 0 && !count($menu->shopTransaction) > 0 && !count($menu->restoCart) > 0)
    									    <a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ route('menus.destroy', $menu->id)}}"><button type="button" class="btn btn-danger btn-icon" title="Hapus"><i class="icon-x"></i></button></a>
                                        @endif
    								</td>
    							</tr>
    							@endforeach
    						@endif
						</tbody>
					</table>
				</div>
				<!-- /hover rows -->
			</div>
		</div>

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

    <!-- Form modal -->
	<div id="modal_form_item" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-primary" align="center">
                    <h6 class="modal-title"><i class="fas fa-user mr-1"></i>Form Item</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form class="form-validate-jquery" action="{{ route('menus.store')}}" method="post" id="myform" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="_method" id="method" value="post">
                    <div class="modal-body">
                        <legend class="text-uppercase font-size-sm font-weight-bold" id="formtitle">Add Item</legend>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Type Item <span class="text-danger">*</span> </label>
                            <div class="col-lg-9">
                                <select name="tipe_menu_id" id="tipe_menu_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
                                    <option value="">-- Type Item --</option>
                                    @foreach($tipe_menu as $tipe)
                                    <option value="{{$tipe->id}}" fo-transaction="{{$tipe->shop->fo_transaction}}">{{$tipe->nama_tipe}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        {{-- Jenis Item --}}
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Name <span class="text-danger">*</span></label>
                            <div class="col-lg-9">
                                <input type="text" id="nama" name="nama" class="form-control border-teal border-1" placeholder="Nama" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Upload Image</label>
                            <div class="col-lg-9">
                                <input name="gambar" type="file" class="form-control-uniform" data-fouc="">
                                <span class="form-text text-muted">recommend size : 1150px * 480px</span>
                                <br>
                                <img id="showgambar" src="" style="display: none" height="150px">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">SKU</label>
                            <div class="col-lg-9">
                                <input type="text" id="sku" name="sku" class="form-control border-teal border-1" value="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Cost Complimentary</label>
                            <div class="col-lg-9">
                                <div class="input-group">
                                    <input type="number" id="cost_complimentary" name="cost_complimentary" class="form-control border-teal border-1" placeholder="Cost Complimentary" value="" min="0" max="100">
                                    <span class="input-group-append">
                                        <span class="input-group-text">%</span>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Price <span class="text-danger">*</span></label>
                            <div class="col-lg-9">
                                <input type="text" id="harga" name="harga" class="form-control border-teal border-1 harga" min="0" value="" required>
								<span class="text-danger font-weight-bolder" id="warning_harga"></span>
                            </div>
                        </div>

                        {{-- <div class="form-group row">
                            <label class="col-form-label col-lg-3">Stock per day</label>
                            <div class="col-lg-9">
                                <input type="text" id="stock" name="stock"
									   class="form-control border-teal border-1" min="0"
									   value="0">
                            </div>
                        </div> --}}

						<div class="form-group row">
                            <label class="col-form-label col-lg-3">Status <span class="text-danger">*</span></label>
                            <div class="col-lg-9">
                                <select name="status" id="status" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
                                    @foreach(config('custom.status_menu') as $key => $val)
                                    <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Paid Out Status</label>
                            <div class="col-lg-8 ml-4 pt-1">
                                <input class="form-check-input" type="checkbox" name="paid_out_status" value="1" id="paid_out_status"><span class="text-danger">*check for paid out status</span>
                            </div>
                        </div>

                        @if (in_array(propertiTipe(), [1]))
						<div class="form-group row">
                            <label class="col-form-label col-lg-3">Chart of Accounts <span class="text-danger">*</span></label>
                            <div class="col-lg-9">
                                <select name="coa_id" id="coa_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
									<option value="">-- Select COA --</option>
                                    @foreach($coas as $coa)
                                    	<option value="{{$coa->id}}">({{$coa->account_no}}) {{ $coa->description }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @endif

                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Description</label>
                            <div class="col-lg-9">
                                <textarea name="keterangan" id="keterangan" class="form-control"></textarea>
                            </div>
                        </div>


                        <div class="form-group row">
                            <label class="col-form-label col-lg-3">Stock active?</label>
                            <div class="col-lg-8 ml-4 pt-1">
                                <input class="form-check-input" type="checkbox" name="stock_active" value="1" id="stock_active"><span class="text-danger">*item/menu have stock or connected to stock</span>
                            </div>
                        </div>

                        <div id="table-stock-list" class="form-group row" style="display: none;">
                            <div class="col-lg-3">&nbsp;</div>
                            <div class="col-lg-8 form-group">

                                <div class="form-group row">
                                    <div class="col-lg-6">Item Stock</div>
                                    <div class="col-lg-4">Action</div>
                                </div>

                                {{-- <div class="form-group row">

                                </div> --}}

                                <div id="container_stock">
                                    <div class="form-group row">
                                        <div class="col-lg-6">
                                            <select name="stock_id[]" class="form-control form-control-select2" id="stock_id0" disabled>
                                                <option value="">-- Select stock item --</option>
                                                @foreach ($stocks as $stock)
                                                    <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <button type="button" onclick="tambahStock()" class="btn btn-success">
                                                <i class="fas fa-plus-circle"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary submit-btn">Save <i class="icon-paperplane ml-2"></i></button>
                    </div>
                </form>

			</div>
		</div>
	</div>
	<!-- /Form modal -->

    <!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
				    @csrf
				    @method('DELETE')
					<div class="modal-body" align="center">
						<h2> Delete Data? </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn bg-danger submit-btn">Delete</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

    <!-- duplicate modal -->
    <div id="modal_theme_duplicate" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning" align="center">
                    <h5 class="modal-title"><i class="icon-bed2 mr-1"></i> Duplicate Menu</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <fieldset class="mb-3">

                    <form action="{{ route('duplicate.menu') }}" method="post" id="upload-form" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body">
                        <input type="hidden" name="_method" id="method" value="post">
                        <input type="hidden" name="copy_code" id="copy_code" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-warning submitBtn">Duplicate</button>
                    </div>

                    </form>

                </fieldset>

            </div>
        </div>
    </div>

     <!--MODAL-->
     <div id="modal_download" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <h6 class="modal-title" id="formTitle">Download Item Excel</span></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="{{ url('download-default-item') }}" method="post" id="upload-form" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body">
                        <div class="form-group row">
                            <label class="col-form-label col-lg-4">Shop</label>
                            <div class="col-lg-8">
                                <select name="shop_id"
                                        class="form-control form-control-select2 getSelectTipeMenus"
                                        data-container-css-class="border-teal"
                                        data-dropdown-css-class="border-teal"
                                        required
                                >
                                    <option value="">-- Select Shop --</option>
                                    @foreach($shops as $shop)
                                    <option value="{{$shop->id}}" data-type="{{ $shop->shop_category_id }}">{{$shop->nama}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-lg-4">Item Type</label>
                            <div class="col-lg-8">
                                <select name="type_id" id="type_id"
                                        class="form-control form-control-select2"
                                        data-container-css-class="border-teal"
                                        data-dropdown-css-class="border-teal"
                                        required
                                >
                                    <option value="">-- Select Item Type --</option>
                                    {{-- @foreach($shops as $shop)
                                    <option value="{{$shop->id}}" data-type="{{ $shop->shop_category_id }}">{{$shop->nama}}</option>
                                    @endforeach --}}
                                </select>
                            </div>
                        </div>
                        <span class="form-text text-danger">Note: Please select Item type to download the template in Excel.</span>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Download</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--/MODAL-->

    <!--MODAL-->
    <div id="modal_upload" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <h6 class="modal-title" id="formTitle">Upload Item Excel</span></h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <form action="{{ url('upload-default-item') }}" method="post" id="upload-form" enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="_method" id="method" value="post">
                    <div class="modal-body">
                        <div class="form-group">
                            <input class="form-control-uniform" id="file" name="file" type="file" accept=".xls,.xlsx,.csv">
                        </div>
                        <span class="form-text text-muted">Accepted format: .xls .xlsx .csv</span>
                        {{-- <a href="{{ route('download.roomtypedefault') }}" class="m-1"><button class="btn btn-light btn-sm" type="button"> <i class="fas fa-download"></i>Download Excel Default Template</button></a> --}}
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"  data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="submit-upload">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--/MODAL-->


@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/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.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/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/validation/validate.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
	<script>
		//Tipe Menu
		$('#tipe_menu_id').on('change', function(){
			let tipe_menu_id = $(this).val();
			let fo_transaction = parseInt($(this).find('option[value="'+tipe_menu_id+'"]').attr('fo-transaction'));

			console.log(fo_transaction);

			if(fo_transaction){
				$('#warning_harga').html('*This price include tax and service');
			}
			else{
				$('#warning_harga').html('');
			}
            if (tipe_menu_id != '') {
                $('.submit-btn').prop('disabled',false)
            }
		});

		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

        $('#harga').on('input', function(){
            $('#harga').mask("#.##0", {reverse: true});//set separator number
        })

		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            // columnDefs: [{
		            //     orderable: false,
		            //     width: 200,
		            //     targets: [ 1 ]
		            // }],
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' },
                        emptyTable: "No Data"
		            }
		        });

		        // Basic datatable
		        $('.datatable-basic').DataTable({

				});

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'},
                        emptyTable: "No Data"
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

		    // Select2 for length menu styling
		    var _componentSelect2 = function() {
		        if (!$().select2) {
		            console.warn('Warning - select2.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        $('.dataTables_length select').select2({
		            minimumResultsForSearch: Infinity,
		            dropdownAutoWidth: true,
		            width: 'auto'
		        });
		    };


		    //
		    // Return objects assigned to module
		    //

		    return {
		        init: function() {
		            _componentDatatableBasic();
		            _componentSelect2();
		        }
		    }
		}();

        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({
                    focusInvalid: true,
                    ignore: 'input[type=hidden], .select2-search__field, .harga', // ignore hidden fields
                    errorClass: 'validation-invalid-label',
                    //successClass: 'validation-valid-label',
                    validClass: 'validation-valid-label',
                    highlight: function(element, errorClass) {
                        $(element).removeClass(errorClass);
                        $(element).closest('.addError').addClass('has-error');
                    },
                    unhighlight: function(element, errorClass) {
                        $(element).removeClass(errorClass);
                        $(element).closest('.addError').removeClass('has-error');
                    },
                    // 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')) {
                                $(element).closest('.addError').addClass('has-error');
                                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')) {
                                $(element).closest('.addError').addClass('has-error');
                                error.appendTo( element.parent() );
                            }

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

                            // Other elements
                            else {
                                $(element).closest('.addError').addClass('has-error');
                                error.insertAfter(element);
                            }
                    },
                    messages: {
                    },
                });

                // 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();
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {

			$('.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

			$('.resetbutton').on('click', function(){
				$('#formtitle').html('Tambah Item');
				$('#myform').attr("action", "{{ route('menus.store')}}");
				$('#showgambar').prop("src", "").hide();
				$('#method').val("post");
				$('#nama').val('');
                $('#sku').val('');
				$('#harga').val('');
				$('#cost_complimentary').val('');
				$('#status').select2().val(1).trigger('change');
				$('#keterangan').html('');
			});

            // open modal create if get new generate from click here button
            var queryString = window.location.search;
            var urlParams = new URLSearchParams(queryString);
            var a = urlParams.get('a');
            if (a) {
                $('#modal_form_item').modal('show')
                $('#paid_out_status').attr('checked', 'checked');
            }

		});

        //modal duplicate
        function duplicateBtn(id) {
            $("#copy_code").val(id);
        }

        function editMenu(id){
            $('#stock_active').removeAttr('checked');
            $('#container_stock').html(null);
            $.ajax({
                type: "get",
                url: "{{ url('/detail-item')}}/"+id,
                dataType: "json",
                success: function (data) {
					console.log(data);
                    console.log('menus/'+data.id);
                    $('#myform').attr("action", 'menus/'+data.id);
                    $('#method').val("put");
                    $('#nama').val(data.nama);
                    $('#sku').val(data.sku);
                    $('#tipe_menu_id').select2().val(data.tipe_menu_id).trigger('change');
                    $('#showgambar').prop("src", data.gambar).show();
                    $('#harga').val((data.harga).toLocaleString('ID'));
                    $('#stock').val((data.stock));
                    $('#cost_complimentary').val(data.cost_complimentary);
                    $('#status').select2().val(data.status).trigger('change');
                    $('#coa_id').select2().val(data.coa_id).trigger('change');
                    $('#keterangan').html(data.keterangan);

                    // paid out status
                    if(data.paid_out_status){
                        $('#paid_out_status').attr('checked', 'checked');
                    }
                    else{
                        $('#paid_out_status').removeAttr('checked');
                    }

                    // stock active
                    if(data.stock_active){
                        $('#stock_active').attr('checked', 'checked');

                        if (data.stocks.length > 0) {
                            idx = data.stocks.length
                            $.each(data.stocks, function (i, v) {
                                if (i==0) {
                                    var html = `
                                        <div class="form-group row" id="rowstock${i}">
                                            <div class="col-lg-6">
                                                <select name="stock_id[]" class="form-control form-control-select2" id="stock_id${i}">
                                                    <option value="">-- Select stock item --</option>
                                                    @foreach ($stocks as $stock)
                                                        <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-lg-4">
                                                <button type="button" onclick="tambahStock()" class="btn btn-success">
                                                    <i class="fas fa-plus-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    `;
                                }else{
                                    var html = `
                                        <div class="form-group row" id="rowstock${i}">
                                            <div class="col-lg-6">
                                                <select name="stock_id[]" class="form-control form-control-select2" id="stock_id${i}">
                                                    <option value="">-- Select stock item --</option>
                                                    @foreach ($stocks as $stock)
                                                        <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-lg-4">
                                                <button type="button" onclick="deleteStock(${i})" class="btn btn-danger">
                                                    <i class="fas fa-times-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                    `;
                                }
                                $('#container_stock').append(html)

                                $('#stock_id'+i).val(v.id).select2().trigger('change')
                            });

                        }else{
                            idx = 0
                            var html = `
                                <div class="form-group row">
                                    <div class="col-lg-6">
                                        <select name="stock_id[]" class="form-control form-control-select2" id="stock_id0" disabled>
                                            <option value="">-- Select stock item --</option>
                                            @foreach ($stocks as $stock)
                                                <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <button type="button" onclick="tambahStock()" class="btn btn-success">
                                            <i class="fas fa-plus-circle"></i>
                                        </button>
                                    </div>
                                </div>
                            `;
                            $('#container_stock').append(html)
                        }

                        $('#table-stock-list').show()
                        $('#table-stock-list input').prop('disabled', false).prop('required', true)
                        $('#table-stock-list select').prop('disabled', false).prop('required', true)
                    }
                    else{
                        idx = 0
                        var html = `
                            <div class="form-group row">
                                <div class="col-lg-6">
                                    <select name="stock_id[]" class="form-control form-control-select2" id="stock_id0" disabled>
                                        <option value="">-- Select stock item --</option>
                                        @foreach ($stocks as $stock)
                                            <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <button type="button" onclick="tambahStock()" class="btn btn-success">
                                        <i class="fas fa-plus-circle"></i>
                                    </button>
                                </div>
                            </div>
                        `;
                        $('#container_stock').append(html)
                        $('#stock_active').removeAttr('checked');
                        $('#table-stock-list').hide()
                        $('#table-stock-list input').prop('disabled', true).prop('required', false)
                        $('#table-stock-list select').prop('disabled', true).prop('required', false)
                    }
                    $('.form-control-select2').select2()
                    // $('#jenis_item').select2().val(data.jenis_item).trigger('change');
                    $('#formtitle').html('Edit Item');
                    $('#modal_form_item').modal('show')
                }
            });

        }

        $('#modal_form_item').on('hidden.bs.modal', function () {
                console.log('reset');
                $(this).find('form').trigger('reset');
				$('#formtitle').html('Tambah Item');
				$('#myform').attr("action", "{{ route('menus.store')}}");
				$('#showgambar').prop("src", "").hide();
				$('#method').val("post");
                $('#tipe_menu_id').select2().val('').trigger('change');
				$('#status').select2().val(1).trigger('change');
				$('#coa_id').select2().val("").trigger('change');
				$('#keterangan').html('');
                $('#paid_out_status').removeAttr('checked');
                // $('#jenis_item').select2().val('').trigger('change');

                $('#stock_active').removeAttr('checked');
                $('#container_stock').html(`
                    <div class="form-group row">
                        <div class="col-lg-6">
                            <select name="stock_id[]" class="form-control form-control-select2" id="stock_id0" disabled>
                                <option value="">-- Select stock item --</option>
                                @foreach ($stocks as $stock)
                                    <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <button type="button" onclick="tambahStock()" class="btn btn-success">
                                <i class="fas fa-plus-circle"></i>
                            </button>
                        </div>
                    </div>
                `);
                $('#table-stock-list').hide()
                $('#table-stock-list input').prop('disabled', true).prop('required', false)
                $('#table-stock-list select').prop('disabled', true).prop('required', false)
        })

        // function getSelectTipeMenus(shop_id){
        $(document).on('change','.getSelectTipeMenus', function() {
            var shop_id = $(this).find(':selected').val()
            if (shop_id) {
            $.ajax({
                type: 'GET',
                url: "{{ url('/gettipemenus/')}}/"+shop_id,
                success: function (data) {
                    $('#type_id').html(data);
                }
            });
            }else{
                let data = '<option value="">-- Select Item Type --</option>'
                $('#type_id').html(data)
            }
        })

        $('#stock_active').on('click', function(){
            let is_checked = $('#stock_active').is(':checked')
            if(is_checked){
                $('#table-stock-list').show()
                $('#table-stock-list input').prop('disabled', false).prop('required', true)
                $('#table-stock-list select').prop('disabled', false).prop('required', true)
            }
            else{
                $('#table-stock-list').hide()
                $('#table-stock-list input').prop('disabled', true).prop('required', false)
                $('#table-stock-list select').prop('disabled', true).prop('required', false)
            }
        });

        var idx = 0;
        function tambahStock() {
            idx++;
            var html = `
                <div class="form-group row" id="rowstock${idx}">
                    <div class="col-lg-6">
                        <select name="stock_id[]" class="form-control form-control-select2" id="stock_id${idx}">
                            <option value="">-- Select stock item --</option>
                            @foreach ($stocks as $stock)
                                <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-4">
                        <button type="button" onclick="deleteStock(${idx})" class="btn btn-danger">
                            <i class="fas fa-times-circle"></i>
                        </button>
                    </div>
                </div>
            `;
            $('#container_stock').append(html)
            $('.form-control-select2').select2()
        }
        function deleteStock(param) {
            $('#rowstock'+param).remove()
            idx--;
            if (idx == 0) {
                var html = `
                            <div class="form-group row">
                                <div class="col-lg-6">
                                    <select name="stock_id[]" class="form-control form-control-select2" id="stock_id0" required>
                                        <option value="">-- Select stock item --</option>
                                        @foreach ($stocks as $stock)
                                            <option value="{{$stock->id}}">{{$stock->description}} - current: {{$stock->stock ?? 0}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <button type="button" onclick="tambahStock()" class="btn btn-success">
                                        <i class="fas fa-plus-circle"></i>
                                    </button>
                                </div>
                            </div>
                        `;
                $('#container_stock').append(html)
                $('.form-control-select2').select2()
            }
        }

        $('form').on('submit', function(){
            $('.submit-btn').prop('disabled', true)
        });

        $('#nama').on('change', function(){
            var val = $(this).val()
            console.log(val)
            if (val != '') {
                $('.submit-btn').prop('disabled',false)
            }
        })
        $('#coa_id').on('change', function(){
            var val = $(this).val()
            console.log(val)
            if (val != '') {
                $('.submit-btn').prop('disabled',false)
            }
        })
        $('.modal').on('show.bs.modal', function () {
            $('select').each(function () {
                $(this).select2({
                    dropdownParent: $(this).parent()
                });
            });
        })
    </script>
@endsection