@extends('layouts.app')

@section('title', 'إدارة الحوالات')

@push('styles')
<style>
    .page-header-sm {
        background: linear-gradient(135deg, #3F51B5 0%, #7986CB 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: #3F51B5;
        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: 120px;
        max-width: 160px;
    }
    .filter-item.search-item {
        min-width: 180px;
        max-width: 220px;
    }
    .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;
    }
    .date-filter-group {
        display: flex;
        align-items: flex-end;
        gap: 0.25rem;
    }
    .date-filter-group input {
        width: 115px;
        font-size: 0.75rem !important;
        padding: 0.35rem 0.5rem !important;
    }
    .date-filter-group span {
        font-size: 0.7rem;
        color: #697a8d;
        padding-bottom: 0.4rem;
    }
    .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;
    }
    .export-buttons {
        display: flex;
        gap: 0.5rem;
    }
    .data-table {
        margin-bottom: 0;
    }
    .data-table thead th {
        background: #f8f9fa;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #566a7f;
        padding: 1rem;
        border-bottom: 2px solid #e9ecef;
        white-space: nowrap;
    }
    .data-table tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-color: #f1f1f1;
    }
    .data-table tbody tr:hover {
        background: rgba(63, 81, 181, 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: #3F51B5;
    }
    .type-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.8rem;
        font-weight: 500;
        background: rgba(63, 81, 181, 0.1);
        color: #3F51B5;
    }
    .remaining-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.8rem;
        font-weight: 500;
    }
    .remaining-badge.has-remaining {
        background: rgba(255, 152, 0, 0.1);
        color: #F57C00;
    }
    .remaining-badge.paid-full {
        background: rgba(76, 175, 80, 0.1);
        color: #4CAF50;
    }
    .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;
    }
    @media (max-width: 768px) {
        .filter-inline {
            flex-direction: column;
            align-items: stretch;
        }
        .filter-item {
            max-width: 100%;
        }
        .date-filter-group {
            flex-wrap: wrap;
        }
    }
    .form-control:focus, .form-select:focus {
        border-color: #3F51B5;
        box-shadow: 0 0 0 0.2rem rgba(63, 81, 181, 0.15);
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Compact Page Header -->
    <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-transfer 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_amount'], 0) }}</div>
                        <div class="stat-label">المبلغ</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ number_format($stats['total_paid'], 0) }}</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_TRANSFERS))
                <a href="{{ route('transfers.create') }}" class="btn btn-light btn-sm">
                    <i class='bx bx-plus'></i> إضافة
                </a>
                <a href="{{ route('transfers.import') }}" class="btn btn-light btn-sm">
                    <i class='bx bx-upload'></i> استيراد
                </a>
                @endif
            </div>
        </div>
    </div>

    <!-- Compact Filters Card -->
    <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('transfers.index') }}" id="filterForm">
                <div class="filter-body-compact">
                    <div class="filter-inline">
                        <!-- Search -->
                        <div class="filter-item search-item">
                            <label>بحث</label>
                            <input type="text" class="form-control" name="search" value="{{ request('search') }}" placeholder="البيان، الملاحظات...">
                        </div>
                        <!-- Transfer Type -->
                        <div class="filter-item">
                            <label>النوع</label>
                            <select class="form-select" name="transfer_type">
                                <option value="">الكل</option>
                                @foreach($types as $key => $type)
                                    <option value="{{ $key }}" {{ request('transfer_type') == $key ? 'selected' : '' }}>{{ $type }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Destination -->
                        <div class="filter-item">
                            <label>الجهة</label>
                            <select class="form-select" name="transfer_destination">
                                <option value="">الكل</option>
                                @foreach($destinations as $key => $dest)
                                    <option value="{{ $key }}" {{ request('transfer_destination') == $key ? 'selected' : '' }}>{{ $dest }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Employee -->
                        <div class="filter-item">
                            <label>الموظف</label>
                            <select class="form-select" name="employee_name">
                                <option value="">الكل</option>
                                @foreach($employees as $employee)
                                    <option value="{{ $employee }}" {{ request('employee_name') == $employee ? 'selected' : '' }}>{{ $employee }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Date Range -->
                        <div class="filter-item" style="min-width: 250px; max-width: 280px;">
                            <label>فترة الحوالة</label>
                            <div class="date-filter-group">
                                <input type="date" class="form-control" name="date_from" value="{{ request('date_from') }}">
                                <span>إلى</span>
                                <input type="date" class="form-control" name="date_to" value="{{ request('date_to') }}">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Compact Action Bar -->
                <div class="action-bar-compact">
                    <button type="submit" class="btn btn-sm" style="background: linear-gradient(135deg, #3F51B5, #7986CB); color: white;">
                        <i class='bx bx-search'></i> بحث
                    </button>
                    <a href="{{ route('transfers.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('transfers.export.excel', request()->all()) }}" class="btn btn-label-success btn-sm" title="Excel">
                            <i class='bx bxs-file-export'></i>
                        </a>
                        <a href="{{ route('transfers.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>

    <!-- Data Card -->
    <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 bg-primary">{{ $transfers->total() }} سجل</span>
        </div>

        @if($transfers->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>
                        <th>النوع</th>
                        <th>الجهة</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transfers as $transfer)
                    <tr>
                        <td>{{ $transfer->id }}</td>
                        <td>{{ $transfer->transfer_date->format('Y-m-d') }}</td>
                        <td>{{ $transfer->employee_name ?? '-' }}</td>
                        <td>{{ Str::limit($transfer->description, 30) }}</td>
                        <td class="amount-cell">{{ number_format($transfer->amount, 2) }}</td>
                        <td>{{ number_format($transfer->paid_amount ?? 0, 2) }}</td>
                        <td>
                            @if(($transfer->remaining_amount ?? 0) > 0)
                                <span class="remaining-badge has-remaining">
                                    <i class='bx bx-time'></i>
                                    {{ number_format($transfer->remaining_amount, 2) }}
                                </span>
                            @else
                                <span class="remaining-badge paid-full">
                                    <i class='bx bx-check'></i>
                                    مكتمل
                                </span>
                            @endif
                        </td>
                        <td>
                            @if($transfer->transfer_type)
                                <span class="type-badge">{{ $transfer->transfer_type }}</span>
                            @else
                                -
                            @endif
                        </td>
                        <td>{{ $transfer->transfer_destination ?? '-' }}</td>
                        <td>
                            <div class="action-btns">
                                <a href="{{ route('transfers.show', $transfer) }}" class="btn btn-sm btn-info" title="عرض">
                                    <i class='bx bx-show'></i>
                                </a>
                                <a href="{{ route('transfers.edit', $transfer) }}" class="btn btn-sm btn-warning" title="تعديل">
                                    <i class='bx bx-edit'></i>
                                </a>
                                <form id="delete-form-{{ $transfer->id }}" action="{{ route('transfers.destroy', $transfer) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-danger" title="حذف"
                                        onclick="confirmDeleteTransfer('{{ $transfer->id }}', '{{ $transfer->transfer_date->format('Y-m-d') }}', '{{ number_format($transfer->amount, 2) }}', '{{ addslashes($transfer->description) }}', '{{ $transfer->transfer_type }}', '{{ addslashes($transfer->transfer_destination) }}')">
                                        <i class='bx bx-trash'></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="pagination-wrapper">
            {{ $transfers->appends(request()->query())->links() }}
        </div>
        @else
        <div class="empty-state">
            <i class='bx bx-transfer'></i>
            <h5>لا توجد حوالات</h5>
            <p>لم يتم العثور على أي سجلات مطابقة للبحث</p>
            <a href="{{ route('transfers.create') }}" class="btn btn-primary mt-3">
                <i class='bx bx-plus'></i> إضافة حوالة جديدة
            </a>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
function confirmDeleteTransfer(transferId, transferDate, amount, description, transferType, destination) {
    // ترجمة نوع الحوالة
    const typeLabels = {
        'incoming': 'واردة',
        'outgoing': 'صادرة'
    };
    const typeLabel = typeLabels[transferType] || transferType;
    const typeClass = transferType === 'incoming' ? 'text-success' : 'text-danger';
    
    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><i class='bx bx-calendar me-1'></i> التاريخ:</strong> ${transferDate}</div>
                <div class="mb-2"><strong><i class='bx bx-money me-1'></i> المبلغ:</strong> <span class="text-success fw-bold">${amount} ر.س</span></div>
                <div class="mb-2"><strong><i class='bx bx-transfer me-1'></i> النوع:</strong> <span class="${typeClass} fw-bold">${typeLabel}</span></div>
                <div class="mb-2"><strong><i class='bx bx-map me-1'></i> الوجهة:</strong> ${destination || '-'}</div>
                <div><strong><i class='bx bx-file me-1'></i> الوصف:</strong> ${description || '-'}</div>
            </div>
            <div class="alert alert-warning mt-3 mb-0">
                <i class='bx bx-info-circle me-1'></i>
                لا يمكن التراجع عن هذا الإجراء!
            </div>
        `,
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="bx bx-trash me-1"></i> نعم، احذف الحوالة',
        cancelButtonText: '<i class="bx bx-x me-1"></i> إلغاء',
        reverseButtons: true,
        focusCancel: true,
        customClass: {
            popup: 'swal-rtl'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('delete-form-' + transferId).submit();
        }
    });
}
</script>
@endpush
@endsection