@extends('layout')
@section('page-title', 'Add Benefit Card')

@section('dashboard-content')
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>Add Benefit Card</span>
    <a href="{{ route('admin.benefits.index') }}" class="btn btn-sm btn-outline-secondary">← Back</a>
  </div>
  <div class="card-body p-4">

    @if($errors->any())
      <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <form action="{{ url('admin/benefits/store') }}" method="POST">
      @csrf
      <div class="row g-3">
        <div class="col-md-2">
          <label class="form-label">Icon <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="icon" value="{{ old('icon', '🌿') }}" required>
          <small class="text-muted">Emoji</small>
        </div>
        <div class="col-md-7">
          <label class="form-label">Title <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="title" value="{{ old('title') }}" required>
        </div>
        <div class="col-md-3">
          <label class="form-label">Sort Order</label>
          <input type="number" class="form-control" name="sort_order" value="{{ old('sort_order', 0) }}">
        </div>
        <div class="col-12">
          <label class="form-label">Body <span class="text-danger">*</span></label>
          <textarea class="form-control" name="body" rows="3" required>{{ old('body') }}</textarea>
        </div>
        <div class="col-12">
          <button type="submit" class="submit-button">Create Card</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection