@extends('layouts.public')

@section('title', $job->title)
@section('description', Str::limit(strip_tags($job->description), 160))
@section('canonical', route('job.show', $job->slug))
@section('og_type', 'article')
@section('og_title', $job->title . ' — Markamama Kariyer')
@section('og_description', Str::limit(strip_tags($job->description), 160))

@section('structured_data')
<script type="application/ld+json">
{
    "@@context": "https://schema.org/",
    "@type": "JobPosting",
    "title": "{{ addslashes($job->title) }}",
    "description": "{{ addslashes(Str::limit(strip_tags($job->description), 500)) }}",
    "datePosted": "{{ $job->published_at ? $job->published_at->toIso8601String() : $job->created_at->toIso8601String() }}",
    @if($job->closes_at)
    "validThrough": "{{ $job->closes_at->toIso8601String() }}",
    @endif
    "employmentType": "{{ addslashes($job->employment_type) }}",
    "hiringOrganization": {
        "@type": "Organization",
        "name": "{{ addslashes(\App\Models\SiteSetting::get('site_title', 'Markamama')) }}",
        "sameAs": "https://www.markamama.com.tr"
    },
    "jobLocation": {
        "@type": "Place",
        "address": {
            "@type": "PostalAddress",
            "addressLocality": "{{ addslashes($job->location) }}",
            "addressCountry": "TR"
        }
    }
}
</script>
@endsection

@section('content')

