@extends('layouts.admin.master')
@section('tab-name', 'جزئیات سفارش')

@push('styles')
    <style>
        .order-show {
            --os-accent: #0d6b5c;
            --os-accent-2: #127a6a;
            --os-surface: #f6f9f8;
            --os-border: rgba(13, 107, 92, 0.12);
            --os-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
        }

        .order-show__hero {
            background: linear-gradient(135deg, var(--os-accent) 0%, #0a4f44 55%, #063d35 100%);
            border-radius: 1rem;
            padding: 1.35rem 1.5rem;
            color: #fff;
            box-shadow: var(--os-shadow);
            margin-bottom: 1.25rem;
        }

        .order-show__hero-id {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .order-show__hero-meta {
            opacity: 0.88;
            font-size: 0.875rem;
        }

        .order-show__hero .badge {
            font-weight: 600;
            padding: 0.45rem 0.75rem;
        }

        .order-show__card {
            border: 1px solid var(--os-border);
            border-radius: 0.875rem;
            background: #fff;
            box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
            height: 100%;
            overflow: hidden;
        }

        .order-show__card-h {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--os-accent);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .order-show__card-h i {
            font-size: 1.1rem;
            opacity: 0.85;
        }

        .order-show__row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 1rem;
            padding: 0.55rem 0;
            border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
        }

        .order-show__row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .order-show__row:first-of-type {
            padding-top: 0;
        }

        .order-show__label {
            color: #64748b;
            font-size: 0.82rem;
            flex-shrink: 0;
        }

        .order-show__value {
            font-weight: 600;
            color: #1e293b;
            text-align: end;
            word-break: break-word;
        }

        .order-show__value--money {
            color: #0a7c66;
            font-weight: 700;
            font-size: 1.05rem;
        }

        .order-show__receipt-wrap {
            border: 1px solid var(--os-border);
            border-radius: 0.875rem;
            background: linear-gradient(180deg, #fff 0%, var(--os-surface) 100%);
            box-shadow: var(--os-shadow);
        }

        .order-show__receipt-h {
            padding: 1rem 1.25rem 0;
            font-weight: 700;
            color: #1e293b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
        }

        .order-show__receipt-preview {
            position: relative;
            margin: 0.75rem 1.25rem 1.25rem;
            border-radius: 0.65rem;
            overflow: hidden;
            background: #e8eeec;
            border: 1px solid rgba(0, 0, 0, 0.06);
            cursor: zoom-in;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            max-height: 200px;
        }

        .order-show__receipt-preview:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(13, 107, 92, 0.18);
        }

        .order-show__receipt-preview:focus {
            outline: 2px solid var(--os-accent);
            outline-offset: 2px;
        }

        .order-show__receipt-preview img {
            width: 100%;
            max-height: 200px;
            object-fit: contain;
            display: block;
        }

        .order-show__receipt-hint {
            position: absolute;
            inset-inline: 0;
            bottom: 0;
            padding: 0.45rem 0.65rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.75), transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            pointer-events: none;
        }

        .order-show__note {
            border-radius: 0.875rem;
            border: 1px solid var(--os-border);
            background: #fff;
            box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
        }

        .order-show__note-body {
            color: #334155;
            line-height: 1.65;
            font-size: 0.95rem;
        }

        .order-show__btn-back {
            border-color: rgba(255, 255, 255, 0.55);
            color: #fff;
            font-weight: 600;
        }

        .order-show__btn-back:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: #fff;
            color: #fff;
        }

        #orderReceiptModal .modal-content {
            background: #0f172a;
        }

        #orderReceiptModal .modal-body img {
            max-height: 85vh;
            width: auto;
            max-width: 100%;
            margin: 0 auto;
            object-fit: contain;
        }
    </style>
