@extends('main')

@section('title', 'Thank You - EDM Korean Global Campus')
@section('meta_description', 'Thank you for your inquiry. We will contact you soon.')

@push('head')
<style>
    .success-container {
        max-width: 800px;
        margin: 80px auto;
        padding: 60px 20px;
        text-align: center;
    }

    .success-container h1 {
        margin: 2rem 0;
    }

    .success-icon {
        width: 100px;
        height: 100px;
        margin: 0 auto 30px;
        background: #28a745;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scaleIn 0.5s ease-out;
    }

    .success-icon svg {
        width: 60px;
        height: 60px;
        stroke: white;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        animation: checkmark 0.8s ease-out 0.3s forwards;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }

    @keyframes scaleIn {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes checkmark {
        to {
            stroke-dashoffset: 0;
        }
    }

    .success-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 40px;
        text-align: left;
        margin-top: 2rem
    }

    .success-info h3 {
        font-size: 1.3rem;
        color: #333;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .success-info p {
        color: #666;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .success-actions {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 4rem;
    }

    @media (max-width: 768px) {
        .success-container {
            margin: 40px auto;
            padding: 40px 20px;
        }
    }
</style>
@endpush

@section('content')
<main>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 success-container">
                <div class="success-icon">
                    <svg viewBox="0 0 52 52">
                        <polyline points="14 27 22 35 38 19"/>
                    </svg>
                </div>

                <h1>Thank You!</h1>


                @if ( session('inquiry_detail') == 'events/korean-class-20-off')
                    <h5>
                        We will send your 20% discount coupon to your inbox.<br>
                        You can find more information on our website.
                    </h5>
                @endif

                @if(session('inquiry_type'))
                    <div class="success-info">
                        <h3>What's Next?</h3>
                        @if(session('inquiry_type') === 'quotation')
                            <p><strong>Your quotation request has been received!</strong></p>
                            <p>Our team will prepare a detailed quote and send it to <strong>{{ session('inquiry_email') }}</strong> within 24 hours.</p>
                            <p>The quote will include course fees, accommodation options, and additional services you requested.</p>
                        @elseif(session('inquiry_type') === 'contact')
                            <p><strong>Your message has been received!</strong></p>
                            <p>We will respond to your inquiry at <strong>{{ session('inquiry_email') }}</strong> as soon as possible.</p>
                            <p>Our typical response time is within 24-48 hours.</p>
                        @else
                            <p><strong>Your inquiry has been submitted!</strong></p>
                            <p>We will get back to you at <strong>{{ session('inquiry_email') }}</strong> soon.</p>
                            <p>Thank you for your interest in EDM Korean Global Campus!</p>
                        @endif
                    </div>
                @endif

                <div class="success-actions">
                    <a href="{{ route('home') }}" class="btn btn-outline-edm">
                        <i class="bi bi-house-door me-1"></i>Go to Homepage
                    </a>
                    <a href="{{ route('download.brochure') }}" class="btn btn-outline-edm">
                        <i class="bi bi-file-earmark-pdf me-1"></i>View e-brochure
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>

@push('scripts')
<script>
    // GA4 이벤트 추적
    @if(session('inquiry_type'))
        if (typeof gtag !== 'undefined') {
            gtag('event', 'inquiry_success', {
                'inquiry_type': '{{ session('inquiry_type') }}',
                'inquiry_source': '{{ session('inquiry_source', 'unknown') }}',
                'inquiry_detail': '{{ session('inquiry_detail', '') }}',
                'event_category': 'Form Submission',
                'event_label': '{{ session('inquiry_type') }} - Success',
                'value': 1
            });
        }
    @endif
</script>
@endpush
@endsection