{{#section 'meta'}}
<title>Metode Pembayaran</title>
{{/section}}

<section>
	<!-- start page title -->
	<div class="row">
		<div class="col-12">
			<div class="page-title-box d-sm-flex align-items-center justify-content-between">
				<h4 class="mb-sm-0 font-size-18">Metode Pembayaran</h4>

				<div class="page-title-right">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a href="javascript: void(0);">Member Area</a></li>
						<li class="breadcrumb-item active">Metode Pembayaran</li>
					</ol>
					<div class="mt-2 text-end">
						<button id="btn-add" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> Tambah Metode</button>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->
	
	<div class="section-body">
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-body">
						<div class="table-responsive-md">
							<table id="table" class="table table-hover table-striped">
								<thead>
									<tr>
										<th>Jenis</th>
										<th>Provider</th>
										<th>Atas Nama</th>
										<th>Rekening</th>
										<th>Status</th>
										<th>Aksi</th>
									</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<form id="form" method="post" action="">
				<div class="modal-header">
					<h5 class="modal-title">Formulir</h5>
				</div>
				<div class="modal-body"> 
					
					<div class="row">
						<div class="col-lg-12">
							<div class="form-group">
								<label>Nama Provider</label>
								<input name="name" value="" class="form-control" type="text" autocomplete="off">
								<span validation-for="name"></span>
							</div>
						</div>
						<div class="col-lg-12">
							<div class="form-group">
								<label>Atas Nama</label>
								<input name="account_name" value="" class="form-control" type="text" autocomplete="off">
								<span validation-for="account_name"></span>
							</div>
						</div>
						<div class="col-lg-12">
							<div class="form-group">
								<label>Rekening</label>
								<input name="account_address" value="" class="form-control" type="text" autocomplete="off">
								<span validation-for="account_address"></span>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="form-group">
								<label>Jenis</label>
								<select name="mode" class="form-control">
									<option value="">-- Pilih Jenis --</option>
									<option value="Manual">Manual</option>
									<option value="Otomatis">Otomatis</option>
								</select>
								<span validation-for="mode"></span>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="form-group">
								<label>Status</label>
								<select name="status" class="form-control">
									<option value="">-- Pilih Status --</option>
									<option value="Show">Tampil</option>
									<option value="Hide">Sembunyi</option>
								</select>
								<span validation-for="status"></span>
							</div>
						</div>
					</div>
					
				</div>
				<div class="modal-footer"> 
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button> 
					<button type="submit" class="btn btn-primary">Submit</button> 
				</div>
			</form>
		</div>
	</div>
</div>

<template id="row-action">
	<div class="d-flex flex-wrap gap-2">
		<button data-id="edit" class="btn btn-warning text-dark btn-sm"><i class="fa fa-edit"></i> Ubah</button>
	</div>
</template>

{{#section 'javascript'}}
<script type="text/javascript">
	$(document).ready(function() {

		$(`#btn-add`).click(function(event) {
			event.preventDefault();
			const f = document.forms['form'];
			f.reset();
			f.action = base_url(`api/paymentmethods/create`);
			$(`#exampleModal`).modal('show');
		});

		const table = $('#table').DataTable({
			'ajax':{
				'url'		: base_url('api/paymentmethods/datatables'),
				'dataSrc'	: 'data',
				'type'		: 'POST'
			},
			'processing'	: true,
			'serverSide'	: true,
			'paging'		: true,
			'lengthChange'	: true,
			'searching'		: true,
			'ordering'		: true,
			'info'			: true,
			'autoWidth'		: false,
			'order'			: [ [5, 'desc'] ],
			'columns'		: [
				{'data': 'mode'},
				{'data': 'name'},
				{'data': 'account_name'},
				{'data': 'account_address'},
				{'data': 'status'},
				{'data': 'id', render: (data, i, row) => {
					return $(`#row-action`).html();
				}},
			],
			'createdRow'	: function(element, row) {
				$('button[data-id="edit"]', element).click(function(event) {
					event.preventDefault();
					const f = document.forms['form'];
					f.reset();
					f.action = base_url(`api/paymentmethods/${row.id}/update`);
					f['mode'].value = row.mode;
					f['name'].value = row.name;
					f['account_name'].value = row.account_name;
					f['account_address'].value = row.account_address;
					f['status'].value = row.status;
					$(`#exampleModal`).modal('show');
				});
			}
		});

		$("#form").submit(function(event) {
			event.preventDefault();
			var formData = new FormData(this);
			$(`span[validation-for]`).text('');
			$.LoadingOverlay("show");
			$.ajax({
				url: this.action,
				type: 'POST',
				dataType: 'json',
				processData: false,
				contentType: false,
				data: formData,
			})
			.done(function(response, textStatus, jqXHR) {
				$(`#exampleModal`).modal('hide');
				Swal.fire('Berhasil!', response.message, 'success');
				table.ajax.reload();	
			})
			.fail(function(jqXHR, textStatus, errorThrown) {
				if(jqXHR.responseJSON ?? false) {
					const json = jqXHR.responseJSON;
					Swal.fire('Maaf!', json.message, 'error');
					if(json.errors ?? false) {
						$.each(json.errors, function(index, val) {
							$(`span[validation-for="${index}"]`).text(val);
						});
					}
				}
			})
			.always(function() {
				$.LoadingOverlay("hide");
			});
		});
	});
</script>
{{/section}}