@extends('layouts.admin_layout')

@section('content')

<main class="h-full pb-16 overflow-y-auto">
  <div class="container grid px-6 mx-auto">
    <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
      <span class="text-blue-500">{{ $tier->exists ? 'Edit' : 'New' }}</span> Grant Tier
    </h2>

    @if ($errors->any())
      <div class="p-4 mb-6 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-900/20 dark:text-red-400">
        <ul class="pl-4 list-disc">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <form method="post" action="{{ $tier->exists ? route('admin.grant-tiers.update', $tier->id) : route('admin.grant-tiers.store') }}" class="max-w-3xl">
      @csrf
      @if($tier->exists) @method('PUT') @endif

      <div class="p-6 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Flow Type</label>
        <select name="type" class="w-full px-3 py-2 mb-6 border rounded-md dark:bg-gray-900 dark:border-gray-700" required>
          <option value="pre"  {{ old('type', $tier->type) === 'pre'  ? 'selected' : '' }}>Pre-Grant (instant disbursement)</option>
          <option value="post" {{ old('type', $tier->type) === 'post' ? 'selected' : '' }}>Post-Grant (admin-reviewed)</option>
        </select>

        <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Tier Name</label>
        <input type="text" name="name" value="{{ old('name', $tier->name) }}" required
          class="w-full px-3 py-2 mb-6 border rounded-md dark:bg-gray-900 dark:border-gray-700" placeholder="e.g. Starter Tier">

        <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-3">
          <div>
            <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Amount ($)</label>
            <input type="number" step="0.01" min="0.01" name="amount" value="{{ old('amount', $tier->amount) }}" required
              class="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-700">
          </div>
          <div>
            <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Expiry (n days)</label>
            <input type="number" min="1" name="expiry_days" value="{{ old('expiry_days', $tier->expiry_days) }}" required
              class="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-700">
          </div>
          <div>
            <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Active Team Members Required (n)</label>
            <input type="number" min="0" name="required_active_referrals" value="{{ old('required_active_referrals', $tier->required_active_referrals) }}" required
              class="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-700">
          </div>
        </div>

        <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Requirements / Description (shown to users)</label>
        <textarea name="description" rows="4" class="w-full px-3 py-2 mb-6 border rounded-md dark:bg-gray-900 dark:border-gray-700">{{ old('description', $tier->description) }}</textarea>

        <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-2">
          <div>
            <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">AI Requirement (optional label)</label>
            <input type="text" name="ai_requirement" value="{{ old('ai_requirement', $tier->ai_requirement) }}"
              class="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-700" placeholder="e.g. DS Amazon AI/Advanced">
          </div>
          <div>
            <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Immediate Bonus (optional, $)</label>
            <input type="number" step="0.01" min="0" name="bonus_amount" value="{{ old('bonus_amount', $tier->bonus_amount) }}"
              class="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-700">
          </div>
        </div>

        <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-2">
          <div>
            <label class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Sort Order</label>
            <input type="number" name="sort_order" value="{{ old('sort_order', $tier->sort_order ?? 0) }}"
              class="w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:border-gray-700">
          </div>
          <div class="flex items-center mt-8">
            <label class="inline-flex items-center">
              <input type="checkbox" name="is_active" value="1" {{ old('is_active', $tier->is_active ?? true) ? 'checked' : '' }} class="w-5 h-5 mr-2">
              <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">Active (visible to users)</span>
            </label>
          </div>
        </div>
      </div>

      <div class="flex items-center gap-4">
        <button type="submit" class="px-6 py-3 font-medium text-white bg-blue-600 rounded-md">
          {{ $tier->exists ? 'Save Changes' : 'Create Tier' }}
        </button>
        <a href="{{ route('admin.grant-tiers') }}" class="px-6 py-3 font-medium text-gray-600 dark:text-gray-300">Cancel</a>
      </div>
    </form>
  </div>
</main>

@endsection