@extends('layouts.app')

@section('title', 'إدارة متبقي الحساب')

@push('styles')
<style>
    .page-header-sm { background:linear-gradient(135deg,#009688 0%,#4DB6AC 100%); color:white; border-radius:0.75rem; padding:1rem 1.25rem; margin-bottom:1rem; }
    .page-header-sm h5 { color:white; margin:0; font-weight:600; font-size:1.1rem; }
    .page-header-sm .stats-mini { display:flex; gap:0.75rem; margin-top:0.5rem; flex-wrap:wrap; }
    .page-header-sm .stat-item { background:rgba(255,255,255,0.15); padding:0.35rem 0.75rem; border-radius:0.375rem; }
    .page-header-sm .stat-value { font-size:1rem; font-weight:bold; }
    .page-header-sm .stat-label { font-size:0.7rem; opacity:0.9; }
    .filter-card-compact { background:white; border-radius:0.75rem; box-shadow:0 2px 12px rgba(0,0,0,0.04); margin-bottom:1rem; border:none; }
    .filter-card-compact .card-header { background:transparent; border-bottom:1px solid #e9ecef; padding:0.6rem 1rem; }
    .filter-header-title { display:flex; align-items:center; gap:0.375rem; font-weight:600; font-size:0.85rem; color:#333; }
    .filter-header-title i { color:#009688; font-size:1rem; }
    .filter-body-compact { padding:0.75rem 1rem; }
    .filter-inline { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:flex-end; }
    .filter-item { flex:1; min-width:160px; max-width:300px; }
    .filter-item label { font-size:0.7rem; font-weight:600; color:#566a7f; margin-bottom:0.2rem; display:block; }
    .filter-item .form-control, .filter-item .form-select { font-size:0.8rem; padding:0.35rem 0.6rem; height:auto; }
    .action-bar-compact { display:flex; flex-wrap:wrap; gap:0.5rem; padding:0.6rem 1rem; background:#f8f9fa; border-radius:0 0 0.75rem 0.75rem; align-items:center; }
    .btn-xs { padding:0.25rem 0.5rem; font-size:0.75rem; }
    .data-card { border:none; border-radius:1rem; box-shadow:0 4px 24px rgba(0,0,0,0.06); overflow:hidden; }
    .data-card .card-header { background:white; border-bottom:1px solid #e9ecef; padding:1rem 1.5rem; }
    .data-table { margin-bottom:0; }
    .data-table thead th { background:#f8f9fa; font-weight:600; font-size:0.8rem; color:#566a7f; padding:0.75rem 1rem; border-bottom:2px solid #e9ecef; white-space:nowrap; }
    .data-table tbody td { padding:0.75rem 1rem; vertical-align:middle; border-color:#f1f1f1; font-size:0.875rem; }
    .data-table tbody tr:hover { background:rgba(0,150,136,0.04); }
    .action-btns { display:flex; gap:0.375rem; }
    .action-btns .btn { width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:0.375rem; }
    .amount-cell { font-weight:600; color:#009688; }
    .type-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.3rem 0.7rem; border-radius:2rem; font-size:0.78rem; font-weight:500; background:rgba(0,150,136,0.1); color:#00695C; white-space:nowrap; }
    .pagination-wrapper { padding:1rem 1.5rem; background:#f8f9fa; border-top:1px solid #e9ecef; }
    .empty-state { padding:4rem 2rem; text-align:center; }
    .empty-state i { font-size:4rem; color:#d1d5db; margin-bottom:1rem; }
    .empty-state h5 { color:#6b7280; margin-bottom:0.5rem; }
    .empty-state p { color:#9ca3af; }
    .form-control:focus, .form-select:focus { border-color:#009688; box-shadow:0 0 0 0.2rem rgba(0,150,136,0.15); }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="page-header-sm">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5><i class='bx bx-wallet-alt me-2'></i>إدارة متبقي الحساب</h5>
                <div class="stats-mini">
                    <div class="stat-item"><div class="stat-value">{{ $stats['total_count'] }}</div><div class="stat-label">سجل</div></div>
                    <div class="stat-item"><div class="stat-value">{{ number_format($stats['total_remaining'], 0) }}</div><div class="stat-label">إجمالي المتبقي</div></div>
                </div>
            </div>
            <div class="d-flex gap-2">
                @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::CREATE_ACCOUNT_BALANCES))
                <a href="{{ route('account-balances.create') }}" class="btn btn-light btn-sm"><i class='bx bx-plus'></i> إضافة</a>
                @endif
            </div>
        </div>
    </div>

    <div class="card filter-card-compact">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div class="filter-header-title"><i class='bx bx-filter-alt'></i><span>البحث والتصفية</span></div>
                <button class="btn btn-xs btn-label-primary" type="button" data-bs-toggle="collapse" data-bs-target="#filtersCollapse"><i class='bx bx-chevron-down'></i></button>
            </div>
        </div>
        <div class="collapse show" id="filtersCollapse">
            <form method="GET" action="{{ route('account-balances.index') }}">
                <div class="filter-body-compact">
                    <div class="filter-inline">
                        <div class="filter-item">
                            <label>بحث بالاسم</label>
                            <input type="text" class="form-control" name="search" value="{{ request('search') }}" placeholder="ابحث...">
                        </div>
                        <div class="filter-item">
                            <label>نوع المتبقي</label>
                            <select class="form-select" name="balance_type">
                                <option value="">الكل</option>
                                @foreach($types as $key => $label)
                                    <option value="{{ $key }}" {{ request('balance_type') == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="action-bar-compact">
                    <button type="submit" class="btn btn-sm" style="background:linear-gradient(135deg,#009688,#4DB6AC);color:white;"><i class='bx bx-search'></i> بحث</button>
                    <a href="{{ route('account-balances.index') }}" class="btn btn-outline-secondary btn-sm"><i class='bx bx-reset'></i> مسح</a>
                    <div class="ms-auto d-flex gap-1">
                        <a href="{{ route('account-balances.export.pdf', request()->all()) }}" class="btn btn-label-danger btn-sm" title="PDF"><i class='bx bxs-file-pdf'></i></a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card data-card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class='bx bx-list-ul me-2'></i>سجلات متبقي الحساب</h6>
            <span class="badge" style="background:#009688;">{{ $accountBalances->total() }} سجل</span>
        </div>
        @if($accountBalances->count() > 0)
        <div class="table-responsive">
            <table class="table data-table">
                <thead>
                    <tr>
                        <th>#</th><th>الاسم</th><th>نوع المتبقي</th><th>المبلغ المتبقي</th><th>أضيف بواسطة</th><th>تاريخ الإضافة</th><th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($accountBalances as $record)
                    <tr>
                        <td>{{ $record->id }}</td>
                        <td><strong>{{ $record->name }}</strong></td>
                        <td><span class="type-badge"><i class='bx bx-category-alt'></i>{{ $record->balance_type }}</span></td>
                        <td class="amount-cell">{{ number_format($record->remaining_amount, 2) }} ر.س</td>
                        <td>{{ $record->user ? $record->user->name : '-' }}</td>
                        <td>{{ $record->created_at ? $record->created_at->format('Y-m-d H:i') : '-' }}</td>
                        <td>
                            <div class="action-btns">
                                <a href="{{ route('account-balances.show', $record) }}" class="btn btn-sm btn-info" title="عرض"><i class='bx bx-show'></i></a>
                                @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::EDIT_ACCOUNT_BALANCES))
                                <a href="{{ route('account-balances.edit', $record) }}" class="btn btn-sm btn-warning" title="تعديل"><i class='bx bx-edit'></i></a>
                                @endif
                                @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::DELETE_ACCOUNT_BALANCES))
                                <form id="delete-form-{{ $record->id }}" action="{{ route('account-balances.destroy', $record) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-danger" title="حذف"
                                        onclick="confirmDelete('{{ $record->id }}','{{ addslashes($record->name) }}','{{ addslashes($record->balance_type) }}','{{ number_format($record->remaining_amount,2) }}')">
                                        <i class='bx bx-trash'></i></button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="pagination-wrapper">{{ $accountBalances->appends(request()->query())->links() }}</div>
        @else
        <div class="empty-state">
            <i class='bx bx-wallet-alt'></i>
            <h5>لا توجد سجلات</h5>
            <p>لم يتم العثور على أي سجلات مطابقة للبحث</p>
            @if(auth()->check() && auth()->user()->hasPermission(\App\Models\Permission::CREATE_ACCOUNT_BALANCES))
            <a href="{{ route('account-balances.create') }}" class="btn btn-primary mt-3" style="background:#009688;border-color:#009688;"><i class='bx bx-plus'></i> إضافة سجل جديد</a>
            @endif
        </div>
        @endif
    </div>
</div>
@push('scripts')
<script>
function confirmDelete(id, name, type, amount) {
    Swal.fire({
        title: '<i class="bx bx-error-circle text-danger" style="font-size:3rem;"></i>',
        html: `<div class="text-center mb-3"><h5 class="text-danger mb-3">هل أنت متأكد من حذف هذا السجل؟</h5></div>
            <div class="text-start bg-light p-3 rounded" style="direction:rtl;">
                <div class="mb-2"><strong>الاسم:</strong> ${name}</div>
                <div class="mb-2"><strong>النوع:</strong> ${type}</div>
                <div><strong>المبلغ:</strong> <span class="text-danger fw-bold">${amount} ر.س</span></div>
            </div>
            <div class="alert alert-warning mt-3 mb-0">لا يمكن التراجع عن هذا الإجراء!</div>`,
        showCancelButton: true,
        confirmButtonColor: '#dc3545', cancelButtonColor: '#6c757d',
        confirmButtonText: 'نعم، احذف', cancelButtonText: 'إلغاء',
        reverseButtons: true, focusCancel: true,
        customClass: { popup: 'swal-rtl' }
    }).then((result) => {
        if (result.isConfirmed) document.getElementById('delete-form-' + id).submit();
    });
}
</script>
@endpush
@endsection