@extends('layouts.admin')

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

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Produk</li>
@endsection

@section('content')
<!-- Header Page -->
<div class="row align-items-center mb-4">
    <div class="col-md-7">
        <h3 class="fw-bold text-dark mb-1">
            <i class="bi bi-box-seam-fill text-shazka-pink me-2"></i>Kelola Produk Shazkabags
        </h3>
        <p class="text-muted small mb-0">Manajemen katalog tas, penetapan harga, kontrol stok, serta informasi produk Shazkabags.</p>
    </div>
    <div class="col-md-5 text-md-end mt-3 mt-md-0">
        <a href="{{ route('admin.products.create') }}" class="btn btn-primary btn-rounded shadow-sm px-3 py-2">
            <i class="bi bi-plus-circle me-1.5"></i>Tambah Produk Baru
        </a>
    </div>
</div>

<!-- Summary Metric Cards -->
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card h-100 border-0 shadow-sm bg-white">
            <div class="card-body d-flex align-items-center justify-content-between p-3">
                <div>
                    <span class="text-muted small fw-semibold text-uppercase">Total Produk</span>
                    <h3 class="fw-bold text-dark mb-0 mt-1">{{ $totalProducts }}</h3>
                    <span class="text-muted small">Katalog keseluruhan</span>
                </div>
                <div class="bg-primary-subtle text-primary p-3 rounded-4">
                    <i class="bi bi-boxes fs-3"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card h-100 border-0 shadow-sm bg-white">
            <div class="card-body d-flex align-items-center justify-content-between p-3">
                <div>
                    <span class="text-muted small fw-semibold text-uppercase">Produk Aktif</span>
                    <h3 class="fw-bold text-success mb-0 mt-1">{{ $activeProducts }}</h3>
                    <span class="text-success small"><i class="bi bi-check-circle me-1"></i>Tampil di etalase</span>
                </div>
                <div class="bg-success-subtle text-success p-3 rounded-4">
                    <i class="bi bi-check2-circle fs-3"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card h-100 border-0 shadow-sm bg-white">
            <div class="card-body d-flex align-items-center justify-content-between p-3">
                <div>
                    <span class="text-muted small fw-semibold text-uppercase">Stok Habis</span>
                    <h3 class="fw-bold text-danger mb-0 mt-1">{{ $outOfStockProducts }}</h3>
                    <span class="text-danger small"><i class="bi bi-exclamation-octagon me-1"></i>Perlu restok segera</span>
                </div>
                <div class="bg-danger-subtle text-danger p-3 rounded-4">
                    <i class="bi bi-slash-circle-fill fs-3"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card h-100 border-0 shadow-sm bg-white">
            <div class="card-body d-flex align-items-center justify-content-between p-3">
                <div>
                    <span class="text-muted small fw-semibold text-uppercase">Total Kategori</span>
                    <h3 class="fw-bold text-info mb-0 mt-1">{{ $totalCategories }}</h3>
                    <a href="{{ route('admin.categories.index') }}" class="text-info text-decoration-none small">
                        Kelola Kategori <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
                <div class="bg-info-subtle text-info p-3 rounded-4">
                    <i class="bi bi-tags-fill fs-3"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter and Search -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-3">
        <form action="{{ route('admin.products.index') }}" method="GET" class="row g-2 align-items-center">
            <!-- Keyword Search -->
            <div class="col-lg-4 col-md-6">
                <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" 
                           value="{{ request('search') }}" 
                           class="form-control border-start-0 ps-0" 
                           placeholder="Cari nama produk, SKU, atau deskripsi...">
                </div>
            </div>

            <!-- Kategori Dropdown -->
            <div class="col-lg-3 col-md-6">
                <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>

            <!-- Status Aktif Dropdown -->
            <div class="col-lg-2 col-md-4">
                <select name="status" class="form-select">
                    <option value="">Semua Status</option>
                    <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Hanya Aktif</option>
                    <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Hanya Nonaktif</option>
                </select>
            </div>

            <!-- Status Stok Dropdown -->
            <div class="col-lg-2 col-md-4">
                <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 Submit & Reset -->
            <div class="col-lg-1 col-md-4 d-flex gap-1">
                <button type="submit" class="btn btn-dark btn-rounded flex-grow-1" title="Terapkan Filter">
                    <i class="bi bi-funnel"></i>
                </button>
                @if (request()->hasAny(['search', 'category_id', 'status', 'stock_status']))
                    <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-rounded" title="Reset filter">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                @endif
            </div>
        </form>
    </div>
