@extends('layout.master')
@section('title','進貨類別')


@section('content-title')
	<span>{{ '進貨類別' }}</span>
@endsection

{{-- 清單頁 --}}
@section('content')
	<link rel="stylesheet" type="text/css" href="{{ asset('css/stock.css') }}" />

	<script type='text/javascript'>

		form_obj.module     = 'Purchase';
		form_obj.controller = 'PurchaseTypeController';
		form_obj.route_name = '{{ basename(url()->current()) }}';

		form_obj.detail.ajax.save = function() {

			if(!$('#'+form_obj.detail.form_id)[0].checkValidity())
			{
				$('.detail_loading_mask').loading('stop');
				$('#'+form_obj.detail.form_id+' #'+form_obj.detail.sb_btn).click();
			}
			else
			{
				var formData = new FormData($('#'+form_obj.detail.form_id)[0]);
					formData.append('module',form_obj.module);
					formData.append('controller',form_obj.controller);
					formData.append('type',formData.get(form_obj.detail.type_id));
					formData.append('id',formData.get(form_obj.detail.master_id));
					formData.append('print_log',false);

				$.ajax({
					data:formData,
					datatype: 'json',
					contentType: false,
					processData: false,
					success:function(data,textStatus,jqXHR) {
						// console.log(data);
						if(isJson(data)) {

							var json = JSON.parse(data);
							if(json.status) {
								sweetAlert('success',json.msg);
                                setTimeout(function() {location.reload();}, 1000);
							}
							else {
								sweetAlert('error',json.msg);
							}
						}
						else {
							console.log(data);
							$('.detail_loading_mask').loading('stop');
						}
					},
					error:ajaxError,
					beforeSend: function(){
                    	$('.save_loading').show();
	                },
	                complete: function(){
	                    $('.save_loading').hide();
	                }
				});
			}
		}

		form_obj.detail.ajax.get = function() {

			$.ajax({
				data:{
					module: form_obj.module,
					controller: form_obj.controller,
					type: 'read',
					where: {
						id: $('#'+form_obj.detail.master_id).val(),
					},
					print_log: false,
				},
				success:function( data, textStatus, jqXHR ) {
					// console.log(data);
					if(isJson(data))
                    {
						var json = JSON.parse(data);
						form_obj.detail.displayData(json['data']['list'][0]);

						$( "#"+form_obj.master.form_id).hide();
						$( "#normal_detail").show();

						$('#'+form_obj.detail.type_id).val('update');
					}
				},
				error:ajaxError
			});
		}

		form_obj.detail.displayData = function(data)
		{
			$('input,textarea,select').each(function() {

				if(this.id in data)
                {
                	if(empty(data[this.id])) return;
					this.value = data[this.id];
					if(this.multiple)
					{
						$(this).val(data[this.id].split(','));
					}	

				} else if(this.id=='price') {
					this.value = data['retail_price']['price'];
				}
			});
			
			// select2 update
            $('select').trigger('change.select2'); 
		}

		form_obj.detail.ajax.delete = function() {

			$.ajax({
				data:{
					module: form_obj.module,
					controller: form_obj.controller,
					type: $('#'+form_obj.detail.type_id).val(),
					where: {
						id: $('#'+form_obj.detail.master_id).val(),
					},
					print_log: false,
				},
				success:function( data, textStatus, jqXHR ) {
					// console.log(data);
					if(isJson(data)) {

						var json = JSON.parse(data);
						if(json.status) {
                            sweetAlert('success',json.msg);
							// setTimeout(function() {location.reload();}, 1000);
							table.refreshTable();
						}
                        else {
                            sweetAlert('error',json.msg);
							$('.loading-mask').loading('stop');
						}
					}
                    else {
						console.log(data);
						$('.loading-mask').loading('stop');
					}
				},
				error:ajaxError
			});
		}
		
		$(function() {
			do_js_action(form_obj.route_name+'-$function-start');
			
			do_js_action(form_obj.route_name+'-$function-end');
		});

		//////////////////////////////////////
		/* bootstrap table */
		// table init columns
		function initColumns() {
			return columns = [
				// {
				//     checkbox: true,
				//     clickToSelect: false,
				// },
				{
					width: 40,
					field: 'item_index',
					title: '{{__('basic.ItemIndex')}}',
					align: 'center',
					valign: 'middle',
				},
				{
					field: 'name',
					title: '名稱',
					align: 'center',
					valign: 'middle',
					sortable: true,
				},
				{
					field: 'description',
					title: '備註',
					align: 'center',
					valign: 'middle',
					sortable: true,
				},
				{
					width: 40,
					field: 'cancel',
					title: '',
					align: 'center',
					valign: 'middle',
					clickToSelect: false,
					formatter : function(value, row, index) {
						return `
								<a href="javascript:void(0)"
									class="edit_btn"
									data-key="${row.id}"
									onClick="editRow('${row.id}')"
									style="display: none;" ></a>
                                <button type="button" data-key="${row.id}" onClick="delRow('${row.id}')" class="btn btn-danger">{{ __('basic.Delete') }}</button>
								`;
					}
                }
			];
        }

        // table get data
        function getData(params) 
        {
        	// console.log(params);
        	$.ajax({
				data:{
					module: form_obj.module,
					controller: form_obj.controller,
					type: 'read',
					search: params.data.search,
                    offset: params.data.offset,
                    limit: params.data.limit,
                    sort: params.data.sort,
                    order: params.data.order,
					print_log: false,
				},
				success:function( data, textStatus, jqXHR ) {
					// console.log(data);
					if(isJson(data))
                    {
                        var json = JSON.parse(data);
                        if(json.status)
                        {
                            let data = [];
                            $.each(json.data.list, function(i,v) {
                            	// console.log(v);
                                let row_data = {
                                    'item_index': i+1,
                                    'id': v.id,
                                    'name': v.name,
                                    'description': v.description,
                                };
                                data.push(row_data);
                            })

                            params.success({
                                total: json.data.count,
                                rows: data
                            });
                        }
                    }
				},
				error:ajaxError
			});
        }

		add_js_action('master-data_table_event_post_body-start',function() {

		});
	</script>

	<form id="fm" name='fm' action='' method="post" enctype="multipart/form-data">
		@csrf @method('GET')
		
		<input type='hidden' id='type' name='type' value='' />
		<input type='hidden' id='master_id' name='master_id' value='' />

		<!-- Table Toolbar -->
		<div class='toolbar'>
			<div class='align-middle'>
				<button type='button' class='btn btn-sm toolbar-basic-btn both-middle add_btn' >
					<span>新增</span>
				</button>
			</div>
		</div>

		<!-- Table -->
		<table id='dataTable' class='data_table'
            data-side-pagination="server"
            data-ajax="getData" >
		</table>

	</form>
