@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-light py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title m-0 font-weight-bold">Edit Category: {{ $blogCategory->name }}</h3>
                        <div class="card-tools">
                            <a href="{{ route('admin.blog-categories.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left mr-1"></i> Back to Categories
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    @if($errors->any())
                        <div class="alert alert-danger mb-4">
                            <ul class="mb-0 pl-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.blog-categories.update', $blogCategory) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="form-group mb-4">
                            <label for="name" class="form-label font-weight-bold">Category Name</label>
                            <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $blogCategory->name) }}" required>
                        </div>

                        <div class="form-group mb-4">
                            <label for="slug" class="form-label font-weight-bold">Slug (URL)</label>
                            <input type="text" name="slug" id="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $blogCategory->slug) }}">
                            <small class="form-text text-muted">Leave empty to auto-generate from name</small>
                        </div>

                        <div class="form-group mb-4">
                            <label for="description" class="form-label font-weight-bold">Description</label>
                            <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" rows="3">{{ old('description', $blogCategory->description) }}</textarea>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i> Update Category
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Slug generation
    document.getElementById('name').addEventListener('blur', function() {
        const name = this.value;
        const slug = document.getElementById('slug');
        
        if (!slug.value) {
            slug.value = name.toLowerCase()
                .replace(/[^\w\s-]/g, '')
                .replace(/[\s_-]+/g, '-')
                .replace(/^-+|-+$/g, '');
        }
    });
</script>
@endsection