@extends('ecommerce::frontend.layout.main2')

@section('title') Order Success @endsection

@section('description') @endsection

@section('content')

@include('ecommerce::frontend.partials.header')

<!-- Success Section -->
<section style="padding-top: 100px; padding-bottom: 100px;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 text-center">
                
                <!-- Success Icon -->
                <div class="success-icon-circle mb-4">
                    <i class="icon icon-check" style="font-size: 50px; color: #fff;"></i>
                </div>

                <!-- Heading -->
                <h1 class="text-display fw-bold mb-4">{{trans('file.Thank you for your order')}}</h1>
                
                <!-- Order Details -->
                <div class="order-message-box">
                    <p style="color: #1a1a1a !important;" class="h6 fw-normal text-secondary mb-2">
                        {{trans('file.Here is your order reference no')}}:
                    </p>
                    <h2 class="fw-bold mb-4" style="color: #c8102e; font-size: 32px; letter-spacing: 1px;">
                        #{{ $sale_reference }}
                    </h2>
                    <p style="color: #1a1a1a !important;" class="text-secondary lead">
                        {{trans('file.You will receive an email with delivery details shortly')}}
                    </p>
                </div>

                <!-- Action Buttons -->
                <div class="mt-5">
                    <a href="{{ url('customer/orders') }}" class="btn-submit-professional">
                        View Orders
                    </a>
                    <a href="{{ url('/') }}" class="tf-btn style-line ms-3">
                        Back to Home
                    </a>
                </div>

            </div>
        </div>
    </div>
</section>

@include('ecommerce::frontend.partials.footer')

@endsection

@section('style')
<style>
    /* Success Icon Circle */
    .success-icon-circle {
        width: 100px;
        height: 100px;
        background-color: #28a745; /* Green */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        box-shadow: 0 10px 30px rgba(40, 167, 69, 0.2);
        animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* Message Box */
    .order-message-box {
        background: #fff;
        border: 1px solid #f0f0f0;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        margin-bottom: 30px;
    }

    /* Animation */
    @keyframes popIn {
        0% { transform: scale(0); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
</style>
@endsection

@section('script')

@endsection