{{-- resources/views/admin/categories/create.blade.php --}}
{{-- Controller: Admin\CategoryController@create / @store --}}

@extends('layouts.admin')

@section('title', 'Add Category')
@section('page_title', 'Add Category')

@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/forms.css') }}">
@endsection

@section('content')

    <x-admin.page-header
        title="Add New Category"
        :breadcrumb="[
            ['label' => 'Categories', 'url' => route('admin.categories.index')],
            ['label' => 'Add New']
        ]"
    />

    <x-admin.form-card
        title="Category Details"
        :action="route('admin.categories.store')"
        method="POST"
        enctype="multipart"
    >

        <div class="form-grid">

            <div class="form-group">
                <label class="form-label" for="name">Category Name <span class="form-required">*</span></label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" class="form-input {{ $errors->has('name') ? 'form-input--error' : '' }}" required>
                @error('name') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label class="form-label" for="icon">Bootstrap Icon Class</label>
                <input type="text" name="icon" id="icon" value="{{ old('icon') }}"
                       class="form-input js-icon-input" placeholder="e.g. bi-building">
                <span class="form-hint">Click "Browse" to pick an icon visually</span>
                @error('icon') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group form-group--full">
                <label class="form-label" for="description">Description</label>
                <textarea name="description" id="description" rows="3" class="form-textarea">{{ old('description') }}</textarea>
                @error('description') <span class="form-error">{{ $message }}</span> @enderror
            </div>

        </div>

        <div class="form-toggles-row">
            <div class="form-toggle">
                <label class="toggle-label" for="status">Status (Active)</label>
                <label class="toggle-switch">
                    <input type="hidden" name="status" value="inactive">
                    <input type="checkbox" name="status" id="status" value="active" {{ old('status', 'active') === 'active' ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>

        <x-admin.image-upload name="image" label="Category Image" />

        <div class="form-actions">
            <button type="submit" class="btn-primary-action"><i class="bi bi-check-lg"></i> Save Category</button>
            <a href="{{ route('admin.categories.index') }}" class="btn-cancel">Cancel</a>
        </div>

    </x-admin.form-card>

@endsection

@section('page_js')
    <script src="{{ asset('js/admin/image-preview.js') }}"></script>
    <script src="{{ asset('js/admin/icon-picker.js') }}"></script>
@endsection