@extends('admin.layouts.master')

@section('title', 'كشوف الحسابات - إدارة الحسابات المالية')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<style>
    .account-stat-card {
        border-radius: 16px; border: none;
        transition: all .25s ease; position: relative; overflow: hidden;
    }
    .account-stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 35px rgba(0,0,0,.12) !important; }
    .account-stat-card .stat-icon {
        width: 58px; height: 58px; border-radius: 14px;
        display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
    }
    .balance-positive { color: #198754; font-weight: 700; }
    .balance-negative { color: #dc3545; font-weight: 700; }
    .page-header-banner {
        background: linear-gradient(135deg, #1e3a5f 0%, #1a6b4a 100%);
        border-radius: 16px; color: white; padding: 28px 32px;
        margin-bottom: 28px; position: relative; overflow: hidden;
    }
    .page-header-banner::before {
        content: ''; position: absolute; top: -40px; left: -40px;
        width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.07);
    }
    .page-header-banner::after {
        content: ''; position: absolute; bottom: -60px; right: 60px;
        width: 250px; height: 250px; border-radius: 50%; background: rgba(255,255,255,.05);
    }
    .filter-card { border-radius: 12px; border: 2px solid #e9ecef; }
    .btn-statement {
        background: linear-gradient(135deg, #1e3a5f, #1a6b4a);
        color: #fff; border: none; border-radius: 8px;
        font-size: .78rem; padding: 5px 14px; transition: all .2s; white-space: nowrap;
    }
    .btn-statement:hover { color: #fff; opacity: .88; transform: translateY(-1px); }
    #accounts-table td, #accounts-table th { vertical-align: middle; }
    .account-type-badge { font-size: .72rem; border-radius: 20px; padding: 4px 12px; }
</style>
@endsection

@section('content')
<div class="pc-container"><div class="pc-content">

{{-- ترويسة الصفحة --}}
<div class="page-header-banner">
    <div class="d-flex align-items-center justify-content-between position-relative" style="z-index:1">
        <div>
            <nav aria-label="breadcrumb" class="mb-1">
                <ol class="breadcrumb breadcrumb-arrow mb-0" style="opacity:.7;font-size:.8rem;">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-white">الرئيسية</a></li>
                    <li class="breadcrumb-item active text-white">كشوف الحسابات</li>
                </ol>
            </nav>
            <h3 class="mb-1 text-white fw-bold">
                <i class="ti ti-file-analytics me-2"></i>كشوف الحسابات المالية
            </h3>
            <p class="mb-0 opacity-75 small">
                <i class="ti ti-info-circle me-1"></i>
                متابعة شاملة لجميع الحسابات النقدية والبنكية — ألواح أكريليك وبولي كاربونيت
            </p>
        </div>
        <div class="text-end d-none d-md-block" style="z-index:1">
            <div class="opacity-75 small mb-1">إجمالي أرصدة الحسابات</div>
            <h2 class="text-white fw-bold mb-0">
                {{ number_format($stats['total_balance'], 2) }}
                <span class="fs-5 opacity-75">ج.م</span>
            </h2>
            <small class="opacity-60">{{ $stats['active_accounts'] }} حساب نشط من {{ $stats['total_accounts'] }}</small>
        </div>
    </div>
</div>

{{-- بطاقات الإحصاء --}}
@php
    $typeColors = ['cash_box'=>'success','bank'=>'primary','instapay'=>'info','wallet'=>'warning'];
    $typeIcons  = ['cash_box'=>'ti-cash','bank'=>'ti-building-bank','instapay'=>'ti-bolt','wallet'=>'ti-wallet'];
    $accountsByType = $accounts->groupBy('account_type');
@endphp
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card account-stat-card shadow-sm h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-icon bg-primary-light text-primary"><i class="ti ti-wallet"></i></div>
                <div>
                    <div class="text-muted small">إجمالي الحسابات</div>
                    <h2 class="mb-0 fw-bold">{{ $stats['total_accounts'] }}</h2>
                    <span class="badge bg-success-light text-success small">{{ $stats['active_accounts'] }} نشط</span>
                </div>
            </div>
        </div>
    </div>
    @foreach($stats['types'] as $typeKey => $typeName)
    @php $cnt = $accountsByType->get($typeKey, collect())->count(); @endphp
    <div class="col-sm-6 col-xl-3">
        <div class="card account-stat-card shadow-sm h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-icon bg-{{ $typeColors[$typeKey]??'secondary' }}-light text-{{ $typeColors[$typeKey]??'secondary' }}">
                    <i class="ti {{ $typeIcons[$typeKey]??'ti-credit-card' }}"></i>
                </div>
                <div>
                    <div class="text-muted small">{{ $typeName }}</div>
                    <h2 class="mb-0 fw-bold">{{ $cnt }}</h2>
                    <span class="text-muted small">حساب</span>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- تصفية حسب النوع --}}
<div class="card filter-card mb-3">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap align-items-center gap-2">
            <span class="text-muted small fw-bold"><i class="ti ti-filter me-1"></i>تصفية حسب النوع:</span>
            <button class="btn btn-sm btn-outline-dark active" data-type-filter="">الكل</button>
            @foreach($stats['types'] as $typeKey => $typeName)
            <button class="btn btn-sm btn-outline-{{ $typeColors[$typeKey]??'secondary' }}" data-type-filter="{{ $typeKey }}">
                <i class="ti {{ $typeIcons[$typeKey]??'ti-credit-card' }} me-1"></i>{{ $typeName }}
            </button>
            @endforeach
        </div>
    </div>
</div>

{{-- جدول الحسابات --}}
<div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center py-3">
        <h5 class="mb-0 fw-bold">
            <i class="ti ti-layout-list me-2 text-primary"></i>قائمة جميع الحسابات المالية
        </h5>
        <span class="badge bg-primary px-3 py-2">{{ $accounts->count() }} حساب</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="accounts-table" class="table table-hover table-bordered mb-0 w-100">
                <thead class="table-dark">
                    <tr>
                        <th class="text-center" width="50">#</th>
                        <th>اسم الحساب</th>
                        <th class="text-center">النوع</th>
                        <th class="text-center">كود الحساب</th>
                        <th class="text-center">الرصيد الحالي</th>
                        <th class="text-center">الحالة</th>
                        <th class="text-center" width="140">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($accounts as $i => $account)
                    @php
                        $bal      = $account->current_balance;
                        $tKey     = $account->account_type;
                        $color    = $typeColors[$tKey] ?? 'secondary';
                        $icon     = $typeIcons[$tKey]  ?? 'ti-credit-card';
                        $tName    = \App\Models\PaymentAccount::TYPES[$tKey] ?? $tKey;
                    @endphp
                    <tr data-account-type="{{ $tKey }}">
                        <td class="text-center text-muted small">{{ $i + 1 }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="d-flex align-items-center justify-content-center bg-{{ $color }}-light text-{{ $color }}"
                                     style="width:40px;height:40px;border-radius:10px;font-size:18px;flex-shrink:0;">
                                    <i class="ti {{ $icon }}"></i>
                                </div>
                                <div>
                                    <div class="fw-bold">{{ $account->name_ar }}</div>
                                    @if($account->provider_name)
                                    <small class="text-muted">{{ $account->provider_name }}</small>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            <span class="badge account-type-badge bg-{{ $color }}-light text-{{ $color }}">
                                <i class="ti {{ $icon }} me-1"></i>{{ $tName }}
                            </span>
                        </td>
                        <td class="text-center"><code class="text-muted small">{{ $account->code ?: '—' }}</code></td>
                        <td class="text-center">
                            <span class="fw-bold fs-6 {{ $bal >= 0 ? 'balance-positive' : 'balance-negative' }}">
                                {{ number_format($bal, 2) }}
                            </span>
                            <small class="text-muted d-block" style="font-size:.7rem;">ج.م</small>
                        </td>
                        <td class="text-center">
                            @if($account->is_active)
                                <span class="badge bg-success-light text-success px-3">
                                    <i class="ti ti-check me-1"></i>نشط
                                </span>
                            @else
                                <span class="badge bg-danger-light text-danger px-3">
                                    <i class="ti ti-x me-1"></i>موقف
                                </span>
                            @endif
                        </td>
                        <td class="text-center">
                            <a href="{{ route('admin.account_reports.show', $account) }}" class="btn-statement">
                                <i class="ti ti-file-analytics me-1"></i>كشف الحساب
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="text-center text-muted py-5">
                        <i class="ti ti-inbox fs-1 d-block mb-2 opacity-40"></i>
                        لا توجد حسابات مسجلة حتى الآن
                    </td></tr>
                    @endforelse
                </tbody>
                @if($accounts->isNotEmpty())
                <tfoot class="table-light">
                    <tr>
                        <th colspan="4" class="text-end">الإجمالي الكلي</th>
                        <th class="text-center">
                            <span class="fw-bold fs-6 {{ $stats['total_balance'] >= 0 ? 'balance-positive' : 'balance-negative' }}">
                                {{ number_format($stats['total_balance'], 2) }} ج.م
                            </span>
                        </th>
                        <th colspan="2"></th>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>

</div></div>
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script>
$(function () {
    var dt = $('#accounts-table').DataTable({
        serverSide: false,
        processing: false,
        paging: true,
        pageLength: 15,
        lengthMenu: [[10, 15, 25, 50, -1],[10, 15, 25, 50, 'الكل']],
        order: [[1, 'asc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        columnDefs: [
            { targets: [0, 2, 3, 4, 5, 6], orderable: false },
        ],
        dom: "<'row align-items-center mb-3'<'col-md-4'l><'col-md-8'f>>rt<'row align-items-center mt-3'<'col-md-5'i><'col-md-7'p>>",
    });

    // تصفية حسب نوع الحساب
    $('[data-type-filter]').on('click', function () {
        $('[data-type-filter]').removeClass('active');
        $(this).addClass('active');
        var val = $(this).data('type-filter');
        $.fn.dataTable.ext.search = val ? [function(s, d, idx) {
            return $(dt.row(idx).node()).data('account-type') === val;
        }] : [];
        dt.draw();
    });
});
</script>
@endsection