@extends('layouts.admin')

@section('title', 'Edit Produk: ' . $product->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}" class="text-decoration-none">Produk</a></li>
    <li class="breadcrumb-item active" aria-current="page">Edit: {{ $product->name }}</li>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-9">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="fw-bold text-dark mb-0">
                            <i class="bi bi-pencil-square text-primary me-2"></i>Edit Produk: {{ $product->name }}
                        </h5>
                        <p class="text-muted small mb-0">Perbarui rincian spesifikasi, harga, kuantitas stok, atau foto produk.</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('admin.products.show', $product) }}" class="btn btn-outline-info btn-sm btn-rounded">
                            <i class="bi bi-eye me-1"></i>Lihat Detail
                        </a>
                        <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-sm btn-rounded">
                            <i class="bi bi-arrow-left me-1"></i>Kembali
                        </a>
                    </div>
                </div>
            </div>

            <div class="card-body p-4">
                <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- 1. Kategori Produk (Diambil dari tabel categories) -->
                    <div class="mb-4">
                        <label for="category_id" class="form-label fw-semibold">
                            Kategori Produk <span class="text-danger">*</span>
                        </label>
                        <select name="category_id" 
                                id="category_id" 
                                class="form-select @error('category_id') is-invalid @enderror" 
                                required>
                            <option value="">-- Pilih Kategori Produk --</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }} {{ !$category->is_active ? '(Nonaktif)' : '' }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @else
                            <div class="form-text">Kategori tempat produk ini dikelompokkan dalam katalog toko.</div>
                        @enderror
                    </div>

                    <!-- 2. Nama Produk & Slug -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-7">
                            <label for="name" class="form-label fw-semibold">
                                Nama Produk <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   id="name" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   value="{{ old('name', $product->name) }}" 
                                   required 
                                   autofocus>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-5">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label for="slug" class="form-label fw-semibold mb-0">
                                    Slug URL <span class="text-muted small fw-normal">(Ramah SEO)</span>
                                </label>
                                <button type="button" id="btnAutoSlug" class="btn btn-link btn-sm text-decoration-none p-0" style="font-size: 11px;">
                                    <i class="bi bi-magic me-1"></i>Regenerate
                                </button>
                            </div>
                            <input type="text" 
                                   name="slug" 
                                   id="slug" 
                                   class="form-control font-monospace @error('slug') is-invalid @enderror" 
                                   value="{{ old('slug', $product->slug) }}">
                            @error('slug')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- 3. SKU, Harga & Stok -->
                    <div class="row g-3 mb-3">
                        <!-- SKU (Stock Keeping Unit) -->
                        <div class="col-md-4">
                            <label for="sku" class="form-label fw-semibold">
                                Kode SKU <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   name="sku" 
                                   id="sku" 
                                   class="form-control font-monospace text-uppercase @error('sku') is-invalid @enderror" 
                                   value="{{ old('sku', $product->sku) }}" 
                                   required>
                            @error('sku')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @else
                                <div class="form-text" style="font-size: 11px;">Kode unik identifikasi stok.</div>
                            @enderror
                        </div>

                        <!-- Harga Produk -->
                        <div class="col-md-4">
                            <label for="price" class="form-label fw-semibold">
                                Harga Satuan <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light fw-bold text-muted">Rp</span>
                                <input type="number" 
                                       name="price" 
                                       id="price" 
                                       step="100" 
                                       min="0" 
                                       class="form-control @error('price') is-invalid @enderror" 
                                       value="{{ old('price', (int)$product->price) }}" 
                                       required>
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Jumlah Stok -->
                        <div class="col-md-4">
                            <label for="stock" class="form-label fw-semibold">
                                Jumlah Stok <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <input type="number" 
                                       name="stock" 
                                       id="stock" 
                                       min="0" 
                                       class="form-control @error('stock') is-invalid @enderror" 
                                       value="{{ old('stock', $product->stock) }}" 
                                       required>
                                <span class="input-group-text bg-light text-muted">Unit</span>
                                @error('stock')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- 4. Deskripsi Produk -->
                    <div class="mb-3">
                        <label for="description" class="form-label fw-semibold">
                            Deskripsi Produk <span class="text-muted small fw-normal">(Opsional)</span>
                        </label>
                        <textarea name="description" 
                                  id="description" 
                                  rows="4" 
                                  class="form-control @error('description') is-invalid @enderror">{{ old('description', $product->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- 5. Upload & Preview Gambar Produk -->
                    <div class="mb-4">
                        <label for="image" class="form-label fw-semibold">
                            Foto / Gambar Produk
                        </label>

                        <!-- Tampilan Foto Saat Ini -->
                        @if ($product->image_url)
                            <div class="mb-3 p-3 bg-light rounded-3 border d-flex align-items-center gap-3">
                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="rounded-3 border object-fit-cover shadow-xs" width="80" height="80">
                                <div>
                                    <span class="fw-semibold small d-block text-dark">Foto Saat Ini</span>
                                    <span class="text-muted small d-block font-monospace">{{ $product->image }}</span>
                                    <span class="text-muted small">Pilih file baru di bawah jika ingin mengganti gambar produk ini.</span>
                                </div>
                            </div>
                        @endif

                        <input type="file" 
                               name="image" 
                               id="image" 
                               class="form-control @error('image') is-invalid @enderror" 
                               accept="image/jpeg,image/png,image/jpg,image/webp,image/svg+xml"
                               onchange="previewProductImage(event)">
                        @error('image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @else
                            <div class="form-text">Biarkan kosong jika tidak ingin mengubah foto produk. Maksimal 2MB (JPG, PNG, WEBP, SVG).</div>
                        @enderror

                        <!-- Preview Container Baru -->
                        <div id="imagePreviewContainer" class="mt-3 d-none">
                            <span class="text-muted small d-block mb-1">Pratinjau Foto Baru:</span>
                            <img id="imagePreview" src="#" alt="Pratinjau Foto Baru" class="rounded-3 border object-fit-cover shadow-xs" style="max-height: 150px; max-width: 200px;">
                        </div>
                    </div>

                    <!-- 6. Switch Status & Featured -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 border h-100">
                                <div class="form-check form-switch d-flex align-items-center justify-content-between ps-0 mb-0">
                                    <div>
                                        <label class="form-check-label fw-bold text-dark d-block" for="is_active">
                                            Status Aktif (Tampil di Toko)
                                        </label>
                                        <span class="text-muted small">
                                            Jika dinonaktifkan, pembeli tidak akan melihat produk ini di etalase belanja.
                                        </span>
                                    </div>
                                    <input class="form-check-input ms-3 fs-5" 
                                           type="checkbox" 
                                           role="switch" 
                                           id="is_active" 
                                           name="is_active" 
                                           value="1" 
                                           {{ old('is_active', $product->is_active ? '1' : '0') == '1' ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded-3 border h-100">
                                <div class="form-check form-switch d-flex align-items-center justify-content-between ps-0 mb-0">
                                    <div>
                                        <label class="form-check-label fw-bold text-dark d-block" for="is_featured">
                                            Produk Unggulan (Featured)
                                        </label>
                                        <span class="text-muted small">
                                            Menampilkan lencana 'Unggulan' dan prioritas sorotan promosi.
                                        </span>
                                    </div>
                                    <input class="form-check-input ms-3 fs-5" 
                                           type="checkbox" 
                                           role="switch" 
                                           id="is_featured" 
                                           name="is_featured" 
                                           value="1" 
                                           {{ old('is_featured', $product->is_featured ? '1' : '0') == '1' ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex align-items-center justify-content-between pt-3 border-top">
                        <span class="text-muted small">
                            Terakhir diubah: {{ $product->updated_at?->format('d M Y H:i') ?? '-' }}
                        </span>
                        <div class="d-flex gap-2">
                            <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-rounded px-4">
                                Batal
                            </a>
                            <button type="submit" class="btn btn-primary btn-rounded px-4 shadow-sm">
                                <i class="bi bi-check2-circle me-1.5"></i>Simpan Perubahan
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Realtime Slug Generator
    const nameInput = document.getElementById('name');
    const slugInput = document.getElementById('slug');
    const btnAutoSlug = document.getElementById('btnAutoSlug');

    function generateSlug(text) {
        return text
            .toString()
            .toLowerCase()
            .trim()
            .replace(/[^\w\s-]/g, '')
            .replace(/[\s_-]+/g, '-')
            .replace(/^-+|-+$/g, '');
    }

    btnAutoSlug.addEventListener('click', function() {
        slugInput.value = generateSlug(nameInput.value);
    });

    // Image Preview Helper
    function previewProductImage(event) {
        const file = event.target.files[0];
        const preview = document.getElementById('imagePreview');
        const container = document.getElementById('imagePreviewContainer');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                container.classList.remove('d-none');
            };
            reader.readAsDataURL(file);
        } else {
            preview.src = '#';
            container.classList.add('d-none');
        }
    }
</script>
@endpush