<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/JobClub/Jobs/Show.vue
//  Location: resources/js/Pages/Member/JobClub/Jobs/Show.vue
//
//  Single job listing detail page.
//
//  Poster view:
//    - Full listing details
//    - List of applicants (anonymous CVs)
//    - "I want to contact" action → triggers consent flow
//    - Close / Reopen listing
//
//  Applicant view:
//    - Full listing details
//    - Apply button (if not yet applied, listing active)
//    - My application status
// ══════════════════════════════════════════════════════════════════

import { ref, computed }  from 'vue';
import { Head, router }   from '@inertiajs/vue3';
import { useAuthStore }   from '@/Stores/useAuthStore';
import AppLayout          from '@/Layouts/AppLayout.vue';

const props = defineProps({
    listing:       { type: Object,  required: true },
    isPoster:      { type: Boolean, default: false },
    myApplication: { type: Object,  default: null },
    applicants:    { type: Array,   default: () => [] },
    allHubs:       { type: Array,   required: true },
});

const authStore = useAuthStore();
const locale    = computed(() => authStore.locale);
const ar        = computed(() => locale.value === 'ar');

// ── Apply ─────────────────────────────────────────────────────────
const applying     = ref(false);
const applyMessage = ref('');
const applyResult  = ref(null);
const myStatus     = ref(props.myApplication?.status ?? null);

async function apply() {
    if (applying.value) return;
    applying.value = true;
    try {
        const res = await fetch(route('member.jobs.apply', props.listing.id), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ message: applyMessage.value }),
        });
        const data = await res.json();
        myStatus.value    = data.status;
        applyResult.value = data.message;
    } finally {
        applying.value = false;
    }
}

// ── Close / Reopen ────────────────────────────────────────────────
const listingStatus = ref(props.listing.status);
const closingJob    = ref(false);

async function toggleClose() {
    if (closingJob.value) return;
    closingJob.value = true;
    const isActive = listingStatus.value === 'active';
    const url = isActive
        ? route('member.jobs.close',  props.listing.id)
        : route('member.jobs.reopen', props.listing.id);

    try {
        const res  = await fetch(url, {
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        });
        const data = await res.json();
        listingStatus.value = data.status;
    } finally {
        closingJob.value = false;
    }
}

// ── Initiate contact with applicant ──────────────────────────────
const applicantList     = ref(props.applicants);
const initiatingContact = ref(null);

async function initiateContact(notifId) {
    if (initiatingContact.value) return;
    initiatingContact.value = notifId;
    try {
        const res  = await fetch(route('member.jobs.initiate', notifId), {
            method: 'PATCH',
            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        });
        const data = await res.json();
        const applicant = applicantList.value.find(a => a.notification_id === notifId);
        if (applicant) {
            applicant.status             = data.status;
            applicant.employer_consented = data.employer_consented;
        }
    } finally {
        initiatingContact.value = null;
    }
}

// ── Helpers ───────────────────────────────────────────────────────
const jobTypes = {
    full_time:  { en: 'Full Time',  ar: 'دوام كامل' },
    part_time:  { en: 'Part Time',  ar: 'دوام جزئي' },
    contract:   { en: 'Contract',   ar: 'عقد' },
    internship: { en: 'Internship', ar: 'تدريب' },
};

function jobTypeLabel(v) {
    return ar.value ? (jobTypes[v]?.ar ?? v) : (jobTypes[v]?.en ?? v);
}

function levelLabel(v) {
    const map = {
        student: { en: 'Student',   ar: 'طالب' },
        fresh:   { en: 'Fresh',     ar: 'خريج جديد' },
        junior:  { en: 'Junior',    ar: 'مبتدئ' },
        mid:     { en: 'Mid-level', ar: 'متوسط' },
        senior:  { en: 'Senior',    ar: 'خبير' },
    };
    return ar.value ? (map[v]?.ar ?? v) : (map[v]?.en ?? v);
}

function statusLabel(s) {
    const map = {
        pending:   { en: 'Waiting for response',       ar: 'في انتظار الرد' },
        accepted:  { en: 'Accepted — awaiting consent', ar: 'مقبول — في انتظار الموافقة' },
        connected: { en: 'Connected',                  ar: 'متصل' },
        declined:  { en: 'Declined',                   ar: 'مرفوض' },
    };
    return ar.value ? (map[s]?.ar ?? s) : (map[s]?.en ?? s);
}

