@extends('layouts.master')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    /* شبكة الكروت الرئيسية */
    .dashboard-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 24px;
    }

    /* جسم الكارت */
    .stat-card-premium {
        background: #ffffff;
        border-radius: 18px;
        padding: 22px 24px;
        position: relative;
        overflow: hidden;
        border: 1px solid #edf2f7;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .stat-card-premium:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
        border-color: #e2e8f0;
    }

    /* الأيقونة المائية بالخلفية */
    .stat-card-watermark {
        position: absolute;
        left: -10px;
        bottom: -15px;
        font-size: 80px;
        opacity: 0.04;
        transform: rotate(-10deg);
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .stat-card-premium:hover .stat-card-watermark {
        transform: rotate(0deg) scale(1.1);
        opacity: 0.07;
    }

    /* بيانات الكارت */
    .stat-card-info h5 {
        font-size: 13px;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .stat-card-info h2 {
        font-size: 26px;
        color: #0f172a;
        font-weight: 800;
        margin: 0;
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .stat-card-info h2 span {
        font-size: 12px;
        font-weight: 600;
        color: #94a3b8;
    }

    .stat-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 600;
        margin-top: 10px;
        padding: 3px 8px;
        border-radius: 6px;
    }

    .stat-card-icon {
        width: 54px;
        height: 54px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .stat-card-premium:hover .stat-card-icon {
        transform: scale(1.08);
    }

    /* 🎨 ألوان الكروت */
    /* أخضر: نشطة */
    .theme-emerald .stat-card-icon {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #059669;
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
    }
    .theme-emerald .stat-card-badge { background: #ecfdf5; color: #047857; }

    /* برتقالي: تنتهي قريباً */
    .theme-amber .stat-card-icon {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #d97706;
        box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
    }
    .theme-amber .stat-card-badge { background: #fff7ed; color: #c2410c; }

    /* أحمر: متأخرة عن التجديد */
    .theme-rose .stat-card-icon {
        background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
        color: #e11d48;
        box-shadow: 0 4px 12px rgba(225, 29, 72, 0.15);
    }
    .theme-rose .stat-card-badge { background: #fff1f2; color: #be123c; }

    /* بنفسجي: تحصيلات السنة */
    .theme-purple .stat-card-icon {
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: #7c3aed;
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
    }
    .theme-purple .stat-card-badge { background: #f5f3ff; color: #6d28d9; }

    /* تنسيق زر الواتساب */
    .btn-whatsapp-direct {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background-color: #25d366;
        color: #ffffff !important;
        border-radius: 50%;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3);
        transition: transform 0.2s ease;
        margin-right: 6px;
    }
    .btn-whatsapp-direct:hover {
        transform: scale(1.15);
    }

    /* قسم الرسوم البيانية */
    .charts-row {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
        margin-top: 24px;
        margin-bottom: 30px;
    }
    @media (max-width: 991px) {
        .charts-row { grid-template-columns: 1fr; }
    }
    .chart-container-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 24px;
        border: 1px solid #edf2f7;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    .chart-container-card h4 {
        font-size: 16px;
        color: #1e293b;
        font-weight: 700;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
</style>
@endsection

@section('title')
{{ __('home.home') }}
@stop

@section('page-header')
<div class="breadcrumb-header justify-content-between align-items-center my-4 p-3 bg-white shadow-sm" style="border-radius: 15px;">
    <div class="left-content {{ App::getLocale() == 'en' ? 'text-left' : 'text-right' }}">
        <h2 class="main-content-title tx-24 mg-b-1 welcoming font-weight-bold" style="color: #004d44;">
            {{ __('home.welcome') }}
            <span class="text-dark">{{ Auth::user()->name }}</span> !
        </h2>
    </div>
    <div class="main-dashboard-header-right">
        <div class="datetime-wrapper d-flex align-items-center px-3 py-2" style="background: #f0f4f4; border-radius: 12px; border: 1px solid #e0e6e6;">
            <div class="ml-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: #004d44; border-radius: 10px; color: white;">
                <i class="far fa-calendar-alt" style="font-size: 18px;"></i>
            </div>
            <div class="text-right">
                <div id="display_date" class="font-weight-bold" style="font-size: 14px; color: #004d44;"></div>
                <div id="display_time" class="text-muted" style="font-size: 12px; font-weight: 600;"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
@can('Home')

    <!-- 1. كروت الإحصائيات الذكية -->
    <div class="dashboard-stats-grid">
        <!-- الاشتراكات النشطة -->
        <div class="stat-card-premium theme-emerald">
            <div class="stat-card-info">
                <h5>الاشتراكات النشطة (السنة)</h5>
                <h2>{{ $activeSubscriptionsCount }} <span>عميل</span></h2>
                <div class="stat-card-badge">
                    <i class="fas fa-check-circle"></i> اشتراكات سارية
                </div>
            </div>
            <div class="stat-card-icon">
                <i class="fas fa-user-check"></i>
            </div>
            <i class="fas fa-user-check stat-card-watermark"></i>
        </div>

        <!-- اشتراكات تقترب من الانتهاء -->
        <div class="stat-card-premium theme-amber">
            <div class="stat-card-info">
                <h5>اشتراكات تنتهي قريباً</h5>
                <h2>{{ $expiringSoonCount }} <span>عميل</span></h2>
                <div class="stat-card-badge">
                    <i class="fas fa-hourglass-half"></i> خلال 30 يوماً
                </div>
            </div>
            <div class="stat-card-icon">
                <i class="fas fa-hourglass-half"></i>
            </div>
            <i class="fas fa-hourglass-half stat-card-watermark"></i>
        </div>

        <!-- اشتراكات متأخرة عن السداد -->
        <div class="stat-card-premium theme-rose">
            <div class="stat-card-info">
                <h5>اشتراكات متأخرة</h5>
                <h2>{{ $overdueCount }} <span>عميل</span></h2>
                <div class="stat-card-badge">
                    <i class="fas fa-exclamation-triangle"></i> تحتاج متابعة فورية
                </div>
            </div>
            <div class="stat-card-icon">
                <i class="fas fa-bell"></i>
            </div>
            <i class="fas fa-bell stat-card-watermark"></i>
        </div>

        <!-- إجمالي مدفوعات السنة -->
        <div class="stat-card-premium theme-purple">
            <div class="stat-card-info">
                <h5>إجمالي مدفوعات السنة</h5>
                <h2>{{ number_format($yearSales, 2) }} <span>ريال</span></h2>
                <div class="stat-card-badge">
                    <i class="fas fa-chart-line"></i> تحصيلات مسددة
                </div>
            </div>
            <div class="stat-card-icon">
                <i class="fas fa-wallet"></i>
            </div>
            <i class="fas fa-wallet stat-card-watermark"></i>
        </div>
    </div>

    <!-- 2. جدول التجديدات القادمة -->
    <div class="card custom-card mt-4" style="border-radius: 16px; border: 1px solid #edf2f7; box-shadow: 0 4px 12px rgba(0,0,0,0.03); background: #fff;">
        <div class="card-header pb-0 border-bottom-0 bg-white" style="border-radius: 16px 16px 0 0; padding: 20px 24px;">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2">
                    <h4 class="card-title mg-b-0" style="font-size: 16px; color: #1e293b; font-weight: 700; margin: 0;">
                        <i class="fas fa-calendar-check text-success mg-l-5"></i> التجديدات القادمة
                    </h4>
                    @if(isset($upcomingRenewals) && $upcomingRenewals->isNotEmpty())
                        <span class="badge" style="background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; border: 1px solid #d1fae5;">
                            {{ $upcomingRenewals->count() }} اشتراكات معروضة
                        </span>
                    @endif
                </div>
                <div>
                    <a href="{{ route('customers.report') }}" class="btn px-3" style="background: #004d44; color: #ffffff; font-weight: 600; border-radius: 12px; font-size: 13px; box-shadow: 0 4px 10px rgba(0, 77, 68, 0.15); border: none;">
                        <i class="fas fa-address-book mg-l-5"></i> دليل بيانات العملاء الشامل
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body" style="padding: 10px 24px 24px 24px;">
            <div class="table-responsive">
                <table class="table table-hover text-center" style="margin-bottom: 0; vertical-align: middle;">
                    <thead>
                        <tr style="background-color: #f8fafc; border-bottom: 1px solid #edf2f7;">
                            <th style="color: #475569; font-size: 12px; font-weight: 700; padding: 12px;">رقم الفاتورة</th>
                            <th style="color: #475569; font-size: 12px; font-weight: 700; padding: 12px;">اسم العميل</th>
                            <th style="color: #475569; font-size: 12px; font-weight: 700; padding: 12px;">رقم الجوال والتواصل</th>
                            <th style="color: #475569; font-size: 12px; font-weight: 700; padding: 12px;">تاريخ التجديد (الانتهاء)</th>
                            <th style="color: #475569; font-size: 12px; font-weight: 700; padding: 12px;">الأيام المتبقية</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($upcomingRenewals as $renewal)
                            @php
                                $rawPhone = preg_replace('/[^0-9]/', '', $renewal->customer_phone ?? '');
                                $waPhone = str_starts_with($rawPhone, '05') ? '966' . substr($rawPhone, 1) : $rawPhone;
                                $msgUpcoming = urlencode("السلام عليكم ورحمة الله، نود تذكيركم بقرب موعد تجديد اشتراككم في النظام المحاسبي بتاريخ: " . $renewal->renewal_date);
                            @endphp
                            <tr style="border-top: 1px solid #f1f5f9;">
                                <td>
                                    <span style="background: #eff6ff; color: #2563eb; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 11px;">
                                        #{{ $renewal->invoice_id }}
                                    </span>
                                </td>
                                <td><strong class="text-dark" style="font-size: 13px;">{{ $renewal->customer_name ?? '---' }}</strong></td>
                                <td>
                                    <div class="d-flex align-items-center justify-content-center">
                                        <span dir="ltr" class="text-muted font-weight-bold" style="font-size: 12px;">{{ $renewal->customer_phone ?? '---' }}</span>
                                        @if(!empty($renewal->customer_phone))
                                            <a href="https://wa.me/{{ $waPhone }}?text={{ $msgUpcoming }}" target="_blank" class="btn-whatsapp-direct" title="إرسال تذكير عبر واتساب">
                                                <i class="fab fa-whatsapp"></i>
                                            </a>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <span class="badge" style="background-color: #fff7ed; color: #c2410c; font-weight: 700; padding: 6px 12px; border-radius: 8px; font-size: 12px; border: 1px solid #ffedd5; white-space: nowrap;">
                                        <i class="far fa-clock mg-l-3"></i> {{ $renewal->renewal_date }}
                                    </span>
                                </td>
                                <td>
                                    @if($renewal->days_left == 0)
                                        <span class="text-warning font-weight-bold" style="font-size: 13px; white-space: nowrap;">
                                            <i class="fas fa-exclamation-circle mg-l-3"></i> ينتهي اليوم!
                                        </span>
                                    @elseif($renewal->days_left == 1)
                                        <span class="text-danger font-weight-bold" style="font-size: 13px; white-space: nowrap;">
                                            <i class="fas fa-hourglass-start mg-l-3"></i> باقي يوم واحد (غداً)
                                        </span>
                                    @elseif($renewal->days_left <= 7)
                                        <span class="text-danger font-weight-bold" style="font-size: 13px; white-space: nowrap;">
                                            <i class="fas fa-exclamation-triangle mg-l-3"></i> باقي {{ $renewal->days_left }} أيام فقط!
                                        </span>
                                    @else
                                        <span class="text-success font-weight-bold" style="font-size: 13px; white-space: nowrap;">
                                            باقي {{ $renewal->days_left }} يوم
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-muted py-4" style="font-size: 13px;">
                                    <i class="fas fa-info-circle mg-l-2 text-info"></i> لا توجد اشتراكات قريبة الانتهاء حالياً.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 3. جدول الاشتراكات المتأخرة عن التجديد -->
    <div class="card custom-card mt-4" style="border-radius: 16px; border: 1px solid #fee2e2; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.04); background: #fff;">
        <div class="card-header pb-0 border-bottom-0 bg-white" style="border-radius: 16px 16px 0 0; padding: 20px 24px;">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h4 class="card-title mg-b-0" style="font-size: 16px; color: #991b1b; font-weight: 700; margin: 0;">
                    <i class="fas fa-exclamation-triangle text-danger mg-l-5"></i> اشتراكات متأخرة عن التجديد (تحتاج متابعة فورية)
                </h4>
                @if(isset($overdueRenewals) && $overdueRenewals->isNotEmpty())
                    <span class="badge" style="background: #fee2e2; color: #b91c1c; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 8px; border: 1px solid #fecaca;">
                        <i class="fas fa-bell mg-l-2"></i> {{ $overdueRenewals->count() }} عملاء متأخرين
                    </span>
                @endif
            </div>
        </div>
        <div class="card-body" style="padding: 10px 24px 24px 24px;">
            <div class="table-responsive">
                <table class="table table-hover text-center" style="margin-bottom: 0; vertical-align: middle;">
                    <thead>
                        <tr style="background-color: #fff5f5; border-bottom: 1px solid #fee2e2;">
                            <th style="color: #991b1b; font-size: 12px; font-weight: 700; padding: 12px;">رقم الفاتورة</th>
                            <th style="color: #991b1b; font-size: 12px; font-weight: 700; padding: 12px;">اسم العميل</th>
                            <th style="color: #991b1b; font-size: 12px; font-weight: 700; padding: 12px;">رقم الجوال والتواصل</th>
                            <th style="color: #991b1b; font-size: 12px; font-weight: 700; padding: 12px;">تاريخ انتهاء الاشتراك</th>
                            <th style="color: #991b1b; font-size: 12px; font-weight: 700; padding: 12px;">مدة التأخير</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($overdueRenewals as $overdue)
                            @php
                                $rawPhoneOverdue = preg_replace('/[^0-9]/', '', $overdue->customer_phone ?? '');
                                $waPhoneOverdue = str_starts_with($rawPhoneOverdue, '05') ? '966' . substr($rawPhoneOverdue, 1) : $rawPhoneOverdue;
                                $msgOverdue = urlencode("السلام عليكم ورحمة الله، نود إشعاركم بأن اشتراككم في النظام المحاسبي قد انتهى بتاريخ: " . $overdue->renewal_date . "، يرجى التكرم بالتجديد لاستمرار الخدمة دون انقطاع.");
                            @endphp
                            <tr style="border-top: 1px solid #fef2f2;">
                                <td>
                                    <span style="background: #fee2e2; color: #b91c1c; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 11px;">
                                        #{{ $overdue->invoice_id }}
                                    </span>
                                </td>
                                <td><strong class="text-dark" style="font-size: 13px;">{{ $overdue->customer_name ?? '---' }}</strong></td>
                                <td>
                                    <div class="d-flex align-items-center justify-content-center">
                                        <span dir="ltr" class="text-muted font-weight-bold" style="font-size: 12px;">{{ $overdue->customer_phone ?? '---' }}</span>
                                        @if(!empty($overdue->customer_phone))
                                            <a href="https://wa.me/{{ $waPhoneOverdue }}?text={{ $msgOverdue }}" target="_blank" class="btn-whatsapp-direct" title="مراسلة العميل بالواتساب لتذكيره بالسداد">
                                                <i class="fab fa-whatsapp"></i>
                                            </a>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <span class="badge" style="background-color: #fef2f2; color: #b91c1c; font-weight: 700; padding: 6px 12px; border-radius: 8px; font-size: 12px; border: 1px solid #fecaca; white-space: nowrap;">
                                        <i class="far fa-calendar-times mg-l-3"></i> {{ $overdue->renewal_date }}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-danger font-weight-bold" style="font-size: 13px; white-space: nowrap;">
                                        <i class="fas fa-clock mg-l-3"></i> متأخر منذ {{ $overdue->days_overdue }} يوم
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-muted py-4" style="font-size: 13px;">
                                    <i class="fas fa-check-circle text-success mg-l-2"></i> لا يوجد أي اشتراكات متأخرة حالياً.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 4. الرسوم البيانية -->
    <div class="charts-row">
        <div class="chart-container-card">
            <h4><i class="fas fa-chart-line text-primary"></i> تحليل حركة ومبيعات النظام (آخر 6 أشهر)</h4>
            <canvas id="salesTrendChart" height="110"></canvas>
        </div>

        <div class="chart-container-card">
            <h4><i class="fas fa-map-marked-alt text-warning"></i> المبيعات والعملاء حسب المنطقة</h4>
            <canvas id="regionDistributionChart"></canvas>
        </div>
    </div>

@endcan
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
const salesCtx = document.getElementById('salesTrendChart').getContext('2d');
new Chart(salesCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($monthlyTrend->pluck('month')) !!},
        datasets: [{
            label: 'إجمالي المبيعات (ريال)',
            data: {!! json_encode($monthlyTrend->pluck('sales')) !!},
            borderColor: '#2563eb',
            backgroundColor: 'rgba(37, 99, 235, 0.05)',
            borderWidth: 3,
            fill: true,
            tension: 0.3
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true } }
    }
});

const regionCtx = document.getElementById('regionDistributionChart').getContext('2d');
new Chart(regionCtx, {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($regionsData->pluck('region_name')) !!},
        datasets: [{
            data: {!! json_encode($regionsData->pluck('total_invoices')) !!},
            backgroundColor: ['#2563eb', '#137333', '#c2410c', '#7c3aed', '#06b6d4', '#e11d48'],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'bottom' }
        }
    }
});

function updateDateTime() {
    var now = new Date();
    var dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    var currentDate = now.toLocaleDateString('ar-SA', dateOptions);
    var timeOptions = { hour: '2-digit', minute: '2-digit', hour12: true };
    var currentTime = now.toLocaleTimeString('ar-SA', timeOptions);

    if (document.getElementById('display_date')) document.getElementById('display_date').innerHTML = currentDate;
    if (document.getElementById('display_time')) document.getElementById('display_time').innerHTML = currentTime;

    setTimeout(updateDateTime, 1000);
}

$(document).ready(function() {
    updateDateTime();
});
</script>
@endsection