@endpush

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @php
        $receiptUrl = $order->getImageFile();
        $isPlaceholderReceipt = str_contains($receiptUrl, 'noimage');
    @endphp

    <div class="body d-flex py-3 order-show">
        <div class="container-fluid">
            <div class="order-show__hero d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div>
                    <div class="order-show__hero-id">
                        <i class="bi bi-receipt-cutoff me-1"></i>
                        سفارش شماره {{ $order->id }}
                    </div>
                    <div class="order-show__hero-meta mt-1">
                        <i class="bi bi-calendar3 me-1"></i>
                        {{ $order->getJalaliCreateAtWithHour() }}
                    </div>
                </div>
                <div class="d-flex flex-wrap align-items-center gap-2">
                    <span class="badge {{ $order->getStatusData()['admin-class'] }} rounded-pill px-3 py-2">
                        {{ $order->getStatusData()['label'] }}
                    </span>
                    <a href="{{ route('admin.orders.index', request()->query()) }}" class="btn btn-sm order-show__btn-back">
                        <i class="bi bi-arrow-right-short fs-5 align-middle"></i>
                        بازگشت به لیست
                    </a>
                </div>
            </div>

            <div class="row g-3">
                <div class="{{ $order->payment_method === \App\Models\Order::PAYMENT_METHOD_ONLINE ? 'col-12' : 'col-xl-8' }}">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="card order-show__card border-0">
                                <div class="card-body p-4">
                                    <div class="order-show__card-h">
                                        <i class="bi bi-person-badge"></i>
                                        اطلاعات پایه
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">کاربر</span>
                                        <span class="order-show__value">{{ $order->user->name ?? 'کاربر حذف شده' }}</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">موبایل</span>
                                        <span class="order-show__value" dir="ltr">{{ $order->user->mobile ?? '—' }}</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">سرویس</span>
                                        <span class="order-show__value">{{ $order->service->title ?? '—' }}</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">نوع سفارش</span>
                                        <span class="order-show__value">{{ $order->getOrderTypeFarsi() }}</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">نوع مدیریت</span>
                                        <span class="order-show__value">{{ $order->getManagementType() }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card order-show__card border-0">
                                <div class="card-body p-4">
                                    <div class="order-show__card-h">
                                        <i class="bi bi-wallet2"></i>
                                        اطلاعات مالی
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">مقدار ارز (ورودی)</span>
                                        <span class="order-show__value">{{ $order->getFormattedInputPrice() }} {{ $order->getCurrencyType() }}</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">نرخ هر واحد ارز در زمان ثبت</span>
                                        <span class="order-show__value">{{ $order->getFormattedExchangeRateFa() }} تومان</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">معادل تومانی ارز (بدون کارمزد)</span>
                                        <span class="order-show__value">{{ $order->getFormattedBaseAmountTomanFa() }} تومان</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">درصد کارمزد در زمان ثبت</span>
                                        <span class="order-show__value">{{ $order->getFormattedBenefitPercentFa() }}</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">مبلغ کارمزد</span>
                                        <span class="order-show__value">{{ $order->getFormattedBenefitPriceFa() }} تومان</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">مبلغ نهایی (معادل + کارمزد)</span>
                                        <span class="order-show__value order-show__value--money">{{ $order->getFormattedPriceFa() }} تومان</span>
                                    </div>
                                    <div class="order-show__row">
                                        <span class="order-show__label">روش پرداخت</span>
                                        <span class="order-show__value">{{ $order->getPaymentMethod() }}</span>
                                    </div>
                                    @if($order->payment_method === \App\Models\Order::PAYMENT_METHOD_ONLINE)
                                        <div class="order-show__row">
                                            <span class="order-show__label">درگاه پرداخت</span>
                                            <span class="order-show__value">{{ $order->bank->title ?? ($order->transaction_info['bank']['title'] ?? 'نامشخص') }}</span>
                                        </div>
                                    @endif
                                    @php
                                        $gatewayTrackingCode = $order->gateway_tracking_code
                                            ?? $order->transaction_id
                                            ?? data_get($order->transaction_info, 'verify.reference_id');
                                    @endphp
                                    @if($order->payment_method === \App\Models\Order::PAYMENT_METHOD_ONLINE && !empty($gatewayTrackingCode))
                                        <div class="order-show__row">
                                            <span class="order-show__label">شماره پیگیری درگاه</span>
                                            <span class="order-show__value font-monospace" dir="ltr" style="font-size: 0.8rem;">{{ $gatewayTrackingCode }}</span>
                                        </div>
                                    @endif
                                    @if($order->bank)
                                        <div class="order-show__row">
                                            <span class="order-show__label">بانک</span>
                                            <span class="order-show__value">{{ $order->bank->title ?? '—' }}</span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card order-show__card border-0">
                                <div class="card-body p-4">
                                    <div class="order-show__card-h">
                                        <i class="bi bi-toggle2-on"></i>
                                        وضعیت سفارش
                                    </div>
                                    <div class="d-flex align-items-center gap-2 mb-3">
                                        <span class="badge {{ $order->getStatusData()['admin-class'] }} rounded-pill px-3 py-2">
                                            {{ $order->getStatusData()['label'] }}
                                        </span>
                                    </div>

                                    <label class="form-label small text-muted mb-1">تغییر وضعیت</label>
                                    <div class="d-flex align-items-center gap-2">
                                        <select class="form-select form-select-sm order-status-select rounded-3"
                                                data-id="{{ $order->id }}"
                                                onchange="changeOrderStatus(this)">
                                            @if($order->payment_method === \App\Models\Order::PAYMENT_METHOD_ONLINE)
                                                <option value="{{ \App\Models\Order::STATUS_PAID }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_PAID ? 'selected' : '' }}>پرداخت شده</option>
                                                <option value="{{ \App\Models\Order::STATUS_IN_PROGRESS }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_IN_PROGRESS ? 'selected' : '' }}>در حال انجام</option>
                                                <option value="{{ \App\Models\Order::STATUS_FULFILLED }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_FULFILLED ? 'selected' : '' }}>انجام شده</option>
                                                <option value="{{ \App\Models\Order::STATUS_PAYMENT_CANCELED }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_PAYMENT_CANCELED ? 'selected' : '' }}>لغو شده</option>
                                            @else
                                                <option value="{{ \App\Models\Order::STATUS_RECEIPT_SUBMITTED }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_RECEIPT_SUBMITTED ? 'selected' : '' }}>در انتظار تایید فیش پرداختی</option>
                                                <option value="{{ \App\Models\Order::STATUS_PAID }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_PAID ? 'selected' : '' }}>پرداخت شده</option>
                                                <option value="{{ \App\Models\Order::STATUS_IN_PROGRESS }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_IN_PROGRESS ? 'selected' : '' }}>در حال انجام</option>
                                                <option value="{{ \App\Models\Order::STATUS_FULFILLED }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_FULFILLED ? 'selected' : '' }}>انجام شده</option>
                                                <option value="{{ \App\Models\Order::STATUS_RECEIPT_REJECTED }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_RECEIPT_REJECTED ? 'selected' : '' }}>لغو شده</option>
                                                <option value="{{ \App\Models\Order::STATUS_PAYMENT_CANCELED }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_PAYMENT_CANCELED ? 'selected' : '' }}>لغو شده</option>
                                                <option value="{{ \App\Models\Order::STATUS_PAYMENT_FAILED }}" {{ $order->getCanonicalStatus() == \App\Models\Order::STATUS_PAYMENT_FAILED ? 'selected' : '' }}>پرداخت ناموفق</option>
                                            @endif
                                        </select>
                                        <div class="spinner-border spinner-border-sm text-primary d-none" id="spinner-{{ $order->id }}" role="status"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card order-show__card border-0">
                                <div class="card-body p-4">
                                    <div class="order-show__card-h">
                                        <i class="bi bi-link-45deg"></i>
                                        ارتباط با اکانت
                                    </div>
                                    @if($order->userAccount)
                                        <div class="order-show__row">
                                            <span class="order-show__label">شناسه اکانت</span>
                                            <span class="order-show__value font-monospace" dir="ltr">{{ $order->userAccount->account_identifier }}</span>
                                        </div>
                                        <div class="order-show__row">
                                            <span class="order-show__label">وضعیت اکانت</span>
                                            <span class="order-show__value">{{ $order->userAccount->status }}</span>
                                        </div>
                                        <a href="{{ route('admin.accounts.logs', $order->userAccount->id) }}" class="btn btn-primary btn-sm rounded-pill mt-2 w-100">
                                            <i class="bi bi-journal-text me-1"></i>
                                            مشاهده لاگ‌های اکانت
                                        </a>
                                    @else
                                        <p class="text-muted small mb-0">برای این سفارش اکانتی ثبت نشده است.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card order-show__note border-0 mt-3">
                        <div class="card-body p-4">
                            <div class="order-show__card-h mb-2">
                                <i class="bi bi-chat-quote"></i>
                                توضیحات کاربر
                            </div>
                            <p class="order-show__note-body mb-0">{{ $order->description ?: 'توضیحی ثبت نشده است.' }}</p>
                        </div>
                    </div>
                </div>

                @if($order->payment_method !== \App\Models\Order::PAYMENT_METHOD_ONLINE)
                    <div class="col-xl-4">
                        <div class="order-show__receipt-wrap h-100">
                            <div class="order-show__receipt-h">
                                <span><i class="bi bi-image me-1 text-secondary"></i> رسید پرداخت</span>
                                @unless($isPlaceholderReceipt)
                                    <a href="{{ $receiptUrl }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary rounded-pill" onclick="event.stopPropagation();">
                                        <i class="bi bi-box-arrow-up-left"></i>
                                        باز کردن در تب جدید
                                    </a>
                                @endunless
                            </div>

                            @if($isPlaceholderReceipt)
                                <div class="text-center text-muted small px-3 pb-4 pt-1">
                                    تصویر رسیدی بارگذاری نشده است.
                                </div>
                            @else
                                <div class="order-show__receipt-preview"
                                     role="button"
                                     tabindex="0"
                                     data-bs-toggle="modal"
                                     data-bs-target="#orderReceiptModal"
                                     aria-label="نمایش بزرگ رسید">
                                    <img src="{{ $receiptUrl }}" alt="رسید پرداخت" loading="lazy">
                                    <span class="order-show__receipt-hint">
                                        <i class="bi bi-zoom-in"></i>
                                        کلیک برای بزرگنمایی
                                    </span>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if($order->payment_method !== \App\Models\Order::PAYMENT_METHOD_ONLINE && !$isPlaceholderReceipt)
        @push('modals')
            <div class="modal fade" id="orderReceiptModal" tabindex="-1" aria-labelledby="orderReceiptModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl">
                    <div class="modal-content border-0 rounded-3">
                        <div class="modal-header border-0 py-2 px-3">
                            <h6 class="modal-title text-white small mb-0" id="orderReceiptModalLabel">رسید سفارش #{{ $order->id }}</h6>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="بستن"></button>
                        </div>
                        <div class="modal-body p-2 text-center">
                            <img src="{{ $receiptUrl }}" class="img-fluid rounded-2" alt="رسید پرداخت">
                        </div>
                    </div>
                </div>
            </div>
        @endpush
    @endif

    @push('scripts')
        <script>
            function changeOrderStatus(element) {
                const orderId = element.getAttribute('data-id');
                const newStatus = element.value;
                const spinner = document.getElementById(`spinner-${orderId}`);

                element.disabled = true;
                spinner.classList.remove('d-none');

                axios.post("{{ route('admin.orders.updateStatus') }}", {
                    id: orderId,
                    status: newStatus
                })
                    .then(response => {
                        Swal.fire({ icon: 'success', title: 'بروزرسانی شد', text: response.data.message, toast: true, position: 'top-end', showConfirmButton: false, timer: 2500 });
                        setTimeout(() => window.location.reload(), 700);
                    })
                    .catch(error => {
                        let msg = error.response?.data?.message || 'خطایی رخ داد';
                        Swal.fire({ icon: 'error', title: 'خطا', text: msg });
                    })
                    .finally(() => {
                        element.disabled = false;
                        spinner.classList.add('d-none');
                    });
            }
        </script>
    @endpush
@stop