@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