function statusClass(s) {
    return {
        pending:   'badge--pending',
        accepted:  'badge--accepted',
        connected: 'badge--connected',
        declined:  'badge--declined',
    }[s] ?? '';
}

const canApply = computed(() =>
    !props.isPoster &&
    !myStatus.value &&
    listingStatus.value === 'active'
);

const hubColor = computed(() => props.listing.hub?.color ?? 'var(--color-primary)');
</script>

<template>
    <Head :title="listing.job_title" />

    <AppLayout>
        <div class="show-page">

            <!-- ── Back link ──────────────────────────────────────── -->
            <a :href="route('member.jobs.index')" class="back-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 12H5M12 5l-7 7 7 7"/>
                </svg>
                {{ ar ? 'جميع الوظائف' : 'All Listings' }}
            </a>

            <!-- ══════════════════════════════════════════════════
                 TWO-COLUMN BODY
            ═══════════════════════════════════════════════════════ -->
            <div class="show-body">

                <!-- ════════════════════════════════════════════
                     LEFT — listing detail
                ═════════════════════════════════════════════════ -->
                <div class="show-main">

                    <!-- Header card -->
                    <div class="detail-card">
                        <!-- Hub color stripe -->
                        <div class="detail-card__stripe"
                             :style="{ background: hubColor }"></div>

                        <div class="detail-card__content">

                            <!-- Title row -->
                            <div class="detail-title-row">
                                <h1 class="detail-title">{{ listing.job_title }}</h1>
                                <span class="detail-type-badge">{{ jobTypeLabel(listing.job_type) }}</span>
                            </div>

                            <!-- Company + location -->
                            <div class="detail-company">
                                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
                                </svg>
                                {{ listing.company_name }}
                                <template v-if="listing.location_city">
                                    <span class="detail-sep">·</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
                                    </svg>
                                    {{ listing.location_city }}
                                </template>
                            </div>

                            <!-- Meta chips row -->
                            <div class="detail-meta">
                                <span v-if="listing.hub"
                                      class="detail-hub-badge"
                                      :style="{
                                          color: listing.hub.color,
                                          borderColor: listing.hub.color + '40',
                                          background: listing.hub.color + '12'
                                      }">
                                    {{ ar ? listing.hub.name_ar : listing.hub.name_en }}
                                </span>
                                <span v-if="listing.min_experience_years > 0" class="detail-meta-chip">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                                    </svg>
                                    {{ listing.min_experience_years }}+ {{ ar ? 'سنة خبرة' : 'yrs exp' }}
                                </span>
                                <span v-if="listing.salary_range" class="detail-meta-chip">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                                    </svg>
                                    {{ listing.salary_range }}
                                </span>
                                <span class="detail-date">{{ listing.created_at }}</span>
                            </div>

                        </div>
                    </div>

                    <!-- Description section -->
                    <div class="section-card">
                        <div class="section-card__label">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/>
                            </svg>
                            {{ ar ? 'الوصف الوظيفي' : 'Job Description' }}
                        </div>
                        <p class="section-card__body">{{ listing.description }}</p>
                    </div>

                    <!-- Required skills section -->
                    <div v-if="listing.required_skills?.length" class="section-card">
                        <div class="section-card__label">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                            </svg>
                            {{ ar ? 'المهارات المطلوبة' : 'Required Skills' }}
                        </div>
                        <div class="skills-wrap">
                            <span v-for="s in listing.required_skills" :key="s" class="skill-tag">{{ s }}</span>
                        </div>
                    </div>

                </div><!-- /show-main -->

                <!-- ════════════════════════════════════════════
                     RIGHT — sidebar
                ═════════════════════════════════════════════════ -->
                <div class="show-aside">

                    <!-- ── POSTER SIDEBAR ──────────────────────── -->
                    <template v-if="isPoster">

                        <!-- Listing status card -->
                        <div class="aside-card aside-card--status">
                            <div class="aside-card__head">
                                <span class="aside-card__title">{{ ar ? 'حالة الإعلان' : 'Listing Status' }}</span>
                                <span class="status-pill"
                                      :class="listingStatus === 'active'
                                          ? 'status-pill--active'
                                          : 'status-pill--closed'">
                                    <span class="status-pill__dot"></span>
                                    {{ listingStatus === 'active'
                                        ? (ar ? 'نشط' : 'Active')
                                        : (ar ? 'مغلق' : 'Closed') }}
                                </span>
                            </div>

                            <button class="toggle-btn"
                                    :class="listingStatus === 'active'
                                        ? 'toggle-btn--close'
                                        : 'toggle-btn--reopen'"
                                    :disabled="closingJob"
                                    @click="toggleClose">
                                <svg v-if="closingJob" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spin">
                                    <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                                </svg>
                                <template v-else>
                                    <svg v-if="listingStatus === 'active'" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                                    </svg>
                                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>
                                    </svg>
                                </template>
                                {{ listingStatus === 'active'
                                    ? (ar ? 'إغلاق الإعلان' : 'Close Listing')
                                    : (ar ? 'إعادة فتح' : 'Reopen Listing') }}
                            </button>
                        </div>

                        <!-- Applicants card -->
                        <div class="aside-card">
                            <div class="aside-card__head">
                                <span class="aside-card__title">{{ ar ? 'المتقدمون' : 'Applicants' }}</span>
                                <span class="applicant-count-badge">{{ applicantList.length }}</span>
                            </div>

                            <div v-if="!applicantList.length" class="applicants-empty">
                                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                                </svg>
                                <p>{{ ar ? 'لا توجد تقديمات بعد' : 'No applications yet' }}</p>
                            </div>

                            <div v-else class="applicants-list">
                                <div v-for="a in applicantList"
                                     :key="a.notification_id"
                                     class="applicant-card"
                                     :class="{ 'applicant-card--connected': a.status === 'connected' }">

                                    <!-- CV info -->
                                    <div v-if="a.cv" class="applicant-cv">
                                        <div class="applicant-cv__title">{{ a.cv.job_title }}</div>
                                        <div class="applicant-cv__meta">
                                            <span>{{ a.cv.years_experience }} {{ ar ? 'سنة' : 'yrs' }}</span>
                                            <span class="dot-sep">·</span>
                                            <span>{{ levelLabel(a.cv.experience_level) }}</span>
                                            <template v-if="a.cv.location_city">
                                                <span class="dot-sep">·</span>
                                                <span>{{ a.cv.location_city }}</span>
                                            </template>
                                        </div>
                                        <div v-if="a.cv.skills?.length" class="applicant-skills">
                                            <span v-for="s in a.cv.skills.slice(0,4)" :key="s" class="skill-tag skill-tag--sm">{{ s }}</span>
                                        </div>
                                    </div>

                                    <!-- Divider -->
                                    <div class="applicant-divider"></div>

                                    <!-- Status badge -->
                                    <div class="applicant-footer">
                                        <span class="status-badge" :class="statusClass(a.status)">
                                            {{ statusLabel(a.status) }}
                                        </span>
                                    </div>

                                    <!-- Connected — reveal contact -->
                                    <div v-if="a.status === 'connected' && a.contact"
                                         class="contact-reveal">
                                        <div class="contact-reveal__head">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                                <polyline points="20 6 9 17 4 12"/>
                                            </svg>
                                            {{ ar ? 'تم التواصل' : 'Connected' }}
                                        </div>
                                        <div class="contact-row">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
                                            </svg>
                                            <span>{{ a.contact.name }}</span>
                                        </div>
                                        <div class="contact-row">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                                            </svg>
                                            <a :href="`mailto:${a.contact.email}`">{{ a.contact.email }}</a>
                                        </div>
                                        <div v-if="a.contact.phone" class="contact-row">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
                                            </svg>
                                            <a :href="`tel:${a.contact.phone}`">{{ a.contact.phone }}</a>
                                        </div>
                                    </div>

                                    <!-- Initiate contact -->
                                    <button v-else-if="a.status === 'pending'"
                                            class="initiate-btn"
                                            :disabled="initiatingContact === a.notification_id"
                                            @click="initiateContact(a.notification_id)">
                                        <svg v-if="initiatingContact === a.notification_id" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spin">
                                            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                                        </svg>
                                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                                        </svg>
                                        {{ ar ? 'أريد التواصل' : 'I want to contact' }}
                                    </button>

                                    <!-- Waiting for applicant consent -->
                                    <div v-else-if="a.status === 'accepted' && a.employer_consented && !a.connected_at"
                                         class="applicant-waiting">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                                        </svg>
                                        {{ ar ? 'في انتظار موافقة المتقدم' : 'Waiting for applicant consent' }}
                                    </div>

                                </div>
                            </div>
                        </div>

                    </template>

                    <!-- ── APPLICANT SIDEBAR ───────────────────── -->
                    <template v-else>
                        <div class="aside-card apply-card">

                            <!-- Already applied — status display -->
                            <div v-if="myStatus" class="apply-status">
                                <div class="apply-status__icon"
                                     :class="myStatus === 'connected' ? 'apply-status__icon--green' : 'apply-status__icon--muted'">
                                    <svg v-if="myStatus === 'connected'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                                    </svg>
                                </div>
                                <div class="apply-status__label">{{ statusLabel(myStatus) }}</div>
                                <a v-if="myStatus === 'connected' || myStatus === 'accepted'"
                                   :href="route('member.jobs.notifications')"
                                   class="apply-inbox-btn">
                                    {{ ar ? 'افتح البريد الوارد' : 'Open Notifications' }}
                                </a>
                            </div>

                            <!-- Can apply -->
                            <template v-else-if="canApply">
                                <div class="apply-card__head">
                                    <div class="apply-card__title">
                                        {{ ar ? 'أبدِ اهتمامك' : 'Show Your Interest' }}
                                    </div>
                                    <p class="apply-card__sub">
                                        {{ ar
                                            ? 'سيصل ملفك المجهول لصاحب الإعلان'
                                            : 'Your anonymous CV goes to the poster' }}
                                    </p>
                                </div>

                                <div v-if="applyResult" class="apply-result">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    {{ applyResult }}
                                </div>

                                <template v-else>
                                    <textarea v-model="applyMessage"
                                              class="apply-message"
                                              rows="2"
                                              maxlength="500"
                                              :placeholder="ar ? 'رسالة اختيارية...' : 'Optional message...'" />

                                    <button class="apply-btn"
                                            :disabled="applying"
                                            @click="apply">
                                        <svg v-if="applying" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spin">
                                            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
                                        </svg>
                                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                                        </svg>
                                        {{ applying
                                            ? (ar ? 'جاري الإرسال...' : 'Sending...')
                                            : (ar ? 'أنا مهتم' : 'I\'m Interested') }}
                                    </button>
                                </template>

                                <!-- Privacy note -->
                                <div class="apply-privacy">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0; margin-top:1px;">
                                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                                    </svg>
                                    <span>{{ ar
                                        ? 'معلوماتك الشخصية مخفية تماماً حتى موافقتك على التواصل'
                                        : 'Your personal details stay hidden until you consent to connect' }}</span>
                                </div>
                            </template>

                            <!-- Listing closed -->
                            <div v-else class="apply-closed">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                                </svg>
                                {{ ar ? 'هذا الإعلان مغلق' : 'This listing is closed' }}
                            </div>

                        </div>
                    </template>

                </div><!-- /show-aside -->

            </div><!-- /show-body -->
        </div><!-- /show-page -->
    </AppLayout>
