@extends('layouts.admin.master')
@section('tab-name', 'تاریخچه تراکنش‌های اکانت')

@section('content')
    <div class="body d-flex py-3">
        <div class="container-fluid">
            {{-- هدر صفحه و دکمه بازگشت --}}
            <div class="page-header d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h3 class="fw-bolder mb-1">تاریخچه تراکنش‌ها</h3>
                    <span class="text-muted font-13">
                        اکانت: <strong class="text-primary">{{ $account->account_identifier }}</strong> |
                        سرویس: <strong>{{ $account->service->title }}</strong> |
                        کاربر: <strong>{{ $account->user->name }}</strong>
                    </span>
                </div>
                <a href="{{ route('admin.accounts.index') }}" class="btn btn-outline-secondary main-radius">
                    <i class="bi bi-arrow-right me-1"></i> بازگشت به لیست اکانت‌ها
                </a>
            </div>

            {{-- کارت خلاصه وضعیت (اختیاری ولی زیبا) --}}
            <div class="row mb-3">
                <div class="col-md-3 col-sm-6">
                    <div class="card p-3 border-custom bg-light main-radius">
                        <small class="text-muted">موجودی حساب</small>
                        <h4 class="fw-bold mt-2 text-dark">{{ number_format($account->wallet) }} <small class="font-12">{{ config("setting.currencies.{$account->wallet_type}.name") }}</small></h4>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="card p-3 border-custom bg-light main-radius">
                        <small class="text-muted">تعداد کل تراکنش‌ها</small>
                        <h4 class="fw-bold mt-2 text-dark">{{ $logs->total() }}</h4>
                    </div>
                </div>
            </div>

            {{-- جدول لاگ‌ها --}}
            <div class="card-block row">
                <div class="col-sm-12">
                    <div class="table-responsive">
                        <table class="table align-middle border-custom mb-0 table-hover">
                            <thead class="text-center text-light bg-secondary">
                            <tr>
                                <th class="fw-bolder">#</th>
                                <th class="fw-bolder">نوع تراکنش</th>
                                <th class="fw-bolder">مبلغ (تراکنش)</th>
                                <th class="fw-bolder">نرخ ارز</th>
                                <th class="fw-bolder">موجودی پس از تراکنش</th>
                                <th class="fw-bolder">شماره سفارش</th>
                                <th class="fw-bolder">جزئیات</th>
                                <th class="fw-bolder">تاریخ</th>
                            </tr>
                            </thead>
                            <tbody class="text-center">
                            @forelse($logs as $log)
                                @php
                                    $details = $log->details;
                                    $isBuy = $log->action === 'buy';
                                @endphp
                                <tr>
                                    <td>{{ $loop->iteration + ($logs->currentPage() - 1) * $logs->perPage() }}</td>

                                    {{-- نوع تراکنش --}}
                                    <td>
                                        <span class="badge {{ $isBuy ? 'bg-success-light text-success' : 'bg-danger-light text-warning' }} px-3 py-2 main-radius">
{{--                                            <i class="bi {{ $isBuy ? 'bi-arrow-down-left' : 'bi-arrow-up-right' }} me-1"></i>--}}
                                            {{ $isBuy ? 'خرید' : 'شارژ' }}
                                        </span>
                                    </td>

                                    {{-- مبلغ تراکنش --}}
                                    <td class="fw-bold {{ $isBuy ? 'text-success' : 'text-danger' }}">
{{--                                        {{ $isBuy ? '+' : '-' }} --}}
                                        {{ number_format($details['input_amount'] ?? 0) }}
                                        <small class="font-10 text-muted">{{ $log->getCurrencyType() }}</small>
                                    </td>

                                    {{-- نرخ ارز --}}
                                    <td>
                                        {{ number_format($details['exchange_rate'] ?? 0) }} <small class="text-muted">تومان</small>
                                    </td>

                                    {{-- موجودی لحظه‌ای --}}
                                    <td class="fw-bolder text-dark bg-light">
                                        {{ number_format($details['total_wallet'] ?? 0) }}
                                    </td>

                                    {{-- لینک به سفارش --}}
                                    <td>
                                        @if($log->order_id)
                                            <a href="{{ route('admin.orders.show', $log->order_id) }}" class="text-decoration-none font-13" target="_blank">
                                                #{{ $log->order_id }}
                                                <i class="bi bi-box-arrow-up-right font-10 ms-1"></i>
                                            </a>
                                        @else
                                            <span class="text-muted">---</span>
                                        @endif
                                    </td>

                                    {{-- دکمه جزئیات بیشتر --}}
                                    <td>
                                        <button type="button" class="btn btn-sm btn-light border"
                                                onclick='showLogDetails(@json($details), "{{ $log->description }}")'>
                                            <i class="bi bi-info-circle"></i>
                                        </button>
                                    </td>

                                    {{-- تاریخ --}}
                                    <td>
                                        <span dir="ltr" class="font-12">{{ $log->getJalaliCreatedAtAttribute() }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4 text-muted">
                                        <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                        هیچ تراکنشی برای این اکانت ثبت نشده است.
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 d-flex justify-content-center">{{ $logs->links() }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- مودال نمایش جزئیات جیسون --}}
    <div class="modal fade" id="logDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-light py-2">
                    <h6 class="modal-title fw-bold">جزئیات فنی تراکنش</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="list-group list-group-flush" id="log-modal-content">
                        {{-- محتوا توسط JS پر می‌شود --}}
                    </div>
                    <div class="mt-3 p-2 bg-light rounded border border-dashed">
                        <small class="d-block text-muted fw-bold mb-1">توضیحات:</small>
                        <p class="mb-0 font-13" id="log-modal-desc"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            function showLogDetails(details, description) {
                const myModal = new bootstrap.Modal(document.getElementById('logDetailModal'));
                const contentDiv = document.getElementById('log-modal-content');
                const descP = document.getElementById('log-modal-desc');

                // دیکشنری برای ترجمه کلیدها (اختیاری)
                const labels = {
                    'benefit_price': 'سود تراکنش',
                    'management_type': 'نوع مدیریت',
                    'payment_method': 'روش پرداخت',
                    'status': 'وضعیت سفارش',
                    'order_type': 'نوع سفارش',
                    'wallet_type': 'نوع ارز کیف پول'
                };

                let html = '';
                // فقط آیتم‌های مهم را نمایش بده
                const keysToShow = ['benefit_price', 'management_type', 'payment_method', 'status', 'order_type'];

                keysToShow.forEach(key => {
                    if(details[key] !== undefined) {
                        html += `
                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                <span class="text-muted font-13">${labels[key] || key}</span>
                                <span class="fw-bold font-13 text-dark" dir="ltr">${details[key]}</span>
                            </div>
                        `;
                    }
                });

                contentDiv.innerHTML = html;
                descP.innerText = description || 'بدون توضیحات';

                myModal.show();
            }
        </script>
    @endpush
@endsection