@extends('layouts.admin')
@section('title') Localization Settings @endsection
@section('content')
<div class="row">
	<form id="form" method="post" action="{{ route('admin.update-localization-settings') }}">
		<div class="col-md-12 mb-5">
			<div class="bg-white card-box border-20 mb-5">
				<h6><i class="fa-regular fa-translate"></i> Locaization Settings</h6><hr>
				@csrf
				<table id="dataTable" class="table property-list-table">
		            <thead>
					  <tr>
					    <th>Key</th>
					    <th>English Version</th>
					    <th>Khmer Version</th>
					  </tr>
					</thead>
					<tbody>
						@foreach ($contents as $key => $translations)
						<tr>
							<td>{{ $key }}</td>
							<td>
								<div class="dash-input-wrapper mb-30">
									<label>English Version:</label>
									<input name="contents[en][{{ $key }}]" class="form-control" value="{{ $translations['en'] }}" required>
								</div>
							</td>
							<td>
								<div class="dash-input-wrapper mb-30">
									<label>Khmer Verison:</label>
									<input name="contents[km][{{ $key }}]" class="form-control" value="{{ $translations['km'] }}" required>
								</div>
							</td>

						</tr>
						@endforeach
					</tbody>
		        </table>
			</div>
		</div>
		<div class="col-md-4">
			<div class="form-group">
				<label>&nbsp;</label>
				<div class="d-grid">
					<button type="submit" class="btn btn-two btn-block"><i class="fa-thin fa-save text-white"></i>&nbsp;&nbsp;Update Settings</button>
				</div>
			</div>
		</div>
	</form>
</div>
@endsection
@section('script')
<script type="text/javascript">
	$('#dataTable').DataTable({
		dom: "<'row'<'col-md-4 col-sm-12'f><'col-md-5 col-sm-12 text-center'B><'col-md-3 col-sm-12'l>>" +
           "<'row'<'col-12'tr>>" +
           "<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
      autoWidth: true,
      responsive: true,
      buttons: [
        { extend: 'copy', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'excel', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'csv', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'pdf', className: 'btn btn-sm btn-primary btn-bg' },
        { extend: 'print', className: 'btn btn-sm btn-primary btn-bg' }
      ],
      lengthMenu: [
        [-1],
        ["All"]
      ],
    });
$(document).ready(function () {
    var table = $('#dataTable').DataTable();

    $('form').on('submit', function () {
        table.search('').draw(false);
    });
});

</script>
@endsection