@extends('frontend.layouts.app')

@section('title', 'Bilik Suara — ' . $event->name)

@section('page-style')
<style>
.candidate-card {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 0 4px 20px rgba(0,132,255,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.candidate-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,132,255,0.12);
    border-color: rgba(0,132,255,0.2);
}
.candidate-card.selected {
    border-color: #0084FF;
    box-shadow: 0 0 0 3px rgba(0,132,255,0.15), 0 16px 40px rgba(0,132,255,0.12);
}

/* Ballot header glass */
.ballot-header {
    position: sticky;
    top: 100px; /* tepat di bawah floating navbar (88px + gap) */
    z-index: 40;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(0,0,0,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Profile modal glass */
.modal-glass {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 24px 80px rgba(0,0,0,0.15);
}

/* Candidate number badge */
.candidate-number {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fustat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0084FF;
    border: 2px solid #0084FF;
    box-shadow: 0 2px 8px rgba(0,132,255,0.2);
}
</style>
@endsection

@section('content')

{{-- Ballot Header --}}
<div class="ballot-header">
    <div class="container-main" style="padding-top:22px; padding-bottom:22px;">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-5">
            {{-- Event Info --}}
            <div style="flex:1; min-width:0;">
                {{-- Breadcrumb / label --}}
                <div style="display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#0084FF; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.06em;">
                    <iconify-icon icon="ph:notepad" width="13"></iconify-icon>
                    Bilik Suara
                </div>
                <h1 style="font-family:'Fustat',sans-serif; font-size:clamp(20px,2.8vw,30px); font-weight:800; color:#0F172A; margin:0 0 6px; letter-spacing:-0.5px; line-height:1.2;">{{ $event->name }}</h1>
                <p style="font-size:14px; color:#64748B; margin:0; line-height:1.5;">Silakan pelajari profil kandidat, lalu tentukan pilihan Anda.</p>
            </div>
            {{-- Voter Badge --}}
            <div style="display:flex; align-items:center; gap:12px; background:rgba(0,132,255,0.05); padding:14px 18px; border-radius:14px; border:1px solid rgba(0,132,255,0.12); flex-shrink:0;">
                <div style="width:42px; height:42px; background:linear-gradient(135deg,rgba(0,132,255,0.15),rgba(0,132,255,0.08)); border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,132,255,0.15);">
                    <iconify-icon icon="ph:user-circle" width="22" style="color:#0084FF;"></iconify-icon>
                </div>
                <div>
                    <div style="font-size:11px; color:#64748B; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px;">Peserta Terdaftar</div>
                    <div style="font-family:'Fustat',sans-serif; font-size:16px; font-weight:700; color:#0F172A;">{{ session('voter_name') }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-main" style="padding-top:32px; padding-bottom:80px;">

    {{-- Errors --}}
    @if ($errors->any())
        <div style="margin-bottom:24px; padding:14px 16px; background:rgba(220,38,38,0.07); border:1px solid rgba(220,38,38,0.2); border-radius:12px; color:#991b1b; font-size:14px;">
            <ul style="list-style:disc; padding-left:16px; margin:0;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Candidate Grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($candidates as $candidate)
            <div id="candidate-card-{{ $candidate->id }}" class="candidate-card animate-fade-in-up" style="animation-delay:{{ $loop->index * 80 }}ms;">

                {{-- Photo --}}
                <div style="position:relative; padding-top:100%; background:#f1f5f9; overflow:hidden;">
                    @if($candidate->photo_path)
                        <img src="{{ Storage::url($candidate->photo_path) }}" alt="{{ $candidate->name }}"
                             style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;">
                    @else
                        <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#94a3b8;">
                            <iconify-icon icon="ph:user" width="64"></iconify-icon>
                        </div>
                    @endif
                    <div class="candidate-number">{{ $candidate->sort_order }}</div>
                </div>

                {{-- Info --}}
                <div style="padding:20px 20px 20px; flex-grow:1; display:flex; flex-direction:column;">
                    <h3 style="font-family:'Fustat',sans-serif; font-size:18px; font-weight:800; color:#0F172A; text-align:center; margin:0 0 16px; line-height:1.3;">{{ $candidate->name }}</h3>

                    <div class="grid grid-cols-2 gap-3 mt-auto">
                        <button
                            type="button"
                            class="btn-secondary"
                            style="font-size:14px; padding:9px 14px; min-height:40px;"
                            onclick="openProfileModal({{ json_encode($candidate) }})"
                        >
                            <iconify-icon icon="ph:eye" width="15" style="margin-right:4px;"></iconify-icon>
                            Lihat Profil
                        </button>
                        <button
                            type="button"
                            id="btn-select-{{ $candidate->id }}"
                            class="btn-primary"
                            style="font-size:14px; padding:9px 14px; min-height:40px;"
                            onclick="toggleCandidateSelection({{ $candidate->id }}, '{{ addslashes($candidate->name) }}', '{{ $candidate->sort_order }}')"
                        >
                            <iconify-icon icon="ph:check" width="15" style="margin-right:4px;"></iconify-icon>
                            Pilih
                        </button>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full" style="text-align:center; padding:64px 24px; background:rgba(255,255,255,0.5); border-radius:24px; border:2px dashed rgba(0,0,0,0.1);">
                <iconify-icon icon="ph:users-slash" width="40" style="color:#94a3b8; margin-bottom:12px;"></iconify-icon>
                <h4 style="font-family:'Fustat',sans-serif; font-size:18px; font-weight:700; color:#0F172A; margin:0 0 8px;">Belum Ada Kandidat</h4>
                <p style="font-size:15px; color:#64748B; max-width:400px; margin:0 auto;">Panitia belum menambahkan kandidat untuk pemilihan ini.</p>
            </div>
        @endforelse
    </div>
</div>

{{-- Profile Modal --}}
<div id="profileModal" style="position:fixed; inset:0; z-index:100; display:none;">
    <div style="position:fixed; inset:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);" onclick="closeProfileModal()"></div>
    <div style="position:fixed; inset:0; z-index:10; overflow-y:auto;">
        <div style="display:flex; min-height:100%; align-items:center; justify-content:center; padding:20px;">
            <div class="modal-glass" style="width:100%; max-width:600px; overflow:hidden;">

                {{-- Modal Header --}}
                <div style="padding:20px 24px; border-bottom:1px solid rgba(0,0,0,0.07); display:flex; justify-content:space-between; align-items:center;">
                    <h3 id="modalName" style="font-family:'Fustat',sans-serif; font-size:18px; font-weight:800; color:#0F172A; margin:0;">Profil Kandidat</h3>
                    <button onclick="closeProfileModal()" style="width:32px; height:32px; border-radius:8px; background:rgba(0,0,0,0.05); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;">
                        <iconify-icon icon="ph:x-bold" width="16" style="color:#64748B;"></iconify-icon>
                    </button>
                </div>

                {{-- Modal Body --}}
                <div style="padding:24px; max-height:65vh; overflow-y:auto;">
                    <div style="width:100px; height:100px; border-radius:50%; overflow:hidden; border:3px solid rgba(0,132,255,0.15); margin:0 auto 20px; background:#f1f5f9;">
                        <img id="modalPhoto" src="" alt="" style="width:100%; height:100%; object-fit:cover; display:none;">
                        <div id="modalPhotoPlaceholder" style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; display:none;">
                            <iconify-icon icon="ph:user" width="40" style="color:#94a3b8;"></iconify-icon>
                        </div>
                    </div>

                    <div style="margin-bottom:20px;">
                        <div style="display:flex; align-items:center; gap:8px; font-family:'Fustat',sans-serif; font-weight:700; font-size:15px; color:#0084FF; margin-bottom:10px;">
                            <iconify-icon icon="ph:eye" width="18"></iconify-icon> Visi
                        </div>
                        <div id="modalVision" style="padding:14px; background:rgba(0,132,255,0.05); border-radius:12px; font-size:15px; color:#0F172A; line-height:1.7;"></div>
                    </div>

                    <div style="margin-bottom:20px;">
                        <div style="display:flex; align-items:center; gap:8px; font-family:'Fustat',sans-serif; font-weight:700; font-size:15px; color:#0084FF; margin-bottom:10px;">
                            <iconify-icon icon="ph:target" width="18"></iconify-icon> Misi
                        </div>
                        <div id="modalMission" style="padding:14px; border:1px solid rgba(0,0,0,0.08); border-radius:12px; font-size:15px; color:#0F172A; line-height:1.7;"></div>
                    </div>

                    <div id="modalVideoSection" style="display:none; margin-bottom:20px;">
                        <div style="display:flex; align-items:center; gap:8px; font-family:'Fustat',sans-serif; font-weight:700; font-size:15px; color:#0084FF; margin-bottom:10px;">
                            <iconify-icon icon="ph:video" width="18"></iconify-icon> Video Kampanye
                        </div>
                        <div style="position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#f1f5f9;">
                            <iframe id="modalVideo" style="position:absolute; inset:0; width:100%; height:100%;" src="" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>

                {{-- Modal Footer --}}
                <div style="padding:16px 24px; border-top:1px solid rgba(0,0,0,0.07); display:flex; justify-content:flex-end;">
                    <button class="btn-secondary" style="font-size:14px;" onclick="closeProfileModal()">Tutup</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Confirm Modal --}}
<div id="confirmModal" style="position:fixed; inset:0; z-index:100; display:none;">
    <div style="position:fixed; inset:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);"></div>
    <div style="position:fixed; inset:0; z-index:10; overflow-y:auto;">
        <div style="display:flex; min-height:100%; align-items:center; justify-content:center; padding:20px;">
            <div class="modal-glass" style="width:100%; max-width:440px;">
                <div style="padding:36px 32px; text-align:center;">

                    <div style="width:72px; height:72px; background:rgba(245,158,11,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 0 0 8px rgba(245,158,11,0.06);">
                        <iconify-icon icon="ph:warning-circle" width="36" style="color:#F59E0B;"></iconify-icon>
                    </div>

                    <h3 style="font-family:'Fustat',sans-serif; font-size:22px; font-weight:800; color:#0F172A; margin:0 0 8px;">Konfirmasi Pilihan</h3>
                    <p style="font-size:15px; color:#64748B; margin:0 0 20px;">Anda akan memberikan suara untuk:</p>

                    <div id="confirmCandidatesList" style="display:flex; flex-direction:column; gap:8px; margin-bottom:24px; max-height:220px; overflow-y:auto; padding-right:4px; text-align:left;">
                        <!-- List of selected candidates will be populated here -->
                    </div>

                    <div style="background:rgba(220,38,38,0.06); border:1px solid rgba(220,38,38,0.15); border-radius:12px; padding:14px 16px; margin-bottom:28px; text-align:left; display:flex; gap:10px; font-size:14px; color:#991b1b;">
                        <iconify-icon icon="ph:info" width="18" style="flex-shrink:0; margin-top:1px;"></iconify-icon>
                        <span><strong>Perhatian:</strong> Pilihan tidak dapat diubah setelah Anda mengirimkan suara ini.</span>
                    </div>

                    <form action="{{ route('frontend.voting.cast', $event->slug) }}" method="POST" id="submitVoteForm" style="display:flex; flex-direction:column; gap:10px;">
                        @csrf
                        <div id="confirmCandidateInputs"></div>
                        {{-- Ballot token: authenticates voter from POST body when session is unavailable (production) --}}
                        <input type="hidden" name="_vt" value="{{ $ballotToken ?? '' }}">
                        <button type="submit" id="btnSubmitVote" class="btn-primary w-full gap-2" style="font-size:16px; padding:12px; justify-content:center;">
                            <iconify-icon icon="ph:paper-plane-tilt" width="18"></iconify-icon>
                            Kirim Suara
                        </button>
                        <button type="button" class="btn-secondary w-full" style="font-size:15px; padding:11px; justify-content:center;" onclick="closeConfirmModal()">
                            Kembali, Pilih Ulang
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Floating Bottom Bar --}}
<div id="floatingSelectionBar" style="position:fixed; bottom:-120px; left:0; right:0; z-index:50; transition: bottom 300ms cubic-bezier(0.16, 1, 0.3, 1); padding: 0 20px 24px;">
    <div class="container-main" style="max-width: 800px; margin: 0 auto;">
        <div style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0,132,255,0.18); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,132,255,0.15); padding: 18px 24px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;">
            <div style="display: flex; align-items: center; gap: 12px;">
                <div style="width: 44px; height: 44px; background: rgba(0,132,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,132,255,0.15);">
                    <iconify-icon icon="ph:users-three" width="22" style="color: #0084FF;"></iconify-icon>
                </div>
                <div>
                    <div style="font-size: 11px; color: #64748B; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">Pilihan Anda</div>
                    <div style="font-family: 'Fustat', sans-serif; font-size: 16px; font-weight: 800; color: #0F172A;">
                        Terpilih <span id="selectedCountText" style="color: #0084FF;">0</span> dari {{ $event->max_choices }} kandidat
                    </div>
                </div>
            </div>
            <div style="display: flex; align-items: center; gap: 12px;">
                <button type="button" class="btn-secondary" style="font-size: 14px; padding: 10px 18px; border-radius: 12px;" onclick="clearAllSelections()">
                    Reset Pilihan
                </button>
                <button type="button" class="btn-primary" style="font-size: 14px; padding: 10px 22px; border-radius: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,132,255,0.3);" onclick="openMultiConfirmModal()">
                    Lanjutkan <iconify-icon icon="ph:arrow-right-bold" width="14" style="margin-left: 6px; vertical-align: middle;"></iconify-icon>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('page-script')
