@extends('layouts.app3')

@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 (Ditingkatkan untuk Responsivitas)
    ========================================== --}}
    <style>
        body {
            font-family: 'Poppins', sans-serif !important;
            background-color: #ffffff;
        }

        .edit-page-container {
            max-width: 1300px;
            margin: 0 auto;
            
        }

        .page-title {
            font-size: 24px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 24px;
        }

        /* --- Area Upload Gambar --- */
        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 12px;
            background-color: #f9fafb;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 20px;
        }

        .upload-area:hover, .upload-area.dragover {
            background-color: #f3f4f6;
            border-color: #3ba1eb; /* Warna brand biru */
        }

        .upload-icon {
            font-size: 40px;
            color: #9ca3af;
            margin-bottom: 10px;
        }

        .upload-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
        }

        /* --- Preview Gambar --- */
        .preview-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 100px));
            gap: 15px;
            margin-bottom: 30px;
        }

        .preview-item {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }

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

        .remove-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1.5px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        /* --- Form Inputs --- */
        .form-label {
            font-weight: 600;
            color: #374151;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .form-control, .form-select {
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 14px;
            transition: all 0.2s;
        }

        .form-control:focus, .form-select:focus {
            border-color: #3ba1eb;
            box-shadow: 0 0 0 3px rgba(59, 161, 235, 0.1);
            outline: none;
        }

        /* --- Buttons --- */
        .btn-action-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 40px;
        }

        .btn-batal {
            background-color: #f3f4f6;
            color: #4b5563;
            font-weight: 600;
            padding: 14px;
            border-radius: 10px;
            border: none;
            text-decoration: none;
            display: flex;
            align-items: center;      /* center vertikal */
            justify-content: center;  /* center horizontal */
        }

        .btn-simpan {
            background-color: #27ae60;
            color: white;
            font-weight: 600;
            padding: 14px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
        }

        /* ==========================================
           MODAL POPUP BERHASIL (CUSTOM - UI BARU)
           ========================================== */
        .success-popup-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: rgba(0, 0, 0, 0.5); /* Latar belakang gelap transparan */
            z-index: 10005;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }
        
        .success-popup-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        
        .success-popup-content {
            background-color: #27ae60; /* Warna hijau solid sesuai gambar */
            border-radius: 16px;
            text-align: center;
            transform: scale(0.8);
            transition: transform 0.3s ease;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            
            /* --- Ukuran Tetap 400x300 --- */
            width: 400px;
            max-width: 90vw; /* Pengaman untuk layar HP */
            height: 300px;
            
            /* --- Flexbox Center --- */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #ffffff; /* Semua teks menjadi putih */
        }
        
        .success-popup-overlay.show .success-popup-content {
            transform: scale(1);
        }
        
        .success-popup-icon i {
            font-size: 110px; /* Ukuran icon diperbesar agar proporsional */
            line-height: 1;
            /* Karena memakai font putih dari parent, warnanya otomatis putih */
        }
        
        .success-popup-text {
            font-size: 22px;
            font-weight: 700; /* Bold */
            margin-top: 15px;
            letter-spacing: 0.5px;
        }
    </style>

    {{-- ==========================================
    3. HTML STRUKTUR
    ========================================== --}}
    <div class="edit-page-container">
        
        <h2 class="page-title">Edit Produk</h2>

        <form id="formEditProduk" action="#" method="POST" enctype="multipart/form-data">
            @csrf

            {{-- Input File Tersembunyi --}}
            <input type="file" id="fileInput" name="images[]" multiple accept="image/png, image/jpeg, image/webp" style="display: none;">

            {{-- Area Upload (Drag & Drop) --}}
            <div class="upload-area" id="dropZone">
                <i class="bi bi-cloud-arrow-up-fill upload-icon"></i>
                <div class="upload-title">Klik Atau Tarik Gambar Ke Sini</div>
                <div class="upload-subtitle text-muted small">PNG, JPG, WebP (Maks. 2MB)</div>
            </div>

            {{-- Tempat Preview Gambar --}}
            <div class="preview-container" id="imagePreviewContainer">
                @if(isset($product['image']))
                    @php 
                        $images = is_array($product['image']) ? $product['image'] : [$product['image']]; 
                    @endphp
                    @foreach($images as $img)
                        <div class="preview-item">
                            <img src="{{ asset('images/' . $img) }}" alt="Existing Product Image">
                            <input type="hidden" name="existing_images[]" value="{{ $img }}">
                            <span class="remove-badge" onclick="this.parentElement.remove()">×</span>
                        </div>
                    @endforeach
                @endif
            </div>

            {{-- Form Fields --}}
            <div class="mb-4">
                <label class="form-label">Nama Produk *</label>
                <input type="text" class="form-control" name="name" value="{{ $product['name'] ?? 'Polo Stone Island' }}" required>
            </div>

            <div class="row">
                <div class="col-md-6 mb-4">
                    <label class="form-label">Kategori *</label>
                    <select class="form-select" name="category" required>
                        @php $cat = $product['category'] ?? 'Apparel New'; @endphp
                        <option value="Apparel New" {{ $cat == 'Apparel New' ? 'selected' : '' }}>Apparel New</option>
                        <option value="Apparel Second" {{ $cat == 'Apparel Second' ? 'selected' : '' }}>Apparel Second</option>
                        <option value="Footwear New" {{ $cat == 'Footwear New' ? 'selected' : '' }}>Footwear New</option>
                        <option value="Footwear Second" {{ $cat == 'Footwear Second' ? 'selected' : '' }}>Footwear Second</option>
                    </select>
                </div>
                <div class="col-md-6 mb-4">
                    <label class="form-label">Kondisi *</label>
                    <select class="form-select" name="kondisi" required>
                        @php 
                            // Mengambil data dari 'status' untuk mengisi variabel 'kondisi'
                            $kondisi = $product['status'] ?? 'SECOND'; 
                        @endphp
                        
                        <option value="NEW" {{ $kondisi == 'NEW' ? 'selected' : '' }}>NEW</option>
                        <option value="SECOND" {{ $kondisi == 'SECOND' ? 'selected' : '' }}>SECOND</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-4">
                    <label class="form-label">Harga (Rp) *</label>
                    <input type="text" class="form-control" name="price" id="priceInput" value="{{ $product['price'] ?? '1250000' }}" required>
                </div>
                <div class="col-md-6 mb-4">
                    <label class="form-label">Stok *</label>
                    <input type="number" class="form-control" name="stock" value="{{ $product['stock'] ?? '10' }}" required>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label">Deskripsi Produk *</label> 
                <textarea class="form-control" name="description" rows="5" required>{{ $product['description'] ?? '' }}</textarea>
            </div>

            {{-- Tombol Aksi --}}
            <div class="btn-action-group">
                <a href="{{ url('/kelola-produk') }}" class="btn-batal">Batal</a>
                <button type="submit" class="btn-simpan">Simpan Perubahan</button>
            </div>

        </form>
    </div>

    {{-- ==========================================
    MODAL POP UP BERHASIL CUSTOM
    ========================================== --}}
    <div id="successPopup" class="success-popup-overlay">
        <div class="success-popup-content">
            <div class="success-popup-icon">
                {{-- Menggunakan bi-check-circle yang memiliki lingkaran border --}}
                <i class="bi bi-check-circle"></i> 
            </div>
            <div class="success-popup-text">Berhasil Ubah Produk!</div>
        </div>
    </div>

    {{-- ==========================================
    4. JAVASCRIPT
    ========================================== --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // --- LOGIKA DRAG & DROP GAMBAR ---
            const dropZone = document.getElementById('dropZone');
            const fileInput = document.getElementById('fileInput');
            const previewContainer = document.getElementById('imagePreviewContainer');
            const form = document.getElementById('formEditProduk');

            dropZone.addEventListener('click', () => fileInput.click());

            ['dragover', 'dragleave', 'drop'].forEach(evt => {
                dropZone.addEventListener(evt, (e) => e.preventDefault());
            });

            dropZone.addEventListener('dragover', () => dropZone.classList.add('dragover'));
            dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));

            dropZone.addEventListener('drop', (e) => {
                dropZone.classList.remove('dragover');
                handleFiles(e.dataTransfer.files);
            });

            fileInput.addEventListener('change', function() {
                handleFiles(this.files);
            });

            function handleFiles(files) {
                Array.from(files).forEach(file => {
                    if (!file.type.startsWith('image/')) return;
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const div = document.createElement('div');
                        div.className = 'preview-item';
                        div.innerHTML = `
                            <img src="${e.target.result}" alt="New Preview">
                            <span class="remove-badge" onclick="this.parentElement.remove()">×</span>
                        `;
                        previewContainer.appendChild(div);
                    };
                    reader.readAsDataURL(file);
                });
            }

            // --- LOGIKA MEMUNCULKAN POP-UP CUSTOM ---
            form.addEventListener('submit', function(e) {
                // 1. Mencegah form melakukan refresh halaman otomatis
                e.preventDefault();

                // (Opsional) Mengumpulkan data untuk dikirim ke backend nantinya
                const formData = new FormData(this);
                
                // 2. Tampilkan Pop-up hijau
                const successPopup = document.getElementById('successPopup');
                successPopup.classList.add('show');

                // 3. Pindah kembali ke halaman Kelola Produk setelah 1.5 detik
                setTimeout(() => {
                    window.location.href = "{{ url('/kelola-produk') }}";
                }, 1500); // 1500ms = 1.5 detik
            });
        });
    </script>

@endsection