@extends('admin.layouts.master')

@section('title', 'التحويلات بين الحسابات')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<style>
	.transfer-banner {
		background: linear-gradient(135deg, #153a66 0%, #1d6f50 100%);
		border-radius: 14px;
		color: #fff;
		padding: 22px;
	}
	.transfer-stat {
		border: 1px solid #edf0f3;
		border-radius: 12px;
	}
	.transfer-stat .icon {
		width: 44px;
		height: 44px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
	}
	#transfers-table td,
	#transfers-table th {
		vertical-align: middle;
	}
</style>
@endsection

@section('content')
<div class="pc-container">
	<div class="pc-content">
		<div class="transfer-banner mb-3">
			<div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
				<div>
					<h4 class="mb-1 text-white">التحويلات بين الحسابات</h4>
					<p class="mb-0 small opacity-75">متابعة دقيقة لحركة السيولة بين الخزائن والبنوك والمحافظ داخل نشاط الألواح.</p>
				</div>
				@can('account_transfers.create')
				<a href="{{ route('admin.account_transfers.create') }}" class="btn btn-light">
					<i class="ti ti-plus me-1"></i>إضافة تحويل جديد
				</a>
				@endcan
			</div>
		</div>

		@if(session('success'))
			<div class="alert alert-success">{{ session('success') }}</div>
		@endif
		@if(session('error'))
			<div class="alert alert-danger">{{ session('error') }}</div>
		@endif

		<div class="row g-3 mb-3">
			<div class="col-md-3">
				<div class="transfer-stat p-3 h-100">
					<div class="d-flex align-items-center gap-2">
						<span class="icon bg-primary-light text-primary"><i class="ti ti-arrows-exchange"></i></span>
						<div>
							<div class="text-muted small">عدد التحويلات</div>
							<div class="fw-bold fs-5">{{ number_format($stats['count']) }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="transfer-stat p-3 h-100">
					<div class="d-flex align-items-center gap-2">
						<span class="icon bg-success-light text-success"><i class="ti ti-checks"></i></span>
						<div>
							<div class="text-muted small">تحويلات مكتملة</div>
							<div class="fw-bold fs-5">{{ number_format($stats['completed']) }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="transfer-stat p-3 h-100">
					<div class="d-flex align-items-center gap-2">
						<span class="icon bg-info-light text-info"><i class="ti ti-calendar-month"></i></span>
						<div>
							<div class="text-muted small">إجمالي هذا الشهر</div>
							<div class="fw-bold fs-5">{{ number_format($stats['month_amount'], 2) }} ج.م</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="transfer-stat p-3 h-100">
					<div class="d-flex align-items-center gap-2">
						<span class="icon bg-warning-light text-warning"><i class="ti ti-cash"></i></span>
						<div>
							<div class="text-muted small">الإجمالي الكلي</div>
							<div class="fw-bold fs-5">{{ number_format($stats['total_amount'], 2) }} ج.م</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="card mb-3">
			<div class="card-header">
				<h6 class="mb-0">تصفية متقدمة</h6>
			</div>
			<div class="card-body">
				<div class="row g-3">
					<div class="col-md-2">
						<label class="form-label">من تاريخ</label>
						<input type="date" id="from_date" class="form-control">
					</div>
					<div class="col-md-2">
						<label class="form-label">إلى تاريخ</label>
						<input type="date" id="to_date" class="form-control">
					</div>
					<div class="col-md-3">
						<label class="form-label">من حساب</label>
						<select id="from_account_id" class="form-select">
							<option value="">كل الحسابات</option>
							@foreach($accounts as $account)
								<option value="{{ $account->id }}">{{ $account->name_ar }}</option>
							@endforeach
						</select>
					</div>
					<div class="col-md-3">
						<label class="form-label">إلى حساب</label>
						<select id="to_account_id" class="form-select">
							<option value="">كل الحسابات</option>
							@foreach($accounts as $account)
								<option value="{{ $account->id }}">{{ $account->name_ar }}</option>
							@endforeach
						</select>
					</div>
					<div class="col-md-2">
						<label class="form-label">الحالة</label>
						<select id="status" class="form-select">
							<option value="">كل الحالات</option>
							<option value="completed">مكتمل</option>
							<option value="pending">قيد التنفيذ</option>
							<option value="cancelled">ملغي</option>
						</select>
					</div>
					<div class="col-12 d-flex gap-2">
						<button type="button" id="btn-filter" class="btn btn-primary">
							<i class="ti ti-filter me-1"></i>تطبيق التصفية
						</button>
						<button type="button" id="btn-reset" class="btn btn-light">
							<i class="ti ti-rotate me-1"></i>إعادة التعيين
						</button>
					</div>
				</div>
			</div>
		</div>

		<div class="card">
			<div class="card-body">
				<div class="table-responsive">
					<table id="transfers-table" class="table table-striped table-bordered w-100">
						<thead>
						<tr>
							<th>#</th>
							<th>رقم التحويل</th>
							<th>من حساب</th>
							<th>إلى حساب</th>
							<th>التاريخ</th>
							<th>القيمة</th>
							<th>المرجع</th>
							<th>المنشئ</th>
							<th>الحالة</th>
							<th>الإجراءات</th>
						</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script>
$(function () {
	const table = $('#transfers-table').DataTable({
		ajax: {
			url: '{{ route('admin.account_transfers.data') }}',
			data: function (d) {
				d.from_date = $('#from_date').val();
				d.to_date = $('#to_date').val();
				d.status = $('#status').val();
				d.from_account_id = $('#from_account_id').val();
				d.to_account_id = $('#to_account_id').val();
			}
		},
		columns: [
			{ data: 'id' },
			{ data: 'transfer_number' },
			{ data: 'from_account' },
			{ data: 'to_account' },
			{ data: 'transfer_date' },
			{ data: 'amount' },
			{ data: 'reference_number' },
			{ data: 'created_by' },
			{ data: 'status' },
			{ data: 'actions', orderable: false, searchable: false }
		],
		order: [[0, 'desc']],
		language: {
			sProcessing: 'جاري التحميل...',
			sLengthMenu: 'عرض _MENU_ سجل',
			sZeroRecords: 'لا توجد بيانات مطابقة',
			sInfo: 'عرض _START_ إلى _END_ من أصل _TOTAL_ سجل',
			sInfoEmpty: 'عرض 0 إلى 0 من أصل 0 سجل',
			sInfoFiltered: '(تمت التصفية من إجمالي _MAX_ سجل)',
			sSearch: 'بحث:',
			oPaginate: {
				sFirst: 'الأول',
				sPrevious: 'السابق',
				sNext: 'التالي',
				sLast: 'الأخير'
			}
		}
	});

	$('#btn-filter').on('click', function () {
		table.ajax.reload();
	});

	$('#btn-reset').on('click', function () {
		$('#from_date').val('');
		$('#to_date').val('');
		$('#status').val('');
		$('#from_account_id').val('');
		$('#to_account_id').val('');
		table.ajax.reload();
	});
});
</script>
@endsection