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

@section('title', 'Country configuration')
@section('token', csrf_token())
@section('content')
	<!-- begin page-header -->
	<h1 class="page-header">Country configuration</h1>
    <!-- end page-header -->

    <div class="tab-content width-full">
    	{{--
		<div class="text-right">
			<a href="{{ URL::route('config.country-create') }}" class="btn btn-success btn-sm">
				<i class="fas fa-lg fa-fw m-r-5 fa-plus"></i>Add Country
			</a>
		</div>--}}
		<div class='m-t-10'>
			<table id="country-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>Code</th>
						<th>ISO 3166-1</th>
						<th>EN</th>
						<th>KR</th>
						<th>TW</th>
						<th>Currency</th>
						<th class="text-center">Symbol</th>
						<th class="text-center" width="10%">Display</th>
					</tr>
				</thead>
				<tbody>
				    @foreach ($country as $item)
				    	<tr class="ui-state-default">
				    		<td class="handle text-center"><i class="fas fa-sort"></i><input type="hidden" name="order[]" value="{{$item->country_uid}}"></td>
				    		<td>{{ strtoupper($item->code_domain) }}</td>
				    		<td>{{ $item->code_num }}</td>
				    		<td>{{ $item->name_en }}</td>
				    		<td>{{ $item->name_kr }}</td>
				    		<td>{{ $item->name_tw }}</td>
				    		<td>{{ $item->currency }}</td>
				    		<td class="text-center symbol clickable" data-uid="{{$item->country_uid}}">{{ $item->symbol }}</td>
				    		<td class="text-center">
				    			<input type="checkbox" name="display" value="{{$item->country_uid}}"
					    			@if ($item->display=='Y')
					    				checked="checked"
					    			@endif
				    			>
				    		</td>
				    	</tr>
				    @endforeach
			    </tbody>
			</table>
		</div>

		<ul class="footnote">
			<li>With sort icon (<i class="fas fa-sort"></i>), display order can be sorted.</li>
			<li>To Symbol data, Ctrl(Command on mac)+Click the desired symbol.</li>
		</ul>    
    </div>

@endsection

@push('scripts')
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('#country-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: { sort: order },
    					url: '{{ URL::route('config.ajax') }}',
    					headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    					success: function(result){
    						console.log(result);
    					}
    				});
    			}
    		});

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

			$("#country-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