@extends('layouts.admin')
@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Manage Tiers for {{ $event->name }}</h1>
        <a href="{{ route('admin.events.show', $event) }}" class="inline-flex items-center justify-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md font-medium text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800 transition-colors duration-200 ease-in-out w-full sm:w-auto text-center">
            Back to Event
        </a>
    </div>
    
    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
        <form method="POST" action="{{ route('admin.events.tiers.update', $event) }}">
            @csrf
            <!-- @method('PUT') removed to match POST route -->
            
            @foreach($tiers as $tier)
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="tier-{{ $tier->id }}" name="tier_ids[]" type="checkbox" value="{{ $tier->id }}" 
                                {{ in_array($tier->id, $eventTierIds) ? 'checked' : '' }}
                                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                        </div>
                        <div class="ml-3 text-sm flex-1">
                            <label for="tier-{{ $tier->id }}" class="font-medium text-gray-900 dark:text-white">{{ $tier->name }}</label>
                            <div class="text-gray-600 dark:text-gray-400 mt-1">{!! $tier->description !!}</div>
                            <p class="text-gray-500 dark:text-gray-400 mt-1">Level: {{ $tier->level }}</p>
                        </div>
                        
                        <div class="ml-auto">
                            <div class="flex items-center">
                                <label for="tier-{{ $tier->id }}-enabled" class="mr-2 text-sm font-medium text-gray-900 dark:text-white">Enabled</label>
                                <input id="tier-{{ $tier->id }}-enabled" name="tier_enabled[{{ $tier->id }}]" type="checkbox" 
                                    {{ in_array($tier->id, $eventTierIds) && $eventTiers->firstWhere('id', $tier->id)->pivot->is_enabled ? 'checked' : '' }}
                                    class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            
            <div class="flex justify-end gap-3 mt-6 px-4 pb-4">
                <a href="{{ route('admin.events.show', $event) }}" class="inline-flex items-center justify-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md font-medium text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800 transition-colors duration-200 ease-in-out">
                    Cancel
                </a>
                <button type="submit" class="inline-flex items-center justify-center px-4 py-2 bg-primary-600 border border-transparent rounded-md font-medium text-sm text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600 dark:focus:ring-primary-400 transition-colors duration-200 ease-in-out">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
@endsection