@extends('layouts.admin')

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

@section('content')
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb small">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.categories.index') }}" class="text-decoration-none text-muted">Kategori</a></li>
        <li class="breadcrumb-item active text-warning fw-semibold" aria-current="page">Tambah Kategori</li>
    </ol>
</nav>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card card-custom">
            <div class="card-header bg-white py-3 px-4 border-bottom d-flex align-items-center justify-content-between">
                <h5 class="card-title fw-bold mb-0 text-dark">
                    <i class="bi bi-folder-plus text-warning me-2"></i>Form Tambah Kategori
                </h5>
                <a href="{{ route('admin.categories.index') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                    <i class="bi bi-arrow-left me-1"></i> Kembali
                </a>
            </div>

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

                    <!-- Nama Kategori -->
                    <div class="mb-3">
                        <label for="name" class="form-label fw-semibold">
                            Nama Kategori <span class="text-danger">*</span>
                        </label>
                        <input 
                            type="text" 
                            name="name" 
                            id="name" 
                            value="{{ old('name') }}" 
                            class="form-control @error('name') is-invalid @enderror" 
                            placeholder="Contoh: Elektronik, Pakaian Pria, Aksesoris"
                            required
                            autofocus
                        >
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @else
                            <div class="form-text text-muted">Nama kategori wajib diisi, maksimal 255 karakter.</div>
                        @enderror
                    </div>

                    <!-- Slug Kategori -->
                    <div class="mb-3">
                        <label for="slug" class="form-label fw-semibold">
                            Slug URL <span class="badge bg-light text-muted border fw-normal">Opsional</span>
                        </label>
                        <div class="input-group">
                            <span class="input-group-text bg-light text-muted">/categories/</span>
                            <input 
                                type="text" 
                                name="slug" 
                                id="slug" 
                                value="{{ old('slug') }}" 
                                class="form-control @error('slug') is-invalid @enderror" 
                                placeholder="otomatis-dibuat-dari-nama"
                            >
                        </div>
                        @error('slug')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @else
                            <div class="form-text text-muted">Akan dibuat otomatis jika dikosongkan. Hanya huruf kecil, angka, dan tanda hubung (-).</div>
                        @enderror
                    </div>

                    <!-- Deskripsi -->
                    <div class="mb-3">
                        <label for="description" class="form-label fw-semibold">
                            Deskripsi Kategori <span class="badge bg-light text-muted border fw-normal">Opsional</span>
                        </label>
                        <textarea 
                            name="description" 
                            id="description" 
                            rows="4" 
                            class="form-control @error('description') is-invalid @enderror" 
                            placeholder="Tuliskan keterangan singkat mengenai kategori ini..."
                        >{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Upload Gambar -->
                    <div class="mb-4">
                        <label for="image" class="form-label fw-semibold">
                            Gambar Kategori <span class="badge bg-light text-muted border fw-normal">Opsional</span>
                        </label>
                        <input 
                            type="file" 
                            name="image" 
                            id="image" 
                            accept="image/jpeg,image/png,image/jpg,image/webp,image/svg+xml"
                            class="form-control @error('image') is-invalid @enderror"
                            onchange="previewImage(event)"
                        >
                        @error('image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @else
                            <div class="form-text text-muted">Format: JPG, JPEG, PNG, WEBP, atau SVG. Maksimal 2MB.</div>
                        @enderror

                        <!-- Preview Gambar -->
                        <div class="mt-3 d-none" id="imagePreviewContainer">
                            <p class="small text-muted mb-1">Pratinjau Gambar:</p>
                            <img id="imagePreview" src="#" alt="Preview" class="img-thumbnail rounded-3" style="max-height: 150px; object-fit: contain;">
                        </div>
                    </div>

                    <!-- Status Kategori -->
                    <div class="mb-4 p-3 bg-light rounded-3 border">
                        <div class="form-check form-switch mb-0">
                            <input 
                                class="form-check-input" 
                                type="checkbox" 
                                role="switch" 
                                id="is_active" 
                                name="is_active" 
                                value="1" 
                                {{ old('is_active', '1') ? 'checked' : '' }}
                            >
                            <label class="form-check-label fw-semibold ms-2" for="is_active">
                                Kategori Aktif
                            </label>
                            <div class="text-muted small ms-2">
                                Kategori yang aktif akan ditampilkan pada katalog produk dan dapat dipilih saat menambah produk baru.
                            </div>
                        </div>
                    </div>

                    <!-- Tombol Aksi -->
                    <div class="d-flex items-center justify-content-end gap-2 border-top pt-4">
                        <a href="{{ route('admin.categories.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
                            Batal
                        </a>
                        <button type="submit" class="btn btn-warning text-dark fw-bold rounded-pill px-4 shadow-sm">
                            <i class="bi bi-save me-1"></i> Simpan Kategori
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Fitur Auto-Slug Generator berdasarkan input nama jika slug belum diisi manual
    const nameInput = document.getElementById('name');
    const slugInput = document.getElementById('slug');
    let isSlugManual = false;

    slugInput.addEventListener('input', function() {
        if (this.value.trim() !== '') {
            isSlugManual = true;
        } else {
            isSlugManual = false;
        }
    });

    nameInput.addEventListener('keyup', function() {
        if (!isSlugManual) {
            slugInput.value = this.value
                .toLowerCase()
                .trim()
                .replace(/[^\w\s-]/g, '')
                .replace(/[\s_-]+/g, '-')
                .replace(/^-+|-+$/g, '');
        }
    });

    // Preview Gambar saat dipilih
    function previewImage(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>
@endsection