@extends('masterdata::gelombang-setting')

@section('gelombang-setting')
@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


{{-- tambahkan data --}}
<div class="d-flex flex-lg-row flex-column justify-content-between align-items-lg-end">
	<div>
		<form class="input-group " method="GET"> 
			@foreach (request()->all() as $key => $value)
			@if ($key != 'nama' && $key != 'page' && $key != 'gel_jalur_id' && $key != 'gel_fakultas_id' && !is_array($value))
			<input type="hidden" name="{{ $key }}" value="{{ $value }}">
			@endif
			@endforeach

			<div class="form-group " style="width: 200px">
				<label for="">Pilih Ruangan</label>
				<select name="id_ruangan" class="form-control form-select" value="{{ request()->id_ruangan }}"
					onchange="this.form.submit()">
					<option value="">Pilih Ruangan</option>
					@if ($pilihan_ruangan)
					@foreach ($pilihan_ruangan as $ruangan)
					<option value="{{ $ruangan->id }}" @if ($ruangan->id == request()->id_ruangan) selected @endif>
						{{ $ruangan->name }} </option>
					@endforeach
					@endif
				</select>
			</div>
		</form>
	</div>

	<div class="d-flex flex-row  justify-content-end  ">
		<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#tambahdata">Tambah sesi ujian</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/gelombang/sesi-ujian/store" method="POST">
					@csrf
					@method('post')
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title mt-0" id="myModalLabel">Tambah Sesi Ujian</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

							</button>
						</div>

						<input type="hidden" name="id_gelombang" value="{{ request('id_gelombang') }}">
						<div class="modal-body">
							<div class="row mb-2">
								<div class="col">
									<label class="form-label">
										Nama sesi
									</label>
									<input name='nama_sesi' required placeholder="Masukkan nama sesi" class="form-control" />
								</div>
							</div>

							<div class="row mb-2">
								<div class="col">
									<label class="form-label">
										Pilih ruangan
									</label>
									<select name="id_ruangan" required class="form-control form-select"
										value="{{ request()->id_ruangan }}">
										<option value="">Pilih Ruangan</option>
										@if ($pilihan_ruangan)
										@foreach ($pilihan_ruangan as $ruangan)
										<option value="{{ $ruangan->id }}" @if ($ruangan->id == request()->id_ruangan) selected @endif>
											{{ $ruangan->name }} </option>
										@endforeach
										@endif
									</select>
								</div>
							</div>

							<div class="row mb-2">
								<div class="col">
									<label class="form-label">
										Kapasitas
									</label>
									<input value="{{ $ruangan_terpilih->kapasitas ?? 0 }}" name='kapasitas' required
										placeholder="Masukkan Kapasitas" min="0" type="number" class="form-control" />
								</div>
							</div>

							<strong>
								JADWAL UJIAN
							</strong>
							<hr class="m-1" />
							<div class="ps-3">
								<div class="row mb-2">
									<div class="col">
										<label class="form-label">
											Tanggal Mulai
										</label>
										<div class="input-group" id="datepicker-tambah-baru">
											<input name="tanggal_mulai" type="text" class="form-control input-date" placeholder="dd/mm/yyyy"
												data-date-format="dd/mm/yyyy" data-date-container="#datepicker-tambah-baru"
												id='tanggal-tambah-baru'data-provide="datepicker"
												data-inputmask-inputformat="dd/mm/yyyy" />
											<span class="input-group-text">
												<label for='tanggal-tambah-baru' class="p-0 m-0">
													<i class="mdi mdi-calendar"></i>
												</label>
											</span>
										</div>
									</div>
								</div>
								<div class="row mb-2">
									<div class="col">
										<label class="form-label">
											Waktu Mulai
										</label>
										<input required name="waktu_mulai" class="form-control input-time" placeholder="HH:MM" id="example-date-input" />
									</div>
									<div class="col">
										<label class="form-label">
											Waktu Selesai
										</label>
										<input required name="waktu_selesai" class="form-control input-time" placeholder="HH:MM" id="example-date-input" />
									</div>
								</div>
							</div>

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

							<div class="row mb-2">
								<div class="form-group col">
									<label for="">Keterangan</label>
									<textarea name="keterangan" style="min-height: 500px" class="form-control" id="editor-keterangan">

										</textarea>
								</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 data --}}

