<!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" />
    <title>Edit Barang - {{ $item->nama }}</title>
    
    <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&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg: #f8fafc; --panel: #ffffff; --muted: #6b7280; --accent: #0b5ed7;
            --card-border: #e2e8f0; --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }
        * { box-sizing: border-box; }
        body { 
            margin: 0; font-family: var(--font-main); 
            background: var(--bg); color: #111827; 
            -webkit-font-smoothing: antialiased;
        }
        .app { display: flex; min-height: 100vh; }
        .content { flex: 1; padding: 32px; width: 100%; transition: all 0.3s ease; }
        .hidden { display: none !important; }

        /* Responsive */
        @media (max-width: 1024px) {
            .app { display: block; }
            .content { padding: 20px; padding-top: 80px; }
        }
        @media (max-width: 640px) {
            .content { padding: 16px; padding-top: 80px; }
        }
    </style>
</head>
<body>

<div class="app">
    {{-- Sidebar --}}
    @include('partials.sidebar')

    <main class="content">
        <div class="max-w-4xl mx-auto space-y-6">

            {{-- Header --}}
            <div class="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">Edit Barang</h1>
                    <p class="text-sm text-gray-500 mt-1">Perbarui informasi dan stok barang.</p>
                </div>
                <a href="{{ route('items.index') }}"
                   class="inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg shadow-sm hover:bg-gray-50 transition-colors w-full sm:w-auto">
                    <svg class="w-5 h-5 mr-2 text-gray-500" 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>
            </div>

            {{-- Card Form --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                
                {{-- Error Alert --}}
                @if ($errors->any())
                    <div class="p-4 bg-red-50 border-b border-red-100">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-red-800">Terdapat kesalahan pada input Anda:</h3>
                                <ul class="mt-1 list-disc list-inside text-sm text-red-700">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif

                <form action="{{ route('items.update', $item->id) }}" method="POST" enctype="multipart/form-data" class="p-6 md:p-8 space-y-8">
                    @csrf
                    @method('PUT')

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        
                        {{-- Nama Barang --}}
                        <div class="col-span-1 md:col-span-2">
                            <label for="nama" class="block text-sm font-medium text-gray-700 mb-1">Nama Barang <span class="text-red-500">*</span></label>
                            <input type="text" name="nama" id="nama"
                                   value="{{ old('nama', $item->nama) }}"
                                   class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 px-3" 
                                   placeholder="Contoh: Laptop Dell Latitude 7420" required>
                        </div>

                        {{-- SKU --}}
                        <div>
                            <label for="sku" class="block text-sm font-medium text-gray-700 mb-1">SKU (Kode Barang)</label>
                            <div class="relative rounded-md shadow-sm">
                                <input type="text" name="sku" id="sku"
                                       value="{{ old('sku', $item->sku) }}"
                                       class="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono"
                                       placeholder="INV-2024-001">
                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                    <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                                    </svg>
                                </div>
                            </div>
                        </div>

                        {{-- Divisi --}}
                        <div>
                            <label for="divisi_id" class="block text-sm font-medium text-gray-700 mb-1">Divisi Pemilik <span class="text-red-500">*</span></label>
                            <select name="divisi_id" id="divisi_id"
                                    class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 px-3 bg-white" 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>

                        {{-- Jumlah Stok --}}
                        <div>
                            <label for="jumlah" class="block text-sm font-medium text-gray-700 mb-1">Jumlah Stok Saat Ini <span class="text-red-500">*</span></label>
                            <input type="number" name="jumlah" id="jumlah" min="0"
                                   value="{{ old('jumlah', $item->jumlah) }}"
                                   class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 px-3" required>
                        </div>

                        {{-- Stok Minimum --}}
                        <div>
                            <label for="min_stok" class="block text-sm font-medium text-gray-700 mb-1">Stok Minimum (Alert) <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="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 px-3" required>
                            <p class="mt-1 text-xs text-gray-500">Batas stok untuk memicu peringatan "Hampir Habis".</p>
                        </div>

                        {{-- Deskripsi --}}
                        <div class="col-span-1 md:col-span-2">
                            <label for="deskripsi" class="block text-sm font-medium text-gray-700 mb-1">Deskripsi & Spesifikasi</label>
                            <textarea name="deskripsi" id="deskripsi" rows="4"
                                      class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2.5 px-3"
                                      placeholder="Tambahkan detail spesifikasi barang...">{{ old('deskripsi', $item->deskripsi) }}</textarea>
                        </div>

                        {{-- Foto Barang --}}
                        <div class="col-span-1 md:col-span-2 pt-4 border-t border-gray-100">
                            <label class="block text-sm font-medium text-gray-700 mb-4">Foto Barang</label>
                            
                            <div class="flex flex-col sm:flex-row gap-6 items-start">
                                {{-- Preview --}}
                                <div class="flex-shrink-0">
                                    <span class="block text-xs text-gray-500 mb-2">Foto Saat Ini:</span>
                                    <div class="h-32 w-32 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center overflow-hidden bg-gray-50 relative group">
                                        @if($item->foto)
                                            <img src="{{ asset('storage/' . $item->foto) }}" alt="Preview" class="h-full w-full object-cover">
                                        @else
                                            <div class="text-center p-2">
                                                <svg class="mx-auto h-8 w-8 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                                <span class="text-xs text-gray-500 block mt-1">Kosong</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                {{-- Input File --}}
                                <div class="flex-1 w-full">
                                    <label for="foto" class="block text-sm font-medium text-gray-700 mb-1">Unggah Foto Baru</label>
                                    <input type="file" name="foto" id="foto" accept="image/*"
                                           class="block w-full text-sm text-gray-500
                                                  file:mr-4 file:py-2.5 file:px-4
                                                  file:rounded-lg file:border-0
                                                  file:text-sm file:font-semibold
                                                  file:bg-blue-50 file:text-blue-700
                                                  file:cursor-pointer hover:file:bg-blue-100
                                                  border border-gray-300 rounded-lg cursor-pointer bg-white focus:outline-none">
                                    <p class="mt-2 text-xs text-gray-500">
                                        Format: JPG, PNG, JPEG. Maks 2MB. Biarkan kosong jika tidak ingin mengubah foto.
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>

                    {{-- Footer Actions --}}
                    <div class="pt-6 border-t border-gray-100 flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
                        <a href="{{ route('items.index') }}"
                           class="w-full sm:w-auto inline-flex justify-center items-center px-4 py-2.5 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors">
                            Batal
                        </a>
                        <button type="submit"
                                class="w-full sm:w-auto inline-flex justify-center items-center px-4 py-2.5 border border-transparent shadow-sm text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                            <svg class="w-4 h-4 mr-2" 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>
            </div>

        </div>
    </main>
</div>

</body>
</html>