@extends('layout')
@section('page-title', 'Transparency / Ingredients')

@section('dashboard-content')

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

{{-- Section header --}}
<div class="card mb-4">
  <div class="card-header">Section Header</div>
  <div class="card-body p-4">
    <form action="{{ url('admin/transparency/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="name"        value="{{ $first->name ?? 'placeholder' }}">
      <input type="hidden" name="description" value="{{ $first->description ?? 'placeholder' }}">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Section Headline</label>
          <input type="text" class="form-control" name="section_headline"
                 value="{{ $first->section_headline ?? "What's inside matters." }}">
        </div>
        <div class="col-md-6">
          <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>

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>Ingredient Cards</span>
    <a href="{{ route('admin.transparency.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>Name</th>
          <th>Description (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->name }}</td>
          <td>{{ Str::limit($card->description, 60) }}</td>
          <td>{{ $card->sort_order }}</td>
          <td>
            <a href="{{ route('admin.transparency.edit', $card) }}" class="btn btn-sm btn-outline-secondary me-1">Edit</a>
            <form action="{{ route('admin.transparency.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 cards yet. <a href="{{ route('admin.transparency.create') }}">Add one</a>.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection