@extends('site.layouts.site-layout')
@section('title', 'نتیجه پرداخت')

@section('content')

@php
    $transaction = $order->transactions->first();
    $isCardToCard = $order->payment_method === 'card_to_card';
    $totalDiscount = $order->product_discount + $order->coupon_discount;
@endphp

<div class="bread-crumb pt-3">
    <div class="container-fluid">
        <div class="content-box">
            <div class="container-fluid">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="font-14 text-muted">خانه</a></li>
                        <li class="breadcrumb-item active main-color-one-color font-14" aria-current="page">نتیجه پرداخت</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="content py-20">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">

                <div class="payment-status content-box mb-4">
                    <div class="container-fluid">
                        <div class="payment-status-inner">
                            <div class="icon payment-icon-success">
                                <i class="bi bi-check-circle-fill fs-1"></i>
                            </div>
                            <div class="title">
                                @if($isCardToCard)
                                    <h4>سفارش شما ثبت شد</h4>
                                    <p class="text-muted font-14">لطفاً مبلغ را به شماره کارت مشخص شده واریز کنید و منتظر تأیید بمانید.</p>
                                @else
                                    <h4>پرداخت شما با موفقیت انجام شد</h4>
                                    <p class="text-muted font-14">{{ session('success') ?: 'سفارش شما ثبت شده و در حال پردازش می‌باشد.' }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row gy-4">

                    <div class="col-12">
                        <div class="content-box">
                            <div class="container-fluid">
                                <h6 class="font-16 fw-bold mb-3 border-bottom pb-2">محصولات سفارش</h6>
                                <div class="responsive-table p-0">
                                    <table class="table main-table rounded-0 mb-0">
                                        <thead class="text-bg-dark bg-opacity-75">
                                            <tr>
                                                <th>محصول</th>
                                                <th>قیمت</th>
                                                <th>تعداد</th>
                                                <th>جمع</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($order->items as $item)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center gap-2">
                                                        @if($item->product && $item->product->featured_image)
                                                        <a href="{{ route('product.show', $item->product->slug) }}" target="_blank">
                                                            <img src="{{ asset('uploads/products/' . $item->product->featured_image) }}"
                                                                 alt="{{ $item->product_title }}"
                                                                 class="order-item-thumb">
                                                        </a>
                                                        @endif
                                                        <div>
                                                            @if($item->product)
                                                            <a href="{{ route('product.show', $item->product->slug) }}" class="font-13 fw-medium text-dark text-decoration-none" target="_blank">{{ $item->product_title }}</a>
                                                            @else
                                                            <p class="mb-0 font-13 fw-medium">{{ $item->product_title }}</p>
                                                            @endif
                                                            @if($item->variant_title)
                                                            <p class="mb-0 font-12 text-muted">{{ $item->variant_title }}</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    @if($item->final_price < $item->original_price)
                                                    <p class="mb-0 font-11 text-muted text-decoration-line-through">{{ number_format($item->original_price) }}</p>
                                                    <p class="mb-0 font-13 fw-bold text-danger">{{ number_format($item->final_price) }} تومان</p>
                                                    @else
                                                    <p class="mb-0 font-13">{{ number_format($item->final_price) }} تومان</p>
                                                    @endif
                                                </td>
                                                <td class="font-13">{{ $item->qty }}</td>
                                                <td class="font-13 fw-bold">{{ number_format($item->subtotal) }} تومان</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="content-box h-100">
                            <div class="container-fluid">
                                <h6 class="font-16 fw-bold mb-3 border-bottom pb-2">مشخصات پرداختی</h6>
                                <div class="pay-table">
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">درگاه پرداختی:</span>
                                        <span class="pay-table-value">{{ $order->payment_method_name }}</span>
                                    </div>
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">تاریخ:</span>
                                        <span class="pay-table-value">
                                            {{ $order->shamsi_date }}
                                        </span>
                                    </div>
                                    @if($transaction && $transaction->track_id)
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">کد رهگیری:</span>
                                        <span class="pay-table-value" dir="ltr">{{ $transaction->track_id }}</span>
                                    </div>
                                    @endif
                                    @if($transaction && $transaction->ref_number)
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">کد تراکنش:</span>
                                        <span class="pay-table-value" dir="ltr">{{ $transaction->ref_number }}</span>
                                    </div>
                                    @endif
                                    @if($totalDiscount > 0)
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">مقدار تخفیف:</span>
                                        <span class="pay-table-value text-danger">{{ number_format($totalDiscount) }} تومان</span>
                                    </div>
                                    @endif
                                    @if($order->wallet_used > 0)
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">اعتبار کیف پول:</span>
                                        <span class="pay-table-value text-success">{{ number_format($order->wallet_used) }} تومان</span>
                                    </div>
                                    @endif
                                    <div class="pay-table-row fw-bold">
                                        <span class="pay-table-label">مقدار پرداختی:</span>
                                        <span class="pay-table-value main-color-one-color">{{ number_format($order->payable_amount) }} تومان</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="content-box h-100">
                            <div class="container-fluid">
                                <h6 class="font-16 fw-bold mb-3 border-bottom pb-2">وضعیت سفارش</h6>
                                <div class="pay-table">
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">شماره سفارش:</span>
                                        <span class="pay-table-value fw-bold" dir="ltr">{{ $order->order_number }}</span>
                                    </div>
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">قیمت کل:</span>
                                        <span class="pay-table-value">{{ number_format($order->total_amount) }} تومان</span>
                                    </div>
                                    @if($order->shipping_method_name)
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">روش ارسال:</span>
                                        <span class="pay-table-value">{{ $order->shipping_method_name }}</span>
                                    </div>
                                    @endif
                                    <div class="pay-table-row">
                                        <span class="pay-table-label">وضعیت پرداخت:</span>
                                        <span class="pay-table-value">
                                            <span class="badge bg-{{ $order->statusColor() }} rounded-pill">{{ $order->statusLabel() }}</span>
                                        </span>
                                    </div>
                                </div>

                                @if($isCardToCard)
                                @php
                                    $cardNumber    = \App\Models\Setting::get('card_to_card_number', '');
                                    $holderName    = \App\Models\Setting::get('card_to_card_holder_name', '');
                                    $cardDesc      = \App\Models\Setting::get('card_to_card_description', '');
                                @endphp
                                @if($cardNumber)
                                <div class="payment-card-info mt-3">
                                    <p class="font-13 text-muted mb-2">لطفاً مبلغ <strong class="main-color-one-color">{{ number_format($order->payable_amount) }} تومان</strong> را به شماره کارت زیر واریز کنید:</p>
                                    <div class="ctc-display-card">
                                        <span class="ctc-card-number" dir="ltr">{{ implode('-', str_split($cardNumber, 4)) }}</span>
                                        @if($holderName)
                                        <span class="ctc-holder">{{ $holderName }}</span>
                                        @endif
                                    </div>
                                    @if($cardDesc)
                                    <p class="font-12 text-muted mt-2 mb-0">{{ $cardDesc }}</p>
                                    @endif
                                </div>
                                @endif
                                @endif
                            </div>
                        </div>
                    </div>

                </div>

                <div class="payment-actions mt-5 d-flex gap-3 flex-wrap justify-content-center">
                    <a href="{{ route('panel.orders.index') }}" class="btn border-0 main-color-one-bg text-white rounded-3 font-14 px-4">
                        <i class="bi bi-bag-check me-2 text-white"></i>مشاهده سفارشات
                    </a>
                    <a href="{{ route('home') }}" class="btn btn-outline-secondary rounded-3 font-14 px-4">
                        <i class="bi bi-house me-2"></i>بازگشت به فروشگاه
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
.payment-status-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}
.payment-icon-success {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 1rem;
}
.pay-table-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}
.pay-table-row:last-child {
    border-bottom: none;
}
.order-item-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.pay-table-label {
    color: #6c757d;
    flex-shrink: 0;
    margin-left: 1rem;
}
.pay-table-value {
    font-weight: 500;
    text-align: left;
}
.ctc-display-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ctc-card-number {
    font-size: 1.1rem;
    letter-spacing: 2px;
    font-weight: 700;
}
.ctc-holder {
    font-size: 0.85rem;
    opacity: 0.8;
}
</style>
@endsection
