@extends('base')
@section('konten')
	<div class="widget-four">
		<div class="widget-heading">
			<div style="float: right;">
				<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalTambah">Tambah</button>
			</div>
			<h5 class="">Index Penetapan 2022</h5>
		</div>
		<div class="widget-content">

			<div class="row">
				<div class="col-md-6">
					<div class="input-group mb-4">
						@if (isset($kunci))
							<input type="text" class="form-control" id="kunci" value="{{ $kunci }}">
						@else
							<input type="text" class="form-control" id="kunci">
						@endif
						<div class="input-group-append">
							<a class="input-group-text" href="" id="cari">Cari</a>
						</div>
					</div>
				</div>
				@if (isset($kunci))
					<div class="col-md-6">
						<a href="{{ route('index.2022') }}" class="btn btn-danger">Clear</a>
					</div>
				@endif
			</div>

			<div class="table-responsive">
				<table id="zero-config" class="table table-hover" style="width:100%">
					<thead>
						<tr>
							<th>Kode</th>
							<th>Uraian</th>
							<th>Spek</th>
							<th>Satuan</th>
							<th>Harga</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						@foreach ($data as $x)
							<tr>
								<td>{{ $x->kode }}</td>
								<td>{{ $x->uraian }}</td>
								<td>{{ $x->spek }}</td>
								<td>{{ $x->satuan }}</td>
								<td>{{ $x->harga }}</td>
								<td class="text-right">
									<div class="btn-group" role="group">
										<button class="btn btn-warning btn-sm salin" title="Salin"
											data-toggle="modal"
											data-target="#modalSalin"
											data-id="{{ $x->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-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
										</button>
										<button class="btn btn-info btn-sm ubah" title="Ubah"
											data-toggle="modal"
											data-target="#modalUbah"
											data-id="{{ $x->id }}"
											data-kode="{{ $x->kode }}"
											data-uraian="{{ $x->uraian }}"
											data-spek="{{ $x->spek }}"
											data-satuan="{{ $x->satuan }}"
											data-harga="{{ $x->harga }}"
										>
											<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 hapus" title="Hapus"
											data-toggle="modal"
											data-target="#modalHapus"
											data-id="{{ $x->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
					</tbody>
				</table>

				<div class="dataTables_paginate paging_simple_numbers">
					{{ $data->links('pagination') }}
				</div>
			</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('index.2022.tambah') }}">
				<div class="modal-header">
					<h5 class="modal-title">Tambah Index 2022</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 Kelompok</label>
						<input type="text" name="kode" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Uraian</label>
						<textarea name="uraian" class="form-control" rows="3" required></textarea>
					</div>
					<div class="form-group">
						<label>Spek</label>
						<input type="text" name="spek" class="form-control">
					</div>
					<div class="form-group">
						<label>Satuan</label>
						<input type="text" name="satuan" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Harga</label>
						<input type="text" name="harga" class="form-control" required>
					</div>
					<div class="form-group">
						<label>Kelompok</label>
						<select name="kelompok" class="form-control" required>
							<option value="1">SSH</option>
							<option value="2">HSPK</option>
							<option value="3">ASB</option>
							<option value="4">SBU</option>
						</select>
					</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 Index 2022</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 Kelompok</label>
						<input type="text" name="kode" class="form-control" id="kode" required>
					</div>
					<div class="form-group">
						<label>Uraian</label>
						<textarea name="uraian" class="form-control" id="uraian" rows="3" required></textarea>
					</div>
					<div class="form-group">
						<label>Spek</label>
						<input type="text" name="spek" class="form-control" id="spek">
					</div>
					<div class="form-group">
						<label>Satuan</label>
						<input type="text" name="satuan" class="form-control" id="satuan" required>
					</div>
					<div class="form-group">
						<label>Harga</label>
						<input type="text" name="harga" class="form-control" id="harga" 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>

	<div class="modal fade" id="modalSalin" 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">Salin</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">Salin ke Index 2023 ?</p>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal">Batal</button>
					<a class="btn btn-primary" id="salin" href="">Ya, salin !</a>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('footer')
	<script>
		$('#kunci').keyup(function() {
			let kunci = $(this).val()
			let url = "{{ route('index.2022.cari', ':kunci') }}"
			url = url.replace(':kunci', kunci)
			$('#cari').attr('href', url)
		})

		$(document).on('click', '.ubah', function () {
			let id = $(this).data('id')
			let kode = $(this).data('kode')
			let uraian = $(this).data('uraian')
			let spek = $(this).data('spek')
			let satuan = $(this).data('satuan')
			let harga = $(this).data('harga')
			let url = "{{ route('index.2022.ubah', ':id') }}"
			url = url.replace(':id', id)
			$('form').attr('action', url)
			$('#kode').val(kode)
			$('#uraian').val(uraian)
			$('#spek').val(spek)
			$('#satuan').val(satuan)
			$('#harga').val(harga)
		})

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

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