@extends('layouts.default', [
	'sidebarLight' => true,
	'headerMegaMenu' => true,
	'sidebarMenu' => 'client',
])

@section('title', 'Client configuration')
@section('token', csrf_token())

@section('content')
	<!-- begin page-header -->
	<h1 class="page-header">Client configuration</h1>
    <!-- end page-header -->
    @if(_is('super'))
    	<form method="POST" action="{{ route('config.client.process') }}">
    		{{ csrf_field() }}
			<div class="row no-gutters">
				<div class="col-md-4 input-group">
					<select class="selectpicker" name="cdci_group_id" required>
						@foreach ($group as $k=>$v)
							<option value="{{ $k }}">{{ $k }}</option>
						@endforeach
					</select>
					<input type="input" class="form-control" name="cdci_code" value="" placeholder="CODE" required/>
				</div>

				<div class="col-md-8 input-group">
					<input type="input" class="form-control" name="label_en" value="" placeholder="Label (EN)" required/>
					<input type="input" class="form-control" name="label_kr" value="" placeholder="Label (KR)" required/>
					<input type="input" class="form-control" name="label_tw" value="" placeholder="Label (TW)" required/>
					<button type="submit" class="btn btn-primary">Confirm</button>
				</div>
			</div>
		</form>
    @endif
		<div class='m-t-10'>
			<table id="code-tbl" class="table table-bordered table-striped" style="table-layout: fixed;">
				<thead class="thead-dark">
					<tr>
						<th width="25" class="text-center"><i class="fas fa-sort"></i></th>
						<th>Group</th>
						<th>Code</th>
						<th>Label (en)</th>
						<th>Label (kr)</th>
						<th>Label (tw)</th>
						<th class="text-center" width="10%">Display</th>
						<th width="70"></th>
					</tr>
				</thead>
				<tbody>
				    @foreach ($list as $item)
				    	<tr class="ui-state-default" id="row-{{$item->cdci_uid}}">
				    		<td class="handle text-center"><i class="fas fa-sort"></i><input type="hidden" name="order[]" value="{{$item->cdci_uid}}"></td>
				    		<td>{{ $item->cdci_group_id }}</td>
				    		<td>
				    			{{ $item->cdci_code }}
				    			{{ $item->cdci_parent_code!='' ? ' ('.$item->cdci_parent_code.')':'' }}
				    		</td>
				    		<td>
				    			{{ $item->cdci_parent_code!='' ? '&nbsp;&nbsp;&nbsp;':'' }}
				    			{{ $item->cdci_label['en'] }}
				    		</td>
				    		<td>
				    			{{ $item->cdci_parent_code!='' ? '&nbsp;&nbsp;&nbsp;':'' }}
				    			{{ $item->cdci_label['kr'] }}
				    		</td>
				    		<td>
				    			{{ $item->cdci_parent_code!='' ? '&nbsp;&nbsp;&nbsp;':'' }}
				    			{{ $item->cdci_label['tw'] }}
				    		</td>
				    		<td class="text-center">
				    			<input type="checkbox" name="display" value="{{$item->cdci_uid}}"
					    			@if ($item->display=='Y')
					    				checked="checked"
					    			@endif
				    			>
				    		</td>
							<td class="text-nowrap text-center align-middle">
								<a href="{{ route('config.client.edit', $item->cdci_uid) }}" class="btn btn-danger btn-icon btn-circle btn-xs bg-green"><i class="fa fa-edit"></i></a>
								@if(_is('super'))
								<a href="{{ route('config.client.destroy', $item->cdci_uid) }}" data-uid="{{$item->cdci_uid}}" class="btn btn-danger btn-icon btn-circle btn-xs remove"><i class="fa fa-times"></i></a>
								@endif
							</td>
				    	</tr>
				    @endforeach
			    </tbody>
			</table>
		</div>
@endsection

@push('scripts')
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('#code-tbl tbody').sortable({
    			axis: "y",
    			handle: ".handle",
    			update: function(e,ui){
    				var order = '';
    				$('input[name="order[]"]').map(function(){
    					order += $(this).val()+',';
    				});

    				$.ajax({
    					type: 'POST',
    					data: { code_sort: order },
    					url: '{{ URL::route('config.ajax') }}',
    					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    					success: function(result){
    						console.log(result);
    					}
    				});
    			}
    		});

    		$('.remove').each(function(){
    			$(this).on('click', function(e){
    				e.preventDefault();
    				if (confirm('Sure?')) {
	    				var eurl = $(this).attr('href');
	    				var uid = $(this).attr('data-uid');
	    				$.ajax({
	    					type: 'DELETE',
	    					url: eurl,
	    					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
	    					success: function(result){
	    						console.log(result);
	    						$('#row-'+uid).remove();
	    					}
	    				});
	    			}
    			});
    		});

    		$('input[name="display"]').each(function(){
    			$(this).on('click', function(){
    				var cdci_uid = $(this).val();
    				var checked = $(this).prop('checked');
    				$.ajax({
    					type: 'POST',
    					data: { cdci_uid: cdci_uid, display: checked },
    					url: '{{ URL::route('config.ajax') }}',
    					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    					success: function(result){
    						console.log(result);
    					}
    				});
    			});
    		});

			/*$("#code-tbl td.symbol").click(function(event){
				if ( event.ctrlKey || event.metaKey ) {
					//$(this).unbind('click');
					var country_uid = $(this).attr('data-uid');
					var obj = $(this);
    				$.ajax({
    					type: 'POST',
    					data: { country_uid: country_uid, input_box: 'symbol' },
    					url: '{{ URL::route('config.ajax') }}',
    					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    					success: function(result){
    						obj.html(result);
    					}
    				});
				}
			});*/
    	});
    </script>
@endpush