</template>

<style scoped>
.show-page {
    padding: 16px 16px 100px;
    max-width: 1250px;
    margin: 0 auto;
}

/* ── Back link ──────────────────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color var(--transition-fast);
}

.back-link:hover { color: var(--color-primary); }
[dir="rtl"] .back-link svg { transform: scaleX(-1); }

/* ══════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT
══════════════════════════════════════════════════════════════ */
.show-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.show-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.show-aside {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════
   DETAIL CARD (header)
══════════════════════════════════════════════════════════════ */
.detail-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.detail-card__stripe {
    height: 4px;
    width: 100%;
}

.detail-card__content {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.25;
    margin: 0;
}

.detail-type-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(29, 158, 117, 0.1);
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 4px;
}

.detail-company {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

.detail-sep { opacity: 0.35; margin: 0 2px; }

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.detail-hub-badge {
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 600;
}

.detail-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 11px;
    color: var(--color-text-muted);
}

.detail-date {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-inline-start: auto;
}

/* ══════════════════════════════════════════════════════════════
   SECTION CARDS (description, skills)
══════════════════════════════════════════════════════════════ */
.section-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-card__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.section-card__label svg { color: var(--color-primary); flex-shrink: 0; }

.section-card__body {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin: 0;
    white-space: pre-line;
}

