@extends('component.admin.layout')

@section('content')
	<main class="language">
		<h1>{{lang('Language')}}</h1>

		<section>
			<form name="language-form" class="form" method="post" action="/admin/language/process">
				@csrf

				<ul class="cfg lang">
					@foreach ($langs as $lang)
						<li id="mc-{{ $lang->uid }}">
							<input type="text" autocomplete="off" class="form-control type" value="{{$lang->str}}" placeholder="en" disabled>
							<input type="text" autocomplete="off" class="form-control" name="kr[{{$lang->uid}}]" value="{{$lang->kr}}" placeholder="kr">
							<input type="text" autocomplete="off" class="form-control" name="tw[{{$lang->uid}}]" value="{{$lang->tw}}" placeholder="tw">
							<a href="#" data-uid="{{ $lang->uid }}" class="delete"><i class="bi bi-dash-circle-fill"></i></a>
						</li>
					@endforeach
				</ul>

				<div class="submit">
					<button type="submit" class="btn btn-danger">{{lang('Save Changes')}}</button>
				</div>

			</form>
		</section>

		<footer>
			{{ $langs->links() }}
		</footer>

		@if(session('success'))
		<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body">
						<p>{{ session('success') }}</p>
					</div>
				</div>
			</div>
		</div>
		@elseif(session('error'))
		<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body">
						<p>{!! session('error') !!}</p>
					</div>
				</div>
			</div>
		</div>
		@endif


	</main>

	<script type="text/javascript">
		$(document).ready(function(){
			// @if (Session::has('success'))
			// 	msg('{!! Session::get('success') !!}');
			// @endif

            $('a.delete').each(function(){
                $(this).on('click', function(e){
                    e.preventDefault();
                    var uid = $(this).attr('data-uid');

					if (confirm('Sure?')) {
						$.ajax({
							url: '/admin/language/delete/'+uid,
							type: 'DELETE',
			                headers: {
			                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
			                },
							success: function(result) {
								$('#mc-'+uid).remove();
							},
				            error: function(jqXHR, exception) {
				            	alert(exception+': '+jqXHR.responseText);
				            }
						});
					}
				});
            });
		});
	</script>

	@if(session('success'))
	<script>
		$(document).ready(function() {
			$('#successModal').modal('show');
		});
	</script>
	@elseif(session('error'))
	<script>
		$(document).ready(function() {
			$('#errorModal').modal('show');
		});
	</script>
	@endif
@endsection