@extends('base')
@section('konten')
	<div class="widget-four">
		<div class="widget-heading">
			<h5 class="">Index 2022 / Penetapan</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') }}" 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>Spesifikasi</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->spesifikasi }}</td>
								<td>{{ $x->satuan }}</td>
								<td>{{ $x->harga }}</td>
								<td class="text-right">
									<button class="btn btn-info btn-sm ubah" title="Ubah"
										data-toggle="modal"
										data-target="#modalUbah"
										data-id="{{ $x->id }}"
										data-uraian="{{ $x->uraian }}"
										data-spesifikasi="{{ $x->spesifikasi }}"
									>
										<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>
								</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="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>Uraian</label>
						<input type="text" name="uraian" class="form-control" id="uraian" required>
					</div>
					<div class="form-group">
						<label>Spesifikasi</label>
						<input type="text" name="spesifikasi" class="form-control" id="spesifikasi">
					</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>
@endsection

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

		$(document).on('click', '.ubah', function () {
			let id = $(this).data('id')
			let uraian = $(this).data('uraian')
			let spesifikasi = $(this).data('spesifikasi')
			let url = "{{ route('index.ubah', ':id') }}"
			url = url.replace(':id', id)
			$('form').attr('action', url)
			$('#uraian').val(uraian)
			$('#spesifikasi').val(spesifikasi)
		})
	</script>
@endsection