<?php if(auth()->guard()->check()): ?>
<?php if(auth()->user()->role === 'penjual'): ?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Edit Produk - Raja Futsal</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Inter', sans-serif;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
        }

        .btn-outline {
            transition: all 0.3s ease;
        }

        .btn-outline:hover {
            background-color: #f3f4f6;
            transform: translateY(-2px);
        }

        .btn-outline-orange {
            transition: all 0.3s ease;
            border-color: #f97316;
            color: #f97316;
        }

        .btn-outline-orange:hover {
            background-color: #fff7ed;
            color: #ea580c;
            transform: translateY(-2px);
            border-color: #ea580c;
        }

        .input-focus:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
        }

        .form-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .form-card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .nav-link {
            transition: all 0.2s ease;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
        }

        .nav-link:hover {
            background-color: #fff7ed;
            color: #ea580c;
        }

        .active-nav {
            background-color: #fff7ed;
            color: #ea580c;
            font-weight: 600;
        }

        .variant-item {
            transition: all 0.3s ease;
            border-left: 4px solid #f97316;
        }

        .size-badge {
            background-color: #fff7ed;
            color: #9a3412;
            border: 1px solid #fed7aa;
        }

        /* Full width container */
        .full-width {
            max-width: 100% !important;
            width: 100%;
            padding-left: 2rem;
            padding-right: 2rem;
        }

        @media (min-width: 1536px) {
            .full-width {
                padding-left: 4rem;
                padding-right: 4rem;
            }
        }
    </style>
</head>

