@extends('frontend.layouts.app')

@php
    use App\Helpers\Helper;

    $infoEn = $messageFrom->information_en ? json_decode($messageFrom->information_en) : [];
    $infoNp = $messageFrom->information_np ? json_decode($messageFrom->information_np) : [];

    $isNepali = app()->getLocale() != 'en';

    $name = $isNepali ? $infoNp->name ?? ($infoEn->name ?? '') : $infoEn->name ?? '';
    $designation = $isNepali
        ? $infoNp->designation_id ?? ($infoEn->designation_id ?? '')
        : $infoEn->designation_id ?? '';
    $dob = $isNepali ? $infoNp->date_of_birth ?? ($infoEn->date_of_birth ?? '') : $infoEn->date_of_birth ?? '';
    $corrAddr = $isNepali
        ? $infoNp->correspondaence_address ?? ($infoEn->correspondaence_address ?? '')
        : $infoEn->correspondaence_address ?? '';
    $permAddr = $isNepali
        ? $infoNp->permanent_address ?? ($infoEn->permanent_address ?? '')
        : $infoEn->permanent_address ?? '';
    $countries = $isNepali
        ? $infoNp->country_visited ?? ($infoEn->country_visited ?? [])
        : $infoEn->country_visited ?? [];
    $externalLink = $isNepali ? $infoNp->external_link ?? ($infoEn->external_link ?? '') : $infoEn->external_link ?? '';

    $description = Helper::stripInlineStyle(
        $isNepali ? $infoNp->description ?? ($infoEn->description ?? '') : $infoEn->description ?? '',
    );
    $education = Helper::stripInlineStyle(
        $isNepali
            ? $infoNp->educational_qualification ?? ($infoEn->educational_qualification ?? '')
            : $infoEn->educational_qualification ?? '',
    );
    $seminar = Helper::stripInlineStyle(
        $isNepali ? $infoNp->seminar ?? ($infoEn->seminar ?? '') : $infoEn->seminar ?? '',
    );
    $experience = Helper::stripInlineStyle(
        $isNepali ? $infoNp->experience ?? ($infoEn->experience ?? '') : $infoEn->experience ?? '',
    );
    $awards = Helper::stripInlineStyle($isNepali ? $infoNp->awards ?? ($infoEn->awards ?? '') : $infoEn->awards ?? '');

    $externalLinkLabel = $isNepali
        ? ($name
            ? $name . ' को बारेमा थप जान्नुहोस्'
            : 'थप जान्नुहोस्')
        : ($name
            ? 'Know More About ' . $name
            : 'Know More');
@endphp

@section('title', $name)

