@extends('company.layouts.app')

@section('title', 'التقرير المبسط')

@section('content')
<div class="card">
    <h3>تقرير مبسط</h3>
    <p class="muted">ملخص سريع للأداء المالي داخل نطاق التاريخ المحدد.</p>

    <form class="search" method="GET">
        <label>
            من
            <input type="date" name="from" value="{{ $filters['from'] }}">
        </label>
        <label>
            إلى
            <input type="date" name="to" value="{{ $filters['to'] }}">
        </label>
        <label>
            حالة المديونية
            <select name="status">
                <option value="">كل الحالات</option>
                <option value="pending" @selected($filters['status'] === 'pending')>معلقة</option>
                <option value="partial" @selected($filters['status'] === 'partial')>جزئية</option>
                <option value="paid" @selected($filters['status'] === 'paid')>مدفوعة</option>
                <option value="overdue" @selected($filters['status'] === 'overdue')>متأخرة</option>
            </select>
        </label>
        <button type="submit">تحديث التقرير</button>
        <a href="{{ route('company.reports.index') }}">إعادة تعيين</a>
    </form>
</div>

<div class="grid">
    <div class="metric"><span>عدد المديونيات</span><b>{{ $summary['dues_count'] }}</b></div>
    <div class="metric"><span>إجمالي المديونيات</span><b>{{ number_format($summary['dues_total'], 2) }}</b></div>
    <div class="metric"><span>المتبقي للتحصيل</span><b>{{ number_format($summary['dues_remaining'], 2) }}</b></div>
    <div class="metric"><span>التحصيلات (وارد)</span><b>{{ number_format($summary['payments_in'], 2) }}</b></div>
    <div class="metric"><span>المدفوعات (صادر)</span><b>{{ number_format($summary['payments_out'], 2) }}</b></div>
    <div class="metric"><span>الصافي</span><b>{{ number_format($summary['payments_in'] - $summary['payments_out'], 2) }}</b></div>
</div>

<div class="grid" style="margin-top:14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
    <div class="card">
        <h3>اتجاه الحركات المالية</h3>
        <div class="chart-wrap">
            <canvas id="paymentsTrendChart"></canvas>
        </div>
    </div>

    <div class="card">
        <h3>توزيع المتبقي حسب الحالة</h3>
        <div class="chart-wrap">
            <canvas id="duesBreakdownChart"></canvas>
        </div>
    </div>
</div>

<div class="card">
    <h3>تفصيل حالات المديونيات</h3>
    <table>
        <tr>
            <th>الحالة</th>
            <th>عدد السجلات</th>
            <th>إجمالي المتبقي</th>
        </tr>
        @forelse($duesStatusRows as $row)
            <tr>
                <td>
                    @php
                        $status = $row->due_status;
                        $statusLabel = $status instanceof \App\Enums\DueStatus
                            ? $status->label()
                            : (\App\Enums\DueStatus::tryFrom(is_string($status) ? $status : '')?->label() ?? (is_string($status) && $status !== '' ? $status : '-'));
                    @endphp
                    {{ $statusLabel }}
                </td>
                <td>{{ $row->total_items }}</td>
                <td>{{ number_format((float) $row->remaining_total, 2) }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="3">لا توجد بيانات في الفترة المحددة.</td>
            </tr>
        @endforelse
    </table>
</div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const paymentsTrendCtx = document.getElementById('paymentsTrendChart');
        if (paymentsTrendCtx) {
            new Chart(paymentsTrendCtx, {
                type: 'bar',
                data: {
                    labels: @json($charts['trend_labels']),
                    datasets: [
                        {
                            label: 'وارد',
                            data: @json($charts['trend_in']),
                            backgroundColor: '#1f4ea8'
                        },
                        {
                            label: 'صادر',
                            data: @json($charts['trend_out']),
                            backgroundColor: '#f79009'
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        x: { stacked: false },
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        const duesBreakdownCtx = document.getElementById('duesBreakdownChart');
        if (duesBreakdownCtx) {
            new Chart(duesBreakdownCtx, {
                type: 'doughnut',
                data: {
                    labels: @json($charts['due_status_labels']),
                    datasets: [{
                        data: @json($charts['due_status_totals']),
                        backgroundColor: ['#3b82f6', '#f59e0b', '#10b981', '#ef4444', '#6366f1']
                    }]
                },
                options: { maintainAspectRatio: false }
            });
        }
    </script>
@endpush