@extends('layouts.app')
@section('title', 'التقارير المالية')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0 fw-bold">التقارير والتحصيلات</h4>
</div>

<!-- Filters -->
<div class="card border-0 shadow-sm mb-4" style="border-radius: 16px;">
    <div class="card-body p-4">
        <form method="GET" action="{{ route('reports.index') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label text-muted fw-bold">من تاريخ</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-calendar text-primary"></i></span>
                    <input type="date" name="start_date" class="form-control border-start-0 bg-light" value="{{ $startDate ?? '' }}">
                </div>
            </div>
            <div class="col-md-4">
                <label class="form-label text-muted fw-bold">إلى تاريخ</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-calendar text-primary"></i></span>
                    <input type="date" name="end_date" class="form-control border-start-0 bg-light" value="{{ $endDate ?? '' }}">
                </div>
            </div>
            <div class="col-md-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-grow-1 shadow-sm"><i class="fa-solid fa-magnifying-glass me-2"></i>بحث</button>
                <a href="{{ route('reports.index') }}" class="btn btn-light border flex-grow-1"><i class="fa-solid fa-rotate-left me-2"></i>إعادة ضبط</a>
            </div>
        </form>
    </div>
</div>

<!-- Summary -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card bg-success text-white border-0 shadow-sm" style="border-radius: 16px;">
            <div class="card-body p-4 d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="text-white-50 mb-1">إجمالي التحصيلات للفترة المحددة</h5>
                    <h2 class="mb-0 fw-bold">{{ number_format($totalIncome, 2) }} <small class="fs-6 fw-normal">درهم</small></h2>
                </div>
                <div class="display-4 text-white-50">
                    <i class="fa-solid fa-sack-dollar"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Details Table -->
<div class="card border-0 shadow-sm" style="border-radius: 16px;">
    <div class="card-header bg-white border-bottom pt-4 pb-3 px-4">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-list text-primary me-2"></i>تفاصيل الدفعات</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-muted">
                    <tr>
                        <th class="px-4">تاريخ الدفع</th>
                        <th>المحل</th>
                        <th>العقد</th>
                        <th>رقم القسط</th>
                        <th>المبلغ المدفوع</th>
                        <th>طريقة الدفع</th>
                        <th>ملاحظات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($payments as $payment)
                    <tr>
                        <td class="px-4">{{ \Carbon\Carbon::parse($payment->payment_date)->format('Y-m-d') }}</td>
                        <td class="fw-bold">{{ $payment->shop->shop_name ?? '-' }}</td>
                        <td>عقد #{{ $payment->contract_id }}</td>
                        <td>{{ $payment->installment_id ? 'قسط #' . $payment->installment_id : '-' }}</td>
                        <td class="text-success fw-bold">{{ number_format($payment->amount, 2) }}</td>
                        <td>
                            @if($payment->payment_method == 'cash')
                                <span class="badge bg-success"><i class="fa-solid fa-money-bill me-1"></i>نقدي</span>
                            @elseif($payment->payment_method == 'bank_transfer')
                                <span class="badge bg-primary"><i class="fa-solid fa-building-columns me-1"></i>تحويل بنكي</span>
                            @elseif($payment->payment_method == 'card')
                                <span class="badge bg-info text-dark"><i class="fa-solid fa-credit-card me-1"></i>بطاقة/شبكة</span>
                            @elseif($payment->payment_method == 'cheque')
                                <span class="badge bg-secondary"><i class="fa-solid fa-money-check me-1"></i>شيك</span>
                            @else
                                {{ $payment->payment_method }}
                            @endif
                        </td>
                        <td class="text-muted small">{{ Str::limit($payment->notes, 30) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <i class="fa-solid fa-inbox fa-3x mb-3 text-light"></i>
                            <h5>لا توجد تحصيلات مسجلة في هذه الفترة</h5>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection