@extends('template')
 @section('title', 'Data Kategori')
 @section('konten')
<div class="main-panel">
			<div class="content">
				<div class="page-inner">
					<div class="page-header">
						<h4 class="page-title">Data Kategori</h4>
						<ul class="breadcrumbs">
							<li class="nav-home">
								<a href="/dashboard">
									<i class="flaticon-home"></i>
								</a>
							</li>
							<li class="separator">
								<i class="flaticon-right-arrow"></i>
							</li>
							<li class="nav-item">
								Data Kategori
							</li>
						</ul>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<button class="btn btn-primary btn-round" data-toggle="modal" data-target="#addRowModal"><i class="fa fa-plus"></i> Tambah Data</button>
								</div>
								<div class="card-body">
									<div class="table-responsive">
										<table id="basic-datatables" class="display table table-striped table-hover" >
											<thead>
												<tr>
                                                    <th>No</th>
													<th>Nama</th>
													<th>Action</th>
												</tr>
											</thead>
											
											<tbody>
												                                                @foreach ($datakategori as $data)
                                                <tr>
                                                    <th>{{$no++}}</th>
                                                    <td>{{$data->nama_kategori}} <br> <small><b>oleh : {{$data->name}}</b></small></td>
                                                    <td>
														<div class="form-button-action">
															<button onclick="editForm({{$data->id_kategori}})" type="button" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit">
																<i class="fa fa-edit"></i>
															</button>
															<a onclick="return  confirm('Apakah anda ingin menghapus data ini ?')" href="/delete_kategori/{{$data->id_kategori}}" type="button" data-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Hapus">
																<i class="fa fa-trash"></i>
															</a>
                                                            
														</div>
													</td>
                                                </tr>
                                                @endforeach
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>		
					</div>
				</div>
			</div>
			<footer class="footer">
				<div class="container-fluid">
					<nav class="pull-left">
						<ul class="nav">
							
						</ul>
					</nav>
					<div class="copyright ml-auto">
						&copycopyright 2026 - Perumda Air Minum Tirta Bahari
					</div>				
				</div>
			</footer>
		</div>
		<div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header no-bd">
						<h4 class="modal-title" style="color: rgb(27, 117, 235)">
							Tambah Kategori
						</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form method="POST" action="/insert_kategori" enctype="multipart/form-data">
						@csrf
						<div class="modal-body">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<label>Nama Kategori</label>
										<input id="addName" name="nama_kategori" type="text" class="form-control" placeholder="Nama Kategori" required>
									</div>
								</div>
							</div>
						</div>
						<hr>
						<div class="modal-footer no-bd">
							<button type="submit" class="btn btn-primary btn-round">Simpan</button>
							<button type="button" class="btn btn-danger btn-round" data-dismiss="modal">Close</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="modal fade" id="editkategori" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header no-bd">
						<h4 class="modal-title" style="color: rgb(25, 141, 236)">
							Edit Kategori
						</h4>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form method="POST" action="/edit_kategori" enctype="multipart/form-data">
						@csrf
						<div class="modal-body">
							<div class="row">
								<div class="col-md-12">
									<input name="id_kategori" id="id_kategori" type="hidden" class="form-control" placeholder="nama kategori" required>
									<div class="form-group">
										<label>Nama Kategori</label>
										<input id="nama_kategori" name="nama_kategori" type="text" class="form-control" placeholder="nama kategori" required>
									</div>
								</div>
							</div>
						
						</div>
						<hr>
						<div class="modal-footer no-bd">
							<button type="submit" class="btn btn-primary btn-round">Simpan</button>
							<button type="button" class="btn btn-danger btn-round" data-dismiss="modal">Close</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script>
			function editForm(id) {
            $.ajax({
                url: "{{ url('/detail_kategori') }}" + '/' + id ,
                type: "GET",
                dataType: "JSON",
                success: function(data) {
                    $('#editkategori').modal('show');
					$('#id_kategori').val(data.id_kategori);
                    $('#nama_kategori').val(data.nama_kategori);
                },
                error : function() {
                alert("Tidak Ada Data");
                }
            });
    }
		</script>
@endsection