@extends('layouts.app')

@section('title', 'Menuju Halaman Lamaran...')

@section('content')
<div class="min-h-[70vh] flex items-center justify-center py-8">
    <div class="max-w-2xl mx-auto px-4">
        {{-- Top Ad Area --}}
        <div class="flex flex-col md:flex-row gap-4 justify-center items-center mb-6">
            @if($countdownAd)
            <div class="ad-container flex-1 max-w-md">
                <div class="ad-label">Iklan</div>
                <div class="ad-content">{!! $countdownAd->code !!}</div>
            </div>
            @endif

            @if($interstitialAd)
            <div class="ad-container flex-1 max-w-md">
                <div class="ad-label">Iklan</div>
                <div class="ad-content">{!! $interstitialAd->code !!}</div>
            </div>
            @endif
        </div>

        {{-- Mobile Banner --}}
        @if($mobileBanner)
        <div class="ad-container ad-mobile mb-4">
            <div class="ad-label">Iklan</div>
            <div class="ad-content">{!! $mobileBanner->code !!}</div>
        </div>
        @endif

        <div class="bg-white rounded-2xl border border-gray-100 p-10 shadow-sm text-center animate-slide-up">

            <h2 class="text-2xl font-bold text-gray-800 mb-4">Memproses Lamaran Anda</h2>

            <p class="text-gray-600 mb-6" id="countdown-text">
                Cara melamar pekerjaan akan muncul dalam <span id="countdown" class="text-indigo-600 font-bold text-3xl">{{ $countdownSeconds ?? 8 }}</span> detik
            </p>

            {{-- Progress Bar --}}
            <div class="w-full bg-gray-200 rounded-full h-2 mb-6">
                <div id="progress-bar" class="bg-indigo-600 h-2 rounded-full duration-1000" style="width: 0%"></div>
            </div>

            <p class="text-sm text-gray-400">Posisi: <strong>{{ $job->title }}</strong></p>
            <p class="text-sm text-gray-400">{{ $job->company }}</p>

            {{-- Hidden section that appears after countdown --}}
            <div id="continue-section" class="hidden mt-8">
                @if(session('applicant_id'))
                    {{-- Already logged in – show direct apply with document upload --}}
                    <form action="{{ route('apply.submit', $job) }}" method="POST" enctype="multipart/form-data" class="text-left space-y-4">
                        @csrf
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Upload Dokumen <span class="text-gray-400 font-normal">(opsional)</span></label>
                            <input type="file" name="documents[]" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" multiple
                                class="w-full text-sm text-gray-500 border border-gray-200 rounded-lg p-2 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-600 hover:file:bg-indigo-100">
                            <p class="text-xs text-gray-400 mt-1">CV, ijazah, sertifikat, dll. Format: PDF, DOC, DOCX, JPG, PNG (Maks. 5MB per file). Bisa pilih beberapa file sekaligus.</p>
                        </div>
                        <button type="submit"
                            class="w-full bg-indigo-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:outline hover:outline-2 hover:outline-indigo-800">
                            Kirim Lamaran Sekarang
                        </button>
                    </form>
                @else
                    <a href="{{ route('login', ['job_id' => $job->id]) }}"
                        class="inline-block bg-indigo-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:outline hover:outline-2 hover:outline-indigo-800">
                        Lanjutkan Melamar
                    </a>
                @endif
            </div>
        </div>

        {{-- Bottom Ad Area --}}
        @if($bannerBottom)
        <div class="ad-container mt-6">
            <div class="ad-label">Iklan</div>
            <div class="ad-content">{!! $bannerBottom->code !!}</div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    const totalSeconds = {{ $countdownSeconds ?? 8 }};
    let seconds = totalSeconds;
    const countdownEl = document.getElementById('countdown');
    const progressBar = document.getElementById('progress-bar');
    const continueSection = document.getElementById('continue-section');
    const countdownText = document.getElementById('countdown-text');

    const timer = setInterval(() => {
        seconds--;
        countdownEl.textContent = seconds;
        progressBar.style.width = ((totalSeconds - seconds) / totalSeconds * 100) + '%';

        if (seconds <= 0) {
            clearInterval(timer);
            countdownText.innerHTML = '<span class="text-green-600 font-semibold">Siap! Silakan lanjutkan melamar pekerjaan.</span>';
            progressBar.style.width = '100%';
            progressBar.classList.remove('bg-indigo-600');
            progressBar.classList.add('bg-green-500');
            continueSection.classList.remove('hidden');
        }
    }, 1000);
</script>
@endpush