@endsection

<!--  Filter -->
@section('filter-title')
	<span>{{ __('basic.WorkOrder') .__('basic.FILTER') }}</span>
@endsection
@section('filter')
	
@endsection
<!--  END Filter -->


{{-- 明細頁 --}}
{{-- @extends('layout.dialog_detail') --}}
@extends('layout.normal_detail')
@section('detail-title','廠牌')
@section('detail-content')

	<div class='panel' style="height: calc(100% - 40px); overflow: auto; margin-top: unset;">
		<!-- Basic begin -->
		<h4>{{ __('basic.DETAIL') }}</h4>
		<div class='content-column row'>
			<div class='col-xl-4 col-lg-6 mb-4'>
				<div class='title'>
					<span>{{ __('basic.NAME') }}</span>
					<span class='warn'>*</span>
				</div>
				<div class='input-div align-middle'>
					<input type='text' class='input-column' id="name" name="name" placeholder='' required />
				</div>
			</div>
		</div>
		<div class='content-column row'>
			<div class='col-xl-4 col-lg-6 mb-4'>
				<div class='title'>
					<span>{{ __('basic.Description') }}</span>
				</div>
				<div class='align-middle'>
					<textarea class='form-control' id='description' name="description" rows=5 ></textarea>
				</div>
			</div>
		</div>
		<!-- Basic end -->
	</div>

@endsection