@extends('layouts.app2')

@section('content')

    {{-- ==========================================
    1. IMPORT GOOGLE FONT: POPPINS
    ========================================== --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    {{-- ==========================================
    2. CSS KUSTOM HALAMAN KELOLA PRODUK
    ========================================== --}}
    <style>
        /* GLOBAL FONT & BACKGROUND */
        body {
            font-family: 'Poppins', sans-serif !important;
            background-color: #F8F9FA;
            margin-bottom: 2rem;
        }

        /* Navigasi Tab Admin */
        .admin-tabs-wrapper {
            background-color: #1F2937;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        .admin-tab {
            flex: 1;
            text-align: center;
            padding: 14px 0;
            color: #ffffff;
            font-weight: 500;
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .admin-tab:hover {
            background-color: #374151;
            color: #e2e8f0;
        }

        .admin-tab.active {
            background-color: #3498db;
            color: #ffffff;
            font-weight: 600;
        }

        /* Header (Title, Search, Button Tambah) */
        .page-title {
            font-weight: 700;
            color: #1a202c;
            font-size: 24px;
        }

        .search-input-admin {
            background-color: #e2e8f0;
            border: none;
            font-size: 14px;
            border-radius: 6px 0 0 6px !important;
        }

        .search-input-admin:focus {
            background-color: #cbd5e1;
            box-shadow: none;
        }

        .btn-search-admin {
            background-color: #2D9CDB;
            border: none;
            color: white;
            border-radius: 0 9px 9px 0 !important;
            padding: 0 16px;
        }

        .btn-add-product {
            background-color: #27ae60;
            border: none;
            color: white;
            font-weight: 500;
            font-size: 14px;
            border-radius: 6px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: 0.2s;
        }

        .btn-add-product:hover {
            background-color: #219653;
            color: white;
        }

        /* Kartu Produk */
        .admin-card {
            background: #ffffff;
            border-radius: 12px;
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
            transition: transform 0.2s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .admin-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .img-wrapper {
            position: relative;
            background-color: #f3f4f6;
            border-radius: 12px 12px 0 0;
            height: 300px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .status-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .badge-new {
            background-color: #27ae60;
        }

        .badge-second {
            background-color: #64748b;
        }

        .card-content {
            padding: 16px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .prod-title {
            font-size: 16px;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .prod-cat {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 12px;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .prod-price {
            font-size: 18px;
            font-weight: 700;
            color: #f97316;
        }

        .prod-stock {
            font-size: 10px;
            font-weight: 700;
            color: #22c55e;
        }

        .divider {
            height: 1px;
            background-color: #e2e8f0;
            margin-bottom: 12px;
        }

        .prod-stats {
            font-size: 11px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 16px;
            font-weight: 500;
        }

        /* Tombol Aksi */
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: auto;
        }

        .btn-edit {
            flex: 1;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            padding: 8px 0;
            transition: 0.2s;
            text-decoration: none;
            text-align: center;
        }

        .btn-edit:hover {
            background-color: #2980b9;
            color: white;
        }

        .btn-hapus {
            flex: 1;
            background-color: #ffedd5;
            color: #f97316;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            padding: 8px 0;
            transition: 0.2s;
            cursor: pointer;
        }

        .btn-hapus:hover {
            background-color: #fed7aa;
            color: #ea580c;
        }

        /* ==========================================
                           POP-UP KONFIRMASI HAPUS
                           ========================================== */
        .delete-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.4);
            /* Latar belakang gelap transparan */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .delete-modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .delete-modal-content {
            background-color: #ffffff;
            width: 420px;
            max-width: 90%;
            padding: 40px 40px 30px;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            text-align: center;
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }

        .delete-modal-overlay.show .delete-modal-content {
            transform: scale(1);
        }

        .delete-icon-wrapper {
            font-size: 90px;
            color: #FF0000;
            /* Merah cerah */
            line-height: 1;
            margin-bottom: 20px;
        }

        .delete-modal-text {
            font-size: 16px;
            font-weight: 600;
            color: #1a202c;
            margin-bottom: 40px;
            line-height: 1.5;
        }

        .delete-modal-actions {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }

        .btn-confirm-delete {
            background-color: #FF0000;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 24px;
            font-weight: 600;
            font-size: 14px;
            transition: 0.2s;
        }

        .btn-confirm-delete:hover {
            background-color: #cc0000;
        }

        .btn-cancel-delete {
            background-color: #0088cc;
            /* Biru sesuai gambar */
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 30px;
            font-weight: 600;
            font-size: 14px;
            transition: 0.2s;
        }

        .btn-cancel-delete:hover {
            background-color: #006699;
        }

        /* ==========================================
                           PENGATURAN TINGGI & PANJANG ACTION HEADER
                           ========================================== */

        /* 1. Mengatur TINGGI agar kotak search dan tombol tambah sama rata */
        .header-action-group .form-control,
        .header-action-group .btn-search-admin,
        .header-action-group .btn-add-product {
            height: 42px;
            /* Silakan ubah angka ini untuk mengatur tinggi (misal: 45px, 50px) */
        }

        /* 2. Mengatur PANJANG kotak pencarian */
        .header-action-group .input-group {
            width: 300px;
            /* Silakan ubah angka ini untuk memanjangkan/memendekkan kotak search */
            max-width: 100%;
            /* Memastikan form tidak keluar layar saat dibuka di HP */
        }

        /* 3. Mengatur tata letak ikon dan teks di dalam tombol Tambah Produk agar pas di tengah */
        .header-action-group .btn-add-product {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            /* Mengatur jarak teks ke pinggir tombol (lebar otomatis) */
            /* width: 200px; */
            /* (Opsi) Hilangkan tanda komentar jika ingin lebar tombol fixed/tetap */
        }

        /* Menghilangkan efek putih/glow bawaan Bootstrap saat tombol search di-hover atau di-klik */
        .btn-search-admin:hover,
        .btn-search-admin:focus,
        .btn-search-admin:active {
            background-color: #2D9CDB !important;
            /* Berubah jadi biru sedikit gelap, bukan putih */
            color: white !important;
            /* Ikon kaca pembesar tetap putih */
            border: none !important;
            box-shadow: none !important;
            /* Menghilangkan garis outline (glow) saat di-klik */
        }

        /* ==========================================
                           IKON PENCARIAN (Bukan Tombol)
                           ========================================== */
        .search-icon-admin {
            background-color: #3498db;
            /* Warna biru */
            color: white;
            /* Warna ikon putih */
            border-radius: 0 9px 9px 0;
            /* Melengkung di sisi kanan saja */
            padding: 0 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

    {{-- ==========================================
    3. HTML STRUKTUR (KONTEN)
    ========================================== --}}


    {{-- Header Konten --}}
    <h2 class="mb-0" style="font-weight: 800; color: #0F1C2E; margin-left: var(--gap); font-size: 26px;">
        Kelola Produk
    </h2>

    {{-- Form & Tombol didorong ke Kanan (Berada di baris bawah judul) --}}
    <div class="d-flex justify-content-end mb-4">
        <div class="d-flex flex-column flex-sm-row align-items-center gap-3 header-action-group">

            {{-- Form Pencarian Lokal --}}
            <div class="input-group">
                <input type="text" id="searchInput" class="form-control search-input-admin" placeholder="Cari Produk...">
                <span class="search-icon-admin"><i class="bi bi-search"></i></span>
            </div>

            <a href="{{ url('/kelola-produk/tambah-produk') }}"
                class="btn btn-add-product text-decoration-none text-nowrap">
                <i class="bi bi-plus-circle"></i> Tambah Produk
            </a>

        </div>
    </div>

    {{-- Grid Kartu Produk --}}
    <div class="row gx-4 gy-4" id="productGrid">
        @forelse($products as $product)
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 product-item" data-name="{{ strtolower($product['name']) }}">
                <div class="admin-card">

                    {{-- Gambar & Badge --}}
                    <div class="img-wrapper">
                        <span
                            class="status-badge {{ strtoupper($product['status']) === 'NEW' ? 'badge-new' : 'badge-second' }}">
                            {{ strtoupper($product['status']) }}
                        </span>
                        <img src="{{ asset('images/' . $product['image']) }}" alt="{{ $product['name'] }}"
                            onerror="this.src='https://placehold.co/300x400/F3F4F6/1F2937?text=Img'">
                    </div>

                    {{-- Body Kartu --}}
                    <div class="card-content">
                        <h5 class="prod-title" title="{{ $product['name'] }}">{{ $product['name'] }}</h5>
                        <div class="prod-cat">{{ $product['category'] }} • {{ ucfirst(strtolower($product['status'])) }}</div>

                        <div class="price-row">
                            <div class="prod-price">Rp. {{ $product['price'] }}</div>
                            <div class="prod-stock">{{ $product['stock'] }} Pcs</div>
                        </div>

                        <div class="divider"></div>

                        <div class="prod-stats">
                            <i class="bi bi-eye"></i>
                            {{ number_format($product['views'], 0, ',', '.') }} Dilihat
                        </div>

                        {{-- Tombol Aksi --}}
                        <div class="action-buttons">
                            <a href="{{ url('/kelola-produk/ubah-produk/' . urlencode($product['name'])) }}"
                                class="btn-edit text-decoration-none">
                                <i class="bi bi-pencil-square"></i> Edit
                            </a>
                            <button class="btn-hapus btn-delete-product" data-name="{{ $product['name'] }}">
                                <i class="bi bi-trash"></i> Hapus
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <h5 class="text-muted">Belum ada data produk.</h5>
            </div>
        @endforelse
    </div>
    {{-- Akhir dari div row grid --}}


    {{-- ==========================================
    POP-UP KONFIRMASI HAPUS (Diletakkan di luar looping)
    ========================================== --}}
    <div id="deleteModalOverlay" class="delete-modal-overlay">
        <div class="delete-modal-content">
            {{-- Ikon Peringatan --}}
            <div class="delete-icon-wrapper">
                <i class="bi bi-exclamation-triangle-fill"></i>
            </div>

            {{-- Teks --}}
            <h5 class="delete-modal-text">Apakah anda yakin ingin menghapus<br>produk ini?</h5>

            {{-- Tombol Aksi --}}
            <div class="delete-modal-actions">
                <button id="btnConfirmDelete" class="btn-confirm-delete">Ya, Hapus</button>
                <button id="btnCancelDelete" class="btn-cancel-delete">Batal</button>
            </div>
        </div>
    </div>


    {{-- ==========================================
    4. JAVASCRIPT KUSTOM (INTERAKSI)
    ========================================== --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            // --- Fitur 1: Pencarian Cepat di Halaman (Client Side Filter) ---
            const searchInput = document.getElementById('searchInput');
            const productItems = document.querySelectorAll('.product-item');

            if (searchInput) {
                searchInput.addEventListener('keyup', function () {
                    const searchValue = this.value.toLowerCase();

                    productItems.forEach(item => {
                        const productName = item.getAttribute('data-name');
                        if (productName.includes(searchValue)) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            }

            // --- Fitur 2: Konfirmasi Hapus Produk (Custom Pop-up) ---
            const deleteButtons = document.querySelectorAll('.btn-delete-product');
            const deleteModal = document.getElementById('deleteModalOverlay');
            const btnCancelDelete = document.getElementById('btnCancelDelete');
            const btnConfirmDelete = document.getElementById('btnConfirmDelete');

            let cardToRemove = null; // Menyimpan elemen kartu yang akan dihapus
            let productNameToDelete = ""; // Menyimpan nama produk

            // Buka Pop-up saat tombol hapus di kartu ditekan
            if (deleteButtons.length > 0 && deleteModal) {
                deleteButtons.forEach(button => {
                    button.addEventListener('click', function (e) {
                        e.preventDefault();

                        // Simpan data kartu yang diklik
                        productNameToDelete = this.getAttribute('data-name');
                        cardToRemove = this.closest('.col-12'); // Mengambil div pembungkus utama grid

                        // Tampilkan pop-up
                        deleteModal.classList.add('show');
                    });
                });
            }

            // Tutup Pop-up saat tombol 'Batal' ditekan
            if (btnCancelDelete) {
                btnCancelDelete.addEventListener('click', function () {
                    deleteModal.classList.remove('show');
                    cardToRemove = null; // Reset
                });
            }

            // Eksekusi Hapus saat tombol 'Ya, Hapus' ditekan
            if (btnConfirmDelete) {
                btnConfirmDelete.addEventListener('click', function () {
                    // Menyembunyikan pop-up
                    deleteModal.classList.remove('show');

                    // Menghapus elemen HTML dari layar
                    if (cardToRemove) {
                        cardToRemove.remove();

                        // (Opsional) Notifikasi kecil sukses
                        console.log(`Berhasil menghapus: ${productNameToDelete}`);
                    }

                    // Nanti di sini ditaruh logika AJAX untuk hapus data sungguhan dari Database
                });
            }

        }); // <-- INI PENUTUP YANG HILANG SEBELUMNYA

    </script>
@endsection