<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Edit Barang | Manajemen Stok</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg: #eef4ff;
            --panel: rgba(255, 255, 255, 0.88);
            --text: #172554;
            --muted: #64748b;
            --line: #dbe6f7;
            --primary: #4f46e5;
            --secondary: #2563eb;
            --cyan: #38bdf8;
            --red: #ef4444;
            --shadow-soft: 0 28px 55px rgba(59, 84, 145, 0.10);
            --shadow-card: 0 18px 32px rgba(148, 163, 184, 0.12);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.08), transparent 20%),
                radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 22%),
                linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
            -webkit-font-smoothing: antialiased;
        }

        .app {
            display: flex;
            min-height: 100vh;
        }

        .content {
            flex: 1;
            width: 100%;
            padding: 28px;
        }

        .shell {
            max-width: 1480px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .surface {
            background: var(--panel);
            border: 1px solid rgba(255, 255, 255, 0.82);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(16px);
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(37, 99, 235, 0.08));
            color: var(--primary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            border: 1px solid rgba(99, 102, 241, 0.10);
        }

        .hero-title {
            margin: 16px 0 8px;
            font-size: clamp(30px, 4vw, 44px);
            line-height: 0.98;
            letter-spacing: -0.05em;
            font-weight: 900;
        }

        .hero-text {
            margin: 0;
            color: var(--muted);
            line-height: 1.8;
            font-size: 14px;
            max-width: 720px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 18px;
        }

        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 18px;
            border-radius: 18px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 800;
            transition: all 0.2s ease;
        }

        .action-btn.primary {
            color: #ffffff;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow: 0 18px 28px rgba(79, 70, 229, 0.24);
        }

        .action-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 22px 30px rgba(79, 70, 229, 0.28);
        }

        .action-btn.soft {
            color: var(--text);
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid var(--line);
        }

        .form-card {
            border-radius: 32px;
            overflow: hidden;
            padding-bottom: 8px;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.14), transparent 22%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
        }

        .form-head {
            padding: 24px 24px 0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .form-title {
            margin: 0;
            font-size: 24px;
            line-height: 1.05;
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .form-subtitle {
            margin: 8px 0 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7;
        }

        .form-body {
            padding: 22px;
            display: grid;
            gap: 22px;
        }

        .form-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
            gap: 18px;
            align-items: start;
        }

        .form-main {
            display: grid;
            gap: 18px;
        }

        .form-chip,
        .form-meta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 0 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(214, 226, 247, 0.98);
            color: #233876;
            font-size: 12px;
            font-weight: 800;
            box-shadow: 0 10px 20px rgba(148, 163, 184, 0.10);
        }

        .alert {
            padding: 16px 18px;
            border-radius: 22px;
            border: 1px solid #fecaca;
            background: #fef2f2;
            color: #b91c1c;
        }

        .alert h3 {
            margin: 0 0 8px;
            font-size: 14px;
            font-weight: 800;
        }

        .alert ul {
            margin: 0;
            padding-left: 18px;
            font-size: 13px;
            line-height: 1.7;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group.span-2 {
            grid-column: span 2;
        }

        .label {
            font-size: 13px;
            font-weight: 800;
            color: #334155;
        }

        .hint {
            margin: 0;
            font-size: 12px;
            color: var(--muted);
            line-height: 1.6;
        }

        .input,
        .textarea,
        .select {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #ffffff;
            color: var(--text);
            padding: 14px 16px;
            outline: none;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .input:focus,
        .textarea:focus,
        .select:focus {
            border-color: rgba(79, 70, 229, 0.38);
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10);
        }

        .textarea {
            min-height: 140px;
            resize: vertical;
        }

        .form-section {
            padding: 18px;
            border-radius: 26px;
            background: linear-gradient(180deg, rgba(248, 251, 255, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
            border: 1px solid rgba(219, 230, 247, 0.92);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
        }

        .aside-stack {
            display: grid;
            gap: 18px;
            align-self: stretch;
        }

        .stock-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .stock-card {
            padding: 16px;
            border-radius: 22px;
            border: 1px solid rgba(219, 230, 247, 0.92);
            background: linear-gradient(180deg, rgba(238, 242, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%);
        }

        .stock-card .label {
            display: block;
            margin-bottom: 8px;
        }

        .stock-card .hint {
            margin-top: 8px;
        }

        .section-title {
            margin: 0;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .section-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--cyan) 100%);
            box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.08);
            flex-shrink: 0;
        }

        .photo-section {
            display: flex;
            flex-direction: column;
        }

        .upload-grid {
            display: grid;
            gap: 16px;
            grid-template-rows: 320px auto;
        }

        .preview-box {
            width: 100%;
            height: 320px;
            min-height: 320px;
            max-height: 320px;
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(219, 230, 247, 0.92);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.14), transparent 22%),
                radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.12), transparent 24%),
                linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #ffffff;
        }

        .preview-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #94a3b8;
            text-align: center;
            padding: 18px;
        }

        .file-input {
            width: 100%;
            font-size: 14px;
            color: var(--muted);
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #ffffff;
            padding: 10px 12px;
            cursor: pointer;
        }

        .file-input::file-selector-button {
            margin-right: 12px;
            border: 0;
            border-radius: 14px;
            padding: 10px 14px;
            background: #eef2ff;
            color: var(--primary);
            font-weight: 800;
            cursor: pointer;
        }

        .footer-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding-top: 6px;
        }

        .submit-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 18px;
            border-radius: 18px;
            border: none;
            color: #ffffff;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow: 0 18px 28px rgba(79, 70, 229, 0.24);
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .submit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 22px 30px rgba(79, 70, 229, 0.28);
        }

        @media (max-width: 1024px) {
            .app {
                display: block;
            }

            .content {
                padding: 20px;
                padding-top: 84px;
            }

            .form-layout {
                grid-template-columns: 1fr;
            }

            .form-head {
                flex-direction: column;
            }

            .form-head-right {
                justify-content: flex-start;
            }

            .photo-section,
            .upload-grid {
                height: auto;
            }

            .upload-grid {
                grid-template-rows: 240px auto;
            }

            .preview-box {
                height: 240px;
                min-height: 240px;
                max-height: 240px;
            }
        }

        @media (max-width: 640px) {
            .content {
                padding: 16px;
                padding-top: 84px;
            }

            .form-card,
            .form-section {
                border-radius: 24px;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .stock-grid {
                grid-template-columns: 1fr;
            }

            .form-group.span-2 {
                grid-column: span 1;
            }

            .hero-actions,
            .footer-actions {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="app" x-data="itemEditPreview()">
        @include('partials.sidebar')

        <main class="content">
            <div class="shell">
                <section class="form-card surface">
                    <div class="form-head">
                        <div>
                            <span class="pill">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"></path>
                                </svg>
                                Edit Barang
                            </span>
                            <h1 class="hero-title">Edit Barang</h1>
                            <p class="hero-text">Perbarui data inventaris yang sudah ada.</p>
                            <div class="hero-actions">
                                <a href="{{ route('items.index') }}" class="action-btn soft">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                                    </svg>
                                    Kembali
                                </a>
                                <a href="{{ route('items.show', $item->id) }}" class="action-btn primary">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0A9 9 0 113 12a9 9 0 0118 0z"></path>
                                    </svg>
                                    Lihat Detail
                                </a>
                            </div>
                        </div>
                        <div class="form-head-right">
                            <div class="form-chip">Informasi Utama</div>
                            <div class="form-chip">Stok</div>
                            <div class="form-chip">Foto</div>
                        </div>
                    </div>

                    <form action="{{ route('items.update', $item->id) }}" method="POST" enctype="multipart/form-data" class="form-body">
                        @csrf
                        @method('PUT')

                        @if ($errors->any())
                        <div class="alert">
                            <h3>Terdapat kesalahan pada input Anda:</h3>
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

                        <div class="form-layout">
                            <div class="form-main">
                                <div class="form-section">
                                    <div class="section-head">
                                        <h3 class="section-title">Informasi Utama</h3>
                                        <span class="section-dot" aria-hidden="true"></span>
                                    </div>
                                    <div class="form-grid">
                                        <div class="form-group span-2">
                                            <label for="nama" class="label">Nama Barang <span class="text-red-500">*</span></label>
                                            <input type="text" name="nama" id="nama" value="{{ old('nama', $item->nama) }}" class="input" placeholder="Contoh: Laptop Dell Latitude 7420" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="sku" class="label">SKU</label>
                                            <input type="text" name="sku" id="sku" value="{{ old('sku', $item->sku) }}" class="input font-mono" placeholder="INV-2024-001">
                                        </div>

                                        <div class="form-group">
                                            <label for="divisi_id" class="label">Divisi Pemilik <span class="text-red-500">*</span></label>
                                            <select name="divisi_id" id="divisi_id" class="select" required>
                                                <option value="" disabled>-- Pilih Divisi --</option>
                                                @foreach($divisis as $id => $nama)
                                                <option value="{{ $id }}" {{ old('divisi_id', $item->divisi_id) == $id ? 'selected' : '' }}>{{ $nama }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="form-group span-2">
                                            <label for="deskripsi" class="label">Deskripsi</label>
                                            <textarea name="deskripsi" id="deskripsi" rows="4" class="textarea" placeholder="Tambahkan detail barang...">{{ old('deskripsi', $item->deskripsi) }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-section">
                                    <div class="section-head">
                                        <h3 class="section-title">Stok</h3>
                                        <span class="section-dot" aria-hidden="true"></span>
                                    </div>
                                    <div class="stock-grid">
                                        <div class="stock-card">
                                            <label for="jumlah" class="label">Stok Awal <span class="text-red-500">*</span></label>
                                            <input type="number" name="jumlah" id="jumlah" min="0" value="{{ old('jumlah', $item->jumlah) }}" class="input" required>
                                            <p class="hint">Jumlah barang yang langsung tersedia saat data dibuat.</p>
                                        </div>

                                        <div class="stock-card">
                                            <label for="min_stok" class="label">Stok Minimum <span class="text-red-500">*</span></label>
                                            <input type="number" name="min_stok" id="min_stok" min="0" value="{{ old('min_stok', $item->min_stok) }}" class="input" required>
                                            <p class="hint">Sistem bisa kasih sinyal lebih cepat saat stok mulai menipis.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="aside-stack">
                                <div class="form-section photo-section">
                                    <div class="section-head">
                                        <h3 class="section-title">Foto Barang</h3>
                                        <span class="section-dot" aria-hidden="true"></span>
                                    </div>
                                    <div class="upload-grid">
                                        <div class="preview-box">
                                            <template x-if="preview">
                                                <img :src="preview" alt="Preview foto barang">
                                            </template>
                                            <template x-if="!preview">
                                                @if($item->image && Storage::disk('public')->exists($item->image))
                                                <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->nama }}">
                                                @else
                                                <div class="preview-placeholder">
                                                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                    </svg>
                                                    <div>
                                                        <div class="font-semibold text-slate-600">Preview</div>
                                                        <div class="hint">Belum ada foto.</div>
                                                    </div>
                                                </div>
                                                @endif
                                            </template>
                                        </div>

                                        <div class="form-group">
                                            <label for="foto" class="label">Unggah Foto</label>
                                            <input type="file" name="foto" id="foto" accept="image/*" class="file-input" @change="updatePreview($event)">
                                            <p class="hint">Gunakan JPG, PNG, JPEG, atau WEBP. Ukuran foto tidak boleh lebih dari 2MB agar upload tetap cepat.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="footer-actions">
                            <a href="{{ route('items.index') }}" class="action-btn soft">Batal</a>
                            <button type="submit" class="submit-btn">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </section>
            </div>
        </main>
    </div>

    <script>
        function itemEditPreview() {
            return {
                preview: null,
                updatePreview(event) {
                    const file = event.target.files[0];
                    if (!file) {
                        this.preview = null;
                        return;
                    }
                    this.preview = URL.createObjectURL(file);
                },
            };
        }
    </script>
</body>

</html>