<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10">

    {{-- Breadcrumb --}}
    <nav class="text-sm text-gray-500 mb-6 flex items-center gap-2 flex-wrap">
        <a href="{{ route('home') }}" class="hover:text-primary transition-colors">Açık Pozisyonlar</a>
        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        @if($job->department)
        <a href="{{ route('home') }}?department={{ urlencode($job->department) }}" class="hover:text-primary transition-colors">{{ $job->department }}</a>
        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        @endif
        <span class="text-gray-700 line-clamp-1">{{ $job->title }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 lg:gap-8">

        {{-- SOL: İlan Detayı --}}
        <div class="lg:col-span-3 order-1 lg:order-1">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 sm:p-8 mb-6">

                {{-- Başlık --}}
                <div class="mb-6">
                    <div class="flex items-center gap-2 flex-wrap mb-3">
                        <span class="inline-block bg-orange-50 text-primary text-xs font-semibold px-3 py-1 rounded-full">
                            {{ $job->department }}
                        </span>
                        @if($job->is_featured)
                        <span class="inline-flex items-center gap-1 bg-yellow-50 text-yellow-700 text-xs font-semibold px-2 py-1 rounded-full">
                            <svg class="w-3 h-3" 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>
                            Öne Çıkan
                        </span>
                        @endif
                    </div>
                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 leading-tight">{{ $job->title }}</h1>

                    <div class="flex flex-wrap gap-3 sm:gap-4 text-sm text-gray-600">
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            {{ $job->location }}
                        </span>
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            {{ $job->employment_type }}
                        </span>
                        @if($job->working_hours)
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ $job->working_hours }}
                        </span>
                        @endif
                        @if($job->salary_range)
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ $job->salary_range }}
                        </span>
                        @endif
                        @if($job->closes_at)
                        <span class="flex items-center gap-1.5 text-orange-600">
                            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            Son başvuru: {{ $job->closes_at->format('d.m.Y') }}
                        </span>
                        @endif
                    </div>
                </div>

                @if(!$job->isOpen())
                <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
                    <p class="text-red-700 font-medium text-sm flex items-center gap-2">
                        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                        Bu pozisyon için başvurular kapatılmıştır.
                    </p>
                </div>
                @endif

                {{-- Açıklama --}}
                <div class="mb-8">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">Pozisyon Hakkında</h2>
                    <div class="text-gray-700 leading-relaxed text-sm sm:text-base">
                        {!! nl2br(e($job->description)) !!}
                    </div>
                </div>

                {{-- Gereksinimler --}}
                @if($job->requirements)
                <div class="mb-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">Aranan Nitelikler</h2>
                    <div class="text-gray-700 leading-relaxed text-sm sm:text-base">
                        {!! nl2br(e($job->requirements)) !!}
                    </div>
                </div>
                @endif

                {{-- Görüşmeye Gelirken Getirilmesi Gereken Belgeler --}}
                @if($job->required_documents)
                <div class="mb-6 bg-amber-50 border border-amber-200 rounded-xl p-5">
                    <div class="flex items-center gap-2 mb-3">
                        <svg class="w-5 h-5 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        <h2 class="text-base font-bold text-amber-800">Görüşmeye Gelirken Getirilmesi Gereken Belgeler</h2>
                    </div>
                    <ul class="space-y-2">
                        @foreach(array_filter(array_map('trim', explode("\n", $job->required_documents))) as $doc)
                        <li class="flex items-start gap-2 text-sm text-amber-900">
                            <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                            {{ $doc }}
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif

                {{-- Paylaşım Butonları --}}
                <div class="pt-6 border-t border-gray-100">
                    <p class="text-xs text-gray-500 mb-3 font-medium uppercase tracking-wide">Bu ilanı paylaş</p>
                    <div class="flex flex-wrap gap-2">
                        <a href="https://wa.me/?text={{ urlencode($job->title . ' — Markamama Kariyer: ' . route('job.show', $job->slug)) }}"
                           target="_blank" rel="noopener"
                           class="inline-flex items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-xl text-xs font-medium hover:bg-green-600 transition-colors">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                            WhatsApp
                        </a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(route('job.show', $job->slug)) }}"
                           target="_blank" rel="noopener"
                           class="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl text-xs font-medium hover:bg-blue-700 transition-colors">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                            LinkedIn
                        </a>
                        <button id="copyBtn" type="button"
                                class="inline-flex items-center gap-2 bg-gray-100 text-gray-700 px-4 py-2 rounded-xl text-xs font-medium hover:bg-gray-200 transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                            <span id="copyBtnText">Linki Kopyala</span>
                        </button>
                    </div>
                </div>
            </div>

            {{-- Benzer İlanlar --}}
            @if($similarJobs->isNotEmpty())
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                <h3 class="font-bold text-gray-800 mb-4">Benzer Pozisyonlar</h3>
                <div class="space-y-3">
                    @foreach($similarJobs as $similar)
                    <a href="{{ route('job.show', $similar->slug) }}"
                       class="flex items-center justify-between p-3 rounded-xl hover:bg-orange-50 transition-colors group">
                        <div class="min-w-0">
                            <p class="font-medium text-gray-800 group-hover:text-primary text-sm transition-colors truncate">{{ $similar->title }}</p>
                            <p class="text-xs text-gray-500 mt-0.5">{{ $similar->location }} · {{ $similar->employment_type }}</p>
                        </div>
                        <svg class="w-4 h-4 text-gray-400 group-hover:text-primary flex-shrink-0 ml-3 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        {{-- SAĞ: Başvuru Formu --}}
        <div class="lg:col-span-2 order-2 lg:order-2" id="basvuru-formu">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6 lg:sticky lg:top-20">

                @if($job->isOpen())
                <h2 class="text-lg font-bold text-gray-800 mb-5">Başvur</h2>

                <form action="{{ route('job.apply', $job->slug) }}" method="POST" enctype="multipart/form-data" class="space-y-4" id="applicationForm">
                    @csrf

                    {{-- Honeypot --}}
                    <div style="display:none">
                        <input type="text" name="website" tabindex="-1" autocomplete="off">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Ad Soyad <span class="text-red-500">*</span></label>
                        <input type="text" name="full_name" value="{{ old('full_name') }}"
                               class="w-full border border-gray-300 rounded-xl px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('full_name') border-red-400 @enderror"
                               placeholder="Adınız Soyadınız">
                        @error('full_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">E-posta <span class="text-red-500">*</span></label>
                        <input type="email" name="email" value="{{ old('email') }}"
                               class="w-full border border-gray-300 rounded-xl px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('email') border-red-400 @enderror"
                               placeholder="ornek@email.com">
                        @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Telefon <span class="text-red-500">*</span></label>
                        <input type="tel" name="phone" value="{{ old('phone') }}"
                               class="w-full border border-gray-300 rounded-xl px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('phone') border-red-400 @enderror"
                               placeholder="05XX XXX XX XX">
                        @error('phone')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">CV (PDF/DOC/DOCX) <span class="text-red-500">*</span></label>
                        <input type="file" name="cv" accept=".pdf,.doc,.docx"
                               class="w-full border border-gray-300 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 @error('cv') border-red-400 @enderror">
                        <p class="text-xs text-gray-400 mt-1">Maks. 5MB · PDF, DOC, DOCX</p>
                        @error('cv')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">LinkedIn Profili</label>
                        <input type="url" name="linkedin_url" value="{{ old('linkedin_url') }}"
                               class="w-full border border-gray-300 rounded-xl px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                               placeholder="https://linkedin.com/in/...">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Ön Yazı</label>
                        <textarea name="cover_letter" rows="3"
                                  class="w-full border border-gray-300 rounded-xl px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 resize-none"
                                  placeholder="Kendinizi kısaca tanıtın...">{{ old('cover_letter') }}</textarea>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Bizi Nereden Duydunuz?</label>
                        <select name="source" class="w-full border border-gray-300 rounded-xl px-3 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 bg-white">
                            <option value="">Seçiniz</option>
                            <option value="LinkedIn" {{ old('source') == 'LinkedIn' ? 'selected' : '' }}>LinkedIn</option>
                            <option value="Instagram" {{ old('source') == 'Instagram' ? 'selected' : '' }}>Instagram</option>
                            <option value="Kariyer.net" {{ old('source') == 'Kariyer.net' ? 'selected' : '' }}>Kariyer.net</option>
                            <option value="Indeed" {{ old('source') == 'Indeed' ? 'selected' : '' }}>Indeed</option>
                            <option value="Arkadaş Tavsiyesi" {{ old('source') == 'Arkadaş Tavsiyesi' ? 'selected' : '' }}>Arkadaş Tavsiyesi</option>
                            <option value="Diğer" {{ old('source') == 'Diğer' ? 'selected' : '' }}>Diğer</option>
                        </select>
                    </div>

                    {{-- Özel Başvuru Formu PDF --}}
                    @if($job->custom_application_form_path)
                    <div class="bg-blue-50 rounded-xl p-4 border border-blue-200 flex items-center gap-3">
                        <svg class="w-8 h-8 text-blue-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 1.5L18.5 9H13V3.5z"/></svg>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-blue-800">Özel Başvuru Formu</p>
                            <p class="text-xs text-blue-600 truncate">{{ $job->custom_application_form_name ?? 'basvuru-formu.pdf' }}</p>
                        </div>
                        <a href="{{ Storage::url($job->custom_application_form_path) }}" target="_blank"
                           class="inline-flex items-center gap-1.5 text-xs font-semibold text-blue-700 bg-white border border-blue-300 px-3 py-1.5 rounded-lg hover:bg-blue-100 transition-colors flex-shrink-0">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            İndir
                        </a>
                    </div>
                    @endif

                    {{-- Şartlar / Koşullar PDF --}}
                    @if($job->conditions_pdf_path)
                    <div class="bg-orange-50 rounded-xl p-4 border border-orange-200 flex items-center gap-3">
                        <svg class="w-8 h-8 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 1.5L18.5 9H13V3.5z"/></svg>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-orange-800">Şartlar / Koşullar</p>
                            <p class="text-xs text-orange-600 truncate">{{ $job->conditions_pdf_name ?? 'sartlar.pdf' }}</p>
                        </div>
                        <a href="{{ Storage::url($job->conditions_pdf_path) }}" target="_blank"
                           class="inline-flex items-center gap-1.5 text-xs font-semibold text-orange-700 bg-white border border-orange-300 px-3 py-1.5 rounded-lg hover:bg-orange-100 transition-colors flex-shrink-0">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            İndir
                        </a>
                    </div>
                    @endif

                    {{-- KVKK Onay --}}
                    <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                        <div class="flex items-start gap-3">
                            <input type="checkbox" name="kvkk_consent" id="kvkk_consent" value="1"
                                   class="mt-0.5 w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400 flex-shrink-0 @error('kvkk_consent') border-red-400 @enderror"
                                   {{ old('kvkk_consent') ? 'checked' : '' }}>
                            <label for="kvkk_consent" class="text-xs text-gray-600 leading-relaxed cursor-pointer">
                                <button type="button" id="kvkkOpenBtn"
                                        class="text-primary underline font-medium hover:text-orange-600 transition-colors">
                                    KVKK Aydınlatma Metni
                                </button>'ni okudum ve kişisel verilerimin işlenmesine onay veriyorum.
                                <span class="text-red-500">*</span>
                                <span class="block mt-1 text-gray-400 text-xs">Onayladığınızda tarih ve IP adresiniz kayıt altına alınır.</span>
                            </label>
                        </div>
                        @error('kvkk_consent')<p class="text-red-500 text-xs mt-2">{{ $message }}</p>@enderror
                    </div>

                    <button type="submit"
                            class="w-full bg-primary text-white py-3.5 rounded-xl font-semibold text-sm hover:bg-orange-600 transition-colors active:scale-95">
                        Başvuruyu Gönder
                    </button>
                </form>
                @else
                <div class="text-center py-8">
                    <div class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <p class="text-gray-500 text-sm font-medium mb-1">Başvurular Kapatıldı</p>
                    <p class="text-gray-400 text-xs mb-5">Bu pozisyon için başvuru alınmıyor.</p>
                    <a href="{{ route('home') }}" class="inline-block text-primary text-sm font-medium hover:underline">
                        Diğer pozisyonlara bak →
                    </a>
                </div>
                @endif
            </div>
        </div>

    </div>
</div>

{{-- Mobil Sticky Başvur Butonu --}}
@if($job->isOpen())
<div id="stickyApplyBar"
     class="fixed bottom-0 left-0 right-0 z-40 lg:hidden bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
    <a href="#basvuru-formu" id="stickyApplyBtn"
       class="block w-full text-center bg-primary text-white py-3.5 rounded-xl font-semibold text-sm hover:bg-orange-600 transition-colors active:scale-95">
        Hemen Başvur
    </a>
</div>
{{-- Sticky bar için alt boşluk --}}
<div class="lg:hidden h-20"></div>
@endif

{{-- KVKK Modal --}}
<div id="kvkkModal"
     class="fixed inset-0 z-50 hidden items-center justify-center p-4"
     role="dialog" aria-modal="true" aria-labelledby="kvkkModalTitle">
    {{-- Overlay --}}
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="kvkkOverlay"></div>

    {{-- Modal İçerik --}}
    <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col">
        {{-- Header --}}
        <div class="flex items-center justify-between p-5 border-b border-gray-100 flex-shrink-0">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-orange-50 rounded-lg flex items-center justify-center">
                    <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                </div>
                <h3 id="kvkkModalTitle" class="font-bold text-gray-900 text-base">KVKK Aydınlatma Metni</h3>
            </div>
            <button id="kvkkCloseHeaderBtn" type="button"
                    class="p-2 rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors" aria-label="Kapat">
                <svg class="w-5 h-5" 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>

        {{-- Kaydırılabilir İçerik --}}
        @php
            $kvkkText        = \App\Models\SiteSetting::get('kvkk_text');
            $kvkkUpdatedAt   = \App\Models\SiteSetting::get('kvkk_updated_at');
            $kvkkUpdatedDate = $kvkkUpdatedAt ? \Carbon\Carbon::parse($kvkkUpdatedAt)->format('d.m.Y') : date('d.m.Y');
            $contactEmail    = \App\Models\SiteSetting::get('contact_email');
        @endphp

        {{-- Metin Görünümü --}}
        <div class="overflow-y-auto flex-1 p-5 text-sm text-gray-700 leading-relaxed" id="kvkkModalContent">
            @if($kvkkText)
            <div class="prose prose-sm max-w-none">
                {!! $kvkkText !!}
            </div>
            @else
            {{-- Varsayılan statik metin --}}
            <div class="space-y-4">
                <div>
                    <p class="text-xs text-gray-400 mb-3">Son güncelleme: {{ $kvkkUpdatedDate }}</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">1. Veri Sorumlusu</p>
                    <p>6698 sayılı KVKK uyarınca kişisel verileriniz, veri sorumlusu sıfatıyla <strong>Markamama</strong> tarafından aşağıda açıklanan kapsamda işlenecektir.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">2. İşlenen Kişisel Veriler</p>
                    <p>Kariyer başvurusu sürecinde; ad-soyad, e-posta, telefon, CV bilgileri, LinkedIn profili (isteğe bağlı), ön yazı, başvuru kaynağı ve IP adresi işlenmektedir.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">3. İşlenme Amaçları</p>
                    <p>Başvurunuzun değerlendirilmesi, sizinle iletişime geçilmesi, ileride açılabilecek pozisyonlar için değerlendirme ve yasal yükümlülüklerin yerine getirilmesi amacıyla işlenmektedir.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">4. Kişisel Verilerin Aktarılması</p>
                    <p>Kişisel verileriniz; işe alım süreçlerinin yürütülmesi amacıyla şirket içi yetkili personel ile paylaşılmaktadır. Yasal zorunluluk halleri dışında üçüncü kişilerle paylaşılmamaktadır.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">5. Hukuki Dayanak</p>
                    <p>İşlemenin hukuki dayanağı; <strong>açık rızanız</strong> (KVKK Madde 5/1), <strong>sözleşmenin kurulması veya ifasıyla doğrudan ilgili olması</strong> (KVKK Madde 5/2-c) ve <strong>meşru menfaat</strong> (KVKK Madde 5/2-f) ilkesidir.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">6. Saklama Süresi</p>
                    <p>Kişisel verileriniz, işe alım sürecinin tamamlanmasından itibaren <strong>2 yıl</strong> süreyle saklanmaktadır.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">7. IP Adresi Kaydı</p>
                    <p>Bu metni onayladığınızda, onay tarihi, saati ve IP adresiniz KVKK uyum kaydı amacıyla sistemimize kaydedilmektedir.</p>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">8. KVKK Kapsamındaki Haklarınız</p>
                    <ul class="list-disc pl-4 space-y-1 mt-1">
                        <li>Kişisel verilerinizin işlenip işlenmediğini öğrenme</li>
                        <li>Kişisel verileriniz işlenmişse buna ilişkin bilgi talep etme</li>
                        <li>Kişisel verilerinizin eksik veya yanlış işlenmiş olması hâlinde bunların düzeltilmesini isteme</li>
                        <li>KVKK'nın 7. maddesinde öngörülen şartlar çerçevesinde kişisel verilerinizin silinmesini isteme</li>
                        <li>Kişisel verilerinizin kanuna aykırı işlenmesi sebebiyle zarara uğramanız hâlinde zararın giderilmesini talep etme</li>
                    </ul>
                </div>
                <div>
                    <p class="font-semibold text-gray-800 mb-1">9. İletişim</p>
                    <p>Haklarınızı kullanmak için
                        @if($contactEmail)
                        <a href="mailto:{{ $contactEmail }}" class="text-primary hover:underline font-medium">{{ $contactEmail }}</a>
                        @else
                        şirketimizin iletişim kanalları
                        @endif
                        aracılığıyla bizimle iletişime geçebilirsiniz.
                    </p>
                </div>
            </div>
            @endif
        </div>

        {{-- Footer --}}
        <div class="p-5 border-t border-gray-100 flex-shrink-0 flex flex-col sm:flex-row gap-3">
            <button id="kvkkCloseFooterBtn" type="button"
                    class="flex-1 py-3 rounded-xl border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors">
                Kapat
            </button>
            <button id="kvkkAcceptBtn" type="button"
                    class="flex-1 py-3 rounded-xl bg-primary text-white text-sm font-semibold hover:bg-orange-600 transition-colors">
                Okudum ve Onaylıyorum
            </button>
        </div>
    </div>
</div>

<script nonce="{{ app('csp-nonce') }}">
// KVKK Modal
function openKvkkModal() {
    var modal = document.getElementById('kvkkModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function closeKvkkModal() {
    var modal = document.getElementById('kvkkModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    document.body.style.overflow = '';
}

function acceptKvkk() {
    var checkbox = document.getElementById('kvkk_consent');
    if (checkbox) {
        checkbox.checked = true;
    }
    closeKvkkModal();
}

// Buton event listener'ları
(function() {
    var ids = {
        'kvkkOpenBtn':        function() { openKvkkModal(); },
        'kvkkCloseHeaderBtn': function() { closeKvkkModal(); },
        'kvkkCloseFooterBtn': function() { closeKvkkModal(); },
        'kvkkAcceptBtn':      function() { acceptKvkk(); },
        'kvkkOverlay':        function() { closeKvkkModal(); },
        'copyBtn':            function() { copyJobLink(); },
        'stickyApplyBtn':     function(e) { e.preventDefault(); scrollToForm(e); }
    };
    Object.keys(ids).forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.addEventListener('click', ids[id]);
    });
})();

// ESC ile kapat
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeKvkkModal();
});

// Mobil sticky bar — form görünürse gizle
@if($job->isOpen())
(function() {
    var bar = document.getElementById('stickyApplyBar');
    var form = document.getElementById('applicationForm');
    if (!bar || !form) return;

    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            bar.style.display = entry.isIntersecting ? 'none' : '';
        });
    }, { threshold: 0.1 });

    observer.observe(form);
})();
@endif

// Forma scroll
function scrollToForm(e) {
    e.preventDefault();
    var form = document.getElementById('basvuru-formu');
    if (form) {
        form.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

// Link kopyala
function copyJobLink() {
    var url = '{{ route('job.show', $job->slug) }}';
    var btn = document.getElementById('copyBtnText');
    if (navigator.clipboard) {
        navigator.clipboard.writeText(url).then(function() {
            btn.textContent = 'Kopyalandı!';
            setTimeout(function() { btn.textContent = 'Linki Kopyala'; }, 2000);
        });
    } else {
        var ta = document.createElement('textarea');
        ta.value = url;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        btn.textContent = 'Kopyalandı!';
        setTimeout(function() { btn.textContent = 'Linki Kopyala'; }, 2000);
    }
}
</script>

@endsection