@extends('layouts.app')

@section('title', 'Kandidat')

@section('content')
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">Admin /</span> Kandidat
    </h4>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card mb-4">
        <div class="card-body">
            <form action="{{ route('admin.candidates.index') }}" method="GET" id="event-select-form">
                <div class="row align-items-end">
                    <div class="col-md-6">
                        <label for="event_id" class="form-label">Pilih Event</label>
                        <select name="event_id" id="event_id" class="form-select select2" onchange="document.getElementById('event-select-form').submit()">
                            <option value="">-- Pilih Event --</option>
                            @foreach($events as $event)
                                <option value="{{ $event->id }}" @selected($selectedEventId == $event->id)>{{ $event->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if($selectedEventId)
        @php
            $selectedEvent = $events->firstWhere('id', $selectedEventId);
            $candidatesLocked = $selectedEvent && $selectedEvent->areCandidatesLocked();
        @endphp

        @if($candidatesLocked)
        <div class="alert alert-warning alert-dismissible mb-4" role="alert">
            <div class="d-flex align-items-center gap-2">
                <i class="bx bx-lock fs-5"></i>
                <div>
                    <strong>Data Kandidat Terkunci</strong> — Event ini sudah <strong>{{ ucfirst($selectedEvent->status) }}</strong>.
                    Kandidat tidak dapat ditambah, diubah, atau dihapus.
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="mb-0">Daftar Kandidat</h5>
            @if(!$candidatesLocked)
            <a href="{{ route('admin.candidates.create', ['event_id' => $selectedEventId]) }}" class="btn btn-primary">
                <i class="bx bx-plus me-1"></i> Tambah Kandidat
            </a>
            @else
            <button class="btn btn-secondary" disabled title="Data terkunci">
                <i class="bx bx-lock me-1"></i> Tambah Kandidat
            </button>
            @endif
        </div>

        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
            @forelse ($candidates as $candidate)
                <div class="col">
                    <div class="card h-100 shadow-sm border-0 candidate-card">
                        <div class="position-relative bg-light rounded-top text-center overflow-hidden" style="padding-top: 100%;">
                            @if($candidate->photo_path)
                                <img src="{{ Storage::url($candidate->photo_path) }}" alt="{{ $candidate->name }}" class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;">
                            @else
                                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center text-muted">
                                    <i class="bx bx-user" style="font-size: 4rem;"></i>
                                </div>
                            @endif
                            <div class="position-absolute top-0 start-0 m-3 rounded-circle bg-white d-flex justify-content-center align-items-center shadow-sm" style="width: 40px; height: 40px; border: 2px solid #2563EB;">
                                <strong class="text-primary">{{ $candidate->candidate_number ?? $candidate->sort_order }}</strong>
                            </div>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0 fw-bold">{{ $candidate->name }}</h5>
                            </div>
                            <div class="mb-3">
                                 <span class="badge bg-label-{{ $candidate->is_active ? 'success' : 'secondary' }}">
                                    {{ $candidate->is_active ? 'Aktif' : 'Nonaktif' }}
                                </span>
                            </div>
                            
                            <div class="mt-auto d-flex gap-2">
                                @if(!$candidatesLocked)
                                <a href="{{ route('admin.candidates.edit', $candidate) }}" class="btn btn-outline-warning w-50">
                                    <i class="bx bx-edit-alt me-1"></i> Ubah
                                </a>
                                <form action="{{ route('admin.candidates.destroy', $candidate) }}" method="POST" class="d-inline w-50">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger w-100" onclick="return confirm('Apakah Anda yakin ingin menghapus kandidat ini?')">
                                        <i class="bx bx-trash me-1"></i> Hapus
                                    </button>
                                </form>
                                @else
                                <button class="btn btn-outline-secondary w-100" disabled title="Data terkunci">
                                    <i class="bx bx-lock me-1"></i> Terkunci
                                </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="card text-center p-5 border-dashed">
                        <div class="mb-3">
                            <i class="bx bx-user-x text-muted" style="font-size: 48px;"></i>
                        </div>
                        <h5>Kandidat tidak ditemukan</h5>
                        <p class="text-muted">Anda belum menambahkan kandidat ke event ini.</p>
                        <div>
                            <a href="{{ route('admin.candidates.create', ['event_id' => $selectedEventId]) }}" class="btn btn-primary mt-2">
                                Tambah Kandidat Pertama
                            </a>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
    @endif
@endsection

@section('page-style')
<style>
    .candidate-card:hover {
        transform: translateY(-5px);
        transition: all 0.3s ease;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .border-dashed {
        border: 2px dashed #d9dee3 !important;
    }
</style>
@endsection