@extends('admin.layouts.app')
@section('title', isset($category) ? 'Edit Category' : 'Add Category')
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.csr.categories.index') }}" style="color:inherit;text-decoration:none;">Categories</a>
    <span>/</span> {{ isset($category) ? 'Edit' : 'Add' }}
@endsection

@section('content')
<div class="page-header">
    <div><h1>{{ isset($category) ? 'Edit Category' : 'Add Category' }}</h1></div>
    <a href="{{ route('admin.csr.categories.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
</div>

<div class="row justify-content-center">
    <div class="col-md-7 col-lg-6">
        <div class="card">
            <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-tag text-primary me-2"></i>Category Details</h6></div>
            <div class="card-body">
                <form method="POST"
                    action="{{ isset($category) ? route('admin.csr.categories.update',$category) : route('admin.csr.categories.store') }}">
                    @csrf @if(isset($category)) @method('PUT') @endif

                    <div class="mb-3">
                        <label class="form-label">Category Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                            placeholder="e.g. Health & Sanitation"
                            value="{{ old('name',$category->name??'') }}" required>
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3">{{ old('description',$category->description??'') }}</textarea>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Icon (FontAwesome class)</label>
                            <div class="input-group">
                                <span class="input-group-text" id="iconPreview"><i class="fas fa-tag"></i></span>
                                <input type="text" name="icon" id="iconInput" class="form-control"
                                    placeholder="fa-heart, fa-leaf..."
                                    value="{{ old('icon',$category->icon??'') }}">
                            </div>
                            <small class="text-muted" style="font-size:11px;">FontAwesome 6 class without "fas"</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Color</label>
                            <div class="input-group">
                                <input type="color" name="color" class="form-control form-control-color"
                                    value="{{ old('color',$category->color??'#2563eb') }}" style="width:50px;padding:2px;">
                                <input type="text" id="colorText" class="form-control" placeholder="#2563eb"
                                    value="{{ old('color',$category->color??'#2563eb') }}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="active"   {{ old('status',$category->status??'active')==='active'?'selected':'' }}>Active</option>
                            <option value="inactive" {{ old('status',$category->status??'')==='inactive'?'selected':'' }}>Inactive</option>
                        </select>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1">
                            <i class="fas fa-save me-2"></i>{{ isset($category) ? 'Update' : 'Create' }}
                        </button>
                        <a href="{{ route('admin.csr.categories.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
const iconInput = document.getElementById('iconInput');
const colorInput = document.querySelector('input[type=color]');
const colorText  = document.getElementById('colorText');

if (iconInput) {
    iconInput.addEventListener('input', function() {
        document.getElementById('iconPreview').innerHTML = `<i class="fas ${this.value}"></i>`;
    });
}
if (colorInput) {
    colorInput.addEventListener('input', function() { colorText.value = this.value; });
}
</script>
@endpush