@extends('admin.layout.app')

@section('content')
<div class="app-content">
    <div class="container-fluid mt-4">
        <div class="row justify-content-center">
            <div class="col-lg-12 col-md-10">

                <div class="card shadow-lg border-0 rounded-4">

                    <div class="card-header bg-gradient bg-primary text-white rounded-top-4 d-flex align-items-center">
                        <i class="bi bi-diagram-3-fill me-2" style="font-size: 1.3rem;"></i>
                        <h4 class="mb-0 fw-semibold">Create Subcategory</h4>
                    </div>

                    <div class="card-body p-4">

                        <form method="POST" action="{{ route('subcategory-store') }}" autocomplete="off">
                            @csrf

                            {{-- Category --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-folder2-open me-1 text-primary"></i> Category
                                </label>

                                <select name="category_id"
                                        class="form-select form-select-lg rounded-3 shadow-sm"
                                        required>

                                    <option value="">Select Category</option>

                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->heading }}
                                        </option>
                                    @endforeach

                                </select>

                                @error('category_id')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Subcategory Name --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-card-heading me-1 text-primary"></i> Subcategory Name
                                </label>

                                <input type="text"
                                       name="subcategory_name"
                                       class="form-control form-control-lg rounded-3 shadow-sm"
                                       placeholder="Enter Subcategory Name"
                                       value="{{ old('subcategory_name') }}"
                                       required>

                                @error('subcategory_name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Status --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-toggle-on me-1 text-primary"></i> Status
                                </label>

                                <select name="status"
                                        class="form-select form-select-lg rounded-3 shadow-sm"
                                        required>

                                    <option value="">Select Status</option>

                                    <option value="active"
                                        {{ old('status') == 'active' ? 'selected' : '' }}>
                                        Active
                                    </option>

                                    <option value="inactive"
                                        {{ old('status') == 'inactive' ? 'selected' : '' }}>
                                        Inactive
                                    </option>

                                </select>

                                @error('status')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Submit --}}
                            <div class="d-flex justify-content-end">

                                <button type="submit"
                                        class="btn btn-primary btn-lg px-4 rounded-3 shadow">
                                    <i class="bi bi-plus-circle me-2"></i>
                                    Create Subcategory
                                </button>

                            </div>

                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection