@extends('base')
@section('konten')
	<div class="widget-four">
		<div class="widget-heading">
			<div style="float: right;">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTambah">Tambah Header</button>
				<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalTambah2">Tambah Sub Header</button>
				<a href="{{ route('di.eksport') }}" class="btn btn-success">Eksport Excel</a>
			</div>
			<h5 class="">Daftar Isi</h5>
		</div>
		<div class="widget-content">
			<div class="table-responsive">
				<table id="zero-config3" class="table table-hover" style="width:100%">
					<thead>
						<tr>
							<th>Kode</th>
							<th>Nama Header / Sub Header</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						@foreach ($data as $a)
							<tr style="font-weight: bold;">
								<td>{{ $a->kode }}</td>
								<td>{{ $a->nama }}</td>
								<td></td>
							</tr>

							@foreach ($a->header as $b)
								<tr style="font-weight: bold;">
									<td>{{ $b->kode }}</td>
									<td>{{ $b->nama }}</td>
									<td class="text-right">
										<div class="btn-group" role="group">
											<button class="btn btn-info btn-sm ubah" title="Ubah"
												data-toggle="modal"
												data-target="#modalUbah"
												data-id="{{ $b->id }}"
												data-kode="{{ $b->kode }}"
												data-nama="{{ $b->nama }}"
											>
												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
											</button>
											@if (!$b->sub)
												<button class="btn btn-danger btn-sm hapus" title="Hapus"
													data-toggle="modal"
													data-target="#modalHapus"
													data-id="{{ $b->id }}"
												>
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
												</button>
											@endif
										</div>
									</td>
								</tr>

								@foreach ($b->sub as $c)
									<tr>
										<td>{{ $c->kode }}</td>
										<td>{{ $c->nama }}</td>
										<td class="text-right">
											<div class="btn-group" role="group">
												<button class="btn btn-info btn-sm ubah2" title="Ubah"
													data-toggle="modal"
													data-target="#modalUbah2"
													data-id="{{ $c->id }}"
													data-header="{{ $b->id }}"
													data-kode="{{ $c->kode }}"
													data-nama="{{ $c->nama }}"
												>
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
												</button>
												<button class="btn btn-danger btn-sm hapus2" title="Hapus"
													data-toggle="modal"
													data-target="#modalHapus"
													data-id="{{ $c->id }}"
												>
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
												</button>
											</div>
										</td>
									</tr>
								@endforeach
							@endforeach
						@endforeach
					</tbody>
				</table>
			</div>
		</div>
	</div>
@endsection

