@extends('layouts.admin')

@section('heading', 'Age Types')
@section('subheading', 'Define your shop\'s own age brackets for pricing (e.g. Adult, Teen, Child, Infant).')

@section('content')
@include('partials.master-tabs')
@if (session('status'))
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#E1F5EE; color:#0F6E56;">{{ session('status') }}</div>
@endif
@if ($errors->any())
  <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">{{ $errors->first() }}</div>
@endif

<div class="card p-6 mb-4">
  <p class="text-xs font-medium mb-3" style="color:#1A1625;">Add a new age type</p>
  <form method="POST" action="{{ route('shop.ageTypes.store') }}" class="grid grid-cols-3 gap-3 items-end">
    @csrf
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Name</label>
      <input type="text" name="name" placeholder="e.g. Teen" required class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <div>
      <label class="block text-xs mb-1" style="color:#6b6470;">Tamil name (optional)</label>
      <input type="text" name="name_ta" class="w-full px-3 py-2 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>
    <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#5E35B1;">Add</button>
  </form>
</div>

<div class="card p-0 overflow-hidden">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left" style="background:#FFF9F0; color:#a19a8f;">
        <th class="px-5 py-3 font-medium text-xs">Name</th>
        <th class="px-5 py-3 font-medium text-xs">Tamil</th>
        <th class="px-5 py-3 font-medium text-xs text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      @forelse($ageTypes as $type)
        <tr class="border-t" style="border-color:#f2ece0;">
          <form method="POST" action="{{ route('shop.ageTypes.update', $type) }}" class="contents">
            @csrf @method('PUT')
            <td class="px-5 py-3"><input type="text" name="name" value="{{ $type->name }}" class="w-full px-2 py-1 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;"></td>
            <td class="px-5 py-3"><input type="text" name="name_ta" value="{{ $type->name_ta }}" class="w-full px-2 py-1 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;"></td>
            <td class="px-5 py-3 text-right whitespace-nowrap">
              <button type="submit" class="text-xs font-medium mr-3" style="color:#0F6E56;">Save</button>
          </form>
              <form method="POST" action="{{ route('shop.ageTypes.destroy', $type) }}" class="inline" onsubmit="return confirm('Delete {{ $type->name }}?');">
                @csrf @method('DELETE')
                <button type="submit" class="text-xs font-medium" style="color:#C2185B;">Delete</button>
              </form>
            </td>
        </tr>
      @empty
        <tr><td colspan="3" class="px-5 py-8 text-center" style="color:#a19a8f;">No age types yet. Add your first one above.</td></tr>
      @endforelse
    </tbody>
  </table>
</div>

@endsection