@extends('layouts.frontend')

@section('title', 'Application Submitted Successfully - Federation of Tax Practitioners of Tamilnadu')

@section('content')
<style>
    .success-hero-badge {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(212, 170, 44, 0.25));
        border: 2px solid #22c55e;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.35);
        animation: pulseSuccess 2.5s infinite ease-in-out;
    }
    @keyframes pulseSuccess {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 25px rgba(34, 197, 94, 0.35);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 0 40px rgba(34, 197, 94, 0.55);
        }
    }
    .ref-pill-box {
        background: rgba(0, 0, 0, 0.35);
        border: 1.5px dashed rgba(212, 170, 44, 0.6);
        border-radius: 14px;
        padding: 14px 20px;
    }
    .summary-info-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        padding: 24px;
    }
    .summary-item-label {
        font-size: 12.5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 4px;
    }
    .summary-item-value {
        font-size: 15.5px;
        font-weight: 600;
        color: #ffffff;
    }
    .next-step-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        padding: 14px 16px;
        transition: all 0.3s ease;
    }
    .next-step-item:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(212, 170, 44, 0.3);
        transform: translateY(-2px);
    }
    .action-btn-main {
        font-weight: 700;
        font-size: 15.5px;
        padding: 13px 26px;
        border-radius: 50px;
        transition: all 0.3s ease;
    }
    .action-btn-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }
</style>

<!-- Page Header Start -->
<section class="page-header">
    <div class="container">
        <div class="page-header-inner">
            <span class="page-label">
                <i class="fa-solid fa-circle-check text-success"></i> Registration Status
            </span>
            <h1>Application Submitted</h1>
            <ul class="breadcrumb">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><span>/</span></li>
                <li><a href="{{ route('membership.create') }}">Membership</a></li>
                <li><span>/</span></li>
                <li>Confirmation</li>
            </ul>
        </div>
    </div>
</section>
<!-- Page Header End -->