@section('modal')
	<div class="modal fade" id="modalTambah" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<form class="modal-content" method="POST" action="{{ route('di.tambah') }}">
				<div class="modal-header">
					<h5 class="modal-title">Tambah Header</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<i data-feather="x"></i>
					</button>
				</div>
				<div class="modal-body">
					{{ csrf_field() }}
					<div class="form-group">
						<label>Pilih Bab</label>
						<select name="bab" class="form-control">
							@foreach ($bab as $x)
								<option value="{{ $x->id_di_bab }}">{{ $x->kode }}. {{ $x->nama }}</option>
							@endforeach
						</select>
					</div>
					<div class="form-group">
						<label>Kode</label>
						<input type="text" name="kode" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Nama Header</label>
						<input type="text" name="nama" class="form-control" required>
					</div>
				</div>
				<div class="modal-footer">
					<button type="reset" class="btn">Reset</button>
					<button type="submit" class="btn btn-primary">Simpan</button>
				</div>
			</form>
		</div>
	</div>

	<div class="modal fade" id="modalUbah" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<form class="modal-content" method="POST">
				<div class="modal-header">
					<h5 class="modal-title">Ubah Header</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<i data-feather="x"></i>
					</button>
				</div>
				<div class="modal-body">
					{{ csrf_field() }}
					<div class="form-group">
						<label>Kode</label>
						<input type="text" name="kode" class="form-control" id="kode" required>
					</div>
					<div class="form-group">
						<label>Nama Header</label>
						<input type="text" name="nama" class="form-control" id="nama" required>
					</div>
				</div>
				<div class="modal-footer">
					<button type="reset" class="btn">Reset</button>
					<button type="submit" class="btn btn-primary">Simpan</button>
				</div>
			</form>
		</div>
	</div>

	<div class="modal fade" id="modalTambah2" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<form class="modal-content" method="POST" action="{{ route('di.tambah2') }}">
				<div class="modal-header">
					<h5 class="modal-title">Tambah Sub Header</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<i data-feather="x"></i>
					</button>
				</div>
				<div class="modal-body">
					{{ csrf_field() }}
					<div class="form-group">
						<label>Pilih Header</label>
						<select name="header" class="form-control">
							@foreach ($header as $x)
								<option value="{{ $x->id_di_header }}">{{ $x->kode }}. {{ $x->nama }}</option>
							@endforeach
						</select>
					</div>
					<div class="form-group">
						<label>Kode</label>
						<input type="text" name="kode" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Nama Sub Header</label>
						<input type="text" name="nama" class="form-control" required>
					</div>
				</div>
				<div class="modal-footer">
					<button type="reset" class="btn">Reset</button>
					<button type="submit" class="btn btn-primary">Simpan</button>
				</div>
			</form>
		</div>
	</div>

	<div class="modal fade" id="modalUbah2" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" role="document">
			<form class="modal-content" method="POST">
				<div class="modal-header">
					<h5 class="modal-title">Ubah Sub Header</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<i data-feather="x"></i>
					</button>
				</div>
				<div class="modal-body">
					{{ csrf_field() }}
					<div class="form-group">
						<label>Pilih Header</label>
						<select name="header" class="form-control" id="header">
							@foreach ($header as $x)
								<option value="{{ $x->id_di_header }}">{{ $x->kode }}. {{ $x->nama }}</option>
							@endforeach
						</select>
					</div>
					<div class="form-group">
						<label>Kode</label>
						<input type="text" name="kode" class="form-control" id="kode2" required>
					</div>
					<div class="form-group">
						<label>Nama Sub Header</label>
						<input type="text" name="nama" class="form-control" id="nama2" required>
					</div>
				</div>
				<div class="modal-footer">
					<button type="reset" class="btn">Reset</button>
					<button type="submit" class="btn btn-primary">Simpan</button>
				</div>
			</form>
		</div>
	</div>

	<div class="modal fade" id="modalHapus" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Hapus</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<i data-feather="x"></i>
					</button>
				</div>
				<div class="modal-body">
					<p class="modal-text">Anda yakin ingin menghapus ?</p>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal">Batal</button>
					<a class="btn btn-primary" id="hapus" href="">Ya, hapus !</a>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('footer')
	<script>
		$(document).on('click', '.ubah', function () {
			let id = $(this).data('id')
			let kode = $(this).data('kode')
			let nama = $(this).data('nama')
			let url = "{{ route('di.ubah', ':id') }}"
			url = url.replace(':id', id)
			$('form').attr('action', url)
			$('#kode').val(kode)
			$('#nama').val(nama)
		})

		$(document).on('click', '.hapus', function () {
			let id = $(this).data('id')
			let url = "{{ route('di.hapus', ':id') }}"
			url = url.replace(':id', id)
			$('#hapus').attr('href', url)
		})

		$(document).on('click', '.ubah2', function () {
			let id = $(this).data('id')
			let header = $(this).data('header')
			let kode = $(this).data('kode')
			let nama = $(this).data('nama')
			let url = "{{ route('di.ubah2', ':id') }}"
			url = url.replace(':id', id)
			$('form').attr('action', url)
			$('#header').val(header)
			$('#kode2').val(kode)
			$('#nama2').val(nama)
		})

		$(document).on('click', '.hapus2', function () {
			let id = $(this).data('id')
			let url = "{{ route('di.hapus2', ':id') }}"
			url = url.replace(':id', id)
			$('#hapus').attr('href', url)
		})
	</script>
@endsection