/* ── Skills ─────────────────────────────────────────────────────── */
.skills-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

.skill-tag {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.skill-tag--sm {
    padding: 2px 8px;
    font-size: 10px;
}

/* ══════════════════════════════════════════════════════════════
   ASIDE CARDS
══════════════════════════════════════════════════════════════ */
.aside-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aside-card--status {
    border-top: 3px solid var(--color-primary);
}

.aside-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.aside-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* ── Status pill ────────────────────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-pill--active {
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
}

.status-pill--active .status-pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-primary);
}

.status-pill--closed {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.status-pill--closed .status-pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.5;
}

/* ── Toggle button (close / reopen) ────────────────────────────── */
.toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid;
    background: transparent;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.toggle-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.toggle-btn--close {
    border-color: #dc3545;
    color: #dc3545;
}

.toggle-btn--close:hover:not(:disabled) {
    background: #dc3545;
    color: #fff;
}

.toggle-btn--reopen {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.toggle-btn--reopen:hover:not(:disabled) {
    background: var(--color-primary);
    color: #fff;
}

/* ── Applicant count badge ──────────────────────────────────────── */
.applicant-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
}

/* ── Applicants empty ───────────────────────────────────────────── */
.applicants-empty {
    text-align: center;
    padding: 20px 0;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* ── Applicants list ────────────────────────────────────────────── */
.applicants-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Applicant card ─────────────────────────────────────────────── */
.applicant-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color var(--transition-fast);
}

