@extends('admin.layout')

@section('title', 'Nominees')

@section('content')
<div class="mb-8 flex justify-between items-center">
    <div>
        <h1 class="text-3xl font-bold text-gray-900">Nominees</h1>
        <p class="text-gray-600 mt-2">Manage your award nominees</p>
    </div>
    <button onclick="openModal('createNomineeModal')" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors flex items-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
        </svg>
        Add Nominee
    </button>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @forelse($nominees as $nominee)
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="aspect-w-16 aspect-h-9 bg-gray-200">
            @if($nominee->photo)
                <img src="{{ asset($nominee->photo) }}" alt="{{ $nominee->name }}" class="w-full h-48 object-cover">
            @else
                <div class="w-full h-48 bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                    <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                </div>
            @endif
        </div>
        <div class="p-4">
            <div class="flex items-center justify-between mb-2">
                <h3 class="font-bold text-gray-900">{{ $nominee->name }}</h3>
                <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">{{ $nominee->category->name ?? 'N/A' }}</span>
            </div>
            @if($nominee->bio)
                <p class="text-sm text-gray-600 mb-3">{{ Str::limit($nominee->bio, 80) }}</p>
            @endif
            <div class="flex items-center justify-between pt-3 border-t">
                <span class="text-2xl font-bold text-primary">
                    @php $individual_votes = \App\Models\Vote::where('nominee_id', $nominee->id)->where('status', 'success')->get();
                            $total_individual_votes =$individual_votes->sum('amount');
                 @endphp
                    
                    {{ $total_individual_votes  ?? 0 }}</span>
                <span class="text-sm text-gray-500">votes</span>
            </div>
            <div class="flex mt-4 space-x-2">
                <button onclick="openEditNomineeModal({{ $nominee->id }}, '{{ $nominee->name }}', `{{ str_replace(['"', "'"], ['\\"', "\\'"], $nominee->bio ?? '') }}`, {{ $nominee->category_id }})" class="flex-1 text-primary border border-primary py-1 rounded hover:bg-primary/10 text-sm">Edit</button>
                <form action="{{ route('admin.nominees.destroy', $nominee) }}" method="POST" class="flex-1" onsubmit="return confirm('Are you sure?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full text-red-600 border border-red-600 py-1 rounded hover:bg-red-50 text-sm">Delete</button>
                </form>
            </div>
        </div>
    </div>
    @empty
    <div class="col-span-full text-center py-12 bg-gray-50 rounded-xl">
        <p class="text-gray-500">No nominees yet. Add your first nominee!</p>
    </div>
    @endforelse
</div>

<!-- Create Nominee Modal -->
<div id="createNomineeModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4 overflow-y-auto">
    <div class="bg-white rounded-xl max-w-md w-full p-6 my-8">
        <h3 class="text-xl font-bold text-gray-900 mb-4">Add New Nominee</h3>
        <form action="{{ route('admin.nominees.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                <select name="category_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
                    <option value="">Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
                <input type="text" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Bio</label>
                <textarea name="bio" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Photo</label>
                <input type="file" name="photo" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
            </div>
            <div class="flex space-x-4">
                <button type="button" onclick="closeModal('createNomineeModal')" class="flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg hover:bg-gray-300">Cancel</button>
                <button type="submit" class="flex-1 bg-primary text-white py-2 rounded-lg hover:bg-primary/90">Create</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Nominee Modal -->
<div id="editNomineeModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4 overflow-y-auto">
    <div class="bg-white rounded-xl max-w-md w-full p-6 my-8">
        <h3 class="text-xl font-bold text-gray-900 mb-4">Edit Nominee</h3>
        <form id="editNomineeForm" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                <select name="category_id" id="editNomineeCategory" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
                <input type="text" name="name" id="editNomineeName" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Bio</label>
                <textarea name="bio" id="editNomineeBio" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Photo (leave empty to keep current)</label>
                <input type="file" name="photo" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
            </div>
            <div class="flex space-x-4">
                <button type="button" onclick="closeModal('editNomineeModal')" class="flex-1 bg-gray-200 text-gray-800 py-2 rounded-lg hover:bg-gray-300">Cancel</button>
                <button type="submit" class="flex-1 bg-primary text-white py-2 rounded-lg hover:bg-primary/90">Update</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.getElementById(id).classList.add('flex');
}

function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.getElementById(id).classList.remove('flex');
}

function openEditNomineeModal(id, name, bio, categoryId) {
    document.getElementById('editNomineeName').value = name;
    document.getElementById('editNomineeBio').value = bio;
    document.getElementById('editNomineeCategory').value = categoryId;
    document.getElementById('editNomineeForm').action = '/admin/nominees/' + id;
    openModal('editNomineeModal');
}

document.querySelectorAll('[id$="Modal"]').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.add('hidden');
            this.classList.remove('flex');
        }
    });
});
</script>
@endpush