@extends('plugins/ecommerce::orders.master')

@section('title', __('Order Confirmation | :site_title', ['site_title' => Theme::getSiteTitle()]))

@push('header')
    <style>
        .checkout-success-redesign .left-column {
            position: relative;
            background:
                radial-gradient(circle at 15% 15%, rgba(var(--primary-color-rgb), 0.16), transparent 45%),
                radial-gradient(circle at 95% 0%, rgba(var(--primary-color-rgb), 0.08), transparent 40%),
                linear-gradient(160deg, #ffffff 0%, #f5fbf9 100%);
            border-radius: 1.75rem;
            padding: 1.5rem;
            overflow: hidden;
        }

        .checkout-success-redesign .success-hero {
            border: 1px solid rgba(var(--primary-color-rgb), 0.2);
            border-radius: 1.25rem;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 20px 45px rgba(8, 49, 40, 0.12);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .checkout-success-redesign .success-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--primary-color);
            background: rgba(var(--primary-color-rgb), 0.12);
            border-radius: 999px;
            padding: 0.4rem 0.7rem;
            margin-bottom: 0.9rem;
        }

        .checkout-success-redesign .thank-you {
            margin-bottom: 1rem;
        }

        .checkout-success-redesign .thank-you svg {
            width: 68px;
            height: 68px;
            padding-inline-end: 0.75rem;
        }

        .checkout-success-redesign .thank-you h3.thank-you-sentence {
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.1;
            margin: 0 0 0.4rem;
        }

        .checkout-success-redesign .thank-you > p {
            font-size: 0.98rem;
            color: #4f5f5a;
            margin-bottom: 0;
        }

        .checkout-success-redesign .success-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.7rem;
            margin-top: 1rem;
        }

        .checkout-success-redesign .success-metric {
            border: 1px solid rgba(var(--primary-color-rgb), 0.16);
            background: linear-gradient(180deg, #ffffff 0%, #f7fcfa 100%);
            border-radius: 0.9rem;
            padding: 0.7rem 0.8rem;
        }

        .checkout-success-redesign .success-metric .label {
            display: block;
            font-size: 0.72rem;
            color: #6b7f79;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.2rem;
        }

        .checkout-success-redesign .success-metric .value {
            display: block;
            font-size: 1.05rem;
            font-weight: 700;
            color: #0f332a;
            line-height: 1.2;
        }

        .checkout-success-redesign .success-metric .value.reference-list {
            font-size: 0.95rem;
            font-weight: 600;
            display: grid;
            gap: 0.3rem;
        }

        .checkout-success-redesign .success-metric .reference-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            border-top: 1px dashed #d8e6e1;
            padding-top: 0.3rem;
        }

        .checkout-success-redesign .success-metric .reference-item:first-child {
            border-top: none;
            padding-top: 0;
        }

        .checkout-success-redesign .success-metric .reference-order {
            color: #5d706a;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .checkout-success-redesign .success-metric .reference-value {
            color: #0f332a;
            font-weight: 700;
            word-break: break-word;
            text-align: right;
        }

        .checkout-success-redesign .success-info-wrap .success-info-card {
            border: 1px solid #deebe6;
            border-radius: 1.1rem;
            background: rgba(255, 255, 255, 0.94);
            padding: 1rem 1.2rem;
            margin-top: 1rem;
            margin-bottom: 0;
            box-shadow: 0 6px 18px rgba(24, 52, 45, 0.04);
        }

        .checkout-success-redesign .success-info-wrap .success-info-card h3 {
            font-size: 1.2rem;
            color: #38524d;
            font-weight: 550;
            margin-bottom: 0.9rem;
        }

        .checkout-success-redesign .success-info-wrap .info-grid {
            display: grid;
            gap: 0.55rem;
        }

        .checkout-success-redesign .success-info-wrap .info-row {
            display: grid;
            grid-template-columns: 180px minmax(0, 1fr);
            align-items: center;
            gap: 0.8rem;
            padding-bottom: 0.55rem;
            border-bottom: 1px dashed #e0ebe7;
        }

        .checkout-success-redesign .success-info-wrap .info-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .checkout-success-redesign .success-info-wrap .info-label {
            color: #879994;
            font-size: 1rem;
            font-weight: 450;
        }

        .checkout-success-redesign .success-info-wrap .info-value {
            color: #496a62;
            font-size: 1rem;
            font-weight: 500;
            word-break: break-word;
        }

        .checkout-success-redesign .success-info-wrap .info-value .label {
            margin: 0;
            vertical-align: middle;
        }

        .checkout-success-redesign .success-info-wrap .info-rich {
            margin-top: 0.75rem;
            border-top: 1px solid #e5efeb;
            padding-top: 0.75rem;
            color: #4d615b;
        }

        .checkout-success-redesign .payment-checkout-btn {
            margin-top: 1.25rem;
            border-radius: 0.95rem;
            padding: 0.8rem 1.25rem;
            font-size: 0.98rem;
            font-weight: 550;
            letter-spacing: 0.01em;
            color: #fff;
            background: rgba(var(--primary-color-rgb), 0.9);
            border: 1px solid transparent;
            box-shadow: 0 6px 14px rgba(var(--primary-color-rgb), 0.18);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }

        .checkout-success-redesign .payment-checkout-btn:hover {
            transform: translateY(-1px);
            color: #fff;
            filter: brightness(1.02);
            box-shadow: 0 8px 16px rgba(var(--primary-color-rgb), 0.2);
        }

        .checkout-success-redesign .payment-checkout-btn:active {
            transform: translateY(0);
        }

        .checkout-success-redesign .checkout-cta-wrap {
            text-align: center;
            margin-top: 1.25rem;
        }

        .checkout-success-redesign .checkout-cta-wrap .payment-checkout-btn {
            margin-top: 0;
            min-width: 220px;
        }

        .checkout-success-redesign .success-info-wrap .info-value .label-success {
            background-color: #def5ea;
            color: #1f8e61;
            border: 1px solid #cbeadb;
            font-weight: 600;
            letter-spacing: 0.01em;
            border-radius: 0.55rem;
            padding: 0.25rem 0.55rem;
        }

        @media screen and (max-width: 991px) {
            .checkout-success-redesign .left-column {
                border-radius: 1.25rem;
                padding: 1rem;
            }

            .checkout-success-redesign .thank-you h3.thank-you-sentence {
                font-size: 1.55rem;
            }

            .checkout-success-redesign .success-metrics {
                grid-template-columns: 1fr;
            }

            .checkout-success-redesign .success-info-wrap .info-row {
                grid-template-columns: 1fr;
                gap: 0.2rem;
            }

            .checkout-success-redesign .success-info-wrap .info-label {
                font-size: 0.86rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $firstOrder = $orders->first();
        $sessionOrderReference = null;

        if (is_plugin_active('hblpay') && \Illuminate\Support\Facades\Schema::hasTable('hbl_order_ids')) {
            foreach ($orders as $placedOrder) {
                $orderReference = \Illuminate\Support\Facades\DB::table('hbl_order_ids')
                    ->whereRaw('FIND_IN_SET(?, order_id)', [(string) $placedOrder->id])
                    ->whereNotNull('order_reference')
                    ->orderByDesc('id')
                    ->value('order_reference');

                if ($orderReference) {
                    $sessionOrderReference = $orderReference;
                    break;
                }
            }
        }
    @endphp

    <div class="row checkout-success-redesign">
        <div class="col-lg-7 col-md-6 col-12 left-column">
            @include('plugins/ecommerce::orders.partials.logo')

            <div class="success-hero">
                <span class="success-pill">
                    <x-core::icon name="ti ti-sparkles" />
                    {{ __('Order confirmation') }}
                </span>

                <div class="thank-you">
                    <x-core::icon name="ti ti-circle-check-filled" />

                    <div class="d-inline-block">
                        <h3 class="thank-you-sentence">
                            {{ __('All set! Your order is in.') }}
                        </h3>
                        <p>{{ __('You will receive updates as your package moves through fulfillment.') }}</p>
                    </div>
                </div>

                <div class="success-metrics">
                    <div class="success-metric">
                        <span class="label">{{ __('Order number') }}</span>
                        <span class="value">{{ $sessionOrderReference ?: ($firstOrder?->code ?: '-') }}</span>
                    </div>
                    <div class="success-metric">
                        <span class="label">{{ __('Total amount') }}</span>
                        <span class="value">{{ format_price($orders->sum('amount')) }}</span>
                    </div>
                    <div class="success-metric">
                        <span class="label">{{ __('Payment method') }}</span>
                        <span class="value">
                            @if (is_plugin_active('payment') && $firstOrder?->payment?->id)
                                {{ $firstOrder->payment->payment_channel->label() }}
                            @else
                                {{ '-' }}
                            @endif
                        </span>
                    </div>
                </div>
            </div>

            <div class="success-info-wrap">
                @include('plugins/marketplace::orders.partials.customer-info-grid', [
                    'order' => $orders,
                    'isShowShipping' => false,
                ])
            </div>

            <div class="checkout-cta-wrap">
                <a
                    class="btn payment-checkout-btn"
                    href="{{ BaseHelper::getHomepageUrl() }}"
                > {{ __('Continue shopping') }} </a>
            </div>
        </div>

        <div class="col-lg-5 col-md-6 mt-5 mt-md-0 mb-5">
            @foreach ($orders as $order)
                <div class="bg-light p-3 pt-0">
                    @php
                        $successStore = $order->store;

                        if (! $successStore || ! $successStore->exists) {
                            $successStore = new \Botble\Marketplace\Models\Store();
                            $successStore->id = 0;
                            $successStore->name = get_ecommerce_setting('company_name_for_invoicing', get_ecommerce_setting('store_name')) ?: Theme::getSiteTitle();
                            $successStore->logo = theme_option('favicon') ?: Theme::getLogo();
                            $successStore->logo_square = null;
                            $successStore->url = BaseHelper::getHomepageUrl();
                        }
                    @endphp

                    @if ($successStore)
                        <div class="p-2" style="background: antiquewhite; border-radius: 8px; margin-bottom: 16px;">
                            <img
                                class="img-fluid rounded"
                                src="{{ RvMedia::getImageUrl($successStore->logo_square ?: $successStore->logo, null, false, RvMedia::getDefaultImage()) }}"
                                alt="{{ $successStore->name }}"
                                style="max-width: 30px; margin-inline-end: 3px;"
                            >
                            <span class="font-weight-bold"><a href="{{ $successStore->url }}">{!! BaseHelper::clean($successStore->name) !!}</a></span>

                            @if ($successStore->id && EcommerceHelper::isReviewEnabled())
                                <div class="d-flex align-items-center gap-2">
                                    @include(EcommerceHelper::viewPath('includes.rating-star'), ['avg' => $successStore->reviews()->avg('star')])
                                    <span class="small text-muted">
                                        @if (($reviewsCount = $successStore->reviews()->count()) === 1)
                                            ({{ __('1 Review') }})
                                        @else
                                            ({{ __(':count Reviews', ['count' => number_format($reviewsCount)]) }})
                                        @endif
                                    </span>
                                </div>
                            @endif
                        </div>
                    @endif

                    @include('plugins/ecommerce::orders.thank-you.order-info', [
                        'isShowTotalInfo' => false,
                        'hideOrderNumber' => true,
                    ])

                    @if ($order->shipping_method->getValue())
                        <div class="shipping-method-wrapper py-3">
                            <div class="payment-checkout-form">
                                <h6>{{ __('Shipping method') }}:</h6>
                                <ul class="list-group list_payment_method">
                                    <li class="list-group-item">
                                        <input class="magic-radio" type="radio" checked disabled>
                                        <span>{{ $order->shipping_method_name }} - {{ (float) $order->shipping_amount ? format_price($order->shipping_amount) : __('Free') }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    @endif
                </div>

                @if (! $loop->last)
                    <hr class="border-dark-subtle" />
                @endif
            @endforeach

            <div class="bg-light p-3">
                @include('plugins/ecommerce::orders.thank-you.total-info', [
                    'order' => $firstOrder,
                    'orders' => $orders,
                ])
            </div>
        </div>
    </div>
@stop