@extends('layouts.admin.master')
@section('tab-name','مدیریت اکانت‌های کاربری')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="body d-flex py-3">
        <div class="container-fluid">
            <div class="page-header">
                <div class="card-header py-3 no-bg bg-transparent border-0 px-0 flex-wrap">
                    <h3 class="fw-bolder ms-1">لیست اکانت‌های کاربران</h3>
                    <div class="d-flex align-items-center">
                        @include('admin.search-modal.search', ['route' => route('admin.accounts.index'), 'hasStatus' => true])
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="card-block row">
                <div class="col-sm-12">
                    <div class="table-responsive d-flex align-items-center">
                        <table id="accountTable" class="table align-middle border-custom mb-0">
                            <thead class="text-center text-light">
                            <tr>
                                <th class="fw-bolder">#</th>
                                <th class="fw-bolder">کاربر</th>
                                <th class="fw-bolder">سرویس / شناسه</th>
                                <th class="fw-bolder">موجودی (Wallet)</th>
                                <th class="fw-bolder">وضعیت</th>
                                <th class="fw-bolder">تاریخ ایجاد</th>
                                <th class="fw-bolder">عملیات</th>
                            </tr>
                            </thead>
                            <tbody class="text-center text-light">
                            @forelse($accounts as $account)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <span>{{ $account->user->name ?? 'کاربر حذف شده' }}</span>
                                            <small class="text-muted">{{ $account->user->mobile }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <span class="fw-bold">{{ $account->service->title ?? '---' }}</span>
                                            <small class="text-muted font-11" dir="ltr">{{ $account->account_identifier }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-success fw-bold">{{ number_format($account->wallet) }}</span>
                                        <span class="font-10 text-muted">{{ $account->getCurrencyType()}}</span>
                                    </td>
                                    <td>
                                        {{-- سلکت باکس تغییر وضعیت --}}
                                        <select class="form-select form-select-sm account-status-select border-0 shadow-sm"
                                                data-id="{{ $account->id }}"
                                                onchange="changeAccountStatus(this)">
                                            <option value="active" class="text-success" {{ $account->status == \App\Models\UserAccount::STATUS_ACTIVE ? 'selected' : '' }}>فعال</option>
                                            <option value="pending" class="text-warning" {{ $account->status == \App\Models\UserAccount::STATUS_PENDING ? 'selected' : '' }}>در انتظار</option>
                                            <option value="expired" class="text-muted" {{ $account->status == \App\Models\UserAccount::STATUS_EXPIRED ? 'selected' : '' }}>منقضی شده</option>
                                            <option value="rejected" class="text-danger" {{ $account->status == \App\Models\UserAccount::STATUS_REJECTED ? 'selected' : '' }}>رد شده</option>
                                        </select>
                                        <div class="spinner-border spinner-border-sm text-primary d-none mt-1" id="spinner-{{ $account->id }}"></div>
                                    </td>
                                    <td><span dir="rtl">{{ $account->getJalaliCreatedAtAttribute() }}</span></td>
                                    <td>
                                        <div class="d-flex justify-content-center gap-2">
                                            {{-- دکمه لاگ‌ها --}}
                                            <a href="{{ route('admin.accounts.logs', $account->id) }}" class="btn-action ice-btn-warning" title="مشاهده لاگ‌ها">
                                                <i class="bi bi-journal-text fs-5 text-warning"></i>
                                            </a>
                                            {{-- دکمه جزئیات --}}
                                            <button type="button" class="btn-action ice-btn-green"
                                                    onclick="showAccountDetails('{{ route('admin.accounts.show', $account->id) }}')" title="جزئیات">
                                                <i class="bi bi-eye fs-5 text-primary"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="7" class="py-5 text-muted">هیچ اکانت کاربری یافت نشد.</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 d-flex justify-content-center">{{ $accounts->links() }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- مودال ساده و زیبای جزئیات --}}
    <div class="modal fade" id="accountDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-white border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold text-dark">جزئیات اکانت</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body position-relative pt-2">
                    <div id="modal-loader" class="position-absolute top-0 start-0 w-100 h-100 bg-white d-flex justify-content-center align-items-center d-none" style="z-index: 10;">
                        <div class="spinner-border text-primary"></div>
                    </div>

                    <div id="modal-content-area">
                    </div>
                </div>
                {{-- فوتر مودال برای دکمه لاگ --}}
                <div class="modal-footer border-top-0 pt-0 pb-3 justify-content-center">
                    <a href="#" id="modal-log-btn" class="btn btn-outline-primary w-100 main-radius">
                        <i class="bi bi-journal-richtext me-2"></i> مشاهده تاریخچه اکانت
                    </a>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            // تغییر وضعیت
            function changeAccountStatus(element) {
                const accountId = element.getAttribute('data-id');
                const newStatus = element.value;
                const spinner = document.getElementById(`spinner-${accountId}`);

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

                axios.post("{{ route('admin.accounts.updateStatus') }}", {
                    id: accountId,
                    status: newStatus
                })
                    .then(response => {
                        Swal.fire({
                            icon: 'success',
                            title: 'انجام شد',
                            text: response.data.message,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                        });

                        // تغییر رنگ بر اساس وضعیت
                        element.className = 'form-select form-select-sm account-status-select border-0 shadow-sm';
                        if(newStatus === 'active') element.classList.add('text-success');
                        else if(newStatus === 'rejected') element.classList.add('text-danger');
                        else if(newStatus === 'expired') element.classList.add('text-muted');
                        else element.classList.add('text-warning');
                    })
                    .catch(error => {
                        let msg = error.response?.data?.message || 'خطایی رخ داد';
                        Swal.fire({ icon: 'error', title: 'خطا', text: msg });
                    })
                    .finally(() => {
                        element.disabled = false;
                        spinner.classList.add('d-none');
                    });
            }

            // نمایش جزئیات
            function showAccountDetails(url) {
                const myModal = new bootstrap.Modal(document.getElementById('accountDetailsModal'));
                const contentArea = document.getElementById('modal-content-area');
                const logBtn = document.getElementById('modal-log-btn');

                myModal.show();
                document.getElementById('modal-loader').classList.remove('d-none');

                axios.get(url).then(response => {
                    const d = response.data.data;

                    // تنظیم لینک دکمه لاگ در مودال
                    logBtn.href = d.logs_url;


                    //                             <span class="text-muted font-12" dir="ltr">${d.account_identifier}</span>

                    contentArea.innerHTML = `
                        <div class="text-center mb-4">
                            <div class="avatar-circle bg-light d-inline-flex align-items-center justify-content-center mb-2" style="width: 60px; height: 60px; border-radius: 50%;">
                                <i class="bi bi-wallet2 fs-2 text-primary"></i>
                            </div>
                            <h5 class="fw-bold mb-0">${d.service_title}</h5>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="p-3 rounded-3 bg-light border border-custom d-flex justify-content-between align-items-center">
                                    <div>
                                        <small class="text-muted d-block">موجودی فعلی</small>
                                        <span class="fw-bolder fs-5 text-dark">${d.wallet}</span>
                                        <span class="font-12 text-secondary ms-1">${d.currency_name}</span>
                                    </div>
                                    <i class="bi bi-cash-stack fs-3 text-success opacity-50"></i>
                                </div>
                            </div>

                            <div class="col-6">
                                <div class="p-2">
                                    <label class="font-11 text-muted mb-1">مالک حساب</label>
                                    <p class="mb-0 fw-bold font-14 text-dark">${d.user_name}</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="p-2">
                                    <label class="font-11 text-muted mb-1">شماره تماس</label>
                                    <p class="mb-0 fw-bold font-14 text-dark">${d.user_mobile}</p>
                                </div>
                            </div>

                            <hr class="my-1 text-muted opacity-25">

                            <div class="col-12">
                                <label class="font-12 fw-bold text-muted mb-2">تغییر وضعیت حساب</label>
                                <select class="form-select border shadow-sm" onchange="changeAccountStatus(this)" data-id="${d.id}">
                                    <option value="active" ${d.status === 'active' ? 'selected' : ''}>✅ فعال</option>
                                    <option value="pending" ${d.status === 'pending' ? 'selected' : ''}>⏳ در انتظار</option>
                                    <option value="expired" ${d.status === 'expired' ? 'selected' : ''}>⛔ منقضی شده</option>
                                    <option value="rejected" ${d.status === 'rejected' ? 'selected' : ''}>❌ رد شده</option>
                                </select>
                            </div>

                            <div class="col-12 text-center mt-2">
                                <small class="text-muted font-11">تاریخ ایجاد: ${d.created_at}</small>
                            </div>
                        </div>
                    `;
                }).finally(() => {
                    document.getElementById('modal-loader').classList.add('d-none');
                });
            }
        </script>
    @endpush
@stop