@extends('layout.main')

@section('title', 'প্রার্থী প্রোফাইল')

@section('content')
@php
    // Age in Bangla digits
    $age = \Carbon\Carbon::parse($candidate->date_of_birth)->age;
    $bnDigits = strtr((string) $age, [
        '0' => '০', '1' => '১', '2' => '২', '3' => '৩',
        '4' => '৪', '5' => '৫', '6' => '৬', '7' => '৭',
        '8' => '৮', '9' => '৯',
    ]);

    // DOB in Bangla locale + digits
    $dobBn = \Carbon\Carbon::parse($candidate->date_of_birth)
        ->locale('bn')
        ->translatedFormat('d F Y');

    $dobBn = strtr($dobBn, [
        '0' => '০', '1' => '১', '2' => '২', '3' => '৩',
        '4' => '৪', '5' => '৫', '6' => '৬', '7' => '৭',
        '8' => '৮', '9' => '৯',
    ]);

    // YouTube video id fallback
    $ytId = $candidate->youtube_video_id ?? '6UCuWxWiMaQ';
@endphp

<div class="min-h-screen bg-gray-50">
    <!-- HERO: Video Banner -->
    <section class="relative isolate overflow-hidden bg-black">
        <div class="absolute inset-0">
            <iframe
                id="ytBannerFrame"
                class="h-[560px] w-full pointer-events-none opacity-100"
                src="https://www.youtube.com/embed/{{ $ytId }}?rel=0&modestbranding=1&playsinline=1&controls=0&mute=1"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen>
            </iframe>

            <!-- Overlays (bring back for readability) -->
            <div class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/45 to-black/70"></div>
            <div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-gray-50 to-transparent"></div>
        </div>

        <!-- Top Bar -->
        <div class="relative z-10 mx-auto max-w-7xl px-4 pt-6">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <a href="{{ route('candidates.index') }}"
                   class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold text-white ring-1 ring-white/20 backdrop-blur hover:bg-white/15 transition">
                    <i class="fas fa-arrow-left"></i>
                    প্রার্থী তালিকা
                </a>

                <div class="flex flex-wrap items-center gap-2">
                    @if ($candidate->status == 'active')
                        <span class="inline-flex items-center gap-2 rounded-full bg-emerald-500/90 px-3 py-1 text-xs font-bold text-white ring-1 ring-emerald-200/40 backdrop-blur">
                            <span class="h-2 w-2 rounded-full bg-white"></span>
                            সক্রিয় প্রার্থী
                        </span>
                    @endif

                    <a href="{{ route('candidates.edit', $candidate) }}"
                       class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold text-white ring-1 ring-white/20 backdrop-blur hover:bg-white/15 transition">
                        <i class="fas fa-edit"></i>
                        সম্পাদনা
                    </a>
                </div>
            </div>
        </div>

        <!-- Hero Profile -->
        <div class="relative z-10 mx-auto max-w-7xl px-4 pb-12 pt-10">
            <div class="grid grid-cols-1 items-end gap-6 lg:grid-cols-[auto_1fr_auto]">

                <!-- Avatar + Symbol -->
                <div class="flex justify-center lg:justify-start">
                    <div class="relative">
                        <div class="h-36 w-36 overflow-hidden rounded-2xl ring-4 ring-white/70 shadow-2xl bg-white/10 backdrop-blur">
                            @if ($candidate->photo)
                                <img
                                    src="{{ asset('storage/' . $candidate->photo) }}"
                                    alt="{{ $candidate->user->name }}"
                                    class="h-full w-full object-cover">
                            @else
                                <div class="h-full w-full grid place-items-center text-white/80">
                                    <i class="fas fa-user text-5xl"></i>
                                </div>
                            @endif
                        </div>

                        @if ($candidate->symbol_photo)
                            <div class="absolute -bottom-4 -right-4 h-16 w-16 rounded-2xl bg-white shadow-xl ring-4 ring-white">
                                <img
                                    src="{{ asset('storage/' . $candidate->symbol_photo) }}"
                                    alt="{{ $candidate->symbol_name }}"
                                    class="h-full h-full object-contain p-2">
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Name/Party/Meta -->
                <div class="text-center lg:text-left">
                    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight text-white drop-shadow">
                        {{ $candidate->user->name ?? 'N/A' }}
                    </h1>
                    <p class="mt-2 text-lg md:text-2xl text-white/90 font-semibold">
                        {{ $candidate->party_name }}
                    </p>

                    <!-- Primary election info chips (most important) -->
                    <div class="mt-4 flex flex-wrap items-center justify-center lg:justify-start gap-2">
                        <span class="inline-flex items-center gap-2 rounded-full bg-black/40 px-3 py-1 text-sm text-white ring-1 ring-white/15 backdrop-blur">
                            <i class="fas fa-chair"></i>
                            <span class="opacity-90">সীট:</span>
                            <span class="font-bold">{{ $candidate->seat->name ?? 'N/A' }}</span>
                        </span>

                        <span class="inline-flex items-center gap-2 rounded-full bg-black/40 px-3 py-1 text-sm text-white ring-1 ring-white/15 backdrop-blur">
                            <i class="fas fa-flag"></i>
                            <span class="opacity-90">প্রতীক:</span>
                            <span class="font-bold">{{ $candidate->symbol_name }}</span>
                        </span>
                    </div>

                    <!-- Quick summary stats (clear hierarchy) -->
                    <div class="mt-5 grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div class="rounded-2xl bg-white/10 ring-1 ring-white/15 backdrop-blur px-4 py-3 text-white">
                            <p class="text-xs text-white/70 font-semibold">বয়স</p>
                            <p class="mt-1 text-lg font-extrabold">{{ $bnDigits }} বছর</p>
                        </div>

                        <div class="rounded-2xl bg-white/10 ring-1 ring-white/15 backdrop-blur px-4 py-3 text-white">
                            <p class="text-xs text-white/70 font-semibold">শিক্ষাগত যোগ্যতা</p>
                            <p class="mt-1 text-sm font-extrabold truncate">{{ $candidate->education }}</p>
                        </div>

                        <div class="rounded-2xl bg-white/10 ring-1 ring-white/15 backdrop-blur px-4 py-3 text-white">
                            <p class="text-xs text-white/70 font-semibold">অবস্থা</p>
                            <div class="mt-1 flex items-center gap-2 justify-center lg:justify-start">
                                <span class="text-sm font-extrabold">
                                    {{ $candidate->status == 'active' ? 'সক্রিয়' : 'নিষ্ক্রিয়' }}
                                </span>
                                <span class="h-2.5 w-2.5 rounded-full {{ $candidate->status == 'active' ? 'bg-emerald-400' : 'bg-gray-400' }}"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CTA: Play in banner (more discoverable) -->
                <div class="flex justify-center lg:justify-end">
                    <button
                        id="ytBannerPlayBtn"
                        type="button"
                        class="relative inline-flex items-center gap-3 rounded-full bg-emerald-500 px-6 py-3 text-sm font-extrabold text-white shadow-lg hover:bg-emerald-600 transition">
                        <i class="fas fa-play text-base"></i>
                        ভিডিও দেখুন
                        <span class="absolute -bottom-7 left-1/2 -translate-x-1/2 text-xs text-white/85 whitespace-nowrap">
                            (এই ব্যানারেই চলবে)
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- CONTENT -->
    <main class="mx-auto max-w-7xl px-4 py-10">
        <!-- Clear page hierarchy: Main content first on mobile -->
        <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">

            <!-- MAIN -->
            <section class="order-1 lg:order-2 lg:col-span-2 space-y-6">
                <!-- Section: Manifesto (high value for voters) -->
                @if ($candidate->election_manifesto)
                    <div class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-200 overflow-hidden">
                        <div class="px-6 py-5 bg-gradient-to-r from-rose-50 to-orange-50 border-b border-gray-100">
                            <div class="flex items-center justify-between gap-3 flex-wrap">
                                <h3 class="text-lg font-extrabold text-gray-900">
                                    <i class="fas fa-bullhorn mr-2 text-rose-600"></i>
                                    নির্বাচনী ইশতেহার
                                </h3>
                                <span class="text-xs font-bold text-gray-500 bg-white px-3 py-1 rounded-full ring-1 ring-gray-200">
                                    গুরুত্বপূর্ণ
                                </span>
                            </div>
                            <p class="mt-1 text-sm text-gray-600">প্রার্থীর মূল প্রতিশ্রুতি ও পরিকল্পনা</p>
                        </div>

                        <div class="p-6">
                            <div class="rounded-2xl bg-gray-50 p-6 ring-1 ring-gray-100 border-l-4 border-rose-500">
                                <p class="text-gray-700 leading-relaxed whitespace-pre-line text-base md:text-lg">
                                    {{ $candidate->election_manifesto }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Section: Personal details -->
                <div class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-200 overflow-hidden">
                    <div class="px-6 py-5 bg-gradient-to-r from-emerald-50 to-green-50 border-b border-gray-100">
                        <h3 class="text-lg font-extrabold text-gray-900">
                            <i class="fas fa-user-circle mr-2 text-emerald-600"></i>
                            ব্যক্তিগত তথ্য
                        </h3>
                        <p class="mt-1 text-sm text-gray-600">প্রার্থীর মৌলিক পরিচিতি ও তথ্য</p>
                    </div>

                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <div class="rounded-xl bg-gray-50 p-4 ring-1 ring-gray-100">
                                    <p class="text-xs font-semibold text-gray-500 flex items-center gap-2">
                                        <i class="fas fa-calendar-day text-emerald-600"></i>
                                        জন্ম তারিখ
                                    </p>
                                    <p class="mt-2 text-base font-extrabold text-gray-900">{{ $dobBn }}</p>
                                </div>

                                <div class="rounded-xl bg-gray-50 p-4 ring-1 ring-gray-100">
                                    <p class="text-xs font-semibold text-gray-500 flex items-center gap-2">
                                        <i class="fas fa-user-graduate text-emerald-600"></i>
                                        শিক্ষাগত যোগ্যতা
                                    </p>
                                    <p class="mt-2 text-base font-extrabold text-gray-900">{{ $candidate->education }}</p>
                                </div>
                            </div>

                            <div class="space-y-4">
                                <div class="rounded-xl bg-gray-50 p-4 ring-1 ring-gray-100">
                                    <p class="text-xs font-semibold text-gray-500 flex items-center gap-2">
                                        <i class="fas fa-fingerprint text-emerald-600"></i>
                                        এনআইডি নম্বর
                                    </p>
                                    <p class="mt-2 font-mono text-base font-extrabold text-gray-900 break-all">{{ $candidate->nid_number }}</p>
                                </div>

                                <div class="rounded-xl bg-gray-50 p-4 ring-1 ring-gray-100">
                                    <p class="text-xs font-semibold text-gray-500 flex items-center gap-2">
                                        <i class="fas fa-vote-yea text-emerald-600"></i>
                                        প্রার্থী অবস্থা
                                    </p>
                                    <div class="mt-2 flex items-center gap-2">
                                        <span class="inline-flex items-center rounded-full px-3 py-1 text-sm font-bold
                                            {{ $candidate->status == 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-200 text-gray-700' }}">
                                            {{ $candidate->status == 'active' ? 'সক্রিয়' : 'নিষ্ক্রিয়' }}
                                        </span>
                                        <span class="h-2.5 w-2.5 rounded-full {{ $candidate->status == 'active' ? 'bg-emerald-500' : 'bg-gray-400' }}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section: Experience -->
                @if ($candidate->previous_experience)
                    <div class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-200 overflow-hidden">
                        <div class="px-6 py-5 bg-gradient-to-r from-sky-50 to-cyan-50 border-b border-gray-100">
                            <h3 class="text-lg font-extrabold text-gray-900">
                                <i class="fas fa-briefcase mr-2 text-sky-600"></i>
                                পূর্ববর্তী অভিজ্ঞতা
                            </h3>
                            <p class="mt-1 text-sm text-gray-600">পূর্বের কাজ/দায়িত্বসমূহ</p>
                        </div>

                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach (json_decode($candidate->previous_experience, true) as $index => $exp)
                                    <div class="group rounded-2xl bg-gray-50 p-4 ring-1 ring-gray-100 hover:bg-sky-50 hover:ring-sky-100 transition">
                                        <div class="flex items-start gap-4">
                                            <div class="h-11 w-11 rounded-xl bg-white ring-1 ring-gray-200 grid place-items-center text-gray-900 font-extrabold group-hover:ring-sky-200 transition">
                                                {{ $index + 1 }}
                                            </div>
                                            <p class="text-gray-800 font-semibold leading-relaxed">{{ $exp }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </section>

            <!-- SIDEBAR -->
            <aside class="order-2 lg:order-1 space-y-6">
                <!-- Election Info (top of sidebar, most important quick reference) -->
                <div class="rounded-2xl bg-emerald-600 text-white shadow-lg shadow-emerald-600/15 overflow-hidden">
                    <div class="px-6 py-5 border-b border-white/15">
                        <h3 class="text-base font-extrabold">নির্বাচনী তথ্য</h3>
                        <p class="mt-1 text-sm text-white/80">এক নজরে প্রয়োজনীয় তথ্য</p>
                    </div>

                    <div class="p-6 space-y-4">
                        <div class="flex items-start gap-3">
                            <div class="h-11 w-11 rounded-xl bg-white/15 grid place-items-center">
                                <i class="fas fa-landmark"></i>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-white/80">রাজনৈতিক দল</p>
                                <p class="text-base font-extrabold">{{ $candidate->party_name }}</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3">
                            <div class="h-11 w-11 rounded-xl bg-white/15 grid place-items-center">
                                <i class="fas fa-chair"></i>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-white/80">নির্বাচনী সীট</p>
                                <p class="text-base font-extrabold">{{ $candidate->seat->name ?? 'N/A' }}</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3">
                            <div class="h-11 w-11 rounded-xl bg-white/15 grid place-items-center">
                                <i class="fas fa-flag"></i>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-white/80">প্রতীক নাম</p>
                                <p class="text-base font-extrabold">{{ $candidate->symbol_name }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Stats (secondary) -->
                <div class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
                    <div class="px-6 py-5 border-b border-gray-100">
                        <h3 class="text-base font-extrabold text-gray-900">দ্রুত পরিসংখ্যান</h3>
                        <p class="mt-1 text-sm text-gray-500">কিছু গুরুত্বপূর্ণ সংখ্যা</p>
                    </div>

                    <div class="p-6 space-y-4">
                        <div class="flex items-center gap-4 rounded-xl bg-emerald-50 p-4 ring-1 ring-emerald-100">
                            <div class="h-11 w-11 rounded-xl bg-emerald-100 grid place-items-center text-emerald-700">
                                <i class="fas fa-birthday-cake"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-xs font-semibold text-gray-500">বয়স</p>
                                <p class="text-lg font-extrabold text-gray-900">{{ $bnDigits }} বছর</p>
                            </div>
                        </div>

                        <div class="flex items-center gap-4 rounded-xl bg-sky-50 p-4 ring-1 ring-sky-100">
                            <div class="h-11 w-11 rounded-xl bg-sky-100 grid place-items-center text-sky-700">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-xs font-semibold text-gray-500">শিক্ষাগত যোগ্যতা</p>
                                <p class="text-base font-bold text-gray-900 truncate">{{ $candidate->education }}</p>
                            </div>
                        </div>

                        <div class="flex items-center gap-4 rounded-xl bg-violet-50 p-4 ring-1 ring-violet-100">
                            <div class="h-11 w-11 rounded-xl bg-violet-100 grid place-items-center text-violet-700">
                                <i class="fas fa-id-card"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-xs font-semibold text-gray-500">এনআইডি নম্বর</p>
                                <p class="font-mono text-base font-extrabold text-gray-900 break-all">{{ $candidate->nid_number }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bio (last) -->
                @if ($candidate->bio)
                    <div class="rounded-2xl bg-white shadow-sm ring-1 ring-gray-200">
                        <div class="px-6 py-5 border-b border-gray-100">
                            <h3 class="text-base font-extrabold text-gray-900">বিবরণ</h3>
                            <p class="mt-1 text-sm text-gray-500">প্রার্থীর সংক্ষিপ্ত পরিচিতি</p>
                        </div>
                        <div class="p-6">
                            <p class="text-gray-700 leading-relaxed whitespace-pre-line">{{ $candidate->bio }}</p>
                        </div>
                    </div>
                @endif
            </aside>
        </div>
    </main>
</div>

<!-- Script: play video in banner with controls + sound -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const playBtn = document.getElementById('ytBannerPlayBtn');
    const iframe = document.getElementById('ytBannerFrame');
    if (!playBtn || !iframe) return;

    playBtn.addEventListener('click', function () {
        const videoId = @json($ytId);

        iframe.src =
            `https://www.youtube.com/embed/${videoId}` +
            `?rel=0&modestbranding=1&playsinline=1` +
            `&autoplay=1&controls=1&mute=0`;

        iframe.classList.remove('pointer-events-none');
        playBtn.style.display = 'none';
    });
});
</script>
@endsection
