@extends('layouts.app')
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush
@section('content')
<div class="container mt-3" dir="rtl">
<h2 class="mb-4">📊 ملخص محفظة الشركة</h2>
{{-- فلتر المدة --}}
<div class="card mb-3 shadow-sm">
    <div class="card-body">
        <form method="GET" class="row align-items-end g-3">
            <div class="col-md-3">
                <label>مدة العرض</label>
                <select name="duration" class="form-control" onchange="this.form.submit()">
                    <option value="all" {{ $duration=='all'?'selected':'' }}>الكل</option>
                    <option value="today" {{ $duration=='today'?'selected':'' }}>اليوم</option>
                    <option value="week" {{ $duration=='week'?'selected':'' }}>7 أيام</option>
                    <option value="month" {{ $duration=='month'?'selected':'' }}>شهر</option>
                </select>
            </div>
        </form>
    </div>
</div>
{{-- الكروت الإحصائية --}}
<div class="row">
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-primary h-100">
            <div class="card-body">
                <h5>رصيد المحفظة الفعلي</h5>
                <p>{{ number_format($walletBalance ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-success h-100">
            <div class="card-body">
                <h5>العمولات</h5>
                <p>{{ number_format($totals['commissions'] ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-warning h-100">
            <div class="card-body">
                <h5>الإيداعات</h5>
                <p>{{ number_format($totals['deposits'] ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-danger h-100">
            <div class="card-body">
                <h5>السحب</h5>
                <p>{{ number_format($totals['withdraws'] ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-secondary h-100">
            <div class="card-body">
                <h5>المرتجعات</h5>
                <p>{{ number_format($totals['refunds'] ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-info h-100">
            <div class="card-body">
                <h5>صافي التدفقات</h5>
                {{-- تم حذف كتلة @php المعاد صياغتها خطأ هنا والاعتماد على حسابات الـ Controller الموثوقة --}}
                <p>{{ number_format($netFlow ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
    {{-- ويدجت الديون - منفصل تماماً ومستقل عن العمليات الحسابية لبقية الكروت --}}
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-dark h-100" style="cursor:pointer;" onclick="openDebtsPopup()">
            <div class="card-body">
                <h5>ديون المضيفين المستحقة </h5>
                <p>{{ number_format($totalDebts ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-white h-100" style="background-color: #6f42c1;">
            <div class="card-body">
                <h5>عمولات غير محصلة (مدفوعة نقداً)</h5>
                <p>{{ number_format($pendingCashDeductions ?? 0, 2) }} د.ل</p>
            </div>
        </div>
    </div>
</div>
{{-- Popup تفاصيل الديون --}}
<div id="debtsPopup" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000099;z-index:9999;justify-content:center;align-items:center;">
    <div style="background:#fff;padding:20px;border-radius:10px;width:80%;max-height:80%;overflow:auto;">
        <div class="d-flex justify-content-between mb-3">
            <h4 class="text-dark">تفاصيل الديون المستحقة على المضيفين</h4>
            <button class="btn btn-danger btn-sm" onclick="closeDebtsPopup()">إغلاق X</button>
        </div>
        <table class="table table-bordered text-center">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th>الاسم</th>
                    <th>الهاتف</th>
                    <th>قيمة الدين الحالي</th>
                </tr>
            </thead>
            <tbody>
                @forelse($debtors as $i => $w)
                    <tr>
                        <td>{{ $i+1 }}</td>
                        <td>
                            @if($w->holder)
                                <a href="{{ route('tblUsers.show', ['tblUser' => $w->holder->id, 'from' => 'transactions']) }}"
                                   style="color:#0d6efd;text-decoration:none; font-weight: bold;">
                                    {{ $w->holder->full_name }}
                                </a>
                            @else
                                -
                            @endif
                        </td>
                        <td>{{ $w->holder->contact_no ?? '-' }}</td>
                        {{-- عرض القيمة السالبة بوضوح للمستخدم --}}
                        <td class="text-danger" style="font-weight: bold;">{{ number_format($w->balanceFloat, 2) }} د.ل</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4">لا توجد ديون مستحقة على المضيفين حالياً.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
{{-- فلاتر جدول العمليات --}}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-3">
            <div class="col-md-4">
                <select name="category" class="form-control">
                    <option value="">كل التصنيفات</option>
                    @foreach($categoryMap as $k=>$v)
                        <option value="{{ $k }}" {{ request('category')==$k?'selected':'' }}>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-3">
                <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
            </div>
            <div class="col-md-2">
                <button class="btn btn-success w-100">بحث</button>
            </div>
        </form>
    </div>
</div>
{{-- جدول المعاملات --}}
<div class="table-responsive">
<table class="table table-bordered text-center">
    <thead class="table-dark">
        <tr>
            <th>#</th>
            <th>المالك</th>
            <th>المحفظة</th>
            <th>النوع</th>
            <th>المبلغ</th>
            <th>الحالة</th>
            <th>التاريخ</th>
        </tr>
    </thead>
    <tbody>
        @foreach($transactions as $t)
            <tr>
                <td>{{ $t->id }}</td>
                <td>{{ $t->owner_name }}</td>
                <td>{{ $t->wallet_no }}</td>
                <td>{{ $t->type }}</td>
                <td style="font-weight: bold;">{{ number_format($t->amount, 2) }} د.ل</td>
                <td>{{ $t->confirmed }}</td>
                <td>{{ $t->created_at }}</td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>
<div class="mt-3">
    {{ $transactions->links() }}
</div>
</div>
@endsection
@push('page_scripts')
<script>
function openDebtsPopup(){
    document.getElementById('debtsPopup').style.display='flex';
}
function closeDebtsPopup(){
    document.getElementById('debtsPopup').style.display='none';
}
</script>
@endpush