<script>
    // State to hold selected candidates
    let selectedCandidates = [];
    const maxChoices = {{ $event->max_choices }};

    function toggleCandidateSelection(id, name, number) {
        const index = selectedCandidates.findIndex(cand => cand.id === id);

        if (index > -1) {
            // Already selected, so remove it
            selectedCandidates.splice(index, 1);
            updateCandidateUI(id, false);
        } else {
            // Check if limit reached
            if (selectedCandidates.length >= maxChoices) {
                if (maxChoices === 1) {
                    // Automatically unselect the previous one
                    const prev = selectedCandidates.shift();
                    updateCandidateUI(prev.id, false);
                } else {
                    alert(`Anda hanya dapat memilih maksimal ${maxChoices} kandidat.`);
                    return;
                }
            }
            // Add to selections
            selectedCandidates.push({ id, name, number });
            updateCandidateUI(id, true);
        }

        updateFloatingBar();
    }

    function updateCandidateUI(id, isSelected) {
        const card = document.getElementById('candidate-card-' + id);
        const btn = document.getElementById('btn-select-' + id);
        if (!card || !btn) return;

        if (isSelected) {
            card.classList.add('selected');
            btn.innerHTML = '<iconify-icon icon="ph:check-bold" width="15" style="margin-right:4px;"></iconify-icon> Terpilih';
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-secondary');
            // Give subtle styling to indicate selected state on button
            btn.style.background = 'rgba(0, 132, 255, 0.1)';
            btn.style.color = '#0084FF';
            btn.style.borderColor = 'rgba(0, 132, 255, 0.2)';
        } else {
            card.classList.remove('selected');
            btn.innerHTML = '<iconify-icon icon="ph:check" width="15" style="margin-right:4px;"></iconify-icon> Pilih';
            btn.classList.remove('btn-secondary');
            btn.classList.add('btn-primary');
            btn.style.background = '';
            btn.style.color = '';
            btn.style.borderColor = '';
        }
    }

    function updateFloatingBar() {
        const bar = document.getElementById('floatingSelectionBar');
        const countText = document.getElementById('selectedCountText');
        if (!bar || !countText) return;

        countText.textContent = selectedCandidates.length;

        if (selectedCandidates.length > 0) {
            bar.style.bottom = '24px';
        } else {
            bar.style.bottom = '-120px';
        }
    }

    function clearAllSelections() {
        const idsToClear = selectedCandidates.map(c => c.id);
        selectedCandidates = [];
        idsToClear.forEach(id => updateCandidateUI(id, false));
        updateFloatingBar();
    }

    function openMultiConfirmModal() {
        if (selectedCandidates.length === 0) return;

        const listContainer = document.getElementById('confirmCandidatesList');
        const inputsContainer = document.getElementById('confirmCandidateInputs');

        let listHtml = '';
        let inputsHtml = '';

        selectedCandidates.forEach(cand => {
            listHtml += `
                <div style="background:rgba(0,132,255,0.04); border:1px solid rgba(0,132,255,0.12); border-radius:12px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;">
                    <div style="display:flex; align-items:center; gap:10px;">
                        <span style="display:inline-flex; width:26px; height:26px; background:#0084FF; border-radius:50%; color:#fff; font-size:12px; font-weight:800; align-items:center; justify-content:center; font-family:'Fustat',sans-serif;">${cand.number}</span>
                        <span style="font-family:'Fustat',sans-serif; font-size:15px; font-weight:700; color:#0F172A;">${cand.name}</span>
                    </div>
                    <iconify-icon icon="ph:check-circle-fill" width="18" style="color:#0084FF;"></iconify-icon>
                </div>
            `;
            inputsHtml += `<input type="hidden" name="candidate_ids[]" value="${cand.id}">`;
        });

        listContainer.innerHTML = listHtml;
        inputsContainer.innerHTML = inputsHtml;

        document.getElementById('confirmModal').style.display = 'block';
        document.body.style.overflow = 'hidden';
    }

    function openProfileModal(candidate) {
        document.getElementById('modalName').textContent = candidate.name;
        const photo = document.getElementById('modalPhoto');
        const placeholder = document.getElementById('modalPhotoPlaceholder');
        if (candidate.photo_path) {
            photo.src = '/storage/' + candidate.photo_path;
            photo.style.display = 'block';
            placeholder.style.display = 'none';
        } else {
            photo.src = '';
            photo.style.display = 'none';
            placeholder.style.display = 'flex';
        }
        document.getElementById('modalVision').innerHTML  = candidate.vision_mission ? candidate.vision_mission.replace(/\n/g, '<br>') : '-';
        document.getElementById('modalMission').innerHTML = '-'; // The database only has vision_mission combined field
        const videoSection = document.getElementById('modalVideoSection');
        const videoFrame   = document.getElementById('modalVideo');
        if (candidate.video_url) {
            let url = candidate.video_url;
            if (url.includes('watch?v=')) url = url.replace('watch?v=', 'embed/');
            videoFrame.src = url;
            videoSection.style.display = 'block';
        } else {
            videoFrame.src = '';
            videoSection.style.display = 'none';
        }
        document.getElementById('profileModal').style.display = 'block';
        document.body.style.overflow = 'hidden';
    }

    function closeProfileModal() {
        document.getElementById('profileModal').style.display = 'none';
        document.getElementById('modalVideo').src = '';
        document.body.style.overflow = '';
    }

    function closeConfirmModal() {
        document.getElementById('confirmModal').style.display = 'none';
        document.body.style.overflow = '';
    }

    document.getElementById('submitVoteForm').addEventListener('submit', function () {
        const btn = document.getElementById('btnSubmitVote');
        btn.disabled = true;
        btn.innerHTML = '<iconify-icon icon="ph:spinner-gap" class="animate-spin" width="18"></iconify-icon> Memproses...';
        btn.style.opacity = '0.7';
    });
</script>
@endsection