</div>

<!-- Table Card -->
<div class="card border-0 shadow-sm overflow-hidden">
    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
        <h5 class="fw-bold mb-0">Daftar Data Produk</h5>
        <span class="badge bg-secondary-subtle text-secondary rounded-pill px-3 py-1.5">
            Total: {{ $products->total() }} Produk
        </span>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light text-uppercase text-muted" style="font-size: 11px; letter-spacing: 0.05em;">
                <tr>
                    <th scope="col" class="ps-4" style="width: 50px;">#</th>
                    <th scope="col" style="width: 75px;">Gambar</th>
                    <th scope="col">Nama Produk & Kategori</th>
                    <th scope="col" style="width: 140px;">SKU</th>
                    <th scope="col" style="width: 150px;">Harga</th>
                    <th scope="col" class="text-center" style="width: 110px;">Stok</th>
                    <th scope="col" class="text-center" style="width: 110px;">Status</th>
                    <th scope="col" class="text-end pe-4" style="width: 150px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($products as $index => $product)
                    <tr>
                        <!-- Nomor Urut -->
                        <td class="ps-4 text-muted fw-semibold">
                            {{ $products->firstItem() + $index }}
                        </td>

                        <!-- Thumbnail Gambar -->
                        <td>
                            @if ($product->image_url)
                                <img src="{{ $product->image_url }}" 
                                     alt="{{ $product->name }}" 
                                     class="rounded-3 border object-fit-cover shadow-xs" 
                                     width="54" 
                                     height="54"
                                     loading="lazy">
                            @else
                                <div class="rounded-3 bg-light border text-muted d-flex align-items-center justify-content-center" style="width: 54px; height: 54px;">
                                    <i class="bi bi-image text-secondary fs-4"></i>
                                </div>
                            @endif
                        </td>

                        <!-- Nama Produk & Kategori -->
                        <td>
                            <div class="fw-bold text-dark">
                                <a href="{{ route('admin.products.show', $product) }}" class="text-decoration-none text-dark hover-primary">
                                    {{ $product->name }}
                                </a>
                                @if ($product->is_featured)
                                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle ms-1" style="font-size: 10px;">
                                        <i class="bi bi-star-fill text-warning"></i> Unggulan
                                    </span>
                                @endif
                            </div>
                            <div class="d-flex align-items-center gap-2 mt-1">
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle" style="font-size: 11px;">
                                    <i class="bi bi-tag-fill me-1"></i>{{ $product->category->name ?? 'Tanpa Kategori' }}
                                </span>
                                <span class="text-muted small font-monospace" style="font-size: 11px;">
                                    /{{ $product->slug }}
                                </span>
                            </div>
                        </td>

                        <!-- SKU -->
                        <td>
                            <span class="badge bg-light text-secondary border font-monospace px-2 py-1">
                                {{ $product->sku }}
                            </span>
                        </td>

                        <!-- Harga -->
                        <td class="fw-bold text-dark">
                            Rp {{ number_format($product->price, 0, ',', '.') }}
                        </td>

                        <!-- Stok -->
                        <td class="text-center">
                            @if ($product->stock <= 0)
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-2.5 py-1">
                                    Habis (0)
                                </span>
                            @elseif ($product->stock <= 5)
                                <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-2.5 py-1" title="Stok menipis!">
                                    {{ $product->stock }} unit
                                </span>
                            @else
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1">
                                    {{ $product->stock }} unit
                                </span>
                            @endif
                        </td>

                        <!-- Status Aktif -->
                        <td class="text-center">
                            @if ($product->is_active)
                                <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1">
                                    <i class="bi bi-dot"></i>Aktif
                                </span>
                            @else
                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle rounded-pill px-2.5 py-1">
                                    <i class="bi bi-dot"></i>Nonaktif
                                </span>
                            @endif
                        </td>

                        <!-- Tombol Aksi -->
                        <td class="text-end pe-4">
                            <div class="btn-group btn-group-sm" role="group">
                                <a href="{{ route('admin.products.show', $product) }}" class="btn btn-outline-secondary" title="Detail Produk">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-outline-primary" title="Edit Produk">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <button type="button" 
                                        class="btn btn-outline-danger" 
                                        title="Hapus Produk"
                                        onclick="confirmDeleteProduct('{{ route('admin.products.destroy', $product) }}', '{{ addslashes($product->name) }}')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <div class="text-muted mb-2">
                                <i class="bi bi-inbox fs-1 d-block text-secondary opacity-50 mb-2"></i>
                                <span class="fw-semibold">Tidak ada produk ditemukan.</span>
                            </div>
                            @if (request()->hasAny(['search', 'category_id', 'status', 'stock_status']))
                                <p class="small text-muted mb-3">Coba ubah kata kunci pencarian atau reset filter.</p>
                                <a href="{{ route('admin.products.index') }}" class="btn btn-sm btn-outline-secondary btn-rounded">
                                    Reset Filter
                                </a>
                            @else
                                <p class="small text-muted mb-3">Katalog produk Shazkabags Anda masih kosong. Silakan tambahkan produk pertama.</p>
                                <a href="{{ route('admin.products.create') }}" class="btn btn-sm btn-primary btn-rounded">
                                    <i class="bi bi-plus-lg me-1"></i>Tambah Produk Sekarang
                                </a>
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination Footer -->
    @if ($products->hasPages())
        <div class="card-footer bg-white py-3 d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
            <span class="small text-muted">
                Menampilkan {{ $products->firstItem() }} s/d {{ $products->lastItem() }} dari {{ $products->total() }} produk
            </span>
            <div>
                {{ $products->links('pagination::bootstrap-5') }}
            </div>
        </div>
    @endif
