@extends('layouts.app')
@section('content')
<div class="content px-3 mt-4">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Header & Navigation -->
    <div class="row align-items-center mb-4">
        <div class="col-sm-6">
            <h4 class="font-weight-bold mb-0"><i class="fa fa-file-invoice-dollar text-primary mr-2"></i> كشف حساب المحفظة</h4>
        </div>
        <div class="col-sm-6 text-right">
            <a href="{{ route('wallets.index') }}" class="btn btn-light shadow-sm"><i class="fas fa-arrow-right mr-1"></i> العودة للمحافظ</a>
        </div>
    </div>
    @include('flash::message')
    @php
        $netFlow = $totals['deposits'] - $totals['withdraws'];
        $netFlowColor = $netFlow >= 0 ? 'text-success' : 'text-danger';
        $netFlowIcon = $netFlow >= 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down';
    @endphp
    <!-- Top Section: Profile & KPIs -->
    <div class="row mb-4">
        <!-- User Profile Card -->
        <div class="col-lg-4 mb-3 mb-lg-0">
            <div class="card profile-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-4">
                        <div class="profile-avatar mr-3">
                            <i class="fa {{ $wallet->type == 'host' ? 'fa-user-tie' : 'fa-user' }}"></i>
                        </div>
                        <div>
                            <h5 class="font-weight-bold mb-1">{{ $user->full_name }}</h5>
                            <span class="badge {{ $wallet->type == 'host' ? 'badge-soft-info' : 'badge-soft-success' }}">
                                {{ $wallet->type == 'host' ? 'صاحب عقار' : 'عميل' }}
                            </span>
                        </div>
                    </div>
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2"><i class="fa fa-hashtag text-muted mr-2" style="width:16px"></i> <span class="text-muted">رقم المحفظة:</span> <strong>#{{ request()->route('wallet') }}</strong></li>
                        <li class="mb-2"><i class="fa fa-phone text-muted mr-2" style="width:16px"></i> <span class="text-muted">الهاتف:</span> <span dir="ltr"><strong>{{ $user->contact_no ?? 'غير متوفر' }}</strong></span></li>
                        <li class="mb-0"><i class="fa fa-id-card text-muted mr-2" style="width:16px"></i> <span class="text-muted">رقم الحساب:</span> <strong>{{ $user->id }}</strong></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- KPIs Cards -->
        <div class="col-lg-8">
            <div class="row h-100">
                <div class="col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="card kpi-card h-100" style="border-bottom: 4px solid #007bff;">
                        <div class="card-body text-center d-flex flex-column justify-content-center">
                            <p class="text-muted small font-weight-bold text-uppercase mb-1">الرصيد الحالي</p>
                            <h4 class="font-weight-bold text-primary mb-0">{{ number_format($balance, 2) }} <small class="text-muted" style="font-size:12px;">د.ل</small></h4>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="card kpi-card h-100" style="border-bottom: 4px solid #28a745;">
                        <div class="card-body text-center d-flex flex-column justify-content-center">
                            <p class="text-muted small font-weight-bold text-uppercase mb-1">إجمالي الإيداعات</p>
                            <h4 class="font-weight-bold text-success mb-0">+{{ number_format($totals['deposits'], 2) }} <small class="text-muted" style="font-size:12px;">د.ل</small></h4>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="card kpi-card h-100" style="border-bottom: 4px solid #dc3545;">
                        <div class="card-body text-center d-flex flex-column justify-content-center">
                            <p class="text-muted small font-weight-bold text-uppercase mb-1">إجمالي السحوبات</p>
                            <h4 class="font-weight-bold text-danger mb-0">-{{ number_format($totals['withdraws'], 2) }} <small class="text-muted" style="font-size:12px;">د.ل</small></h4>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="card kpi-card h-100" style="border-bottom: 4px solid {{ $netFlow >= 0 ? '#28a745' : '#dc3545' }}; background-color: #f8f9fa;">
                        <div class="card-body text-center d-flex flex-column justify-content-center">
                            <p class="text-muted small font-weight-bold text-uppercase mb-1">صافي التدفق</p>
                            <h4 class="font-weight-bold {{ $netFlowColor }} mb-0">
                                <i class="fa {{ $netFlowIcon }} mr-1" style="font-size: 14px;"></i>
                                {{ $netFlow > 0 ? '+' : '' }}{{ number_format($netFlow, 2) }} <small class="text-muted" style="font-size:12px;">د.ل</small>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Filters Section -->
    <div class="card filter-card mb-4">
        <div class="card-body pb-2">
            <h6 class="font-weight-bold mb-3"><i class="fa fa-filter text-primary mr-2"></i> تصفية الحركات المالية</h6>
            <form method="GET" action="{{ url()->current() }}">
                <div class="row">
                    <!-- Transaction Type -->
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">نوع الحركة</label>
                        <select name="transaction_type" class="form-control form-control-sm">
                            <option value="">كل الأنواع</option>
                            @foreach($transactionTypes as $key => $value)
                                <option value="{{ $key }}" {{ request('transaction_type') == $key ? 'selected' : '' }}>
                                    {{ $value }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <!-- Operation Type -->
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">نوع العملية</label>
                        <select name="operation_type" class="form-control form-control-sm">
                            <option value="">الكل (إيداع/سحب)</option>
                            <option value="deposit" {{ request('operation_type') == 'deposit' ? 'selected' : '' }}>إيداع (+)</option>
                            <option value="withdraw" {{ request('operation_type') == 'withdraw' ? 'selected' : '' }}>سحب (-)</option>
                        </select>
                    </div>
                    <!-- Booking ID -->
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">رقم الحجز</label>
                        <input type="number" name="booking_id" class="form-control form-control-sm" placeholder="مثال: 1234" value="{{ request('booking_id') }}">
                    </div>
                    <!-- Amounts -->
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">المبلغ من</label>
                        <input type="number" name="amount_min" class="form-control form-control-sm" placeholder="0.00" step="0.01" value="{{ request('amount_min') }}">
                    </div>
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">إلى</label>
                        <input type="number" name="amount_max" class="form-control form-control-sm" placeholder="0.00" step="0.01" value="{{ request('amount_max') }}">
                    </div>
                    <!-- Order -->
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">الترتيب</label>
                        <select name="order" class="form-control form-control-sm">
                            <option value="desc" {{ request('order') == 'desc' ? 'selected' : '' }}>الأحدث أولاً</option>
                            <option value="asc" {{ request('order') == 'asc' ? 'selected' : '' }}>الأقدم أولاً</option>
                        </select>
                    </div>
                </div>
                <!-- Dates & Buttons Row -->
                <div class="row align-items-end mb-2">
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">التاريخ من</label>
                        <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
                    </div>
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">التاريخ إلى</label>
                        <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
                    </div>
                    <div class="col-md-8 text-left mb-3">
                        <a href="{{ url()->current() }}" class="btn btn-light btn-sm px-3"><i class="fas fa-times text-muted mr-1"></i> مسح</a>
                        <button type="submit" class="btn btn-primary btn-sm px-4 mx-2"><i class="fas fa-search mr-1"></i> بحث</button>
                        <a href="{{ url()->current() . '?export=excel&' . http_build_query(request()->query()) }}" class="btn btn-outline-success btn-sm px-3">
                            <i class="fas fa-file-excel mr-1"></i> تصدير Excel
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Transactions Ledger (Rich Table) -->
    <div class="card data-card mb-5">
        <div class="card-header bg-white border-bottom-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 font-weight-bold">سجل الحركات المالية <span class="badge badge-soft-primary ml-2">{{ $transactions->total() }} حركة</span></h5>
        </div>
        <div class="card-body p-0 mt-3">
            @if($transactions->count() > 0)
                <div class="table-responsive">
                    <table class="table rich-table table-hover mb-0">
                        <thead>
                            <tr>
                                <th class="pl-4" style="width: 50px;">#</th>
                                <th style="width: 120px;">التاريخ</th>
                                <th>الوصف والملاحظات</th>
                                <th style="width: 150px;">التصنيف</th>
                                <th class="text-left pr-4" style="width: 180px;">المبلغ (د.ل)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($transactions as $transaction)
                                @php
                                    $isDeposit = $transaction['operation_type'] == 'إيداع';
                                    $amountColor = $isDeposit ? 'text-success' : 'text-danger';
                                    $amountSign = $isDeposit ? '+' : '-';
                                @endphp
                                <tr>
                                    <td class="pl-4 text-muted font-weight-bold">{{ $transaction['id'] }}</td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <span class="font-weight-bold text-dark">{{ \Carbon\Carbon::parse($transaction['created_at'])->format('Y-m-d') }}</span>
                                            <span class="text-muted" style="font-size: 11px;">{{ \Carbon\Carbon::parse($transaction['created_at'])->format('H:i') }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="mb-1">
                                            @if($transaction['booking_id'])
                                                <a target="_blank" href="/tblBookingResorts/{{ $transaction['booking_id'] }}" class="font-weight-bold text-primary text-decoration-none">
                                                    حجز #{{ $transaction['booking_id'] }}
                                                </a>
                                            @else
                                                <span class="font-weight-bold text-dark">حركة عامة</span>
                                            @endif
                                            @if($transaction['note'] && $transaction['note'] !== '-')
                                                <span class="text-muted ml-2">&bull; {{ $transaction['note'] }}</span>
                                            @endif
                                        </div>
                                        @if(!empty($transaction['meta']) && is_array($transaction['meta']))
                                            <button type="button" class="btn btn-link meta-btn p-0 text-decoration-none shadow-none text-left" onclick="$('#meta-{{ $transaction['id'] }}').slideToggle('fast')">
                                                <i class="fa fa-chevron-down mr-1"></i> عرض التفاصيل التقنية
                                            </button>
                                            <div class="mt-2" id="meta-{{ $transaction['id'] }}" style="display: none;">
                                                <div class="meta-box">
                                                    <ul class="list-unstyled mb-0" style="column-count: 2;">
                                                        @foreach($transaction['meta'] as $key => $value)
                                                            <li class="mb-1"><span class="text-muted">{{ $key }}:</span> <strong>{{ $value }}</strong></li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge {{ $isDeposit ? 'badge-soft-success' : 'badge-soft-danger' }} d-inline-block w-100 py-2">
                                            <i class="fa {{ $isDeposit ? 'fa-arrow-down' : 'fa-arrow-up' }} mr-1"></i> 
                                            {{ $transactionTypes[$transaction['transaction_type']] ?? $transaction['transaction_type'] }}
                                        </span>
                                    </td>
                                    <td class="text-left pr-4">
                                        <span class="transaction-amount {{ $amountColor }}">{{ $amountSign }}{{ $transaction['formatted_amount'] }}</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="card-footer bg-white border-0 py-3 mt-2">
                    <div class="d-flex justify-content-center">
                        {{ $transactions->appends(request()->query())->links() }}
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <div class="mb-3">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 80px; height: 80px; background-color: #f8f9fa;">
                            <i class="fas fa-file-invoice-dollar fa-2x text-muted"></i>
                        </div>
                    </div>
                    <h5 class="text-muted font-weight-bold">لا توجد حركات مالية</h5>
                    <p class="text-muted mb-0">لم يتم العثور على أي حركات مالية تطابق معايير البحث المحددة.</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection