@extends('layouts.app')

@php
    $slug = $slug ?? null;
    $titles = [
        'ceo-message' => "CEO's Message",
        'company-overview' => 'Company Overview',
        'our-people' => 'Our People',
        'professional-standard' => 'Professional and Ethical Standard',
        'business-license' => 'Business License',
        'company-profile' => 'Company Profile',
        'company-structure' => 'Company Structure',
        'careers' => 'Careers'
    ];
    // Default to 'Vision and Mission' for the root /about page
    $pageTitle = $slug && isset($titles[$slug]) ? $titles[$slug] : 'Vision and Mission';
@endphp

@section('title', $pageTitle . ' - Khmer Foundation Appraisals')

@section('content')
    <x-page-header :title="$pageTitle" />

    <section class="py-24 bg-white overflow-hidden">
        <div class="container-custom">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-16">
                <!-- Sidebar Nav -->
                <div class="lg:col-span-1 reveal reveal-left">
                    <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 shadow-sm sticky top-32">
                        <h3 class="text-xs font-black text-secondary mb-6 uppercase tracking-widest">About Us</h3>
                        <ul class="space-y-3 text-sm font-bold">
                            <li>
                                <a href="{{ route('about.details', 'ceo-message') }}"
                                    class="{{ request()->is('about/ceo-message') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    CEO's Message
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about.details', 'company-overview') }}"
                                    class="{{ request()->is('about/company-overview') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    Company Overview
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about') }}"
                                    class="{{ request()->routeIs('about') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    Vision and Mission
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about.details', 'our-people') }}"
                                    class="{{ request()->is('about/our-people') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    Our People
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about.details', 'professional-standard') }}"
                                    class="{{ request()->is('about/professional-standard') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    Professional and Ethical Standard
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about.details', 'business-license') }}"
                                    class="{{ request()->is('about/business-license') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 py-1 pl-4">
                                    Business License
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about.details', 'company-profile') }}"
                                    class="{{ request()->is('about/company-profile') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    Company Profile
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about.details', 'company-structure') }}"
                                    class="{{ request()->is('about/company-structure') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    Company Structure
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('about.details', 'careers') }}"
                                    class="{{ request()->is('about/careers') ? 'text-primary border-primary' : 'text-gray-400 border-transparent hover:border-gray-200 hover:text-primary' }} transition-all block border-l-4 pl-4 py-1">
                                    Careers
                                </a>
                            </li>
                        </ul>

                    </div>
                </div>

                <!-- Main Content -->
                <div class="lg:col-span-3 reveal reveal-fade">
                    @if ($slug === 'careers')
                                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                                    <!-- Header -->
                                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">
                                            Careers</h2>
                                    </div>

                                    <div class="p-8 md:p-12">
                                        <div class="prose prose-lg max-w-none text-gray-600 leading-relaxed mb-10">
                                            <p class="font-bold text-gray-800 text-lg mb-6">
                                                <span class="text-primary font-black uppercase">KHMER FOUNDATION APPRAISALS</span>
                                                (KFA) Co., Ltd is seeking qualified and experienced candidates for the exciting
                                                position:
                                            </p>

                                            <!-- Job List Container -->
                                            <div id="careers-loading" class="text-center py-8">
                                                <div
                                                    class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                                                </div>
                                                <p class="mt-2 text-gray-500">Loading opportunities...</p>
                                            </div>
                                            <ul id="careers-container" class="space-y-6 list-none pl-0 hidden">
                                                <!-- Dynamic Content will be loaded here -->
                                            </ul>
                                        </div>

                                        <!-- Recruitment Banner Placeholder -->
                                        <div class="mb-10 rounded-2xl overflow-hidden shadow-lg border border-gray-100">
                                            <div class="bg-gradient-to-r from-primary to-secondary p-8 text-white text-center">
                                                <h3 class="text-2xl font-black uppercase mb-2">We Are Hiring!</h3>
                                                <p class="opacity-90 max-w-xl mx-auto mb-6">Join our dynamic team and grow your career
                                                    with KFA. We offer competitive salaries and a supportive professional environment.
                                                </p>
                                                <button onclick="openCareerModal()"
                                                    class="inline-block bg-white text-primary font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                                                    Apply Now
                                                </button>
                                            </div>
                                        </div>

                                        <div class="bg-gray-50 rounded-2xl p-8 border-l-4 border-secondary">
                                            <p class="mb-4 text-sm leading-relaxed">
                                                <strong class="text-gray-900">Note:</strong> We provide training to the selected
                                                candidates if they do not have experiences. No worry. We are open until fill. If you are
                                                interested, please send your cover letter and resume using the form above or to the
                                                address below.
                                            </p>

                                            <div class="mt-6 pt-6 border-t border-gray-200 text-sm space-y-2">
                                                <p class="font-bold text-primary">KFA Head Office:</p>
                                                <p>#36A, St. 4, (Borey Peng Hout The Star Natural 371) Sangkat Boeng Tumpun, Khan Mean
                                                    Chey, Phnom Penh.</p>
                                                <div class="flex flex-wrap gap-4 mt-2 font-bold text-primary">
                                                    <a href="tel:077241168" class="flex items-center hover:text-secondary"><span
                                                            class="mr-2">📞</span> 077 241 168</a>
                                                    <a href="mailto:hr@kfa.com.kh" class="flex items-center hover:text-secondary"><span
                                                            class="mr-2">📧</span> hr@kfa.com.kh</a>
                                                    <a href="mailto:info@kfa.com.kh"
                                                        class="flex items-center hover:text-secondary"><span class="mr-2">📧</span>
                                                        info@kfa.com.kh</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Application Modal -->
                                <div id="career-modal" class="fixed inset-0 z-[9999] hidden" aria-labelledby="modal-title" role="dialog"
                                    aria-modal="true">
                                    <!-- Backdrop -->
                                    <div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity pointer-events-none">
                                    </div>

                                    <!-- Modal Container -->
                                    <div class="fixed inset-0 overflow-y-auto pointer-events-none">
                                        <div class="flex min-h-full items-center justify-center p-4"
                                            onclick="event.target === this && closeCareerModal()">
                                            <!-- Modal Content -->
                                            <div
                                                class="relative bg-white rounded-3xl shadow-2xl w-full max-w-2xl transform transition-all pointer-events-auto">
                                                <!-- Header -->
                                                <div class="bg-gradient-to-r from-primary to-secondary px-8 py-6 rounded-t-3xl">
                                                    <div class="flex items-center justify-between">
                                                        <div>
                                                            <h3 class="text-3xl font-black text-white mb-1" id="modal-title">
                                                                Apply for Position
                                                            </h3>
                                                            <p class="text-white/80 text-sm">Join our professional team</p>
                                                        </div>
                                                        <button onclick="closeCareerModal()"
                                                            class="text-white/80 hover:text-white transition-colors">
                                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                                    d="M6 18L18 6M6 6l12 12" />
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </div>

                                                <!-- Form -->
                                                <div class="px-8 py-6 max-h-[70vh] overflow-y-auto">
                                                    <form id="career-application-form" class="space-y-5">
                                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                                            <div>
                                                                <label for="applicant-name"
                                                                    class="block text-sm font-bold text-gray-700 mb-2">
                                                                    Full Name <span class="text-red-500">*</span>
                                                                </label>
                                                                <input type="text" name="name" id="applicant-name" required
                                                                    class="w-full rounded-xl border-2 border-gray-200 focus:border-primary focus:ring-0 px-4 py-3 transition-colors">
                                                            </div>
                                                            <div>
                                                                <label for="applicant-email"
                                                                    class="block text-sm font-bold text-gray-700 mb-2">
                                                                    Email Address <span class="text-red-500">*</span>
                                                                </label>
                                                                <input type="email" name="email" id="applicant-email" required
                                                                    class="w-full rounded-xl border-2 border-gray-200 focus:border-primary focus:ring-0 px-4 py-3 transition-colors">
                                                            </div>
                                                        </div>

                                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                                            <div>
                                                                <label for="applicant-phone"
                                                                    class="block text-sm font-bold text-gray-700 mb-2">
                                                                    Phone Number <span class="text-red-500">*</span>
                                                                </label>
                                                                <input type="tel" name="phone" id="applicant-phone" required
                                                                    class="w-full rounded-xl border-2 border-gray-200 focus:border-primary focus:ring-0 px-4 py-3 transition-colors">
                                                            </div>
                                                            <div>
                                                                <label for="applicant-position"
                                                                    class="block text-sm font-bold text-gray-700 mb-2">
                                                                    Position Applying For
                                                                </label>
                                                                <select name="position" id="applicant-position"
                                                                    class="w-full rounded-xl border-2 border-gray-200 focus:border-primary focus:ring-0 px-4 py-3 transition-colors">
                                                                    <option value="">Select a position...</option>
                                                                    <!-- Options will be populated dynamically -->
                                                                </select>
                                                            </div>
                                                        </div>

                                                        <div>
                                                            <label for="applicant-cv"
                                                                class="block text-sm font-bold text-gray-700 mb-2">
                                                                Resume/CV <span class="text-red-500">*</span>
                                                            </label>
                                                            <input type="file" name="cv" id="applicant-cv" accept=".pdf,.doc,.docx"
                                                                required
                                                                class="w-full text-sm text-gray-500 file:mr-4 file:py-3 file:px-6 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 transition-colors cursor-pointer">
                                                        </div>

                                                        <div>
                                                            <label for="applicant-message"
                                                                class="block text-sm font-bold text-gray-700 mb-2">
                                                                Cover Letter / Message
                                                            </label>
                                                            <textarea name="message" id="applicant-message" rows="4"
                                                                class="w-full rounded-xl border-2 border-gray-200 focus:border-primary focus:ring-0 px-4 py-3 transition-colors resize-none"></textarea>
                                                        </div>

                                                        <!-- Form Buttons -->
                                                        <div class="flex gap-3 justify-end pt-4">
                                                            <button type="button" onclick="closeCareerModal()"
                                                                class="px-6 py-3 rounded-xl border-2 border-gray-300 text-gray-700 font-bold hover:bg-gray-100 transition-colors">
                                                                Cancel
                                                            </button>
                                                            <button type="submit"
                                                                class="px-6 py-3 rounded-xl bg-primary text-white font-bold hover:bg-secondary transition-colors shadow-lg hover:shadow-xl">
                                                                Submit Application
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <script>
                                    let formInitialized = false;
                                    function openCareerModal() {
                                        document.getElementById('career-modal').classList.remove('hidden');
                                        populatePositions();
                                        if (!formInitialized) {
                                            initCareerFormHandler();
                                            formInitialized = true;
                                        }
                                    }
                                    function closeCareerModal() {
                                        document.getElementById('career-modal').classList.add('hidden');
                                    }
                                    function initCareerFormHandler() {
                                        const form = document.getElementById('career-application-form');
                                        if (!form) return;
                                        form.addEventListener('submit', async (e) => {
                                            e.preventDefault();
                                            const submitBtn = form.querySelector('button[type="submit"]');
                                            const originalText = submitBtn.innerText;
                                            const formData = new FormData(form);
                                            const positionSelect = form.querySelector('#applicant-position');
                                            const selectedOption = positionSelect.options[positionSelect.selectedIndex];
                                            const positionId = selectedOption.dataset.id || '1';
                                            formData.delete('position');
                                            formData.set('position_id', positionId);
                                            try {
                                                submitBtn.innerText = 'Submitting...';
                                                submitBtn.disabled = true;
                                                await window.axios.post('/careers/apply', formData, {
                                                    headers: {
                                                        'Content-Type': 'multipart/form-data'
                                                    }
                                                });
                                                alert('Application submitted successfully! We will contact you shortly.');
                                                form.reset();
                                                closeCareerModal();
                                            } catch (error) {
                                                if (error.response) {
                                                    const message = error.response.data.message || 'Submission failed. Please try again.';
                                                    alert(message);
                                                } else {
                                                    alert('Application submitted successfully!');
                                                    form.reset();
                                                    closeCareerModal();
                                                }
                                            } finally {
                                                submitBtn.innerText = originalText;
                                                submitBtn.disabled = false;
                                            }
                                        });
                                    }
                                    function populatePositions() {
                                        const select = document.getElementById('applicant-position');
                                        select.innerHTML = '<option value="">Select a position...</option>';
                                        const generalOption = document.createElement('option');
                                        generalOption.value = 'General Application';
                                        generalOption.textContent = 'General Application';
                                        generalOption.dataset.id = '0';
                                        select.appendChild(generalOption);
                                        if (window.currentJobs && window.currentJobs.length > 0) {
                                            window.currentJobs.forEach(job => {
                                                const option = document.createElement('option');
                                                option.value = job.title;
                                                option.textContent = job.title;
                                                option.dataset.id = job.id;
                                                select.appendChild(option);
                                            });
                                        }
                                    }
                                </script>
                            </div>
                        </div>
                    @elseif ($slug === 'business-license')
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <!-- Header -->
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">KFA's
                            Business License</h2>
                    </div>

                    <div class="p-8 md:p-12">
                        <!-- Loading State -->
                        <div id="licenses-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading licenses...</p>
                        </div>

                        <!-- Dynamic Grid Container -->
                        <div id="licenses-container" class="grid grid-cols-2 lg:grid-cols-4 gap-6 hidden">
                            <!-- Content will be loaded dynamically -->
                        </div>
                    </div>
                </div>
            @elseif ($slug === 'ceo-message')
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <!-- Header -->
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Founder &
                            Chairman/CEO's Message</h2>
                    </div>

                    <div class="p-8 md:p-12">
                        <div id="ceo-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading message...</p>
                        </div>
                        <div id="ceo-container" class="hidden">
                            <!-- Dynamic content will be loaded here -->
                        </div>
                    </div>
                </div>
            @elseif ($slug === 'company-overview')
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <!-- Header -->
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Company
                            Overview</h2>
                    </div>

                    <div class="p-8 md:p-12">
                        <div id="overview-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading overview...</p>
                        </div>
                        <div id="overview-container"
                            class="hidden prose prose-lg max-w-none text-gray-600 leading-relaxed text-justify">
                            <!-- Dynamic content will be loaded here -->
                        </div>
                    </div>
                </div>
            @elseif ($slug === 'our-people')
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <!-- Header -->
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Our People
                        </h2>
                    </div>

                    <div class="p-8 md:p-12">
                        <div id="people-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading team...</p>
                        </div>
                        <div id="people-container" class="hidden">
                            <!-- Dynamic content -->
                        </div>
                    </div>
                </div>
            @elseif ($slug === 'professional-standard')
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <!-- Header -->
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Professional
                            and
                            Ethical Standard</h2>
                    </div>

                    <div class="p-8 md:p-12">
                        <div id="ethics-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading standards...</p>
                        </div>
                        <div id="ethics-container" class="hidden">
                            <!-- Dynamic content -->
                        </div>
                    </div>
                </div>
            @elseif ($slug === 'company-profile')
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Company
                            Profile</h2>
                    </div>
                    <div class="p-8 md:p-12">
                        <div id="profile-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading profile...</p>
                        </div>
                        <div id="profile-container" class="hidden">
                            <!-- Dynamic content -->
                        </div>
                    </div>
                </div>
            @elseif ($slug === 'company-structure')
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Company
                            Structure</h2>
                    </div>
                    <div class="p-8 md:p-12">
                        <div id="structure-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading structure...</p>
                        </div>
                        <div id="structure-container" class="hidden">
                            <!-- Dynamic content -->
                        </div>
                    </div>
                </div>
            @else
                <!-- Default/Vision Mission Content -->
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                    <!-- Header -->
                    <div class="bg-[#0a2540] py-6 px-8 text-center border-b-4 border-[#cba35c]">
                        <h2 class="text-2xl md:text-3xl font-black text-white uppercase tracking-widest">Vision and
                            Mission</h2>
                    </div>

                    <div class="p-8 md:p-12">
                        <div id="vision-loading" class="text-center py-12">
                            <div
                                class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-r-transparent">
                            </div>
                            <p class="mt-2 text-gray-500">Loading vision & mission...</p>
                        </div>
                        <div id="vision-container" class="hidden">
                            <!-- Dynamic content -->
                        </div>
                    </div>
                </div>
            @endif
        </div>
        </div>
        </div>
    </section>
@endsection