<!-- Success Confirmation Section Start -->
<section class="contact-section py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-9">

                <!-- Main Confirmation Wrap -->
                <div class="contact-form-wrap p-4 p-md-5 rounded-4 shadow-lg text-center position-relative" style="background: #12353b; border: 1px solid rgba(255, 255, 255, 0.12);">
                    
                    <!-- Top Animated Checkmark Icon -->
                    <div class="mb-4">
                        <div class="success-hero-badge">
                            <i class="fa-solid fa-check fs-1 text-success"></i>
                        </div>
                    </div>

                    <!-- Main Titles -->
                    <span class="badge bg-success bg-opacity-25 text-emerald-300 border border-success border-opacity-50 px-3 py-2 rounded-pill fw-semibold mb-3" style="font-size: 13px; color: #86efac;">
                        <i class="fa-solid fa-shield-halved me-1"></i> Submission Received Successfully
                    </span>
                    <h2 class="text-white fw-bold mb-2" style="font-size: 28px;">
                        Application Submitted Successfully!
                    </h2>
                    <p class="text-white mb-4 mx-auto" style="max-width: 680px; font-size: 15px; line-height: 1.7;">
                        Thank you, <strong class="text-white">{{ $application->name }}</strong>. Your membership enrollment application has been recorded in the Federation database and routed to the <strong>FTPTN Executive Committee</strong> for verification.
                    </p>

                    <!-- Application Reference Box -->
                    <div class="ref-pill-box d-inline-flex flex-column flex-sm-row align-items-center justify-content-center gap-2 gap-sm-4 mb-4">
                        <div class="text-sm-start">
                            <span class="summary-item-label d-block text-warning-emphasis mb-0" style="color: #fde047; font-size: 12px;">APPLICATION REFERENCE NUMBER</span>
                            <span class="fs-4 fw-bold text-warning letter-spacing-1" style="color: #d4aa2c; font-family: monospace;">
                                {{ $application->application_no }}
                            </span>
                        </div>
                        <div class="vr bg-secondary opacity-50 d-none d-sm-block" style="height: 38px;"></div>
                        <div class="text-sm-start">
                            <span class="summary-item-label d-block mb-0" style="font-size: 12px;">ENROLLMENT STATUS</span>
                            <span class="badge bg-warning text-dark fw-bold px-3 py-1 rounded-pill" style="font-size: 12.5px;">
                                <i class="fa-solid fa-clock-rotate-left me-1"></i> Pending Verification
                            </span>
                        </div>
                    </div>

                    <!-- Email Acknowledgment Notice Banner -->
                    <div class="alert rounded-3 mb-4 text-start p-3 d-flex align-items-center gap-3" style="background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); color: #86efac;">
                        <i class="fa-solid fa-envelope-circle-check fs-3 flex-shrink-0 text-success"></i>
                        <div>
                            <div class="fw-bold text-white">Acknowledgment Email Sent!</div>
                            <div class="small" style="color: #bbf7d0;">
                                An email containing your Application Reference No. (<strong>{{ $application->application_no }}</strong>) and submitted summary details has been sent to <strong>{{ $application->email }}</strong>.
                            </div>
                        </div>
                    </div>

                    <!-- Application Summary Data Grid (Basic Details Only) -->
                    <div class="summary-info-card text-start mb-4">
                        <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom border-secondary border-opacity-25">
                            <h5 class="text-white fw-bold mb-0" style="font-size: 16px;">
                                <i class="fa-solid fa-file-invoice text-warning me-2"></i> Application Summary
                            </h5>
                            <span class="text-white small">
                                <i class="fa-regular fa-calendar-check me-1"></i> {{ $application->created_at ? $application->created_at->format('d M Y, h:i A') : date('d M Y') }}
                            </span>
                        </div>

                        <div class="row g-3">
                            <div class="col-sm-6 col-md-4">
                                <div class="summary-item-label">Applicant Name</div>
                                <div class="summary-item-value">{{ $application->name }}</div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="summary-item-label">Father / Spouse Name</div>
                                <div class="summary-item-value">{{ $application->father_spouse_display }}</div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="summary-item-label">Registered District</div>
                                <div class="summary-item-value text-warning">{{ $application->district }}</div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="summary-item-label">Membership Category</div>
                                <div class="summary-item-value">
                                    <span class="badge bg-secondary text-white fw-semibold rounded-pill px-2 py-1">
                                        {{ $application->membership_category ?: 'Ordinary' }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="summary-item-label">WhatsApp Number</div>
                                <div class="summary-item-value text-success">
                                    <i class="fa-brands fa-whatsapp me-1"></i> {{ $application->whatsapp_number ?: ($application->mobile_number ?: '-') }}
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <div class="summary-item-label">Email Address</div>
                                <div class="summary-item-value text-truncate">{{ $application->email }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Navigation Buttons -->
                    <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
                        <a href="{{ route('membership.slip', $application->id) }}" target="_blank" class="btn btn-warning action-btn-main shadow-lg text-dark d-inline-flex align-items-center gap-2" style="background: #d4aa2c; border-color: #d4aa2c;">
                            <i class="fa-solid fa-print fs-5"></i>
                            <span>Print Submission Slip</span>
                        </a>

                        <a href="{{ route('home') }}" class="btn btn-outline-light action-btn-main d-inline-flex align-items-center gap-2" style="border-color: rgba(255,255,255,0.25);">
                            <i class="fa-solid fa-house"></i>
                            <span>Return to Home</span>
                        </a>

                        <a href="{{ route('membership.create') }}" class="btn btn-outline-warning action-btn-main d-inline-flex align-items-center gap-2" style="border-color: #d4aa2c; color: #fde047;">
                            <i class="fa-solid fa-user-plus"></i>
                            <span>Submit Another Form</span>
                        </a>
                    </div>

                    <!-- Next Steps Guidance Box -->
                    <div class="text-start p-3 p-md-4 rounded-3 mb-4" style="background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08);">
                        <h6 class="text-warning fw-bold mb-3 d-flex align-items-center gap-2" style="font-size: 14.5px;">
                            <i class="fa-solid fa-list-check"></i> What Happens Next?
                        </h6>
                        <div class="row g-2">
                            <div class="col-md-4">
                                <div class="next-step-item h-100">
                                    <div class="fw-bold text-white small mb-1">
                                        <span class="badge bg-warning text-dark rounded-circle me-1" style="width: 20px; height: 20px; font-size: 11px; padding: 2px 0; text-align: center;">1</span>
                                        Document Verification
                                    </div>
                                    <p class="text-white mb-0" style="font-size: 12px; line-height: 1.5;">
                                        Executive Committee & District Wing scrutinize attached certificates & details.
                                    </p>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="next-step-item h-100">
                                    <div class="fw-bold text-white small mb-1">
                                        <span class="badge bg-warning text-dark rounded-circle me-1" style="width: 20px; height: 20px; font-size: 11px; padding: 2px 0; text-align: center;">2</span>
                                        Executive Approval
                                    </div>
                                    <p class="text-white mb-0" style="font-size: 12px; line-height: 1.5;">
                                        State Committee approves enrollment and generates official Membership Number.
                                    </p>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="next-step-item h-100">
                                    <div class="fw-bold text-white small mb-1">
                                        <span class="badge bg-warning text-dark rounded-circle me-1" style="width: 20px; height: 20px; font-size: 11px; padding: 2px 0; text-align: center;">3</span>
                                        Official PDF & ID Email
                                    </div>
                                    <p class="text-white mb-0" style="font-size: 12px; line-height: 1.5;">
                                        Approved Membership PDF Dossier is sent directly to your email upon approval.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Footer Help & Contacts -->
                    <div class="pt-3 border-top border-secondary border-opacity-25 text-white small">
                        For any queries or updates regarding your application, please reach out to FTPTN State Secretariat at 
                        <a href="mailto:ftptmailnadu@gmail.com" class="text-warning text-decoration-none fw-semibold">ftptmailnadu@gmail.com</a>
                        or call <a href="tel:+919363001775" class="text-warning text-decoration-none fw-semibold">+91 93630 01775</a>.
                    </div>

                </div>

            </div>
        </div>
    </div>
</section>
<!-- Success Confirmation Section End -->
@endsection