@extends('layouts.admin')

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

@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">Tambah Produk</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-box-seam text-shazka-pink me-2"></i>Tambah Produk Baru Shazkabags
                        </h5>
                        <p class="text-muted small mb-0">Lengkapi formulir di bawah ini untuk menambahkan koleksi tas baru ke katalog Shazkabags.</p>
                    </div>
                    <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 class="card-body p-4">

                @if ($categories->isEmpty())
                    <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center gap-3 mb-4">
                        <i class="bi bi-exclamation-triangle-fill fs-3 text-warning"></i>
                        <div>
                            <strong>Belum Ada Kategori!</strong>
                            <p class="mb-1 small">Anda harus memiliki setidaknya 1 kategori produk sebelum dapat menambahkan produk baru.</p>
                            <a href="{{ route('admin.categories.create') }}" class="btn btn-sm btn-dark btn-rounded">
                                <i class="bi bi-plus-lg me-1"></i>Buat Kategori Baru Sekarang
                            </a>
                        </div>
                    </div>
                @endif

                <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <!-- 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') == $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">Pilih kategori yang sesuai dari tabel kategori untuk memudahkan navigasi pembeli.</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') }}" 
                                   placeholder="Contoh: Kemeja Pria Slim Fit Cotton" 
                                   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">(Opsional)</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>Generate
                                </button>
                            </div>
                            <input type="text" 
                                   name="slug" 
                                   id="slug" 
                                   class="form-control font-monospace @error('slug') is-invalid @enderror" 
                                   value="{{ old('slug') }}" 
                                   placeholder="otomatis-dari-nama">
                            @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">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <label for="sku" class="form-label fw-semibold mb-0">
                                    Kode SKU <span class="text-muted small fw-normal">(Opsional)</span>
                                </label>
                                <button type="button" id="btnAutoSku" class="btn btn-link btn-sm text-decoration-none p-0" style="font-size: 11px;">
                                    <i class="bi bi-arrow-repeat me-1"></i>Acak Baru
                                </button>
                            </div>
                            <input type="text" 
                                   name="sku" 
                                   id="sku" 
                                   class="form-control font-monospace text-uppercase @error('sku') is-invalid @enderror" 
                                   value="{{ old('sku', $defaultSku) }}" 
                                   placeholder="PRD-XXXXXX">
                            @error('sku')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @else
                                <div class="form-text" style="font-size: 11px;">Kode unik identifikasi stok barang.</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') }}" 
                                       placeholder="50000" 
                                       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', 10) }}" 
                                       placeholder="0" 
                                       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" 
                                  placeholder="Jelaskan spesifikasi, bahan, ukuran, keunggulan, atau petunjuk penggunaan produk ini...">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- 5. Upload Gambar Produk -->
                    <div class="mb-4">
                        <label for="image" class="form-label fw-semibold">
                            Foto / Gambar Produk <span class="text-muted small fw-normal">(Opsional)</span>
                        </label>
                        <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">Maksimal 2MB. Format file: JPG, PNG, WEBP, atau SVG.</div>
                        @enderror

                        <!-- Preview Container -->
                        <div id="imagePreviewContainer" class="mt-3 d-none">
                            <span class="text-muted small d-block mb-1">Pratinjau Foto Produk:</span>
                            <img id="imagePreview" src="#" alt="Pratinjau Foto" 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">
                                            Produk akan langsung terlihat dan dapat dicari di katalog etalase toko.
                                        </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', '1') == '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">
                                            Tandai produk ini untuk diprioritaskan di sorotan promo atau halaman depan.
                                        </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', '0') == '1' ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex align-items-center justify-content-end gap-2 pt-3 border-top">
                        <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" {{ $categories->isEmpty() ? 'disabled' : '' }}>
                            <i class="bi bi-cloud-arrow-up me-1.5"></i>Simpan Produk
                        </button>
                    </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, '');
    }

    nameInput.addEventListener('input', function() {
        if (!slugInput.dataset.manualEdited) {
            slugInput.value = generateSlug(this.value);
        }
    });

    slugInput.addEventListener('input', function() {
        this.dataset.manualEdited = "true";
    });

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

    // Random SKU Generator Helper
    const btnAutoSku = document.getElementById('btnAutoSku');
    const skuInput = document.getElementById('sku');

    btnAutoSku.addEventListener('click', function() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        let randomStr = '';
        for (let i = 0; i < 6; i++) {
            randomStr += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        skuInput.value = 'PRD-' + randomStr;
    });

    // 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