@extends('auth::layouts.morvinnav')

@section('main')
	<div class="page-title-box">
		<div class="container-fluid">
			<div class="row align-items-center">
				<div class="col-sm-6">
					<div class="page-title">
						<h4>KOMPONEN PEMBAYARAN</h4>
						<ol class="breadcrumb m-0">
							@foreach ($routes as $key => $route)
								<li class="breadcrumb-item"><a href="{{ $route }}">{{ $key }}</a></li>
							@endforeach
						</ol>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="container-fluid">
		<div class="page-content-wrapper">

			@if (Session::has('success'))
				<div class="alert alert-success alert-dismissible fade show" role="alert">

					<strong> {{ Session::get('success') }}</strong>
				</div>
			@endif

			@if ($errors->any())
				{!! implode(
				    '',
				    $errors->all('<div class="alert alert-danger alert-dismissible fade show" role="alert">
																				                                                                                                					 <strong>:message</strong>
																				                                                                                                				</div>'),
				) !!}
			@endif

			<div class="card p-3">
				{{-- search --}}
				<div class="d-flex flex-row align-items-end justify-content-end">
					{{-- filter --}}


					{{-- tambah data --}}
					<div class="">
						<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#tambahdata">Tambah Komponen
							Pembayaran</button>

						<div id="tambahdata" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
							aria-hidden="true">
							<div class="modal-dialog">
								<form class="custom-validation" novalidate action="/masterdata/komponen-pembayaran/store" method="POST">
									@csrf
									@method('post')
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title mt-0" id="myModalLabel">Tambah Komponen Pembayaran</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

											</button>
										</div>

										<div class="modal-body">
											<div class="row mb-2">
												<div class="col">
													<label class="form-label">
														Nama Komponen
													</label>
													<input name="nama_komponen" required placeholder="Masukkan Nama Komponen" class="form-control" />
												</div>
											</div>

											<div class="row mb-2">
												<div class="col">
													<label class="form-label">
														Nominal (RP)
													</label>
													<input name="nominal" required placeholder="Masukkan Nominal" class="form-control input-integer" />
												</div>
											</div>

											<div class="row">
												<div class="mb-2">
													<div class="form-group col">
														<label for="">Status</label>
														<select required name="status" value='1' class="form-control form-select" id="filter">
															<option value="1" selected>Aktif</option>
															<option value="0">Nonaktif</option>
														</select>
													</div>
												</div>
											</div>
										</div>

										<div class="modal-footer">
											<button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
											<button type="submit" class="btn btn-primary waves-effect waves-light">Simpan</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>

				</div>

				{{-- table --}}
				<div class="overfow-auto">

					<table class="table table-bordered rounded mt-2">
						<thead class="bg-primary text-white">
							<tr>
								<th style="width: 20px">No</th>
								<th>Komponen Biaya Registrasi</th>
								<th>Status</th>
								<th>Nominal</th>
								<th>Aksi</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($komponens as $index => $komponen)
								<tr>
									<td>{{ $index + 1 + ($page_detail['page'] - 1) * $page_detail['per_page'] }}</td>
									<td>{{ $komponen->name }}</td>
									<td>

										@if ($komponen->status == 1)
											<span class="badge  p-2 rounded-pill bg-success">Aktif</span>
										@else
											<span class="badge p-2  rounded-pill bg-danger">Nonaktif</span>
										@endif
									</td>
									<td>Rp{{ number_format($komponen->nominal, 0, ',', '.') }}</td>
									<td>
										<button class="btn btn-sm	 btn-outline-primary" data-bs-target="#edit-{{ $komponen->id }}"
											data-bs-toggle="modal">
											<i class="fa fa-pencil"></i>
										</button>

										<div id="edit-{{ $komponen->id }}" class="modal fade" tabindex="-1" role="dialog"
											aria-labelledby="myModalLabel" aria-hidden="true">
											<div class="modal-dialog">
												<form class="custom-validation" novalidate
													action="/masterdata/komponen-pembayaran/update/{{ $komponen->id }}" method="POST">
													@csrf
													@method('put')
													<div class="modal-content">
														<div class="modal-header">
															<h5 class="modal-title mt-0" id="myModalLabel">Update Komponen Pembayaran</h5>
															<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

															</button>
														</div>

														<div class="modal-body">

															<div class="row mb-2">
																<div class="col">
																	<label class="form-label">
																		Nama Komponen
																	</label>
																	<input name="nama_komponen" value="{{ $komponen->name }}" required
																		placeholder="Masukkan Nama Komponen" class="form-control" />
																</div>
															</div>

															<div class="row mb-2">
																<div class="col">
																	<label class="form-label">
																		Nominal (RP)
																	</label>
																	<input name="nominal" required  value="{{ $komponen->nominal }}"
																		placeholder="Masukkan Nominal" class="form-control input-integer" />
																</div>
															</div>

															<div class="row">
																<div class="mb-2">
																	<div class="form-group col">
																		<label for="">Status</label>
																		<select class="form-control form-select" name="status" value="{{ $komponen->status }}"
																			id="filter">
																			<option value="1" @if ($komponen->status == 1) selected @endif>Aktif
																			</option>
																			<option value="0" @if ($komponen->status == 0) selected @endif>Nonaktif
																			</option>
																		</select>
																	</div>
																</div>
															</div>
														</div>

														<div class="modal-footer">
															<button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
															<button type="submit" class="btn btn-primary waves-effect waves-light">Simpan</button>
														</div>
													</div>
												</form>
											</div>
										</div>

									</td>
								</tr>
							@endforeach
						</tbody>
					</table>
				</div>

				{{-- jumlaah --}}
				<span class="mt-2 font-weight-bold"> Menampilkan data dari {{ $page_detail['awal'] }} sampai
					{{ $page_detail['end'] }} dengan total
					{{ $page_detail['total'] }} data </span>

				{{ $komponens->links('pagination::bootstrap-4') }}

			</div>
		</div>
	</div>
@endsection