<body class="bg-gray-50 min-h-screen">
    <!-- ========== KONTEN UTAMA ========== -->
    <div class="full-width p-6">
        <!-- HEADER EDIT PRODUK -->
        <div class="relative mb-8 bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 rounded-2xl p-6 text-white shadow-lg overflow-hidden w-full">
            <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
                <i class="fas fa-box text-8xl absolute top-10 right-10"></i>
                <i class="fas fa-edit text-7xl absolute bottom-0 right-32"></i>
                <i class="fas fa-cube text-6xl absolute top-20 right-48"></i>
            </div>
            <div class="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                            <i class="fas fa-edit text-white text-2xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold flex items-center gap-2">
                            Edit Produk
                        </h2>
                    </div>
                    <p class="text-orange-100">Memperbarui informasi produk <span class="font-semibold"><?php echo e($produk->nama_produk); ?></span></p>
                </div>
                <div class="flex-shrink-0 flex items-center gap-3">
                    <span class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-lg text-sm font-medium inline-flex items-center gap-2">
                        <i class="fas fa-box"></i> ID Produk: #<?php echo e($produk->id); ?>

                    </span>
                </div>
            </div>
        </div>

        <!-- FORM CARD -->
        <div class="w-full">
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden form-card">
                <!-- FORM HEADER -->
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-orange-50 to-white">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-edit text-orange-600"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">Form Edit Produk</h3>
                            <p class="text-sm text-gray-500">Perbarui data produk di bawah ini</p>
                        </div>
                    </div>
                </div>

                <!-- FORM CONTENT -->
                <div class="p-8">
                    <?php if($errors->any()): ?>
                        <div class="mb-6 p-4 bg-orange-50 border-l-4 border-orange-500 rounded-r-lg">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle text-orange-500 text-xl mr-3"></i>
                                <div>
                                    <p class="font-medium text-orange-800">Perhatian!</p>
                                    <ul class="mt-2 text-orange-700 text-sm list-disc list-inside">
                                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li><?php echo e($error); ?></li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <form action="<?php echo e(route('produk.update', $produk->id)); ?>"
                          method="POST"
                          enctype="multipart/form-data"
                          class="space-y-6">

                        <?php echo csrf_field(); ?>
                        <?php echo method_field('PUT'); ?>

                        <!-- KATEGORI -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-folder text-orange-500 mr-2"></i>Kategori <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">
                                    <i class="fas fa-tag text-gray-400"></i>
                                </div>
                                <select name="kategori_id" class="w-full pl-10 pr-10 py-3 border rounded-lg input-focus focus:outline-none appearance-none bg-white" required>
                                    <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $k): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($k->ID); ?>"
                                            <?php echo e($produk->kategori_id == $k->ID ? 'selected' : ''); ?>>
                                            <?php echo e($k->nama); ?>

                                        </option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                    <i class="fas fa-chevron-down text-gray-400"></i>
                                </div>
                            </div>
                        </div>

                        <!-- NAMA PRODUK -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-box text-orange-500 mr-2"></i>Nama Produk <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">
                                    <i class="fas fa-tag text-gray-400"></i>
                                </div>
                                <input type="text" name="nama_produk"
                                       value="<?php echo e(old('nama_produk', $produk->nama_produk)); ?>"
                                       placeholder="Masukkan nama produk"
                                       class="w-full pl-10 pr-4 py-3 border rounded-lg input-focus focus:outline-none"
                                       required>
                            </div>
                        </div>

                        <!-- DESKRIPSI -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-align-left text-orange-500 mr-2"></i>Deskripsi
                            </label>
                            <div class="relative">
                                <div class="absolute top-3 left-3 pointer-events-none">
                                    <i class="fas fa-pencil-alt text-gray-400"></i>
                                </div>
                                <textarea name="deskripsi" rows="4"
                                          placeholder="Masukkan deskripsi produk"
                                          class="w-full pl-10 pr-4 py-3 border rounded-lg input-focus focus:outline-none"><?php echo e(old('deskripsi', $produk->deskripsi)); ?></textarea>
                            </div>
                        </div>

                        <!-- HARGA, STOK, BERAT -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    <i class="fas fa-money-bill-wave text-orange-500 mr-2"></i>Harga <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-400">Rp</span>
                                    </div>
                                    <input type="number" name="harga"
                                           value="<?php echo e(old('harga', $produk->harga)); ?>"
                                           placeholder="0"
                                           class="w-full pl-12 pr-4 py-3 border rounded-lg input-focus focus:outline-none"
                                           required>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    <i class="fas fa-cubes text-orange-500 mr-2"></i>Stok <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">
                                        <i class="fas fa-boxes text-gray-400"></i>
                                    </div>
                                    <input type="number" name="stok"
                                           value="<?php echo e(old('stok', $produk->stok)); ?>"
                                           placeholder="0"
                                           class="w-full pl-10 pr-4 py-3 border rounded-lg input-focus focus:outline-none"
                                           required>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-gray-700 mb-2">
                                    <i class="fas fa-weight-hanging text-orange-500 mr-2"></i>Berat (gram)
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-weight text-gray-400"></i>
                                    </div>
                                    <input type="number" name="berat"
                                           value="<?php echo e(old('berat', $produk->berat)); ?>"
                                           placeholder="0"
                                           class="w-full pl-10 pr-4 py-3 border rounded-lg input-focus focus:outline-none">
                                </div>
                            </div>
                        </div>

                        <!-- UKURAN PRODUK -->
                        <div class="bg-orange-50 p-5 rounded-lg border border-orange-200">
                            <label class="block text-sm font-semibold text-gray-700 mb-3">
                                <i class="fas fa-ruler text-orange-500 mr-2"></i>Ukuran Produk
                            </label>

                            <div class="flex gap-2">
                                <div class="relative flex-1">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-ruler-combined text-gray-400"></i>
                                    </div>
                                    <input type="text" id="ukuranInput"
                                           class="w-full pl-10 pr-4 py-3 border rounded-lg input-focus focus:outline-none"
                                           placeholder="Contoh: S, M, L, XL, 42, 43">
                                </div>
                                <button type="button" onclick="addUkuran()"
                                    class="btn-primary text-white px-6 py-3 rounded-lg font-medium flex items-center gap-2">
                                    <i class="fas fa-plus"></i>
                                    Tambah
                                </button>
                            </div>

                            <div id="ukuranList" class="flex gap-2 flex-wrap mt-3">
                                <?php if($produk->ukuran): ?>
                                    <?php $__currentLoopData = explode(',', $produk->ukuran); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php if(trim($u)): ?>
                                        <span class="inline-flex items-center gap-2 bg-orange-100 text-orange-800 px-4 py-2 rounded-full text-sm font-medium border border-orange-300">
                                            <i class="fas fa-tag text-orange-600 text-xs"></i>
                                            <?php echo e(trim($u)); ?>

                                            <input type="hidden" name="ukuran[]" value="<?php echo e(trim($u)); ?>">
                                            <span onclick="this.parentElement.remove()" class="cursor-pointer hover:text-red-600 transition-colors">
                                                <i class="fas fa-times-circle"></i>
                                            </span>
                                        </span>
                                        <?php endif; ?>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php endif; ?>
                            </div>
                            <p class="mt-2 text-xs text-gray-600">
                                <i class="fas fa-info-circle"></i> Klik ✖ untuk menghapus ukuran
                            </p>
                        </div>

                        <!-- VARIAN WARNA & FOTO -->
                        <div class="bg-white border border-orange-200 rounded-lg p-5">
                            <label class="block text-sm font-semibold text-gray-700 mb-3">
                                <i class="fas fa-palette text-orange-500 mr-2"></i>Warna & Foto Produk
                            </label>

                            <div id="variantContainer" class="space-y-4 mb-4">
                                <?php if($produk->foto): ?>
                                    <?php
                                        $fotoItems = array_filter(explode('|', $produk->foto));
                                    ?>
                                    <?php $__currentLoopData = $fotoItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $fotoItem): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php
                                            $fotoItem = trim($fotoItem);
                                            if (!str_contains($fotoItem, ':')) continue;
                                            [$warnaLama, $pathLama] = explode(':', $fotoItem, 2);
                                            $warnaLama = trim($warnaLama);
                                            $pathLama  = trim($pathLama);
                                        ?>
                                        <div class="variant-item border border-orange-200 rounded-lg p-5 relative bg-white shadow-sm">
                                            <button type="button" onclick="removeVariant(this)"
                                                class="absolute top-3 right-3 w-8 h-8 bg-red-100 text-red-600 rounded-full hover:bg-red-200 flex items-center justify-center transition-all">
                                                <i class="fas fa-times text-sm"></i>
                                            </button>

                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                                <!-- INPUT WARNA -->
                                                <div>
                                                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                                                        <i class="fas fa-palette text-orange-500 mr-2"></i>Warna
                                                    </label>
                                                    <div class="relative">
                                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                            <i class="fas fa-droplet text-gray-400"></i>
                                                        </div>
                                                        <input type="text"
                                                            name="warna[<?php echo e($idx); ?>]"
                                                            value="<?php echo e($warnaLama); ?>"
                                                            placeholder="Contoh: Merah, Biru, Hijau"
                                                            class="w-full pl-10 pr-4 py-3 border rounded-lg input-focus focus:outline-none">
                                                    </div>
                                                </div>

                                                <!-- INPUT FOTO -->
                                                <div>
                                                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                                                        <i class="fas fa-camera text-orange-500 mr-2"></i>Foto
                                                    </label>

                                                    <?php if($pathLama): ?>
                                                        <!-- Preview foto lama -->
                                                        <div class="mb-2 flex items-center gap-3 p-2 bg-orange-50 rounded-lg border border-orange-200">
                                                            <img src="<?php echo e(asset('storage/' . $pathLama)); ?>"
                                                                alt="<?php echo e($warnaLama); ?>"
                                                                class="w-14 h-14 object-cover rounded-lg border border-orange-300">
                                                            <div>
                                                                <p class="text-xs font-medium text-gray-600">Foto saat ini</p>
                                                                <p class="text-xs text-gray-400">Upload baru untuk mengganti</p>
                                                            </div>
                                                        </div>
                                                        <!-- Simpan path lama agar tidak hilang jika tidak upload baru -->
                                                        <input type="hidden" name="foto_lama[<?php echo e($idx); ?>]" value="<?php echo e($pathLama); ?>">
                                                    <?php endif; ?>

                                                    <div class="relative">
                                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                            <i class="fas fa-images text-gray-400"></i>
                                                        </div>
                                                        <input type="file"
                                                            name="foto[<?php echo e($idx); ?>][]"
                                                            class="w-full pl-10 pr-4 py-2.5 border rounded-lg input-focus focus:outline-none file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100"
                                                            multiple>
                                                    </div>
                                                    <p class="mt-1 text-xs text-gray-500">Biarkan kosong jika tidak ingin mengganti foto</p>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php endif; ?>
                            </div>

                            <button type="button" onclick="addVariant()"
                                class="inline-flex items-center gap-2 border-2 border-orange-500 text-orange-600 text-sm font-medium px-5 py-2.5 rounded-lg bg-white hover:bg-orange-50 hover:text-orange-700 transition-all hover:transform hover:-translate-y-1">
                                <i class="fas fa-plus-circle"></i>
                                Tambah Varian Warna & Foto
                            </button>
                        </div>

                        <!-- BUTTONS -->
                        <div class="flex justify-center gap-4 pt-6 border-t border-gray-200">
                            <button type="submit"
                                    class="btn-primary text-white px-8 py-3 rounded-lg font-semibold flex items-center gap-2">
                                <i class="fas fa-save"></i>
                                Update Produk
                            </button>

                            <a href="<?php echo e(route('produk.index')); ?>"
                               class="btn-outline px-8 py-3 rounded-lg border font-semibold flex items-center gap-2">
                                Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="variant-data" data-index="<?php echo e($produk->foto ? count(explode('|', $produk->foto)) : 0); ?>" style="display: none;"></div>
