@extends('layouts.admin')

@section('title', 'Edit Kategori: ' . $category->name)

@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">Edit 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">
                <div>
                    <h5 class="card-title fw-bold mb-0 text-dark">
                        <i class="bi bi-pencil-square text-warning me-2"></i>Edit Kategori
                    </h5>
                    <small class="text-muted">ID #{{ $category->id }} - {{ $category->name }}</small>
                </div>
                <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.update', $category) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- 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', $category->name) }}" 
                            class="form-control @error('name') is-invalid @enderror" 
                            required
                        >
                        @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', $category->slug) }}" 
                                class="form-control @error('slug') is-invalid @enderror" 
                            >
                        </div>
                        @error('slug')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @else
                            <div class="form-text text-muted">Hanya huruf kecil, angka, dan tanda hubung (-). Pastikan unik.</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" 
                        >{{ old('description', $category->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Upload & Preview 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>

                        @if($category->image)
                            <div class="mb-2 p-2 bg-light rounded-3 border d-inline-block">
                                <p class="small text-muted mb-1">Gambar Saat Ini:</p>
                                <img src="{{ $category->image_url }}" alt="{{ $category->name }}" class="img-thumbnail rounded-3" style="max-height: 120px;">
                            </div>
                        @endif

                        <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">Pilih berkas baru jika ingin mengganti gambar sebelumnya. Format: JPG, JPEG, PNG, WEBP, atau SVG. Maksimal 2MB.</div>
                        @enderror

                        <!-- Preview Gambar Baru -->
                        <div class="mt-3 d-none" id="imagePreviewContainer">
                            <p class="small text-muted mb-1">Pratinjau Gambar Baru:</p>
                            <img id="imagePreview" src="#" alt="Preview Gambar Baru" 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', $category->is_active) ? 'checked' : '' }}
                            >
                            <label class="form-check-label fw-semibold ms-2" for="is_active">
                                Kategori Aktif
                            </label>
                            <div class="text-muted small ms-2">
                                Nonaktifkan jika kategori ini sedang tidak ingin ditampilkan kepada pembeli.
                            </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-check2-circle me-1"></i> Perbarui Kategori
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // 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