@extends('layouts.app')
@section('content')
<div class="content px-3 mt-4">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="font-weight-bold mb-0"><i class="fas fa-globe text-primary mr-2"></i> السجل المالي العام</h4>
        <a href="{{ route('wallets.index') }}" class="btn btn-light border shadow-sm">
            <i class="fas fa-wallet mr-1"></i> إدارة المحافظ
        </a>
    </div>
    <!-- KPI Widgets -->
    <div class="row mb-4">
        <!-- Total Transactions -->
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #007bff;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold text-uppercase" style="font-size: 13px;">إجمالي الحركات</p>
                            <h3 class="font-weight-bold text-primary mb-0">{{ number_format($transactions->total()) }} <small class="text-sm text-muted" style="font-size: 12px;">عملية</small></h3>
                        </div>
                        <div class="kpi-icon badge-soft-primary"><i class="fas fa-exchange-alt"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Total Deposits -->
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #28a745;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold text-uppercase" style="font-size: 13px;">إجمالي حركات الدفع (الإيداعات)</p>
                            <h3 class="font-weight-bold text-success mb-0">+{{ number_format($totals['deposits'], 2) }} <small class="text-sm text-muted" style="font-size: 12px;">د.ل</small></h3>
                        </div>
                        <div class="kpi-icon badge-soft-success"><i class="fas fa-arrow-down"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Total Withdrawals -->
        <div class="col-md-4">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #dc3545;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold text-uppercase" style="font-size: 13px;">إجمالي حركات الإرجاع (السحوبات)</p>
                            <h3 class="font-weight-bold text-danger mb-0">-{{ number_format($totals['withdraws'], 2) }} <small class="text-sm text-muted" style="font-size: 12px;">د.ل</small></h3>
                        </div>
                        <div class="kpi-icon badge-soft-danger"><i class="fas fa-arrow-up"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Filter Card -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
        <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="{{ route('transactions.index') }}">
                <input type="hidden" name="order_id" value="{{ request('order_id') }}">
                <input type="hidden" name="order" value="{{ request('order') }}">
                <div class="row">
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">رقم المحفظة</label>
                        <input type="number" name="wallet_no" class="form-control form-control-sm" placeholder="مثال: 5" value="{{ request('wallet_no') }}">
                    </div>
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">اسم المالك</label>
                        <input type="text" name="owner_name" class="form-control form-control-sm" placeholder="ابحث بالاسم..." value="{{ request('owner_name') }}">
                    </div>
                    <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>
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">نوع العملية</label>
                        <select name="type" class="form-control form-control-sm">
                            <option value="">كل العمليات</option>
                            <option value="deposit" {{ request('type') == 'deposit' ? 'selected' : '' }}>دفع (إيداع +)</option>
                            <option value="withdraw" {{ request('type') == 'withdraw' ? 'selected' : '' }}>إرجاع (سحب -)</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">القيمة (د.ل)</label>
                        <input type="number" step="0.01" name="amount" class="form-control form-control-sm" placeholder="مثال: 100" value="{{ request('amount') }}">
                    </div>
                    <div class="col-md-2 col-sm-6 mb-3">
                        <label class="text-muted small">ملاحظة</label>
                        <input type="text" name="note" class="form-control form-control-sm" placeholder="ابحث في الملاحظات..." value="{{ request('note') }}">
                    </div>
                </div>
                <!-- Date Filters & Actions 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="{{ route('transactions.index') }}" 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>
                        <button type="submit" name="order" value="{{ request('order') === 'desc' ? 'asc' : 'desc' }}" class="btn btn-outline-secondary btn-sm px-3 ml-2">
                            <i class="fas fa-sort mr-1"></i> {{ request('order') === 'desc' ? 'الترتيب: الأحدث' : 'الترتيب: الأقدم' }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Data Table Card -->
    <div class="card border-0 shadow-sm mb-5" style="border-radius: 12px;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table rich-table table-hover mb-0">
                    <thead>
                        <tr>
                            <th class="pl-4" style="width: 80px;">
                                <div class="d-flex align-items-center">
                                    <span class="mr-2">ID</span>
                                    <a href="{{ route('transactions.index', array_merge(request()->query(), ['order_id' => 'asc'])) }}" class="text-muted ml-1" title="الأقدم"><i class="fas fa-caret-up {{ request('order_id') == 'asc' ? 'text-primary' : '' }}"></i></a>
                                    <a href="{{ route('transactions.index', array_merge(request()->query(), ['order_id' => 'desc'])) }}" class="text-muted ml-1" title="الأحدث"><i class="fas fa-caret-down {{ request('order_id') == 'desc' ? 'text-primary' : '' }}"></i></a>
                                </div>
                            </th>
                            <th>المحفظة / المالك</th>
                            <th>الحجز / السند</th>
                            <th>النوع</th>
                            <th style="width: 150px;">القيمة (د.ل)</th>
                            <th style="width: 200px;">الملاحظات</th>
                            <th>التاريخ</th>
                            <th class="text-center pr-4">إجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($transactions as $transaction)
                            @php
                                $isDeposit = $transaction->type == 'deposit';
                                $amountColor = $isDeposit ? 'text-success' : 'text-danger';
                                $amountSign = $isDeposit ? '+' : '-';
                            @endphp
                            <tr id="transaction-{{ $transaction->id }}">
                                <td class="pl-4 font-weight-bold text-muted">#{{ $transaction->id }}</td>
                                <!-- Wallet & Owner -->
                                <td>
                                    <div class="mb-1">
                                        <span class="badge badge-light border text-dark" id="wallet-no-{{ $transaction->id }}">
                                            محفظة #{{ $transaction->wallet_no ?? $transaction->wallet_id }}
                                        </span>
                                    </div>
                                    <div>
                                        @if(!empty($transaction->owner_id))
                                            <a href="{{ route('tblUsers.show', ['tblUser' => $transaction->owner_id, 'from' => 'transactions']) }}" class="font-weight-bold text-dark text-decoration-none">
                                                <i class="fas fa-user text-muted mr-1"></i> {{ $transaction->owner_name ?? 'غير معروف' }}
                                            </a>
                                        @else
                                            <span class="text-muted"><i class="fas fa-user mr-1"></i> {{ $transaction->owner_name ?? '-' }}</span>
                                        @endif
                                    </div>
                                </td>
                                <!-- Booking & Property -->
                                <td>
                                    <div class="mb-1">
                                        @if(!empty($transaction->booking_id))
                                            <a target="_blank" href="/tblBookingResorts/{{ $transaction->booking_id }}" class="font-weight-bold text-primary text-decoration-none" id="booking-id-{{ $transaction->id }}">
                                                حجز #{{ $transaction->booking_id }}
                                            </a>
                                        @elseif(!empty($transaction->receipt_id))
                                            <a target="_blank" href="{{ route('transactions.print_voucher', $transaction->receipt_id) }}" class="font-weight-bold text-info text-decoration-none">
                                                سند #{{ $transaction->receipt_id }}
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </div>
                                    <div class="text-truncate" style="max-width: 180px; font-size: 12px;">
                                        @if(!empty($transaction->property_id))
                                            <a href="{{ route('tblPropertyDetails.show', $transaction->property_id) }}" target="_blank" class="text-muted text-decoration-none">
                                                <i class="fas fa-home mr-1"></i> {{ $transaction->property_name }}
                                            </a>
                                        @else
                                            <span class="text-muted">{{ $transaction->property_name ?? '' }}</span>
                                        @endif
                                    </div>
                                </td>
                                <!-- Type -->
                                <td>
                                    <span id="type-{{ $transaction->id }}" class="badge {{ $isDeposit ? 'badge-soft-success' : 'badge-soft-danger' }} px-2 py-1">
                                        <i class="fas {{ $isDeposit ? 'fa-arrow-down' : 'fa-arrow-up' }} mr-1"></i> {{ $transaction->voucher_type ?? ($isDeposit ? 'دفع' : 'إرجاع') }}
                                    </span>
                                </td>
                                <!-- Amount -->
                                <td>
                                    <span class="transaction-amount {{ $amountColor }}" id="amount-text-{{ $transaction->id }}">{{ $amountSign }}<span id="amount-{{ $transaction->id }}">{{ number_format($transaction->amount, 2) }}</span></span>
                                </td>
                                <!-- Notes -->
                                <td>
                                    <span id="note-{{ $transaction->id }}" class="text-muted" style="font-size: 12px; display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $transaction->note ?? '-' }}">
                                        {{ $transaction->note ?? '-' }}
                                    </span>
                                    <input type="text" id="note-input-{{ $transaction->id }}" class="form-control form-control-sm edit-input" style="max-width: 180px;" value="{{ $transaction->note }}">
                                </td>
                                <!-- Date -->
                                <td>
                                    <div class="d-flex flex-column text-muted" style="font-size: 12px;">
                                        <span class="font-weight-bold text-dark">{{ $transaction->created_at ? \Carbon\Carbon::parse($transaction->created_at)->format('Y-m-d') : '-' }}</span>
                                        <span>{{ $transaction->created_at ? \Carbon\Carbon::parse($transaction->created_at)->format('H:i') : '' }}</span>
                                    </div>
                                </td>
                                <!-- Actions -->
                                <td class="text-center pr-4">
                                    <button class="btn btn-outline-info btn-icon-mini" onclick="showDetails({{ $transaction->wallet_id ?? $transaction->wallet_no }})" title="تفاصيل المحفظة">
                                        <i class="fas fa-info"></i>
                                    </button>
                                    <button class="btn btn-outline-warning btn-icon-mini mx-1" onclick="toggleEdit({{ $transaction->id }})" id="btn-edit-{{ $transaction->id }}" title="تعديل">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-success btn-icon-mini mx-1" onclick="saveChanges({{ $transaction->id }})" id="btn-save-{{ $transaction->id }}" style="display: none;" title="حفظ">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button class="btn btn-secondary btn-icon-mini" onclick="cancelEdit({{ $transaction->id }})" id="btn-cancel-{{ $transaction->id }}" style="display: none;" title="إلغاء">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" style="width: 80px; height: 80px; background-color: #f8f9fa;">
                                        <i class="fas fa-history fa-2x text-muted"></i>
                                    </div>
                                    <h5 class="text-muted font-weight-bold">لا توجد حركات مالية</h5>
                                    <p class="text-muted mb-0">لم يتم العثور على أي حركات مسجلة تتطابق مع بحثك.</p>
                                </td>
                            </tr>
                        @endforelse
                    </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()->all())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal for Wallet Details -->