@section('content')

    {{-- ── Hero ──────────────────────────────────── --}}
    @include('frontend.partials.hero', [
        'mainHeading' => app()->getLocale() == 'en' ? 'Experience the Difference' : 'फरकपनको अनुभव गर्नुहोस्',
        'subHeading' =>
            app()->getLocale() == 'en'
                ? 'Join us and start your journey today.'
                : 'आजै हाम्रो यात्रा सुरु गर्नुहोस्।',
        'breadcrumb1' => ['name' => __('route.home'), 'route' => route('home')],
        'breadcrumb2' => ['name' => $name, 'route' => route('founder-principal'), 'class' => 'text-gray-400'],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 space-y-10">
        <div class="bg-background-primary rounded-3xl shadow-xl overflow-hidden">
            <div class="grid grid-cols-1 lg:grid-cols-5">

                {{-- Photo panel --}}
                <div class="lg:col-span-2 relative group">
                    {{-- Accent top-bar --}}
                    <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-primary z-10"></div>

                    <div class="relative h-72 sm:h-96 lg:h-full min-h-[380px] overflow-hidden">
                        <img src="{{ $messageFrom->image }}" alt="{{ $name }}"
                            class="w-full h-full object-cover object-top transition-transform duration-700 group-hover:scale-105" />

                        {{-- Gradient overlay --}}
                        <div class="absolute inset-0 bg-gradient-to-t from-primary/80 via-primary/20 to-transparent">
                        </div>

                        {{-- Floating badge --}}
                        <div class="absolute bottom-0 left-0 right-0 p-5">
                            <p class="text-accent text-xs font-bold tracking-widest uppercase mb-1">
                                {{ $designation }}
                            </p>
                            <h1 class="text-white text-2xl font-bold font-heading leading-snug">
                                {{ $name }}
                            </h1>
                        </div>
                    </div>
                </div>

                {{-- Bio + info panel --}}
                <div class="lg:col-span-3 flex flex-col divide-y divide-gray-100">

                    {{-- Description --}}
                    <div class="p-6 lg:p-8">
                        <div class="flex items-center gap-3 mb-4">
                            <span class="block w-1 h-6 rounded-full bg-accent"></span>
                            <span class="text-xs font-bold tracking-widest uppercase text-secondary">
                                {{ $designation }}
                            </span>
                        </div>
                        <h2 class="text-2xl font-bold font-heading text-primary mb-4">{{ $name }}</h2>
                        <div
                            class="font-normal text-base text-black text-justify leading-relaxed prose prose-sm max-w-none">
                            {!! $description !!}
                        </div>
                    </div>
                </div>{{-- /bio panel --}}
            </div>
        </div>{{-- /hero card --}}

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {{-- quick information --}}
            <div class="bg-background-primary rounded-2xl shadow-md overflow-hidden">
                {{-- Card header --}}
                <div class="px-6 py-4 bg-gradient-primary flex items-center gap-3">
                    <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/10">
                        <i class="fas fa-user text-accent"></i>
                    </span>
                    <h3 class="text-xs font-bold tracking-widest uppercase text-white">
                        {{ __('pages.information') }}</h3>
                </div>
                <div class="p-6">
                    {{-- The timeline track --}}
                    <div class="relative space-y-5">
                        @if ($name)
                            <div class="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
                                <span
                                    class="text-xs font-semibold tracking-wider uppercase text-muted">{{ __('pages.name') }}</span>
                                <span
                                    class="text-sm font-medium text-dark text-right max-w-[60%]">{{ $name }}</span>
                            </div>
                        @endif
                        @if ($dob)
                            <div class="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
                                <span
                                    class="text-xs font-semibold tracking-wider uppercase text-muted">{{ __('pages.date_of_birth') }}</span>
                                <span
                                    class="text-sm font-medium text-dark text-right max-w-[60%]">{{ $dob }}</span>
                            </div>
                        @endif
                        @if ($corrAddr)
                            <div class="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
                                <span
                                    class="text-xs font-semibold tracking-wider uppercase text-muted">{{ __('pages.correspondence_address') }}</span>
                                <span
                                    class="text-sm font-medium text-dark text-right max-w-[60%]">{{ $corrAddr }}</span>
                            </div>
                        @endif
                        @if ($permAddr)
                            <div class="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
                                <span
                                    class="text-xs font-semibold tracking-wider uppercase text-muted">{{ __('pages.permanent_address') }}</span>
                                <span
                                    class="text-sm font-medium text-dark text-right max-w-[60%]">{{ $permAddr }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- ── EDUCATION — TIMELINE ───────────────── --}}
            @if ($education)
                <div class="bg-background-primary rounded-2xl shadow-md overflow-hidden">
                    {{-- Card header --}}
                    <div class="px-6 py-4 bg-gradient-primary flex items-center gap-3">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/10">
                            <i class="fas fa-graduation-cap text-accent"></i>
                        </span>
                        <h3 class="text-xs font-bold tracking-widest uppercase text-white">
                            {{ __('pages.education_qualification') }}</h3>
                    </div>
                    {{-- Timeline body --}}
                    <div class="p-6">
                        {{-- The timeline track --}}
                        <div class="relative space-y-5">
                            <div
                                class="text-md text-black text-justify prose prose-sm max-w-none leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_li::marker]:text-primary">
                                {!! $education !!}
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- ── SEMINARS — TIMELINE ────────────────── --}}
            @if ($seminar)
                <div class="bg-background-primary rounded-2xl shadow-md overflow-hidden">
                    <div class="px-6 py-4 bg-gradient-primary flex items-center gap-3">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/10">
                            <i class="fas fa-users text-accent"></i>
                        </span>
                        <h3 class="text-xs font-bold tracking-widest uppercase text-white">
                            {{ __('pages.international_seminars_attended') }}</h3>
                    </div>
                    <div class="p-6">
                        <div class="relative space-y-5">
                            <div
                                class="text-md text-black text-justify prose prose-sm max-w-none leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_li::marker]:text-primary">
                                {!! $seminar !!}
                            </div>
                        </div>
                    </div>
                </div>
            @endif


            {{-- ── EXPERIENCE — TIMELINE ──────────────── --}}
            @if ($experience)
                <div class="bg-background-primary rounded-2xl shadow-md overflow-hidden">
                    <div class="px-6 py-4 bg-gradient-primary flex items-center gap-3">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/10">
                            <i class="fas fa-briefcase text-accent"></i>
                        </span>
                        <h3 class="text-xs font-bold tracking-widest uppercase text-white">
                            {{ __('pages.work_experience') }}</h3>
                    </div>
                    <div class="p-6">
                        <div class="relative space-y-5">
                            <div
                                class="text-md text-black text-justify prose prose-sm max-w-none leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_li::marker]:text-primary">
                                {!! $experience !!}
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        </div>{{-- /detail grid --}}

        @if ($awards)
            <div class="bg-background-primary rounded-2xl shadow-md overflow-hidden">
                <div class="px-6 py-4 bg-gradient-primary flex items-center gap-3">
                    <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/10">
                        <i class="fas fa-award text-accent"></i>
                    </span>
                    <h3 class="text-xs font-bold tracking-widest uppercase text-white">
                        {{ __('pages.national_awards_received') }}</h3>
                </div>
                <div class="p-6">
                    <div class="relative space-y-5">
                        <div
                            class="text-md text-black text-justify prose prose-sm max-w-none leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_li::marker]:text-primary">
                            {!! $awards !!}
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (count($countries) > 0)
            <div class="bg-background-primary rounded-2xl shadow-md overflow-hidden">
                {{-- Header --}}
                <div class="px-6 py-4 bg-gradient-primary flex items-center gap-3">
                    <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/10">
                        <i class="fas fa-globe text-accent"></i>
                    </span>
                    <h3 class="text-xs font-bold tracking-widest uppercase text-white">
                        {{ __('pages.countries_visited') }}</h3>
                    <span class="ml-auto text-xs font-semibold text-white/60 bg-white/10 px-2.5 py-1 rounded-full">
                        {{ count($countries) }}
                    </span>
                </div>

                {{-- Country pills --}}
                <div class="p-6">
                    <div class="flex flex-wrap gap-2.5">
                        @foreach ($countries as $country)
                            <div
                                class="inline-flex items-center gap-2 bg-background-secondary hover:bg-primary/5 border border-gray-200 hover:border-primary/30 rounded-xl px-3 py-2 transition-all duration-200 cursor-default group">
                                <img src="https://flagcdn.com/{{ strtolower($country) }}.svg" width="22" height="15"
                                    class="rounded-sm object-cover shadow-sm" alt="{{ $country }}" />
                                <span
                                    class="text-sm font-medium text-dark group-hover:text-primary transition-colors duration-200">
                                    {{ app()->getLocale() == 'en' ? countries()[$country]['name'] : Helper::getNepaliCountryName($country) }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif


    </div>{{-- /container --}}

@endsection