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

@section('title', __('Order successfully at :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 confirmed') }}
                </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">{{ __('Orders') }}</span>
                        <span class="value">{{ number_format($orders->count()) }}</span>
                    </div>
                    <div class="success-metric">
                        <span class="label">{{ __('Total paid') }}</span>
                        <span class="value">{{ format_price($orders->sum('amount')) }}</span>
                    </div>
                    <div class="success-metric">
                        <span class="label">{{ __('Reference') }}</span>
                        <span class="value">{{ $sessionOrderReference ?: ($firstOrder?->code ?: '-') }}</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">
                    @include('plugins/ecommerce::orders.thank-you.order-info', ['isShowTotalInfo' => true])
                </div>

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

            @if (count($orders) > 1)
                <hr class="border-dark-subtle" />
                <!-- total info -->
                <div class="bg-light p-3">
                    <div class="row total-price">
                        <div class="col-6">
                            <p>{{ __('Sub amount') }}:</p>
                        </div>
                        <div class="col-6">
                            <p class="text-end">{{ format_price($orders->sum('sub_total')) }}</p>
                        </div>
                    </div>

                    @if ($orders->filter(fn ($order) => $order->shipment->id)->count())
                        <div class="row total-price">
                            <div class="col-6">
                                <p>{{ __('Shipping fee') }}:</p>
                            </div>
                            <div class="col-6">
                                <p class="text-end">{{ format_price($orders->sum('shipping_amount')) }} </p>
                            </div>
                        </div>
                    @endif

                    @if ($orders->sum('discount_amount'))
                        <div class="row total-price">
                            <div class="col-6">
                                <p>{{ __('Discount') }}:</p>
                            </div>
                            <div class="col-6">
                                <p class="text-end">{{ format_price($orders->sum('discount_amount')) }} </p>
                            </div>
                        </div>
                    @endif

                    @if (EcommerceHelper::isTaxEnabled())
                        <div class="row total-price">
                            <div class="col-6">
                                <p>{{ __('Tax') }}:</p>
                            </div>
                            <div class="col-6">
                                <p class="text-end">{{ format_price($orders->sum('tax_amount')) }}</p>
                            </div>
                        </div>
                    @endif

                    <div class="row total-price">
                        <div class="col-6">
                            <p>{{ __('Total amount') }}:</p>
                        </div>
                        <div class="col-6">
                            <p class="total-text raw-total-text text-end">
                                {{ format_price($orders->sum('amount')) }}
                            </p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
@stop