<div class="modal fade" id="walletDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 12px; border: none;">
            <div class="modal-header bg-light" style="border-radius: 12px 12px 0 0;">
                <h5 class="modal-title font-weight-bold text-primary"><i class="fas fa-wallet mr-2"></i> تفاصيل المحفظة الشاملة</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4" id="wallet-details-content">
                <div class="text-center py-3">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2 text-muted">جاري جلب البيانات...</p>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('page_scripts')
<script>
function toggleEdit(id) {
    const textEl = document.getElementById(`note-${id}`);
    if(textEl) textEl.style.display = 'none';
    const inputEl = document.getElementById(`note-input-${id}`);
    if(inputEl) inputEl.style.display = 'block';
    document.getElementById(`btn-edit-${id}`).style.display = 'none';
    document.getElementById(`btn-save-${id}`).style.display = 'inline-block';
    document.getElementById(`btn-cancel-${id}`).style.display = 'inline-block';
}
function cancelEdit(id) {
    const textEl = document.getElementById(`note-${id}`);
    if(textEl) textEl.style.display = 'block';
    const inputEl = document.getElementById(`note-input-${id}`);
    if(inputEl) {
        inputEl.style.display = 'none';
        const originalText = textEl.innerText.trim();
        inputEl.value = (originalText === '-' || originalText === 'لا توجد ملاحظات') ? '' : originalText;
    }
    document.getElementById(`btn-edit-${id}`).style.display = 'inline-block';
    document.getElementById(`btn-save-${id}`).style.display = 'none';
    document.getElementById(`btn-cancel-${id}`).style.display = 'none';
}
function saveChanges(id) {
    const note = document.getElementById(`note-input-${id}`).value;
    fetch(`{{ url('transactions') }}/${id}`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: JSON.stringify({ note })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            document.getElementById(`note-${id}`).innerText = note || '-';
            const inputEl = document.getElementById(`note-input-${id}`);
            if(inputEl) inputEl.style.display = 'none';
            const textEl = document.getElementById(`note-${id}`);
            if(textEl) textEl.style.display = 'block';
            document.getElementById(`btn-edit-${id}`).style.display = 'inline-block';
            document.getElementById(`btn-save-${id}`).style.display = 'none';
            document.getElementById(`btn-cancel-${id}`).style.display = 'none';
        } else {
            alert(data.message || 'حدث خطأ أثناء الحفظ');
        }
    })
    .catch(err => {
        alert('فشل الاتصال بالسيرفر أثناء الحفظ');
        console.error(err);
    });
}
function showDetails(walletId) {
    if (!walletId) {
        alert('رقم المحفظة غير متوفر لهذه الحركة');
        return;
    }
    const modal = $('#walletDetailsModal');
    const modalBody = document.getElementById('wallet-details-content');
    modalBody.innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status"></div>
            <p class="mt-2 text-muted">جاري تحميل البيانات...</p>
        </div>
    `;
    modal.modal('show');
    fetch(`{{ url('wallets') }}/${walletId}/details`, {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success && data.wallet && data.user) {
            const w = data.wallet, u = data.user;
            modalBody.innerHTML = `
                <div class="row text-center mb-4">
                    <div class="col-6 border-left">
                        <p class="text-muted small mb-1">الرصيد الحالي</p>
                        <h4 class="text-success font-weight-bold mb-0">${parseFloat(w.balance).toFixed(2)} <small>د.ل</small></h4>
                    </div>
                    <div class="col-6">
                        <p class="text-muted small mb-1">رقم المحفظة</p>
                        <h4 class="text-primary font-weight-bold mb-0">#${w.wallet_no}</h4>
                    </div>
                </div>
                <h6 class="font-weight-bold mb-3 border-bottom pb-2 text-muted">بيانات المالك</h6>
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="fa fa-user text-primary mr-2" style="width:20px"></i> <strong>الاسم:</strong> ${u.full_name}</li>
                    <li class="mb-2"><i class="fa fa-phone text-primary mr-2" style="width:20px"></i> <strong>الهاتف:</strong> <span dir="ltr">${u.phone ?? 'غير متوفر'}</span></li>
                    <li class="mb-2"><i class="fa fa-envelope text-primary mr-2" style="width:20px"></i> <strong>البريد:</strong> ${u.email ?? 'غير متوفر'}</li>
                    <li class="mb-2"><i class="fa fa-map-marker-alt text-primary mr-2" style="width:20px"></i> <strong>العنوان:</strong> ${u.address ?? 'غير متوفر'}</li>
                    <li class="mb-2"><i class="fa fa-tag text-primary mr-2" style="width:20px"></i> <strong>نوع الحساب:</strong> ${w.type === 'host' ? 'صاحب عقار (Host)' : 'عميل (Customer)'}</li>
                    <li class="mb-2"><i class="fa fa-circle text-${w.status == 'نشطة' ? 'success' : 'secondary'} mr-2" style="width:20px"></i> <strong>حالة المحفظة:</strong> ${w.status}</li>
                </ul>
            `;
        } else {
            modalBody.innerHTML = '<div class="alert alert-danger text-center mb-0">خطأ: تعذر الوصول إلى بيانات تفاصيل المحفظة.</div>';
        }
    })
    .catch(err => {
        modalBody.innerHTML = `<div class="alert alert-danger text-center mb-0">فشل الاتصال بالخادم: ${err.message}</div>`;
    });
}
</script>
@endpush