</div>

<!-- Modal Konfirmasi Hapus Produk Bootstrap -->
<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 border-0">
                <h5 class="modal-title fs-6" id="deleteProductModalLabel">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>Konfirmasi Hapus Produk
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <div class="w-16 h-16 mx-auto mb-3 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                    <i class="bi bi-trash3 fs-2"></i>
                </div>
                <h5 class="fw-bold text-dark mb-2">Hapus Produk Ini?</h5>
                <p class="text-muted small mb-0">
                    Apakah Anda yakin ingin menghapus produk <strong id="deleteProductName" class="text-dark"></strong> secara permanen dari etalase toko?
                </p>
                <div class="alert alert-light border small text-start mt-3 mb-0 text-muted">
                    <i class="bi bi-info-circle me-1 text-primary"></i> File gambar yang tersimpan juga akan dibersihkan dari server.
                </div>
            </div>
            <div class="modal-footer border-0 bg-light px-4 py-3">
                <button type="button" class="btn btn-outline-secondary btn-rounded" data-bs-dismiss="modal">Batal</button>
                <form id="deleteProductForm" method="POST" action="">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-rounded px-3">
                        <i class="bi bi-trash me-1"></i>Hapus Permanen
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function confirmDeleteProduct(url, name) {
        const form = document.getElementById('deleteProductForm');
        form.action = url;
        
        document.getElementById('deleteProductName').textContent = name;

        const modal = new bootstrap.Modal(document.getElementById('deleteProductModal'));
        modal.show();
    }
</script>
@endpush