@extends('layouts.jobs')

@push('styles')
    <style>
        .form-container {
            padding: 2.5rem;
            max-width: 900px;
            margin: 4rem auto;
            text-align: center;
        }

        .status-icon {
            width: 64px;
            height: 64px;
            background-color: #eff6ff;
            color: #2563eb;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }

        .message-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 1rem;
        }

        .message-body {
            color: #4b5563;
            line-height: 1.6;
            font-size: 1rem;
        }
    </style>
@endpush

@section('breadcrumb')
    <a href="{{ route('jobs.index') }}" class="text-blue-600 hover:underline text-sm">{{ __('messages.job_openings') }}</a>
    <span class="breadcrumb-separator">›</span>
    <span class="text-gray-500 text-sm">{{ __('Submission Status') }}</span>
@endsection

@section('header')
    <h1 class="text-3xl font-bold text-white mb-3">Application Status</h1>
@endsection

@section('content')
    <div class="form-container">
        <div class="status-icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>

        <h2 class="message-title">Form Already Submitted</h2>
        
        <p class="message-body">
            If you need to update your details or make changes, please contact the <span class="font-semibold text-gray-700">recruiter</span> directly.
        </p>
    </div>
@endsection