@extends('layouts.app')

@section('title', 'Tambah Produk Baru')

@section('content')
<!-- Breadcrumb Navigasi -->
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('products.index') }}" class="text-decoration-none">Produk</a></li>
        <li class="breadcrumb-item active" aria-current="page">Tambah Produk</li>
    </ol>
</nav>

<div class="row justify-content-center">
    <div class="col-12 col-lg-9">
        <!-- Peringatan jika belum ada kategori -->
        @if ($categories->isEmpty())
            <div class="alert alert-warning alert-dismissible fade show d-flex align-items-center gap-2 mb-4" role="alert">
                <i class="bi bi-exclamation-triangle-fill fs-5 text-warning"></i>
                <div class="flex-grow-1">
                    <strong>Belum ada Kategori!</strong> Anda harus membuat minimal 1 kategori sebelum dapat menambahkan produk.
                </div>
                <a href="{{ route('categories.create') }}" class="btn btn-warning btn-sm fw-semibold">
                    <i class="bi bi-plus-circle me-1"></i>Buat Kategori
                </a>
            </div>
        @endif

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
                <h5 class="card-title fw-bold text-dark mb-0">
                    <i class="bi bi-plus-circle text-primary me-2"></i>Form Tambah Produk Baru
                </h5>
                <a href="{{ route('products.index') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-left me-1"></i>Kembali ke Daftar
                </a>
            </div>

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

                    <!-- Baris 1: Kategori & Nama Produk -->
                    <div class="row g-3 mb-3">
                        <!-- Kategori Produk (Dari tabel categories) -->
                        <div class="col-12 col-md-6">
                            <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="" disabled {{ old('category_id') ? '' : 'selected' }}>-- Pilih Kategori --</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                                        {{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @else
                                <div class="form-text">Pilih kategori yang sesuai dari database.</div>
                            @enderror
                        </div>

                        <!-- Nama Produk -->
                        <div class="col-12 col-md-6">
                            <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" 
                                placeholder="Contoh: Kemeja Pria Slim Fit, Laptop ASUS ROG"
                                value="{{ old('name') }}"
                                required
                                autofocus
                            >
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @else
                                <div class="form-text">Nama lengkap dan spesifik produk.</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Baris 2: Harga & Stok -->
                    <div class="row g-3 mb-3">
                        <!-- Harga Produk -->
                        <div class="col-12 col-md-6">
                            <label for="price" class="form-label fw-semibold">
                                Harga Produk (Rp) <span class="text-danger">*</span>
                            </label>
                            <div class="input-group has-validation">
                                <span class="input-group-text bg-light fw-bold text-secondary">Rp</span>
                                <input 
                                    type="number" 
                                    name="price" 
                                    id="price" 
                                    class="form-control @error('price') is-invalid @enderror" 
                                    placeholder="50000"
                                    min="0"
                                    step="any"
                                    value="{{ old('price') }}"
                                    required
                                >
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text">Masukkan nominal harga tanpa titik atau koma.</div>
                        </div>

                        <!-- Stok Produk -->
                        <div class="col-12 col-md-6">
                            <label for="stock" class="form-label fw-semibold">
                                Stok Inventaris <span class="text-danger">*</span>
                            </label>
                            <div class="input-group has-validation">
                                <span class="input-group-text bg-light text-secondary">
                                    <i class="bi bi-stack"></i>
                                </span>
                                <input 
                                    type="number" 
                                    name="stock" 
                                    id="stock" 
                                    class="form-control @error('stock') is-invalid @enderror" 
                                    placeholder="Contoh: 100"
                                    min="0"
                                    step="1"
                                    value="{{ old('stock', 0) }}"
                                    required
                                >
                                @error('stock')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text">Jumlah unit produk yang tersedia untuk dijual.</div>
                        </div>
                    </div>

                    <!-- Baris 3: Slug (Opsional) -->
                    <div class="mb-3">
                        <label for="slug" class="form-label fw-semibold">
                            Slug URL Produk
                        </label>
                        <div class="input-group has-validation">
                            <span class="input-group-text bg-light text-muted font-monospace">/products/</span>
                            <input 
                                type="text" 
                                name="slug" 
                                id="slug" 
                                class="form-control @error('slug') is-invalid @enderror font-monospace" 
                                placeholder="otomatis-dibuat-dari-nama-jika-kosong"
                                value="{{ old('slug') }}"
                            >
                            @error('slug')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-text">Opsional. Jika dikosongkan, sistem akan membuat slug otomatis dari nama produk.</div>
                    </div>

                    <!-- Baris 4: Deskripsi Produk -->
                    <div class="mb-3">
                        <label for="description" class="form-label fw-semibold">
                            Deskripsi Lengkap Produk
                        </label>
                        <textarea 
                            name="description" 
                            id="description" 
                            rows="4" 
                            class="form-control @error('description') is-invalid @enderror" 
                            placeholder="Jelaskan spesifikasi, material, keunggulan, atau petunjuk penggunaan produk..."
                        >{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @else
                            <div class="form-text">Informasi detail mengenai produk untuk kemudahan pelanggan.</div>
                        @enderror
                    </div>

                    <!-- Baris 5: Upload Gambar Produk & Live Preview -->
                    <div class="mb-4">
                        <label for="image" class="form-label fw-semibold">
                            Foto / Gambar Produk
                        </label>
                        <input 
                            type="file" 
                            name="image" 
                            id="imageInput" 
                            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">Format: JPG, JPEG, PNG, WEBP, atau SVG. Ukuran maksimal 2MB.</div>
                        @enderror

                        <!-- Live Preview Box -->
                        <div id="imagePreviewContainer" class="mt-3 p-3 bg-light rounded border text-center d-none" style="max-width: 240px;">
                            <p class="small text-muted mb-2 fw-semibold">Pratinjau Gambar:</p>
                            <img id="imagePreview" src="#" alt="Pratinjau Gambar" class="img-fluid rounded shadow-sm border" style="max-height: 180px; object-fit: contain;">
                        </div>
                    </div>

                    <!-- Tombol Aksi -->
                    <div class="d-flex justify-content-end gap-2 pt-3 border-top">
                        <a href="{{ route('products.index') }}" class="btn btn-outline-secondary px-4">
                            Batal
                        </a>
                        <button type="submit" class="btn btn-primary px-4 shadow-sm" {{ $categories->isEmpty() ? 'disabled' : '' }}>
                            <i class="bi bi-save me-1"></i> Simpan Produk
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function previewProductImage(event) {
        const input = event.target;
        const container = document.getElementById('imagePreviewContainer');
        const preview = document.getElementById('imagePreview');

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