@extends('layouts.marketing')

@section('title', $job->title . ' - CuraHealthLine')

@section('content')
    <x-marketing-nav />

    @php
        $employer = $job->employer;
        $logo = optional($employer)->logo_url ? asset(optional($employer)->logo_url) : null;
        $locationParts = [];
        if ($job->location_city) $locationParts[] = $job->location_city;
        if ($job->location_state) $locationParts[] = $job->location_state;
        if ($job->location_country) $locationParts[] = $job->location_country;
        $location = trim(implode(', ', $locationParts)) ?: ($job->location ?? 'Remote/Hybrid');
        $currency = $job->salary_currency ?? $job->currency ?? 'USD';
        $badgeMap = [
            'visa_sponsorship' => 'Visa Sponsorship',
            'relocation_package' => 'Relocation Support',
            'housing_provided' => 'Housing Provided',
            'sign_on_bonus' => 'Sign-On Bonus',
            'licensure_support' => 'Licensure Support',
            'health_insurance' => 'Health Insurance',
            'paid_pto' => 'Paid PTO',
        ];
        $activeBadges = [];
        foreach ($badgeMap as $key => $label) {
            if (data_get($job, $key)) {
                $activeBadges[] = $label;
            }
        }
        $activeBadges = array_slice($activeBadges, 0, 7);
    @endphp

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-6">
        <a href="{{ route('jobs.index') }}" class="inline-flex items-center text-sm font-semibold text-[#1D5BBF] hover:text-[#14499d] transition">
            ← Back to jobs
        </a>

        <div class="bg-gradient-to-br from-[#f7fbff] via-white to-[#e8f4ff] rounded-3xl p-1 shadow-sm border border-slate-100">
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6 md:p-8 space-y-6">
                <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                    <div class="flex gap-3">
                        @if($employer)
                            <a href="{{ route('employers.show', $employer) }}" class="h-12 w-12 rounded-xl bg-gradient-to-br from-[#1D5BBF] to-[#27B1A2] text-white flex items-center justify-center text-sm font-bold overflow-hidden border border-white/60 shadow-sm hover:shadow-md transition">
                                @if($logo)
                                    <img src="{{ $logo }}" alt="{{ optional($employer)->company_name ?? 'Employer logo' }}" class="h-full w-full object-cover">
                                @else
                                    {{ strtoupper(substr(optional($employer)->company_name ?? optional($employer)->name ?? $job->title, 0, 2)) }}
                                @endif
                            </a>
                        @else
                            <div class="h-12 w-12 rounded-xl bg-gradient-to-br from-[#1D5BBF] to-[#27B1A2] text-white flex items-center justify-center text-sm font-bold overflow-hidden border border-white/60 shadow-sm">
                                {{ strtoupper(substr(optional($employer)->company_name ?? optional($employer)->name ?? $job->title, 0, 2)) }}
                            </div>
                        @endif
                        <div class="space-y-1">
                            <p class="text-xs font-semibold text-[#1D5BBF]">{{ optional($employer)->company_name ?? optional($employer)->name ?? 'Healthcare Employer' }}</p>
                            <h1 class="text-2xl md:text-3xl font-bold text-[#2C3E50] leading-tight">{{ $job->title }}</h1>
                            <p class="text-sm text-slate-600 flex flex-wrap items-center gap-2">
                                <span>{{ $location }}</span>
                                @if($job->employment_type)
                                    <span class="text-slate-400">&bull;</span>
                                    <span class="font-semibold text-slate-700">{{ $job->employment_type }}</span>
                                @endif
                                @if($job->work_mode)
                                    <span class="text-slate-400">&bull;</span>
                                    <span class="font-semibold text-slate-700">{{ $job->work_mode }}</span>
                                @endif
                                <span class="text-slate-400">&bull;</span>
                                <span class="text-slate-500">Posted {{ optional($job->published_at ?? $job->created_at)->diffForHumans() }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <div class="px-3 py-2 rounded-full bg-[#E8F4FF] text-xs font-semibold text-[#1D5BBF]">
                            {{ $job->visa_sponsorship ? 'Visa Sponsorship' : 'No Visa Support' }}
                        </div>
                        <div class="px-3 py-2 rounded-full bg-slate-100 text-xs font-semibold text-slate-700">
                            Status: {{ ucfirst($job->status) }}
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap gap-2">
                    @foreach($activeBadges as $label)
                        <span class="px-3 py-1 rounded-full bg-[#E8F4FF] text-xs font-semibold text-[#1D5BBF]">{{ $label }}</span>
                    @endforeach
                </div>

                <div class="grid gap-4 md:grid-cols-3">
                    <div class="rounded-2xl border border-slate-100 bg-gradient-to-br from-[#e8f4ff] via-white to-[#f7fbff] p-4 shadow-sm">
                        <p class="text-xs uppercase font-semibold text-slate-500 tracking-wide">Compensation</p>
                        <p class="mt-1 text-lg font-bold text-[#2C3E50]">
                            @if($job->salary_min && $job->salary_max)
                                {{ $currency }} {{ number_format($job->salary_min, 0) }} - {{ number_format($job->salary_max, 0) }}
                            @elseif($job->salary_min)
                                From {{ $currency }} {{ number_format($job->salary_min, 0) }}
                            @elseif($job->salary_max)
                                Up to {{ $currency }} {{ number_format($job->salary_max, 0) }}
                            @else
                                Competitive
                            @endif
                        </p>
                        @if($job->application_deadline)
                            <p class="mt-2 text-xs text-slate-600">Apply by {{ $job->application_deadline->format('M j, Y') }}</p>
                        @else
                            <p class="mt-2 text-xs text-slate-600">Rolling applications</p>
                        @endif
                    </div>
                    <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 space-y-2 text-sm text-[#2C3E50]">
                        <div class="flex justify-between"><span class="text-slate-500">License</span><span class="font-semibold">{{ $job->required_license ?? 'Not specified' }}</span></div>
                        <div class="flex justify-between"><span class="text-slate-500">Experience</span><span class="font-semibold">{{ $job->required_experience_years ? $job->required_experience_years . '+ yrs' : 'Any' }}</span></div>
                        <div class="flex justify-between"><span class="text-slate-500">Specialty</span><span class="font-semibold">{{ $job->required_specialty ?? 'Any' }}</span></div>
                    </div>
                    <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 space-y-2 text-sm text-[#2C3E50]">
                        <div class="flex justify-between"><span class="text-slate-500">Language/Exam</span><span class="font-semibold">{{ $job->required_language ?? 'Not specified' }} {{ $job->required_exam ? '· ' . $job->required_exam : '' }}</span></div>
                        <div class="flex justify-between"><span class="text-slate-500">Work mode</span><span class="font-semibold">{{ $job->work_mode ?? 'Flexible' }}</span></div>
                        <div class="flex justify-between"><span class="text-slate-500">Applications</span><span class="font-semibold">{{ $job->applications()->count() }}</span></div>
                    </div>
                </div>

                @if ($job->summary)
                    <div class="rounded-2xl border border-slate-100 bg-white p-4">
                        <p class="text-sm text-slate-700">{{ $job->summary }}</p>
                    </div>
                @endif

                @if ($job->description)
                    <section class="space-y-2">
                        <h2 class="text-lg font-bold text-[#2C3E50]">Role overview</h2>
                        <div class="prose max-w-none prose-slate">
                            {!! nl2br(e($job->description)) !!}
                        </div>
                    </section>
                @endif

                @if ($job->requirements)
                    <section class="space-y-2">
                        <h2 class="text-lg font-bold text-[#2C3E50]">Requirements</h2>
                        <div class="prose max-w-none prose-slate">
                            {!! nl2br(e($job->requirements)) !!}
                        </div>
                    </section>
                @endif

                <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 text-sm text-[#2C3E50] space-y-1">
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-1 rounded-full bg-[#E8F4FF] text-[#1D5BBF] text-[11px] font-semibold">International nurse friendly</span>
                        @if($job->relocation_package)
                            <span class="text-slate-600">Relocation support available</span>
                        @endif
                        @if($job->housing_provided)
                            <span class="text-slate-600">Housing provided</span>
                        @endif
                    </div>
                    <p class="text-xs text-slate-500">Employer: {{ optional($employer)->company_name ?? optional($employer)->name ?? 'Healthcare Employer' }}</p>
                    @if($employer)
                        <div class="mt-2 flex gap-2">
                            <a href="{{ route('employers.ratings', $employer) }}" class="inline-flex items-center gap-1 text-[#1D5BBF] hover:text-[#14499d] font-semibold text-xs">
                                <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                                View Reviews
                            </a>
                        </div>
                    @endif
                </div>

                @auth
                    @if (in_array(auth()->user()->role, ['nurse', 'user']))
                        @php
                            $alreadyApplied = \App\Models\JobApplication::where('job_posting_id', $job->id)->where('user_id', auth()->id())->exists();
                            $isOpen = in_array($job->status, ['open', 'published']);
                            $nurseDocuments = auth()->user()->nurseProfile?->documents ?? collect();
                        @endphp

                        <!-- Review Section -->
                        @if($employer)
                            <div class="rounded-2xl border border-slate-100 bg-blue-50 p-4">
                                <p class="text-sm text-slate-700 mb-3">Know about this employer? Share your experience and help other nurses make informed decisions.</p>
                                <a href="{{ route('employers.rate.create', $employer) }}" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 text-white px-4 py-2 text-sm font-semibold hover:bg-blue-700 transition">
                                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                    </svg>
                                    Write a Review
                                </a>
                            </div>
                        @endif

                        @if (! $isOpen)
                            <x-flash class="mt-2" type="error">
                                This job is not open for applications.
                            </x-flash>
                        @elseif ($job->external_application_url)
                            <!-- External Application Link -->
                            <div class="rounded-2xl border border-slate-100 bg-blue-50 p-4 space-y-3">
                                <p class="text-sm text-slate-700">
                                    <strong>Apply Now:</strong> This position uses an external application system. Click the button below to continue.
                                </p>
                                <a href="{{ $job->external_application_url }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition" style="background-color: #1D5BBF; border: 1px solid #1D5BBF;">
                                    <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                    </svg>
                                    Apply on External Site
                                </a>
                            </div>
                        @elseif ($alreadyApplied)
                            <x-flash class="mt-2" type="success">
                                You have already applied to this job. View your applications in your healthcare worker dashboard.
                            </x-flash>
                        @else
                            @php
                                $defaultDocument = $nurseDocuments->firstWhere('default_resume', true);
                                $lastDocument = $defaultDocument ?? $nurseDocuments->sortByDesc('created_at')->first();
                                $quickApplyEnabled = \App\Models\Setting::get('enable_quick_apply', true);
                            @endphp

                            @if($quickApplyEnabled && $lastDocument)
                                <!-- Quick Apply Button -->
                                <div class="mt-4 flex gap-2">
                                    <button
                                        id="quick-apply-btn"
                                        data-action="open-show-quick-apply"
                                        data-job-id="{{ $job->id }}"
                                        data-cv-id="{{ $lastDocument->id }}"
                                        type="button"
                                        data-job-id="{{ $job->id }}"
                                        data-cv-id="{{ $lastDocument->id }}"
                                        class="flex-1 inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition"
                                        style="background-color: #27B1A2; border: 1px solid #27B1A2;"
                                    >
                                        <svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                        </svg>
                                        Quick Apply
                                    </button>
                                    <button
                                        type="button"
                                        class="px-4 py-2.5 text-sm font-semibold text-[#2C3E50] border border-slate-300 rounded-full hover:bg-slate-50 transition"
                                        data-action="scroll-to-full-form"
                                        data-target-id="full-form"
                                    >
                                        Full Form
                                    </button>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">Quick apply with {{ $defaultDocument ? 'your default document' : 'your latest CV' }} ({{ $lastDocument->original_filename }})</p>
                            @endif

                            <form method="POST" action="{{ route('jobs.apply', $job) }}" class="mt-4 space-y-4" id="full-form" enctype="multipart/form-data">
                                @csrf
                                
                                <div class="rounded-2xl border border-slate-200 bg-slate-50/50 p-4 space-y-4">
                                    <p class="text-sm font-semibold text-[#2C3E50]">
                                        <span class="text-red-500">*</span> CV / Resume / Certificate (required)
                                    </p>
                                    <p class="text-xs text-slate-600">Provide one document: choose from your profile or upload a new file (PDF, DOC, DOCX, JPG, PNG – max 5MB).</p>
                                    @if($nurseDocuments->count() > 0)
                                    <div>
                                        <label class="block text-sm font-medium text-[#2C3E50] mb-1" for="cv_document_id">Use a document from your profile</label>
                                        <select
                                            id="cv_document_id"
                                            name="cv_document_id"
                                            class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm text-[#2C3E50] shadow-sm focus:border-[#1D5BBF] focus:ring-[#1D5BBF]/20"
                                        >
                                            <option value="">-- Select or upload below --</option>
                                            @foreach($nurseDocuments as $doc)
                                                <option value="{{ $doc->id }}" {{ ($defaultDocument && $defaultDocument->id === $doc->id) ? 'selected' : '' }}>
                                                    {{ $doc->type }} - {{ $doc->original_filename }} {{ $doc->default_resume ? '• Default' : '' }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('cv_document_id')
                                            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <p class="text-xs text-slate-500">— or —</p>
                                    @endif
                                    <div>
                                        <label class="block text-sm font-medium text-[#2C3E50] mb-1" for="document_file">{{ $nurseDocuments->count() > 0 ? 'Upload a different document' : 'Upload your document' }}</label>
                                        <input
                                            type="file"
                                            id="document_file"
                                            name="document_file"
                                            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                                            class="w-full text-sm text-slate-600 file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#1D5BBF] file:text-white hover:file:bg-[#14499d]"
                                        >
                                        @error('document_file')
                                            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                                        @enderror
                                        <p class="text-xs text-slate-500 mt-1">PDF, DOC, DOCX, JPG, PNG (max 5MB)</p>
                                    </div>
                                    @if($nurseDocuments->count() > 0)
                                    <p class="text-xs text-slate-500">
                                        <a href="{{ route('user.profile.show') }}" class="text-[#1D5BBF] font-semibold hover:underline">Manage documents in your profile</a>
                                    </p>
                                    @endif
                                </div>

                                <label class="block text-sm font-semibold text-[#2C3E50]" for="cover_letter">Cover letter (optional)</label>
                                <textarea
                                    id="cover_letter"
                                    name="cover_letter"
                                    rows="4"
                                    placeholder="Write a brief cover letter to the hiring manager..."
                                    class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm text-[#2C3E50] shadow-sm focus:border-[#1D5BBF] focus:ring-[#1D5BBF]/20"
                                >{{ old('cover_letter') }}</textarea>

                                <p class="text-xs text-slate-500">By applying, you agree to share your profile and any attached information with the employer.</p>

                                <button
                                    type="submit"
                                    class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition"
                                    style="background-color: #1D5BBF; border: 1px solid #1D5BBF;"
                                >
                                    Apply now
                                </button>
                                
                                @if (session('status'))
                                    <x-flash class="mt-2">{{ session('status') }}</x-flash>
                                @endif
                                @if ($errors->any())
                                    <x-flash class="mt-2" type="error">
                                        @foreach ($errors->all() as $error)
                                            <div>{{ $error }}</div>
                                        @endforeach
                                    </x-flash>
                                @endif
                            </form>
                        @endif
                    @endif
                @else
                    <div class="rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3 text-sm text-[#2C3E50]">
                        <a href="{{ route('register') }}" class="font-semibold text-[#1D5BBF]">Create an account</a> or
                        <a href="{{ route('login') }}" class="font-semibold text-[#1D5BBF]">sign in</a> to apply.
                    </div>
                @endauth
            </div>
        </div>
    </div>

    <!-- Quick Apply Script moved to resources/js/jobs.js (loaded via Vite) -->
@endsection