@extends('backend.layout.app')

@section('content')
<div class="page-content">
  <div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <h4 class="mb-1 fw-bold">Add Category</h4>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('admin.question-bank-category.index') }}">QB Categories</a></li>
            <li class="breadcrumb-item active">Create</li>
          </ol>
        </nav>
      </div>
      <a href="{{ route('admin.question-bank-category.index') }}" class="btn btn-outline-secondary">
        <i class="ri-arrow-left-line me-1"></i> Back
      </a>
    </div>

    <div class="card shadow-sm border-0 rounded-4" style="max-width: 640px;">
      <div class="card-body p-4">
        <form action="{{ route('admin.question-bank-category.store') }}" method="POST">
          @csrf

          {{-- Name --}}
          <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. Physics, Chapter 1 - Motion"
                   value="{{ old('name') }}" required>
            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
          </div>

          {{-- Parent Category (optional) --}}
          <div class="mb-3">
            <label class="form-label">Parent Category <span class="text-muted">(optional — leave blank for root)</span></label>
            <select name="parent_id" class="form-select select2 @error('parent_id') is-invalid @enderror">
              <option value="">-- No Parent (Root Category) --</option>
              @foreach($parentCategories as $parent)
                <option value="{{ $parent->id }}" {{ old('parent_id') == $parent->id ? 'selected' : '' }}>
                  {{ $parent->name }}
                </option>
                @foreach($parent->children as $child)
                  <option value="{{ $child->id }}" {{ old('parent_id') == $child->id ? 'selected' : '' }}>
                    &nbsp;&nbsp;&nbsp; ↳ {{ $child->name }}
                  </option>
                @endforeach
              @endforeach
            </select>
            @error('parent_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
          </div>

          {{-- Description --}}
          <div class="mb-4">
            <label class="form-label">Description <span class="text-muted">(optional)</span></label>
            <textarea name="description" class="form-control" rows="3"
                      placeholder="Brief description of this category">{{ old('description') }}</textarea>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary px-4">Save Category</button>
            <a href="{{ route('admin.question-bank-category.index') }}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
@endsection