{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: receipt.blade.php
------------------------------------------------------
Use: The outcome of a gateway payment, with the ten-
     second automatic return to the shop. The whole
     background takes the colour of the result.
=====================================================
--}}

@extends('layouts.gateway')

@section('title', __('front.pay.receipt_title'))

@section('outcome', $order->isPaid() ? 'success' : 'failed')

@section('content')
    <div class="w-full max-w-[480px]" x-data="payReceipt(10, @js($returnUrl))">
        <div class="overflow-hidden rounded-[24px] border border-[var(--pay-border)] bg-[var(--pay-card)] shadow-[var(--pay-shadow)]">
            <div class="px-[26px] pb-[26px] pt-[34px] text-center">

                @if ($order->isPaid())
                    <div class="relative mx-auto mb-5 size-24">
                        <svg width="96" height="96" viewBox="0 0 100 100" class="-rotate-90">
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#e7f7ee" stroke-width="6"/>
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#16a34a" stroke-width="6" stroke-linecap="round" stroke-dasharray="283" style="animation: pay-ring 1s cubic-bezier(.5,0,.2,1) forwards"/>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="size-[42px]" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" style="animation: pay-pop-in .5s .4s both"><path d="M20 6 9 17l-5-5"/></svg>
                        </div>
                    </div>
                    <h2 class="mb-1.5 text-[22px] font-bold">{{ __('front.pay.success_title') }}</h2>
                    <p class="mb-6 text-[13.5px] leading-7 text-[var(--pay-muted)]">{{ __('front.pay.success_body') }}</p>
                @else
                    <div class="relative mx-auto mb-5 size-24">
                        <svg width="96" height="96" viewBox="0 0 100 100" class="-rotate-90">
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#fdeaec" stroke-width="6"/>
                            <circle cx="50" cy="50" r="45" fill="none" stroke="#e80e23" stroke-width="6" stroke-linecap="round" stroke-dasharray="283" style="animation: pay-ring 1s cubic-bezier(.5,0,.2,1) forwards"/>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <svg class="size-10" viewBox="0 0 24 24" fill="none" stroke="#e80e23" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" style="animation: pay-pop-in .5s .4s both"><line x1="7" y1="7" x2="17" y2="17"/><line x1="17" y1="7" x2="7" y2="17"/></svg>
                        </div>
                    </div>
                    <h2 class="mb-1.5 text-[22px] font-bold">{{ __('front.pay.failed_title') }}</h2>
                    <p class="mb-6 text-[13.5px] leading-7 text-[var(--pay-muted)]">
                        {{ $order->isTimedOut() ? __('front.pay.failed_body_expired') : __('front.pay.failed_body_canceled') }}
                    </p>
                @endif

                <div class="flex flex-col gap-[11px] rounded-2xl border border-[var(--pay-border)] bg-[var(--pay-tx)] px-[18px] py-4 text-right">
                    <div class="flex items-center justify-between">
                        <span class="text-[12.5px] text-[var(--pay-muted)]">{{ __('front.pay.receipt_amount') }}</span>
                        <span class="text-[13.5px] font-bold"><span dir="ltr">@toman($order->amount)</span> {{ __('front.pay.toman') }}</span>
                    </div>
                    <div class="flex items-center justify-between border-t border-[var(--pay-border)] pt-[11px]">
                        <span class="text-[12.5px] text-[var(--pay-muted)]">{{ __('front.pay.receipt_shop') }}</span>
                        <span class="text-[13.5px] font-bold">{{ $order->shop->name }}</span>
                    </div>
                    <div class="flex items-center justify-between border-t border-[var(--pay-border)] pt-[11px]">
                        <span class="text-[12.5px] text-[var(--pay-muted)]">{{ __('front.pay.receipt_order') }}</span>
                        <span class="text-[13.5px] font-bold" dir="ltr">{{ $order->code }}</span>
                    </div>
                    @if ($order->reference_id)
                        <div class="flex items-center justify-between border-t border-[var(--pay-border)] pt-[11px]">
                            <span class="text-[12.5px] text-[var(--pay-muted)]">{{ __('front.pay.receipt_reference') }}</span>
                            <span class="text-[13.5px] font-bold" dir="ltr">@fa($order->reference_id)</span>
                        </div>
                    @endif
                    <div class="flex items-center justify-between border-t border-[var(--pay-border)] pt-[11px]">
                        <span class="text-[12.5px] text-[var(--pay-muted)]">{{ __('front.pay.receipt_date') }}</span>
                        <span class="text-[13.5px] font-bold">@jalaliDateTime($order->paid_at ?? $order->updated_at)</span>
                    </div>
                </div>

                {{-- Payment breakdown: an order can be settled from credit +
                     wallet + online in any mix; each transaction is listed. --}}
                @if ($transactions->isNotEmpty())
                    @php
                        $sourceMeta = [
                            \App\Models\Transaction::TYPE_INSTALLMENT => ['label' => __('front.pay.from_credit'), 'color' => '#563bb1'],
                            \App\Models\Transaction::TYPE_CASH => ['label' => __('front.pay.from_wallet'), 'color' => '#16a34a'],
                            \App\Models\Transaction::TYPE_ONLINE => ['label' => __('front.pay.receipt_source_online'), 'color' => '#2563eb'],
                        ];
                    @endphp
                    <div class="mt-3.5 rounded-2xl border border-[var(--pay-border)] bg-[var(--pay-tx)] px-[18px] py-4 text-right">
                        <div class="mb-2.5 text-[12.5px] font-bold text-[var(--pay-muted)]">{{ __('front.pay.receipt_transactions') }}</div>
                        <div class="flex flex-col gap-2">
                            @foreach ($transactions as $tx)
                                @php $meta = $sourceMeta[$tx->type] ?? ['label' => __("front.transactions.types.{$tx->type}"), 'color' => '#7b7890']; @endphp
                                <div class="flex items-center justify-between">
                                    <span class="flex items-center gap-2">
                                        <span class="inline-block size-2 rounded-full" style="background: {{ $meta['color'] }}"></span>
                                        <span class="text-[12.5px] font-bold">{{ $meta['label'] }}</span>
                                    </span>
                                    <span class="text-[12.5px] font-bold text-green-600"><span dir="ltr">@toman($tx->amount)</span> {{ __('front.pay.toman') }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="mb-1.5 mt-[18px] flex items-center justify-center gap-[7px] text-[12.5px] text-[var(--pay-muted)]">
                    <svg class="size-[15px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5l3 2"/></svg>
                    {{ __('front.pay.auto_return') }}
                    <span class="font-bold text-[var(--pay-text)]" x-text="label()"></span>
                    {{ __('front.pay.seconds') }}
                </div>

                <a href="{{ $returnUrl }}" class="block w-full rounded-[14px] bg-primary-600 p-3.5 text-center text-[15px] font-bold text-white shadow-lg shadow-primary-600/30 transition hover:bg-primary-700">
                    {{ __('front.pay.back_to_shop') }}
                </a>
            </div>
        </div>
    </div>
@endsection