@extends('layout')
@section('page-title', 'Benefits')

@section('dashboard-content')

@if(session('success'))
  <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
  <div class="alert alert-danger">{{ session('error') }}</div>
@endif

{{-- Section header settings --}}
<div class="card mb-4">
  <div class="card-header">Section Header</div>
  <div class="card-body p-4">
    <form action="{{ url('admin/benefits/store') }}" method="POST">
      @csrf
      <input type="hidden" name="card_id" value="{{ $first->id ?? '' }}">
      <input type="hidden" name="icon"  value="{{ $first->icon ?? '🌿' }}">
      <input type="hidden" name="title" value="{{ $first->title ?? 'placeholder' }}">
      <input type="hidden" name="body"  value="{{ $first->body ?? 'placeholder' }}">
      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label">Eyebrow</label>
          <input type="text" class="form-control" name="section_eyebrow"
                 value="{{ $first->section_eyebrow ?? 'Why EveryHer' }}">
        </div>
        <div class="col-md-4">
          <label class="form-label">Section Headline</label>
          <input type="text" class="form-control" name="section_headline"
                 value="{{ $first->section_headline ?? 'Less, but better.' }}">
        </div>
        <div class="col-md-4">
          <label class="form-label">Section Sub-text</label>
          <input type="text" class="form-control" name="section_sub"
                 value="{{ $first->section_sub ?? '' }}">
        </div>
        <div class="col-12">
          <button type="submit" class="submit-button">Update Section Header</button>
        </div>
      </div>
    </form>
  </div>
</div>

{{-- Cards list --}}
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>Benefit Cards</span>
    <a href="{{ route('admin.benefits.create') }}" class="submit-button text-decoration-none">+ Add Card</a>
  </div>
  <div class="card-body p-0">
    <table class="table mb-0">
      <thead>
        <tr>
          <th style="width:60px;">Icon</th>
          <th>Title</th>
          <th>Body (preview)</th>
          <th style="width:80px;">Order</th>
          <th style="width:120px;">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($cards as $card)
        <tr>
          <td style="font-size:1.4rem;">{{ $card->icon }}</td>
          <td>{{ $card->title }}</td>
          <td>{{ Str::limit($card->body, 60) }}</td>
          <td>{{ $card->sort_order }}</td>
          <td>
            <a href="{{ route('admin.benefits.edit', $card) }}" class="btn btn-sm btn-outline-secondary me-1">Edit</a>
            <form action="{{ route('admin.benefits.destroy', $card) }}" method="POST" style="display:inline"
                  onsubmit="return confirm('Delete this card?')">
              @csrf @method('DELETE')
              <button type="submit" class="btn-admin-danger">Del</button>
            </form>
          </td>
        </tr>
        @empty
        <tr><td colspan="5" class="text-center text-muted py-4">No benefit cards yet. <a href="{{ route('admin.benefits.create') }}">Add one</a>.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection