@extends('layouts.admin')

@section('title', 'Daftar Produk')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Produk</li>
            </ol>
        </nav>
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div class="d-flex align-items-center gap-3">
                <img src="{{ asset('logo/logo.png') . '?v=2' }}" alt="Lazy Store" style="width:42px;height:42px;border-radius:10px;object-fit:cover;border:1.5px solid #bbf7d0;box-shadow:0 2px 8px rgba(22,163,74,.2);">
                <div>
                    <h1 class="h3 fw-bold text-dark mb-0">Manajemen Produk</h1>
                    <p class="text-muted small mb-0">Kelola katalog barang, stok, harga, dan gambar produk Lazy Store.</p>
                </div>
            </div>
            <a href="{{ route('admin.products.create') }}" class="btn btn-purple d-inline-flex align-items-center gap-2 shadow-sm">
                <i class="bi bi-plus-circle"></i>
                <span>Tambah Produk</span>
            </a>
        </div>
    </div>
</div>

<div class="card card-custom">
    <div class="card-body p-4">
        <!-- Pencarian & Filter -->
        <form action="{{ route('admin.products.index') }}" method="GET" class="mb-4">
            <div class="row g-2 align-items-center">
                <!-- Search Keyword -->
                <div class="col-12 col-md-4 col-lg-4">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0 text-muted">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" name="search" class="form-control border-start-0 ps-0" 
                               placeholder="Cari nama atau deskripsi..." 
                               value="{{ request('search') }}">
                    </div>
                </div>

                <!-- Filter Kategori -->
                <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                    <select name="category_id" class="form-select">
                        <option value="">-- Semua Kategori --</option>
                        @foreach ($categories as $cat)
                            <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Filter Status Stok -->
                <div class="col-12 col-sm-6 col-md-3 col-lg-2">
                    <select name="stock_status" class="form-select">
                        <option value="">-- Semua Stok --</option>
                        <option value="in_stock" {{ request('stock_status') === 'in_stock' ? 'selected' : '' }}>Tersedia (>5)</option>
                        <option value="low_stock" {{ request('stock_status') === 'low_stock' ? 'selected' : '' }}>Menipis (1-5)</option>
                        <option value="out_of_stock" {{ request('stock_status') === 'out_of_stock' ? 'selected' : '' }}>Habis (0)</option>
                    </select>
                </div>

                <!-- Tombol Filter & Reset -->
                <div class="col-12 col-md-2 col-lg-3 d-flex gap-1 justify-content-md-end">
                    <button class="btn btn-outline-secondary d-inline-flex align-items-center gap-1" type="submit">
                        <i class="bi bi-funnel"></i>
                        <span>Filter</span>
                    </button>
                    @if (request('search') || request('category_id') || request('stock_status'))
                        <a href="{{ route('admin.products.index') }}" class="btn btn-light border" title="Reset Semua Filter">
                            <i class="bi bi-x-lg"></i>
                        </a>
                    @endif
                    <span class="badge bg-purple-subtle text-purple border border-purple-subtle px-3 py-2 rounded-pill d-none d-lg-inline-flex align-items-center ms-auto">
                        Total: {{ $products->total() }} Produk
                    </span>
                </div>
            </div>
        </form>

        <!-- Tabel Produk -->
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th scope="col" style="width: 50px;" class="text-center">#</th>
                        <th scope="col" style="width: 80px;" class="text-center">Gambar</th>
                        <th scope="col">Nama & Kategori</th>
                        <th scope="col">Harga</th>
                        <th scope="col" class="text-center">Stok</th>
                        <th scope="col" class="text-center">Status</th>
                        <th scope="col" class="text-center" style="width: 200px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($products as $index => $product)
                        <tr>
                            <td class="text-center fw-semibold text-muted">
                                {{ $products->firstItem() + $index }}
                            </td>
                            <td class="text-center">
                                @if ($product->image_url)
                                    <img src="{{ $product->image_url }}" 
                                         alt="{{ $product->name }}" 
                                         class="rounded border shadow-sm object-fit-cover" 
                                         style="width: 54px; height: 54px;"
                                         onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'54\' height=\'54\' fill=\'%23cbd5e1\' viewBox=\'0 0 16 16\'><rect width=\'16\' height=\'16\' fill=\'%23f1f5f9\'/><path d=\'M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\'/><path d=\'M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z\'/></svg>';">
                                @else
                                    <div class="rounded border bg-light d-flex align-items-center justify-content-center mx-auto text-secondary" 
                                         style="width: 54px; height: 54px;" 
                                         title="Tidak ada gambar">
                                        <i class="bi bi-image fs-4 text-muted"></i>
                                    </div>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <a href="{{ route('admin.products.show', $product) }}" class="fw-bold text-dark text-decoration-none hover-primary">
                                        {{ $product->name }}
                                    </a>
                                    <div class="d-flex align-items-center gap-2 mt-1">
                                        <span class="badge bg-purple-subtle text-purple border border-purple-subtle rounded-pill small">
                                            <i class="bi bi-tag-fill me-1"></i>{{ $product->category->name ?? 'Tanpa Kategori' }}
                                        </span>
                                        <code class="text-secondary small">{{ $product->slug }}</code>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="fw-bold text-dark fs-6">{{ $product->formatted_price }}</span>
                            </td>
                            <td class="text-center">
                                @if ($product->stock <= 0)
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-1">
                                        <i class="bi bi-x-circle me-1"></i>Habis (0)
                                    </span>
                                @elseif ($product->stock <= 5)
                                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle rounded-pill px-3 py-1">
                                        <i class="bi bi-exclamation-triangle me-1"></i>Sisa {{ $product->stock }}
                                    </span>
                                @else
                                    <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1">
                                        <i class="bi bi-check-circle me-1"></i>{{ $product->stock }} Unit
                                    </span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if ($product->is_active)
                                    <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2 py-1">
                                        <i class="bi bi-dot fs-6 align-middle"></i>Aktif
                                    </span>
                                @else
                                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-2 py-1">
                                        <i class="bi bi-dot fs-6 align-middle"></i>Nonaktif
                                    </span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="d-inline-flex gap-1">
                                    <a href="{{ route('admin.products.show', $product) }}" 
                                       class="btn btn-sm btn-outline-info d-inline-flex align-items-center"
                                       title="Lihat Detail Produk">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.products.edit', $product) }}" 
                                       class="btn btn-sm btn-outline-primary d-inline-flex align-items-center"
                                       title="Edit Produk">
                                        <i class="bi bi-pencil-square"></i>
                                    </a>
                                    <button type="button" 
                                            class="btn btn-sm btn-outline-danger d-inline-flex align-items-center gap-1" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#deleteProductModal"
                                            data-product-id="{{ $product->id }}"
                                            data-product-name="{{ $product->name }}"
                                            data-product-price="{{ $product->formatted_price }}"
                                            data-product-stock="{{ $product->stock }}"
                                            data-product-image="{{ $product->image_url }}"
                                            data-delete-url="{{ route('admin.products.destroy', $product) }}"
                                            title="Hapus Produk">
                                        <i class="bi bi-trash"></i>
                                        <span>Hapus</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <div class="py-4">
                                    <i class="bi bi-box2 text-muted" style="font-size: 3.5rem;"></i>
                                    <h5 class="mt-3 text-secondary">Belum ada produk yang ditemukan</h5>
                                    @if (request('search') || request('category_id') || request('stock_status'))
                                        <p class="text-muted small mb-3">Tidak ada hasil yang sesuai dengan filter pencarian Anda.</p>
                                        <a href="{{ route('admin.products.index') }}" class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-arrow-repeat me-1"></i> Reset Filter
                                        </a>
                                    @else
                                        <p class="text-muted small mb-3">Mulai tambahkan produk pertama Anda untuk mengisi etalase lazy store.</p>
                                        <a href="{{ route('admin.products.create') }}" class="btn btn-sm btn-primary">
                                            <i class="bi bi-plus-circle me-1"></i> Tambah Produk Pertama
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Paginasi -->
        @if ($products->hasPages())
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-4 pt-3 border-top">
                <div class="small text-muted">
                    Menampilkan {{ $products->firstItem() }} sampai {{ $products->lastItem() }} dari {{ $products->total() }} produk
                </div>
                <div>
                    {{ $products->links('pagination::bootstrap-5') }}
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@section('modals')
<!-- Modal Konfirmasi Hapus Produk -->
<div class="modal fade" id="deleteProductModal" tabindex="-1" aria-labelledby="deleteProductModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title d-flex align-items-center gap-2" id="deleteProductModalLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <span>Konfirmasi Hapus Produk</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="deleteProductForm" method="POST" action="">
                @csrf
                @method('DELETE')
                <div class="modal-body p-4">
                    <p class="mb-3 text-secondary">Apakah Anda yakin ingin menghapus produk ini dari katalog?</p>
                    <div class="d-flex align-items-center gap-3 p-3 bg-light rounded border mb-3">
                        <img id="modalProductImage" 
                             src="" 
                             alt="Produk" 
                             class="rounded border bg-white object-fit-cover" 
                             style="width: 60px; height: 60px; display: none;">
                        <div id="modalProductImagePlaceholder" 
                             class="rounded border bg-white d-flex align-items-center justify-content-center text-secondary" 
                             style="width: 60px; height: 60px;">
                            <i class="bi bi-image fs-4 text-muted"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold text-dark mb-1" id="modalProductName">-</h6>
                            <div class="small text-muted">
                                Harga: <strong class="text-dark" id="modalProductPrice">-</strong> &bull; Stok: <strong class="text-dark" id="modalProductStock">-</strong> Unit
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-warning small mb-0 d-flex align-items-start gap-2">
                        <i class="bi bi-info-circle-fill text-warning fs-5 flex-shrink-0"></i>
                        <span>Gambar dan data produk akan dihapus secara permanen. Jika produk sudah pernah memiliki transaksi pesanan, sistem akan memblokir penghapusan.</span>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger d-inline-flex align-items-center gap-1">
                        <i class="bi bi-trash-fill"></i>
                        <span>Ya, Hapus Produk</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteModal = document.getElementById('deleteProductModal');
        if (deleteModal) {
            deleteModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget || document.activeElement;
                if (!button) return;

                const targetBtn = button.closest ? (button.closest('[data-bs-target="#deleteProductModal"]') || button) : button;
                const name = targetBtn.getAttribute('data-product-name');
                const price = targetBtn.getAttribute('data-product-price');
                const stock = targetBtn.getAttribute('data-product-stock');
                const image = targetBtn.getAttribute('data-product-image');
                const deleteUrl = targetBtn.getAttribute('data-delete-url');

                const form = document.getElementById('deleteProductForm');
                const nameEl = document.getElementById('modalProductName');
                const priceEl = document.getElementById('modalProductPrice');
                const stockEl = document.getElementById('modalProductStock');
                const imageEl = document.getElementById('modalProductImage');
                const placeholderEl = document.getElementById('modalProductImagePlaceholder');

                if (form && deleteUrl) {
                    form.action = deleteUrl;
                }
                if (nameEl) nameEl.textContent = name || '-';
                if (priceEl) priceEl.textContent = price || '-';
                if (stockEl) stockEl.textContent = stock || '0';

                if (imageEl && placeholderEl) {
                    if (image && image.trim() !== '') {
                        imageEl.src = image;
                        imageEl.style.display = 'block';
                        placeholderEl.style.display = 'none';
                    } else {
                        imageEl.src = '';
                        imageEl.style.display = 'none';
                        placeholderEl.style.display = 'flex';
                    }
                }
            });
        }
    });
</script>
@endpush