292 lines
17 KiB
PHP
292 lines
17 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">Produk Flash Sale</h1>
|
|
<p class="text-gray-600">{{ $flashSale->nama }} ({{ $flashSale->waktu_mulai->format('d/m/Y H:i') }} - {{ $flashSale->waktu_selesai->format('d/m/Y H:i') }})</p>
|
|
</div>
|
|
<a href="{{ route('admin.flash-sales.index') }}" class="btn-secondary">
|
|
<i class="fas fa-arrow-left mr-2"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="mb-4 bg-green-100 p-4 rounded-md text-green-700">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Form Tambah Produk Flash Sale -->
|
|
<div class="lg:col-span-1">
|
|
<div class="card p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Tambah Produk ke Flash Sale</h2>
|
|
|
|
<form action="{{ route('admin.flash-sales.items.store', $flashSale) }}" method="POST">
|
|
@csrf
|
|
|
|
<!-- Pilih Produk -->
|
|
<div class="mb-4">
|
|
<label for="barang_id" class="block text-sm font-medium text-gray-700 mb-1">Pilih Produk <span class="text-red-500">*</span></label>
|
|
<select name="barang_id" id="barang_id" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200" required>
|
|
<option value="">-- Pilih Produk --</option>
|
|
@foreach($barangs as $barang)
|
|
<option value="{{ $barang->id }}" {{ old('barang_id') == $barang->id ? 'selected' : '' }}>
|
|
{{ $barang->nama }} - Rp {{ number_format($barang->harga, 0, ',', '.') }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('barang_id')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Harga Flash Sale -->
|
|
<div class="mb-4">
|
|
<label for="harga_flash_sale" class="block text-sm font-medium text-gray-700 mb-1">Harga Flash Sale <span class="text-red-500">*</span></label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<span class="text-gray-500 sm:text-sm">Rp</span>
|
|
</div>
|
|
<input type="number" name="harga_flash_sale" id="harga_flash_sale" min="0" value="{{ old('harga_flash_sale') }}" class="w-full pl-10 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200" required>
|
|
</div>
|
|
@error('harga_flash_sale')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Persentase Diskon -->
|
|
<div class="mb-4">
|
|
<label for="persentase_diskon" class="block text-sm font-medium text-gray-700 mb-1">Persentase Diskon (opsional)</label>
|
|
<div class="relative">
|
|
<input type="number" name="persentase_diskon" id="persentase_diskon" min="0" max="100" value="{{ old('persentase_diskon') }}" class="w-full pr-10 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200">
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<span class="text-gray-500 sm:text-sm">%</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">Akan dihitung otomatis jika dibiarkan kosong</p>
|
|
@error('persentase_diskon')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Stok Flash Sale -->
|
|
<div class="mb-4">
|
|
<label for="stok_flash_sale" class="block text-sm font-medium text-gray-700 mb-1">Stok Flash Sale <span class="text-red-500">*</span></label>
|
|
<input type="number" name="stok_flash_sale" id="stok_flash_sale" min="1" value="{{ old('stok_flash_sale') }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200" required>
|
|
<p class="text-xs text-gray-500 mt-1">Berapa unit yang tersedia untuk flash sale ini</p>
|
|
@error('stok_flash_sale')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
|
|
<div class="mt-2">
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" name="aktif" value="1" class="rounded-full border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200" {{ old('aktif', '1') == '1' ? 'checked' : '' }}>
|
|
<span class="ml-2 text-sm text-gray-700">Aktif</span>
|
|
</label>
|
|
<label class="inline-flex items-center ml-6">
|
|
<input type="radio" name="aktif" value="0" class="rounded-full border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200" {{ old('aktif') == '0' ? 'checked' : '' }}>
|
|
<span class="ml-2 text-sm text-gray-700">Nonaktif</span>
|
|
</label>
|
|
</div>
|
|
@error('aktif')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<button type="submit" class="btn-primary w-full">
|
|
<i class="fas fa-plus mr-2"></i> Tambah Produk
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Daftar Produk Flash Sale -->
|
|
<div class="lg:col-span-2">
|
|
<div class="card overflow-hidden">
|
|
<div class="p-6 border-b border-gray-200">
|
|
<h2 class="text-lg font-semibold text-gray-800">Daftar Produk dalam Flash Sale</h2>
|
|
<p class="text-sm text-gray-600">Total: {{ $flashSale->items->count() }} produk</p>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Produk</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Harga</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stok</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@forelse($flashSale->items as $item)
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
@if($item->barang->gambar)
|
|
<img src="{{ Storage::url($item->barang->gambar) }}" alt="{{ $item->barang->nama }}" class="h-10 w-10 rounded-full object-cover mr-3">
|
|
@else
|
|
<div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
|
|
<i class="fas fa-box text-gray-400"></i>
|
|
</div>
|
|
@endif
|
|
<div>
|
|
<div class="text-sm font-medium text-gray-900">{{ $item->barang->nama }}</div>
|
|
<div class="text-xs text-gray-500">SKU: {{ $item->barang->kode ?? 'N/A' }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-gray-900">Rp {{ number_format($item->harga_flash_sale, 0, ',', '.') }}</div>
|
|
<div class="text-xs text-green-600">
|
|
<i class="fas fa-tag mr-1"></i> Diskon {{ $item->persentase_diskon }}%
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
<i class="fas fa-store mr-1"></i> Normal: Rp {{ number_format($item->barang->harga, 0, ',', '.') }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-gray-900">{{ $item->stok_flash_sale }} unit</div>
|
|
<div class="text-xs text-gray-500">
|
|
<i class="fas fa-shopping-cart mr-1"></i> Terjual: {{ $item->stok_terjual }}
|
|
</div>
|
|
<div class="text-xs text-blue-600">
|
|
<i class="fas fa-box-open mr-1"></i> Sisa: {{ $item->stok_flash_sale - $item->stok_terjual }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $item->aktif ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
|
|
{{ $item->aktif ? 'Aktif' : 'Nonaktif' }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<button type="button" class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="editItem({{ $item->id }})">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
<form action="{{ route('admin.flash-sales.items.destroy', $item) }}" method="POST" class="inline-block">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Apakah Anda yakin ingin menghapus produk ini dari flash sale?')">
|
|
<i class="fas fa-trash"></i> Hapus
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-4 text-center text-gray-500">
|
|
Belum ada produk dalam flash sale ini.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Edit Item -->
|
|
<div id="editModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-medium text-gray-900">Edit Produk Flash Sale</h3>
|
|
<button type="button" onclick="closeModal()" class="text-gray-400 hover:text-gray-500">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="editForm" action="" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Harga Flash Sale -->
|
|
<div class="mb-4">
|
|
<label for="edit_harga_flash_sale" class="block text-sm font-medium text-gray-700 mb-1">Harga Flash Sale <span class="text-red-500">*</span></label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<span class="text-gray-500 sm:text-sm">Rp</span>
|
|
</div>
|
|
<input type="number" name="harga_flash_sale" id="edit_harga_flash_sale" min="0" class="w-full pl-10 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Persentase Diskon -->
|
|
<div class="mb-4">
|
|
<label for="edit_persentase_diskon" class="block text-sm font-medium text-gray-700 mb-1">Persentase Diskon</label>
|
|
<div class="relative">
|
|
<input type="number" name="persentase_diskon" id="edit_persentase_diskon" min="0" max="100" class="w-full pr-10 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200">
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<span class="text-gray-500 sm:text-sm">%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stok Flash Sale -->
|
|
<div class="mb-4">
|
|
<label for="edit_stok_flash_sale" class="block text-sm font-medium text-gray-700 mb-1">Stok Flash Sale <span class="text-red-500">*</span></label>
|
|
<input type="number" name="stok_flash_sale" id="edit_stok_flash_sale" min="1" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200" required>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
|
|
<div class="mt-2">
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" name="aktif" id="edit_aktif_1" value="1" class="rounded-full border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200">
|
|
<span class="ml-2 text-sm text-gray-700">Aktif</span>
|
|
</label>
|
|
<label class="inline-flex items-center ml-6">
|
|
<input type="radio" name="aktif" id="edit_aktif_0" value="0" class="rounded-full border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200">
|
|
<span class="ml-2 text-sm text-gray-700">Nonaktif</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 flex justify-end">
|
|
<button type="button" onclick="closeModal()" class="btn-secondary mr-3">Batal</button>
|
|
<button type="submit" class="btn-primary">Simpan Perubahan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function editItem(id) {
|
|
fetch(`/admin/flash-sales/items/${id}/data`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('editForm').action = `/admin/flash-sales/items/${id}`;
|
|
document.getElementById('edit_harga_flash_sale').value = data.harga_flash_sale;
|
|
document.getElementById('edit_persentase_diskon').value = data.persentase_diskon;
|
|
document.getElementById('edit_stok_flash_sale').value = data.stok_flash_sale;
|
|
|
|
if (data.aktif) {
|
|
document.getElementById('edit_aktif_1').checked = true;
|
|
} else {
|
|
document.getElementById('edit_aktif_0').checked = true;
|
|
}
|
|
|
|
document.getElementById('editModal').classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('editModal').classList.add('hidden');
|
|
}
|
|
</script>
|
|
@endpush
|