@extends('user.layouts.app')

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/order-card/order-card.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/detail-card/detail-card.css') }}">
@endsection

@section('title')
    تفاصيل طلب الشحن
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-receipt width="24" height="24" />
            <div class="page-header--title">
                <h1>تفاصيل طلب الشحن</h1>
                <span class="page-header--splitter">|</span>
                <p dir="ltr">#{{ $creditRequest->id }}</p>
            </div>
            <div class="ms-auto detail-top-actions">
                <a href="{{ route('payments.creditRequest.index') }}" class="ui-button back-link">
                    <x-lucide-arrow-right width="20" height="20" />
                    <span>عودة للطلبات</span>
                </a>
            </div>
        </div>

        @php
            $styles = config('credit_request_filters.status_type_styles', []);
            $status = $creditRequest->status ?? 'pending';
            $style = $styles[$status] ?? null;
            $badgeIconParts = explode(' ', $style['iconClass'] ?? 'banknote');
            $badgeIconName = $badgeIconParts[0];
            $badgeIconExtraClass = implode(' ', array_slice($badgeIconParts, 1));
            $amountClass = $style['amountClass'] ?? '';
            $itemCardClass = $style['itemCardClass'] ?? '';

            $createdAt = optional($creditRequest->created_at)->format('Y/m/d H:i:s');

            // Build attachment name map from method attachments (active first, then all if available)
            $attachmentsCollection =
                optional($creditRequest->method)->activeAttachments ??
                (optional($creditRequest->method)->attachments ?? collect());
            $attachmentNames = [];
            try {
                foreach ($attachmentsCollection ?? [] as $att) {
                    $attachmentNames[$att->id] = $att->name;
                }
            } catch (\Throwable $e) {
            }

            // Normalize attachments array (support JSON string or array)
            $attachments = $creditRequest->attachment_values;
            if (is_string($attachments)) {
                $decoded = json_decode($attachments, true);
                if (json_last_error() === JSON_ERROR_NONE) {
                    $attachments = $decoded;
                }
            }
            if (!is_array($attachments)) {
                $attachments = (array) ($attachments ?? []);
            }
        @endphp

        <div class="detail-card-wrapper my-2">
            <div class="item-card {{ $itemCardClass }}">
                <div class="payment-type-indicator {{ $status }}"></div>
                <div class="card-body">
                    <div class="item-header">
                        <div>
                            <span class="item-id" dir="ltr">#{{ $creditRequest->id }}</span>
                            <div class="item-date">{{ $createdAt }}</div>
                        </div>
                        <div class="header-end">
                            <span class="detail-status-badge">
                                @svg('lucide-' . $badgeIconName, ['class' => $badgeIconExtraClass, 'width' => '16', 'height' => '16'])
                                <span
                                    class="value-amount {{ $amountClass }}">{{ config('credit_request_filters.status_types.' . $status . '.label', $status) }}</span>
                            </span>
                        </div>
                    </div>

                    <div class="detail-grid">
                        <div class="detail-item">
                            <span class="detail-label">المبلغ المطلوب:</span>
                            <div class="detail-value detail-value--amount">
                                {{ $creditRequest->amount }}
                                <small>{{ $creditRequest->currency->name ?? '' }}</small>
                            </div>
                        </div>
                        @if (!is_null($creditRequest->final_amount) && (float) $creditRequest->final_amount !== (float) $creditRequest->amount)
                            <div class="detail-item">
                                <span class="detail-label">المبلغ النهائي:</span>
                                <div class="detail-value detail-value--amount color-success">
                                    {{ $creditRequest->final_amount }}
                                    <small>{{ $creditRequest->currency->name ?? '' }}</small>
                                </div>
                            </div>
                        @endif

                        <div class="detail-item">
                            <span class="detail-label">طريقة الدفع:</span>
                            <div class="detail-value">{{ $creditRequest->method->name ?? '-' }}</div>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">العملة:</span>
                            <div class="detail-value">{{ $creditRequest->currency->name ?? '-' }}</div>
                        </div>

                        @if (!empty($creditRequest->operation_number))
                            <div class="detail-item detail-span-2">
                                <span class="detail-label">رقم العملية:</span>
                                <div class="detail-value detail-mono">{{ $creditRequest->operation_number }}</div>
                            </div>
                        @endif

                        @if (!empty($creditRequest->payment_id))
                            <div class="detail-item detail-span-2">
                                <span class="detail-label">معرف الدفع:</span>
                                <div class="detail-value detail-mono">{{ $creditRequest->payment_id }}</div>
                            </div>
                        @endif

                        @if (!empty($creditRequest->note) && trim($creditRequest->note) !== '_')
                            <div class="detail-item detail-span-2">
                                <span class="detail-label">ملاحظة:</span>
                                <div class="detail-value">{{ $creditRequest->note }}</div>
                            </div>
                        @endif

                        @if (!empty($creditRequest->image))
                            <div class="detail-item detail-span-2">
                                <span class="detail-label">صورة:</span>
                                <div class="detail-value attachment-file">
                                    <img src="{{ $creditRequest->image }}" alt="attachment image">
                                </div>
                            </div>
                        @endif
                    </div>

                    @if (!empty($attachments))
                        <div class="detail-divider"></div>
                        <div class="detail-section-title"><x-lucide-paperclip /><span>المرفقات</span></div>
                        <div class="detail-attachments-grid">
                            @foreach ($attachments as $key => $value)
                                @php
                                    $label = $attachmentNames[$key] ?? 'المرفق #' . $key;
                                    $isFile =
                                        is_string($value) && \Illuminate\Support\Str::startsWith($value, 'file__');
                                    $fileName = $isFile ? substr($value, 6) : null;
                                    $url = null;
                                    if ($isFile) {
                                        // If looks like absolute URL
                                        if (
                                            is_string($fileName) &&
                                            (\Illuminate\Support\Str::startsWith($fileName, 'http://') ||
                                                \Illuminate\Support\Str::startsWith($fileName, 'https://'))
                                        ) {
                                            $url = $fileName;
                                        } else {
                                            $url = route('media.credit-request.attachment', [
                                                'creditRequest' => $creditRequest->id,
                                                'field' => $key,
                                            ]);
                                        }
                                    }
                                @endphp
                                <div class="detail-attachment-card">
                                    <span class="att-label">{{ $label }}</span>
                                    @if ($isFile && $url)
                                        <a class="att-thumb" href="{{ $url }}" target="_blank" rel="noopener">
                                            <img src="{{ $url }}" alt="{{ $label }}">
                                        </a>
                                    @else
                                        <div class="att-value">
                                            {{ is_array($value) ? json_encode($value, JSON_UNESCAPED_UNICODE) : (string) $value }}
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif

                    @php
                        $createdTs = optional($creditRequest->created_at)->timestamp ?? now()->timestamp;
                        $expiresAtTs = $createdTs + 15 * 60;
                        $walletAddress = $creditRequest->wallet_address ?? ($walletAddress ?? null);
                        $walletNetwork = $creditRequest->wallet_network ?? ($walletNetwork ?? null);
                        $walletTag = $creditRequest->wallet_tag ?? ($walletTag ?? null);
                        $payAmount = (float) ($creditRequest->final_amount ?: $creditRequest->amount);
                        $payCurrency = $creditRequest->currency->name ?? 'USDT';
                    @endphp

                    <div class="detail-wallet-card">
                        <div class="detail-section-title"><x-lucide-wallet width="20" height="20" /><span>معلومات
                                المحفظة والدفع</span></div>
                        <div class="detail-wallet-grid">
                            <div>
                                <span class="detail-label">المبلغ المطلوب تحويله:</span>
                                <div class="detail-value detail-mono">{{ number_format($payAmount, 6, '.', ',') }}
                                    <small>{{ $payCurrency }}</small>
                                </div>
                            </div>
                            <div>
                                <span class="detail-label">الشبكة:</span>
                                <div class="detail-value">{{ $walletNetwork ?? '—' }}</div>
                            </div>
                            <div class="detail-span-2">
                                <span class="detail-label">عنوان المحفظة:</span>
                                <div class="detail-value detail-mono">{{ $walletAddress ?? '—' }}</div>
                            </div>
                            @if (!empty($walletTag))
                                <div class="detail-span-2">
                                    <span class="detail-label">Memo/Tag إن وجد:</span>
                                    <div class="detail-value detail-mono">{{ $walletTag }}</div>
                                </div>
                            @endif
                        </div>

                        <div class="detail-divider"></div>
                        <div class="detail-section-title"><x-lucide-hourglass width="20" height="20" /><span>الوقت
                                المتبقي للدفع</span>
                        </div>
                        <div class="detail-countdown" id="countdown"><x-lucide-clock width="16"
                                height="16" /><span><span id="cd-min">15</span>:<span id="cd-sec">00</span></span>
                        </div>
                        <div class="detail-refresh-note mt-2">سيتم تحديث الصفحة تلقائياً كل 40 ثانية للتحقق من وصول الدفعة.
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            const expiresAtTs = {{ $expiresAtTs }} * 1000;

            function updateCountdown() {
                const now = Date.now();
                const diff = Math.max(0, Math.floor((expiresAtTs - now) / 1000));
                const m = Math.floor(diff / 60);
                const s = diff % 60;
                const mEl = document.getElementById('cd-min');
                const sEl = document.getElementById('cd-sec');
                if (mEl && sEl) {
                    mEl.textContent = String(m).padStart(2, '0');
                    sEl.textContent = String(s).padStart(2, '0');
                }
            }
            updateCountdown();
            setInterval(updateCountdown, 1000);
            setInterval(function() {
                location.reload();
            }, 40000);
        })();
    </script>
@endpush