@extends('layouts.app')

@section('title', 'Application Submitted Successfully')

@section('content')

    <div class="success-hero py-5">

        <div class="success-icon">
            <i class="bi bi-check2-all"></i>
        </div>

        <h2 style="font-family:'Playfair Display',serif;font-size:1.7rem;color:#1a3a6b;margin-bottom:8px">
            Application Submitted Successfully!
        </h2>
        <p style="color:#6b7280;font-size:0.95rem;max-width:500px;margin:0 auto 20px">
            Your application for <strong>St. Xavier's College, Burdwan</strong> has been received.
            Please keep your form number for future reference.
        </p>

        <div class="form-number-display">{{ $application->form_number }}</div>

        <div
            style="background:#f8f9fc;border:1.5px solid #dee2e6;border-radius:12px;padding:24px 28px;text-align:left;max-width:480px;margin:0 auto 32px">
            <table style="width:100%;font-size:0.88rem">
                <tr>
                    <td style="color:#6b7280;padding:5px 0;width:45%">Name</td>
                    <td style="font-weight:600;color:#1c1c2e">{{ $application->applicant_name }}</td>
                </tr>
                <tr>
                    <td style="color:#6b7280;padding:5px 0">Course</td>
                    <td style="font-weight:600;color:#1c1c2e">{{ $application->course }}</td>
                </tr>
                <tr>
                    <td style="color:#6b7280;padding:5px 0">Category</td>
                    <td style="font-weight:600;color:#1c1c2e">{{ $application->category }}</td>
                </tr>
                <tr>
                    <td style="color:#6b7280;padding:5px 0">Gender</td>
                    <td style="font-weight:600;color:#1c1c2e">{{ $application->gender }}</td>
                </tr>
                <tr>
                    <td style="color:#6b7280;padding:5px 0">Email</td>
                    <td style="font-weight:600;color:#1c1c2e">{{ $application->email }}</td>
                </tr>
                <tr>
                    <td style="color:#6b7280;padding:5px 0">Status</td>
                    <td><span
                            style="background:#dcfce7;color:#15803d;font-weight:700;font-size:0.78rem;padding:3px 10px;border-radius:20px">Submitted</span>
                    </td>
                </tr>
                <tr>
                    <td style="color:#6b7280;padding:5px 0">Submitted On</td>
                    <td style="font-weight:600;color:#1c1c2e">{{ $application->updated_at->timezone('Asia/Kolkata')->format('d M Y, h:i A') }}</td>
                </tr>
            </table>
        </div>

        <div
            style="background:#fff8e1;border:1.5px solid #ffc107;border-radius:10px;padding:16px 20px;text-align:left;max-width:480px;margin:0 auto 32px;font-size:0.85rem">
            <strong style="color:#b8860b"><i class="bi bi-info-circle-fill me-2"></i>What happens next?</strong>
            <ul style="margin:10px 0 0;padding-left:18px;color:#78350f;line-height:1.8">
                <li>The college will review your application and documents.</li>
                <li>You will be contacted at <strong>{{ $application->email }}</strong> with further instructions.</li>
                <li>Keep your Form Number <strong style="font-family:monospace">{{ $application->form_number }}</strong>
                    safe for all future correspondence.</li>
                <li>Visit the college office if you have any queries.</li>
            </ul>
        </div>

        <div class="d-flex justify-content-center gap-3 flex-wrap">
            <button onclick="window.print()" class="btn-secondary-custom">
                <i class="bi bi-printer me-2"></i>Print Confirmation
            </button>
            <a href="{{ route('application.create') }}" class="btn-primary-custom text-decoration-none">
                <i class="bi bi-plus-circle me-2"></i>New Application
            </a>
        </div>

    </div>

@endsection