@extends('web.home.layout.master')

@section('content')
    <!-- Google Fonts & FontAwesome -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

    <div class="success-page-container py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-7">
                    <div class="success-hero-card text-center">
                        <div class="lottie-container">
                            <dotlottie-player src="https://lottie.host/3cbf8c52-78bf-493a-84cd-35ae1c3fe123/8JLSkbfagD.json"
                                background="transparent" speed="1"
                                style="width: 140px; height: 140px;"
                                loop autoplay>
                            </dotlottie-player>
                        </div>

                        <h2 class="success-title">Your Order is Completed!</h2>
                        <p class="success-message">
                            Thank you for your purchase! Your order is being processed and will be prepared shortly. You will receive an email confirmation containing your transaction details once the shipment is processed.
                        </p>

                        <div class="success-info-box">
                            <div class="info-icon-wrapper">
                                <i class="fas fa-truck-loading"></i>
                            </div>
                            <div class="info-text-wrapper">
                                <strong>Estimated Delivery</strong>
                                <p>Standard delivery takes 2-4 working days. You can track your shipment status inside your user profile.</p>
                            </div>
                        </div>

                        <div class="action-buttons mt-4">
                            <a href="{{ route('american.plastic.web') }}" class="btn btn-primary-premium">Continue Shopping</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Styles for Card Payment Success Screen -->
    <style>
        .success-page-container {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0f172a;
        }

        .success-hero-card {
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid #f1f5f9;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01), 0 10px 30px rgba(0, 0, 0, 0.02);
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .lottie-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
        }

        .success-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 10px;
        }

        .success-message {
            font-size: 0.95rem;
            color: #64748b;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        /* success info block */
        .success-info-box {
            display: flex;
            align-items: center;
            gap: 16px;
            background: #fdfdfd;
            border: 1px solid #f1f5f9;
            border-radius: 16px;
            padding: 20px;
            text-align: left;
            margin-bottom: 20px;
            width: 100%;
            max-width: 480px;
        }

        .info-icon-wrapper {
            background: rgba(133, 194, 38, 0.1);
            color: #85c226;
            font-size: 1.5rem;
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .info-text-wrapper strong {
            font-size: 0.95rem;
            color: #0f172a;
            display: block;
            margin-bottom: 4px;
        }

        .info-text-wrapper p {
            font-size: 0.85rem;
            color: #64748b;
            margin: 0;
            line-height: 1.4;
        }

        /* Buttons */
        .btn-primary-premium {
            background: #85c226 !important;
            color: #ffffff !important;
            border: none !important;
            border-radius: 12px !important;
            padding: 12px 28px !important;
            font-size: 0.95rem !important;
            font-weight: 700 !important;
            transition: all 0.25s ease !important;
            cursor: pointer;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(133, 194, 38, 0.25);
        }

        .btn-primary-premium:hover {
            background: #6fa81d !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(133, 194, 38, 0.35);
        }

        @media (max-width: 576px) {
            .success-hero-card {
                padding: 30px 20px;
            }
            .success-title {
                font-size: 1.5rem;
            }
        }
    </style>
@endsection