201 lines
8.4 KiB
PHP
201 lines
8.4 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Daftar Customers</title>
|
|
|
|
<!-- Tailwind CSS (menggunakan CDN) -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- jQuery (untuk AJAX) -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f9fbfd;
|
|
}
|
|
|
|
.alert {
|
|
background: #e0f2fe;
|
|
border: 1px solid #90cdf4;
|
|
color: #0369a1;
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
th, td {
|
|
padding: 12px;
|
|
border: 1px solid #e5e7eb;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #e0f2fe;
|
|
color: #0369a1;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #f1f5f9;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #e0f7ff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<div class="bg-white shadow px-6 py-4 flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold text-blue-600">Dashboard Karyawan</h1>
|
|
<div class="flex items-center space-x-4">
|
|
<a href="{{ route('user.dashboard') }}" class="bg-blue-600 text-white px-3 py-1 text-sm rounded hover:bg-blue-700 transition">
|
|
⬅ Dashboard
|
|
</a>
|
|
<div class="flex items-center space-x-2 text-gray-600 text-sm">
|
|
<span>Login sebagai:</span>
|
|
<strong>{{ Auth::user()->name }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<!-- Judul Daftar Customers -->
|
|
<div class="max-w-7xl mx-auto mt-10 px-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-2xl font-bold text-blue-800">Daftar Pelanggan</h2>
|
|
</div>
|
|
|
|
<!-- Form pencarian -->
|
|
<div class="mb-4">
|
|
<form method="GET" action="">
|
|
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama customer..."
|
|
class="w-64 border border-blue-200 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50" />
|
|
</form>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="alert">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
<!-- Tabel Daftar Customer -->
|
|
<div class="overflow-x-auto bg-white rounded-lg shadow-md">
|
|
<table class="min-w-full table-auto" id="customersTable">
|
|
<thead class="bg-blue-600 text-white text-sm">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left">Nama</th>
|
|
<th class="px-4 py-3 text-left">Email</th>
|
|
<th class="px-4 py-3 text-left">Alamat</th>
|
|
<th class="px-4 py-3 text-left">No HP</th>
|
|
<th class="px-4 py-3 text-left">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm">
|
|
@foreach($customers as $customer)
|
|
<tr class="border-b hover:bg-gray-50">
|
|
<td class="px-4 py-3">{{ $customer->name }}</td>
|
|
<td class="px-4 py-3">{{ $customer->email }}</td>
|
|
<td class="px-4 py-3">{{ $customer->address ?? '-' }}</td>
|
|
<td class="px-4 py-3">{{ $customer->phone ?? '-' }}</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex gap-2">
|
|
<button class="bg-blue-600 text-white px-4 py-1 rounded hover:bg-blue-700 text-xs edit-btn" data-id="{{ $customer->id }}">
|
|
Edit
|
|
</button>
|
|
<form action="{{ route('user.customers.delete', $customer->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus customer ini?')" class="inline-block">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button class="bg-red-600 text-white px-4 py-1 rounded hover:bg-red-700 text-xs">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Edit Customer -->
|
|
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 hidden" id="editModal">
|
|
<div class="bg-white rounded-lg p-6 w-full sm:w-96 shadow-lg">
|
|
<h3 class="text-xl font-semibold text-gray-700 mb-4">Edit Customer</h3>
|
|
<form id="editCustomerForm" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="_method" value="PUT">
|
|
<input type="hidden" name="id" id="edit-id">
|
|
|
|
<div class="mb-4">
|
|
<label for="edit-email" class="block text-sm font-medium text-gray-700">Email</label>
|
|
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" name="email" id="edit-email" required>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="edit-password" class="block text-sm font-medium text-gray-700">Password Baru (kosongkan jika tidak diubah)</label>
|
|
<input type="password" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" name="password" id="edit-password">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="edit-password_confirmation" class="block text-sm font-medium text-gray-700">Konfirmasi Password</label>
|
|
<input type="password" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" name="password_confirmation" id="edit-password_confirmation">
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-4">
|
|
<button type="button" class="px-4 py-2 bg-gray-300 text-black rounded-lg" onclick="closeModal()">Batal</button>
|
|
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Simpan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.edit-btn').click(function () {
|
|
var id = $(this).data('id');
|
|
$.get("{{ url('user/customers') }}/" + id + "/edit", function (data) {
|
|
$('#edit-id').val(data.id);
|
|
$('#edit-email').val(data.email);
|
|
$('#editCustomerForm').attr('action', "{{ url('user/customers') }}/" + data.id);
|
|
$('#editModal').removeClass('hidden').fadeIn();
|
|
});
|
|
});
|
|
|
|
$('#editCustomerForm').submit(function (e) {
|
|
e.preventDefault();
|
|
var form = $(this);
|
|
var actionUrl = form.attr('action');
|
|
|
|
$.ajax({
|
|
url: actionUrl,
|
|
method: 'PUT',
|
|
data: form.serialize(),
|
|
success: function(response) {
|
|
window.location.reload();
|
|
},
|
|
error: function(response) {
|
|
alert('Terjadi kesalahan');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function closeModal() {
|
|
$('#editModal').addClass('hidden').fadeOut();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|