@if (request('id_ruangan'))
<div class="overflow-auto">
	<table class="table table-bordered rounded mt-2">
		<thead class="bg-secondary text-white ">
			<tr>
				<th rowspan="2" class="text-center">No</th>
				<th rowspan="2">Nama Sesi</th>
				<th rowspan="2">Ruangan</ th>
				<th colspan="2" class="text-center">Jadwal Sesi Ujian</th>
				<th rowspan="2"> Status </th>
				<th rowspan="2">Aksi</th>
			</tr>
			<tr>
				<th>Mulai</th>
				<th>Selesai</th>
			</tr>
		</thead>
		<tbody>
			@foreach ($sesi_ujian as $index => $sesi)
			<tr>
				<td class="text-center">{{ $index + 1 }}</td>
				<td>{{ $sesi->name_sesi }}</td>
				<td>{{ $sesi->name_ruangan }}</td>
				<td>
					{{ \Carbon\Carbon::parse($sesi->mulai)->translatedFormat('l, d M Y, H:i') }} WITA
				</td>
				<td>
					{{ \Carbon\Carbon::parse($sesi->selesai)->translatedFormat('l, d M Y, H:i') }} WITA
				</td>
				<td class="text-center">
					@if ($sesi->status == 1)
					<span class="badge rounded-pill p-2 bg-success">Aktif</span>
					@else
					<span class="badge rounded-pill p-2 bg-danger">Nonaktif</span>
					@endif
				</td>
				<td>
					<button class="btn btn-sm btn-outline-primary" data-bs-target="#edit-{{ $sesi->id }}" data-bs-toggle="modal">
						<i class="fa fa-pencil"></i>
					</button>

					<div id="edit-{{ $sesi->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/gelombang/sesi-ujian/update/{{ $sesi->id }}" method="POST">
								@csrf
								@method('put')
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title mt-0" id="myModalLabel">Update Sesi Ujian</h5>
										<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

										</button>
									</div>

									<input type="hidden" name="id_gelombang" value="{{ request('id_gelombang') }}">

									<div class="modal-body">
										<div class="row mb-2">
											<div class="col">
												<label class="form-label">
													Nama sesi
												</label>
												<input name='nama_sesi' value="{{ $sesi->name_sesi }}" required placeholder="Masukkan nama sesi"
													class="form-control" />
											</div>
										</div>

										<div class="row mb-2">
											<div class="col">
												<label class="form-label">
													Pilih ruangan
												</label>
												<select name="id_ruangan" required class="form-control form-select"
													value="{{ request()->id_ruangan }}">
													<option value="">Pilih Ruangan</option>
													@if ($pilihan_ruangan)
													@foreach ($pilihan_ruangan as $ruangan)
													<option value="{{ $ruangan->id }}" @if ($ruangan->id == request()->id_ruangan) selected
														@endif>
														{{ $ruangan->name }} </option>
													@endforeach
													@endif
												</select>
											</div>
										</div>

										<div class="row mb-2">
											<div class="col">
												<label class="form-label">
													Kapasitas
												</label>
												<input value="{{ $sesi->capasity }}" name='kapasitas' required placeholder="Masukkan Kapasitas"
													min="0" type="number" class="form-control" />
											</div>
										</div>

										<strong>
											JADWAL UJIAN
										</strong>
										<hr class="m-1" />
										<div class="ps-3">
											<div class="row mb-2">
												<div class="col">
													<label class="form-label">
														Tanggal Mulai
													</label>
													<div class="input-group" id="datepicker-{{$sesi->id}}">
														<input name="tanggal_mulai" type="text" class="form-control input-date"
															placeholder="dd/mm/yyyy" data-date-format="dd/mm/yyyy"
															data-date-container="#datepicker-{{$sesi->id}}" id='tanggal-{{$sesi->id}}'
														value="{{formatValueDate($sesi->mulai)}}" data-provide="datepicker"
															data-inputmask-inputformat="dd/mm/yyyy" />
														<span class="input-group-text">
															<label for='tanggal-{{$sesi->id}}' class="p-0 m-0">
																<i class="mdi mdi-calendar"></i>
															</label>
														</span>
													</div>

												</div>
											</div>
											<div class="row mb-2">
												<div class="col">
													<label class="form-label">
														Waktu Mulai
													</label>
													<input required name="waktu_mulai" value="{{ explode(' ', $sesi->mulai)[1] }}"
														class="form-control input-time" placeholder="HH:MM"  id="example-date-input" />
												</div>
												<div class="col">
													<label class="form-label">
														Waktu Selesai
													</label>
													<input required name="waktu_selesai" value="{{ explode(' ', $sesi->selesai)[1] }}"
														class="form-control input-time" placeholder="HH:MM" id="example-date-input" />
												</div>
											</div>
										</div>

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

										<div class="row mb-2">
											<div class="form-group col">
												<label for="">Keterangan</label>
												<textarea name="keterangan" id="editor-{{ $index }}" style="min-height: 500px"
													class="form-control editor">
															{{ $sesi->keterangan }}
														</textarea>
											</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>
@else
<div class="alert alert-warning mt-2">
	<strong>Info!</strong> Pilih Ruangan terlebih dahulu.
</div>
@endif


<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
<script>
	ClassicEditor
						.create(document.querySelector('#editor-keterangan'))
						.then(newEditor => {})
						.catch(error => {});

				$(document).ready(function() {

						var id;
						$('.editor').each(function() {
								id = $(this).attr('id');
								if (id != '') {
										ClassicEditor
												.create(document.querySelector('#' + id))
												.catch(error => {})
								}
						})

				});
</script>

@endsection