@extends('layouts.admin')

@section('title', 'Edit Participant')

@section('content')
<div class="bg-white rounded-lg shadow p-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Edit Participant</h1>
        <a href="{{ route('admin.participants') }}" class="text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i> Back to Participants
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.participants.update', $participant) }}" class="space-y-6">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Name -->
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                    Name <span class="text-red-500">*</span>
                </label>
                <input type="text" 
                       id="name" 
                       name="name" 
                       value="{{ old('name', $participant->name) }}"
                       required
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Email -->
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                    Email <span class="text-red-500">*</span>
                </label>
                <input type="email" 
                       id="email" 
                       name="email" 
                       value="{{ old('email', $participant->email) }}"
                       required
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Phone -->
            <div>
                <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                    Phone
                </label>
                <input type="tel" 
                       id="phone" 
                       name="phone" 
                       value="{{ old('phone', $participant->phone) }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Location -->
            <div>
                <label for="location" class="block text-sm font-medium text-gray-700 mb-2">
                    Location
                </label>
                <input type="text" 
                       id="location" 
                       name="location" 
                       value="{{ old('location', $participant->location) }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Family Members Count -->
            <div>
                <label for="family_members_count" class="block text-sm font-medium text-gray-700 mb-2">
                    Family Members Count
                </label>
                <input type="number" 
                       id="family_members_count" 
                       name="family_members_count" 
                       value="{{ old('family_members_count', $participant->family_members_count) }}"
                       min="0"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Total Attendees -->
            <div>
                <label for="total_attendees" class="block text-sm font-medium text-gray-700 mb-2">
                    Total Attendees
                </label>
                <input type="number" 
                       id="total_attendees" 
                       name="total_attendees" 
                       value="{{ old('total_attendees', $participant->total_attendees) }}"
                       min="0"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
        </div>

        <!-- QR Code Info -->
        <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
            <h3 class="text-sm font-medium text-gray-700 mb-2">QR Code Information</h3>
            <div class="flex items-center space-x-4">
                @if($participant->qr_code_image_url)
                    <img src="{{ $participant->qr_code_image_url }}" 
                         alt="QR Code" 
                         class="w-24 h-24 border border-gray-300 rounded-lg shadow-sm">
                @else
                    <div class="w-24 h-24 border border-gray-300 rounded-lg flex items-center justify-center bg-gray-100">
                        <i class="fas fa-qrcode text-gray-400 text-2xl"></i>
                    </div>
                @endif
                <div>
                    <p class="text-sm text-gray-600"><strong>QR Code:</strong> {{ $participant->qr_code }}</p>
                    <p class="text-sm text-gray-600"><strong>Status:</strong> 
                        @if($participant->qr_sent)
                            <span class="text-green-600"><i class="fas fa-check mr-1"></i>Sent</span>
                        @else
                            <span class="text-yellow-600"><i class="fas fa-clock mr-1"></i>Pending</span>
                        @endif
                    </p>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex justify-between items-center">
            <form method="POST" action="{{ route('admin.participants.destroy', $participant) }}" 
                  onsubmit="return confirm('Are you sure you want to delete this participant? This action cannot be undone.');">
                @csrf
                @method('DELETE')
                <button type="submit" 
                        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                    <i class="fas fa-trash mr-2"></i> Delete Participant
                </button>
            </form>
            <div class="flex space-x-4">
                <a href="{{ route('admin.participants') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    <i class="fas fa-save mr-2"></i> Update Participant
                </button>
            </div>
        </div>
    </form>
</div>
@endsection