<script>
    // Mulai dari jumlah varian lama agar index tidak bentrok
    let variantIndex = parseInt(document.getElementById('variant-data').dataset.index);

    function removeVariant(btn) {
        btn.closest('.variant-item').remove();
    }

    function addVariant() {
        const container = document.getElementById('variantContainer');
        const variantHtml = `
            <div class="variant-item border border-orange-200 rounded-lg p-5 relative bg-white shadow-sm">
                <button type="button" onclick="removeVariant(this)"
                    class="absolute top-3 right-3 w-8 h-8 bg-red-100 text-red-600 rounded-full hover:bg-red-200 flex items-center justify-center transition-all">
                    <i class="fas fa-times text-sm"></i>
                </button>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-palette text-orange-500 mr-2"></i>Warna
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-droplet text-gray-400"></i>
                            </div>
                            <input type="text" name="warna[${variantIndex}]"
                                placeholder="Contoh: Merah, Biru, Hijau"
                                class="w-full pl-10 pr-4 py-3 border rounded-lg input-focus focus:outline-none">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-camera text-orange-500 mr-2"></i>Foto
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-images text-gray-400"></i>
                            </div>
                            <input type="file" name="foto[${variantIndex}][]"
                                class="w-full pl-10 pr-4 py-2.5 border rounded-lg input-focus focus:outline-none file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100"
                                multiple>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">Bisa pilih lebih dari 1 foto</p>
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', variantHtml);
        variantIndex++;
    }

    function addUkuran() {
        const input = document.getElementById('ukuranInput');
        if (!input.value.trim()) {
            alert('Silakan masukkan ukuran terlebih dahulu');
            return;
        }

        const list = document.getElementById('ukuranList');
        const existingSizes = Array.from(list.querySelectorAll('input[name="ukuran[]"]')).map(el => el.value);
        if (existingSizes.includes(input.value.trim())) {
            alert('Ukuran sudah ada!');
            return;
        }

        const ukuranHtml = `
            <span class="inline-flex items-center gap-2 bg-orange-100 text-orange-800 px-4 py-2 rounded-full text-sm font-medium border border-orange-300">
                <i class="fas fa-tag text-orange-600 text-xs"></i>
                ${input.value.trim()}
                <input type="hidden" name="ukuran[]" value="${input.value.trim()}">
                <span onclick="this.parentElement.remove()" class="cursor-pointer hover:text-red-600 transition-colors">
                    <i class="fas fa-times-circle"></i>
                </span>
            </span>
        `;
        list.insertAdjacentHTML('beforeend', ukuranHtml);
        input.value = '';
        input.focus();
    }

    document.addEventListener('DOMContentLoaded', function() {
        const nameInput = document.querySelector('input[name="nama_produk"]');
        if (nameInput) nameInput.focus();
    });
</script>
</body>
</html>
<?php endif; ?>
<?php endif; ?><?php /**PATH C:\laragon\www\ecommerce\resources\views/produk/edit.blade.php ENDPATH**/ ?>