@extends('admin.layouts.master')

@section('css')
    <style>
        .card-status-badge {
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            text-align: center;
            display: inline-block;
        }

        .status-active {
            background-color: #28a745;
            color: #fff;
        }

        .status-frozen {
            background-color: #ffc107;
            color: #000;
        }

        .status-terminated {
            background-color: #dc3545;
            color: #fff;
        }

        .relation-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            transition: box-shadow 0.3s ease;
        }

        .relation-card:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .detail-row {
            border-bottom: 1px solid #f0f0f0;
            padding: 8px 0;
        }

        .detail-row:last-child {
            border-bottom: none;
        }

        #externalTransactionsTable th,
        #externalTransactionsTable td {
            font-size: 12px;
            padding: 6px 8px;
        }

        .external-transactions-loading {
            text-align: center;
            padding: 40px;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="my-auto mb-0 content-title">تفاصيل البطاقة: {{ $card->name }}</h4>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a href="{{ route('admin.virtual-cards.index') }}" class="btn btn-secondary">
                <x-lucide-arrow-right width="20" height="20" /> العودة للقائمة
            </a>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <!-- معلومات البطاقة الأساسية -->
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0 card-title">
                        <x-lucide-credit-card class="text-primary" width="20" height="20" />
                        معلومات البطاقة
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detail-row">
                                <strong>ID:</strong>
                                <span class="badge badge-primary">{{ $card->id }}</span>
                            </div>
                            <div class="detail-row">
                                <strong>UUID:</strong>
                                <code>{{ $card->uuid }}</code>
                            </div>
                            <div class="detail-row">
                                <strong>اسم البطاقة:</strong>
                                <span>{{ $card->name }}</span>
                            </div>
                            <div class="detail-row">
                                <strong>الحالة:</strong>
                                @php
                                    $statusClasses = [
                                        'active' => 'status-active',
                                        'frozen' => 'status-frozen',
                                        'terminated' => 'status-terminated',
                                    ];
                                    $statusLabels = [
                                        'active' => 'نشط',
                                        'frozen' => 'مجمد',
                                        'terminated' => 'ملغي',
                                    ];
                                @endphp
                                <span class="card-status-badge {{ $statusClasses[$card->status] ?? '' }}">
                                    {{ $statusLabels[$card->status] ?? $card->status }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-row">
                                <strong>الرصيد:</strong>
                                <span class="text-success font-weight-bold">
                                    {{ number_format($card->balance, 2) }} USD
                                </span>
                            </div>
                            <div class="detail-row">
                                <strong>External ID:</strong>
                                <code>{{ $card->external_id }}</code>
                            </div>
                            <div class="detail-row">
                                <strong>تاريخ الإنشاء:</strong>
                                <span class="badge badge-dark">{{ $card->created_at->format('Y/m/d H:i:s') }}</span>
                            </div>
                            <div class="detail-row">
                                <strong>آخر تحديث:</strong>
                                <span class="badge badge-dark">{{ $card->updated_at->format('Y/m/d H:i:s') }}</span>
                            </div>
                        </div>
                    </div>

                    @if ($card->card_data)
                        <div class="mt-3">
                            <strong>بيانات إضافية:</strong>
                            <div class="mt-2 p-3" style="background-color: #f8f9fa; border-radius: 4px; font-family: monospace;">
                                <pre style="margin: 0;">{{ json_encode($card->card_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- سجل العمليات -->
            <div class="mt-4 card">
                <div class="card-header">
                    <h5 class="mb-0 card-title">
                        <x-lucide-history class="text-info" width="20" height="20" />
                        سجل العمليات ({{ $card->operations->count() }})
                    </h5>
                </div>
                <div class="card-body">
                    @if ($card->operations->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-sm">
                                <thead class="thead-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>نوع العملية</th>
                                        <th>المبلغ (USD)</th>
                                        <th>الحالة</th>
                                        <th>المستخدم</th>
                                        <th>الطلب</th>
                                        <th>ملاحظات</th>
                                        <th>التاريخ</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($card->operations as $op)
                                        @php
                                            $typeLabels = [
                                                'create' => 'إنشاء',
                                                'recharge' => 'شحن',
                                                'freeze' => 'تجميد',
                                                'unfreeze' => 'إلغاء تجميد',
                                                'terminate' => 'إنهاء',
                                            ];
                                            $typeClasses = [
                                                'create' => 'primary',
                                                'recharge' => 'success',
                                                'freeze' => 'warning',
                                                'unfreeze' => 'info',
                                                'terminate' => 'danger',
                                            ];
                                            $opStatusLabels = [
                                                'pending' => 'قيد الانتظار',
                                                'completed' => 'مكتمل',
                                                'failed' => 'فشل',
                                            ];
                                            $opStatusClasses = [
                                                'pending' => 'warning',
                                                'completed' => 'success',
                                                'failed' => 'danger',
                                            ];
                                        @endphp
                                        <tr>
                                            <td>{{ $op->id }}</td>
                                            <td>
                                                <span class="badge badge-{{ $typeClasses[$op->operation_type] ?? 'secondary' }}">
                                                    {{ $typeLabels[$op->operation_type] ?? $op->operation_type }}
                                                </span>
                                            </td>
                                            <td>{{ $op->amount_usd ? number_format($op->amount_usd, 2) : '-' }}</td>
                                            <td>
                                                <span class="badge badge-{{ $opStatusClasses[$op->status] ?? 'secondary' }}">
                                                    {{ $opStatusLabels[$op->status] ?? $op->status }}
                                                </span>
                                            </td>
                                            <td>{{ $op->user?->name ?? '-' }}</td>
                                            <td>
                                                @if ($op->order_id)
                                                    <span class="badge badge-info">#{{ $op->order_id }}</span>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td style="max-width: 150px; word-wrap: break-word;">{{ $op->notes ?? '-' }}</td>
                                            <td style="font-size: 11px;">{{ $op->created_at->format('Y/m/d H:i') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center alert alert-info">
                            <x-lucide-info width="20" height="20" /> لا توجد عمليات مسجلة لهذه البطاقة
                        </div>
                    @endif
                </div>
            </div>

            <!-- العمليات من الموقع الخارجي -->
            <div class="mt-4 card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 card-title">
                        <x-lucide-arrow-left-right class="text-success" width="20" height="20" />
                        العمليات من الموقع الخارجي
                    </h5>
                    <button type="button" class="btn btn-success btn-sm" id="fetchExternalTransactionsBtn">
                        <x-lucide-refresh-cw width="20" height="20" /> جلب العمليات
                    </button>
                </div>
                <div class="card-body">
                    <div id="externalTransactionsLoading" class="external-transactions-loading" style="display: none;">
                        <x-lucide-loader-2 class="animate-spin" width="32" height="32" />
                        <p class="mt-2">جاري جلب العمليات من الموقع الخارجي...</p>
                    </div>
                    <div id="externalTransactionsError" class="alert alert-danger" style="display: none;"></div>
                    <div id="externalTransactionsEmpty" class="text-center alert alert-info" style="display: none;">
                        <x-lucide-info width="20" height="20" /> لا توجد عمليات مسجلة في الموقع الخارجي
                    </div>
                    <div id="externalTransactionsContainer" style="display: none;">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-sm" id="externalTransactionsTable">
                                <thead class="thead-light">
                                    <tr>
                                        <th>ID</th>
                                        <th>النوع</th>
                                        <th>المبلغ</th>
                                        <th>الحالة</th>
                                        <th>الوصف</th>
                                        <th>التاريخ</th>
                                    </tr>
                                </thead>
                                <tbody id="externalTransactionsBody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div id="externalTransactionsInitial" class="text-center text-muted py-4">
                        <x-lucide-cloud-download class="mb-2" width="32" height="32" />
                        <p>اضغط على زر "جلب العمليات" لعرض العمليات من الموقع الخارجي</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- المعلومات الجانبية -->
        <div class="col-xl-4">
            <!-- معلومات المستخدم -->
            @if ($card->user)
                <div class="card relation-card">
                    <div class="text-white card-header bg-primary">
                        <h6 class="mb-0 card-title">
                            <x-lucide-user width="20" height="20" />
                            معلومات المستخدم
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="detail-row">
                            <strong>الاسم:</strong>
                            <span>{{ $card->user->name }}</span>
                        </div>
                        <div class="detail-row">
                            <strong>البريد الإلكتروني:</strong>
                            <span>{{ $card->user->email ?? 'غير متوفر' }}</span>
                        </div>
                        <div class="detail-row">
                            <strong>الهاتف:</strong>
                            <span>{{ $card->user->mobile ?? 'غير متوفر' }}</span>
                        </div>
                        <div class="detail-row">
                            <strong>الرصيد الحالي:</strong>
                            <span class="text-success font-weight-bold">
                                {{ number_format($card->user->balance, 2) }}
                            </span>
                        </div>
                    </div>
                </div>
            @endif

            <!-- روابط سريعة -->
            <div class="mt-4 card">
                <div class="card-header">
                    <h6 class="mb-0 card-title">
                        <x-lucide-link width="20" height="20" />
                        روابط سريعة
                    </h6>
                </div>
                <div class="card-body">
                    <a href="{{ route('admin.virtual-cards.index') }}" class="btn btn-secondary btn-block mb-2">
                        <x-lucide-list width="20" height="20" /> جميع البطاقات
                    </a>
                    <a href="{{ route('admin.virtual-cards.operations') }}" class="btn btn-info btn-block mb-2">
                        <x-lucide-history width="20" height="20" /> جميع العمليات
                    </a>
                    <a href="{{ route('admin.virtual-cards.dashboard') }}" class="btn btn-primary btn-block">
                        <x-lucide-bar-chart-3 width="20" height="20" /> لوحة التحكم
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fetchBtn = document.getElementById('fetchExternalTransactionsBtn');
            const loadingEl = document.getElementById('externalTransactionsLoading');
            const errorEl = document.getElementById('externalTransactionsError');
            const emptyEl = document.getElementById('externalTransactionsEmpty');
            const containerEl = document.getElementById('externalTransactionsContainer');
            const initialEl = document.getElementById('externalTransactionsInitial');
            const tbodyEl = document.getElementById('externalTransactionsBody');

            fetchBtn.addEventListener('click', function() {
                // Hide all states, show loading
                initialEl.style.display = 'none';
                errorEl.style.display = 'none';
                emptyEl.style.display = 'none';
                containerEl.style.display = 'none';
                loadingEl.style.display = 'block';
                fetchBtn.disabled = true;

                fetch("{{ route('admin.virtual-cards.external-transactions', $card->id) }}", {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        loadingEl.style.display = 'none';
                        fetchBtn.disabled = false;

                        if (!data.success) {
                            errorEl.textContent = data.message || 'حدث خطأ أثناء جلب العمليات';
                            errorEl.style.display = 'block';
                            return;
                        }

                        const transactions = data.transactions || [];
                        if (transactions.length === 0) {
                            emptyEl.style.display = 'block';
                            return;
                        }

                        // Populate table
                        tbodyEl.innerHTML = '';
                        transactions.forEach(function(tx) {
                            const row = document.createElement('tr');

                            const typeLabels = {
                                'credit': '<span class="badge badge-success">إيداع</span>',
                                'debit': '<span class="badge badge-danger">سحب</span>',
                                'authorization_declined': '<span class="badge badge-warning">مرفوض</span>',
                                'purchase': '<span class="badge badge-info">شراء</span>',
                                'refund': '<span class="badge badge-primary">استرداد</span>',
                                'fee': '<span class="badge badge-secondary">رسوم</span>'
                            };

                            const statusLabels = {
                                'success': '<span class="badge badge-success">ناجح</span>',
                                'pending': '<span class="badge badge-warning">قيد الانتظار</span>',
                                'failed': '<span class="badge badge-danger">فشل</span>',
                                'reversed': '<span class="badge badge-info">مسترد</span>'
                            };

                            const txId = tx.id || '-';
                            const txType = typeLabels[tx.type_description] ||
                                '<span class="badge badge-secondary">' + (tx.type_description || '-') + '</span>';
                            const txAmount = tx.amount ? 'USD ' + parseFloat(tx.amount).toFixed(2) : '-';
                            const txStatus = statusLabels[tx.status] ||
                                '<span class="badge badge-secondary">' + (tx.status || '-') + '</span>';
                            const txDesc = tx.narrative || '-';

                            // Format date
                            let txDate = '-';
                            if (tx.created_at) {
                                const date = new Date(tx.created_at);
                                txDate = date.getFullYear() + '/' +
                                    String(date.getMonth() + 1).padStart(2, '0') + '/' +
                                    String(date.getDate()).padStart(2, '0') + ' ' +
                                    String(date.getHours()).padStart(2, '0') + ':' +
                                    String(date.getMinutes()).padStart(2, '0') + ':' +
                                    String(date.getSeconds()).padStart(2, '0');
                            }

                            row.innerHTML = '<td>' + txId + '</td>' +
                                '<td>' + txType + '</td>' +
                                '<td>' + txAmount + '</td>' +
                                '<td>' + txStatus + '</td>' +
                                '<td style="max-width: 200px; word-wrap: break-word;">' + txDesc + '</td>' +
                                '<td style="font-size: 11px;">' + txDate + '</td>';

                            tbodyEl.appendChild(row);
                        });

                        containerEl.style.display = 'block';
                    })
                    .catch(function(error) {
                        loadingEl.style.display = 'none';
                        fetchBtn.disabled = false;
                        errorEl.textContent = 'حدث خطأ في الاتصال: ' + error.message;
                        errorEl.style.display = 'block';
                    });
            });
        });
    </script>
@endsection