.applicant-card--connected {
    border-color: rgba(29, 158, 117, 0.35);
    background: rgba(29, 158, 117, 0.03);
}

.applicant-cv__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 3px;
}

.applicant-cv__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.dot-sep { opacity: 0.35; }

.applicant-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.applicant-divider {
    height: 1px;
    background: var(--color-border);
}

.applicant-footer { display: flex; align-items: center; }

/* ── Status badge ───────────────────────────────────────────────── */
.status-badge {
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.badge--pending   { background: rgba(247,181,0,0.12);  color: #b7860a; }
.badge--accepted  { background: rgba(29,158,117,0.12); color: var(--color-primary); }
.badge--connected { background: rgba(29,158,117,0.2);  color: var(--color-primary); }
.badge--declined  { background: rgba(220,53,69,0.1);   color: #dc3545; }

/* ── Contact reveal ─────────────────────────────────────────────── */
.contact-reveal {
    background: rgba(29, 158, 117, 0.06);
    border: 1px solid rgba(29, 158, 117, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-reveal__head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.contact-row a {
    color: var(--color-primary);
    text-decoration: none;
}

.contact-row a:hover { text-decoration: underline; }

/* ── Initiate contact button ────────────────────────────────────── */
.initiate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
    font-family: inherit;
    width: 100%;
    justify-content: center;
}

.initiate-btn:hover:not(:disabled) { background: var(--color-primary-light); }
.initiate-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Waiting ────────────────────────────────────────────────────── */
.applicant-waiting {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   APPLY CARD
══════════════════════════════════════════════════════════════ */
.apply-card { gap: 14px; }

.apply-card__head { display: flex; flex-direction: column; gap: 4px; }

.apply-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.apply-card__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.apply-message {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--color-text-primary);
    font-family: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
}

.apply-message:focus { border-color: var(--color-primary); }

.apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    font-family: inherit;
}

.apply-btn:hover:not(:disabled) {
    background: var(--color-primary-light);
    box-shadow: 0 4px 14px rgba(29, 158, 117, 0.3);
}

.apply-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Privacy note */
.apply-privacy {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background: rgba(29, 158, 117, 0.06);
    border: 1px solid rgba(29, 158, 117, 0.18);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.apply-privacy svg { color: var(--color-primary); }

/* Apply result */
.apply-result {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 600;
    padding: 10px 0;
}

/* Status display */
.apply-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-align: center;
}

.apply-status__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apply-status__icon--green {
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
}

.apply-status__icon--muted {
    background: var(--color-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.apply-status__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.apply-inbox-btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.apply-inbox-btn:hover { background: var(--color-primary-light); }

/* Closed */
.apply-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 16px 0;
}

/* ══════════════════════════════════════════════════════════════
   SPINNER
══════════════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .show-page { padding: 24px 32px 60px; }

    .show-body {
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
    }

    .show-main { flex: 1; min-width: 0; }

    .show-aside {
        width: 360px;
        flex-shrink: 0;
        position: sticky;
        top: 80px;
    }
}
</style>