@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
@endpush

@section('content')
<div style="padding: 2rem;">
    <h1 style="color: #d4af37; margin-bottom: 2rem;">إحصائيات الفاتورات</h1>

    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem;">
        <form method="GET" action="{{ route('admin.invoices.statistics') }}" style="display: grid; gap: 1rem;">
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
                <div>
                    <label style="color: #999; font-size: 0.75rem;">الفرع</label>
                    <select name="branch_id" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                        <option value="">الكل</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                                {{ $branch->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label style="color: #999; font-size: 0.75rem;">من التاريخ</label>
                    <input type="text" id="startDatePicker" name="start_date" value="{{ $startDate->format('Y-m-d') }}" placeholder="اختر التاريخ" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div>
                    <label style="color: #999; font-size: 0.75rem;">إلى التاريخ</label>
                    <input type="text" id="endDatePicker" name="end_date" value="{{ $endDate->format('Y-m-d') }}" placeholder="اختر التاريخ" style="width: 100%; padding: 0.5rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div style="display: flex; align-items: flex-end;">
                    <button type="submit" style="width: 100%; padding: 0.5rem; background: #d4af37; color: black; border: none; border-radius: 0.5rem; font-weight: bold; cursor: pointer;">
                        تصفية
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem;">
        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; text-align: center;">
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">إجمالي الفاتورات</div>
            <div style="color: #d4af37; font-size: 2.5rem; font-weight: bold;">{{ $stats['total_invoices'] }}</div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; text-align: center;">
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">الفاتورات الصادرة</div>
            <div style="color: #3b82f6; font-size: 2.5rem; font-weight: bold;">{{ $stats['issued_invoices'] }}</div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; text-align: center;">
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">الفاتورات المدفوعة</div>
            <div style="color: #22c55e; font-size: 2.5rem; font-weight: bold;">{{ $stats['paid_invoices'] }}</div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; text-align: center;">
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">مدفوعة جزئياً</div>
            <div style="color: #f59e0b; font-size: 2.5rem; font-weight: bold;">{{ $stats['partially_paid_invoices'] }}</div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; text-align: center;">
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">الفاتورات الملغاة</div>
            <div style="color: #ef4444; font-size: 2.5rem; font-weight: bold;">{{ $stats['cancelled_invoices'] }}</div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; text-align: center;">
            <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">نسبة الدفع</div>
            <div style="color: #10b981; font-size: 2.5rem; font-weight: bold;">
                {{ $stats['total_amount'] > 0 ? round(($stats['paid_amount'] / $stats['total_amount']) * 100, 1) : 0 }}%
            </div>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
            <h3 style="color: #d4af37; margin-bottom: 1rem;">الإجمالي المالي</h3>
            
            <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333;">
                <span style="color: #999;">المبلغ الإجمالي:</span>
                <span style="color: #d4af37; font-weight: bold;">{{ number_format($stats['total_amount'], 2) }} ر.س</span>
            </div>

            <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333;">
                <span style="color: #999;">المبلغ المدفوع:</span>
                <span style="color: #22c55e; font-weight: bold;">{{ number_format($stats['paid_amount'], 2) }} ر.س</span>
            </div>

            <div style="display: flex; justify-content: space-between;">
                <span style="color: #999;">المبلغ المتبقي:</span>
                <span style="color: #ef4444; font-weight: bold;">{{ number_format($stats['remaining_amount'], 2) }} ر.س</span>
            </div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
            <h3 style="color: #d4af37; margin-bottom: 1rem;">الملخص</h3>
            
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.75rem;">
                <span style="color: #999;">إجمالي الفاتورات:</span>
                <span style="color: white; font-weight: bold;">{{ $stats['total_invoices'] }}</span>
            </div>

            <div style="display: flex; justify-content: space-between; margin-bottom: 0.75rem;">
                <span style="color: #999;">فاتورة / يوم:</span>
                <span style="color: white; font-weight: bold;">
                    {{ round($stats['total_invoices'] / max(1, now()->diffInDays($startDate)), 2)) }}
                </span>
            </div>

            <div style="display: flex; justify-content: space-between; margin-bottom: 0.75rem;">
                <span style="color: #999;">متوسط الفاتورة:</span>
                <span style="color: white; font-weight: bold;">
                    {{ $stats['total_invoices'] > 0 ? number_format($stats['total_amount'] / $stats['total_invoices'], 2) : 0 }} ر.س
                </span>
            </div>

            <div style="display: flex; justify-content: space-between;">
                <span style="color: #999;">نسبة الدفع:</span>
                <span style="color: #22c55e; font-weight: bold;">
                    {{ $stats['total_amount'] > 0 ? round(($stats['paid_amount'] / $stats['total_amount']) * 100, 2) : 0 }}%
                </span>
            </div>
        </div>
    </div>

    <div style="margin-top: 2rem; text-align: center;">
        <a href="{{ route('admin.invoices.index') }}" style="background: #6b7280; color: white; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-weight: bold; display: inline-block;">
            ← العودة إلى الفاتورات
        </a>
    </div>
</div>

<script>
    // تفعيل التقويم
    flatpickr('#startDatePicker', {
        mode: 'single',
        dateFormat: 'Y-m-d',
        locale: 'ar',
        allowInput: true,
    });

    flatpickr('#endDatePicker', {
        mode: 'single',
        dateFormat: 'Y-m-d',
        locale: 'ar',
        allowInput: true,
    });
</script>
@endsection
