@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>
    .report-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        transition: transform 0.2s;
    }
    .report-card:hover {
        transform: translateY(-3px);
    }
    .badge-custom {
        padding: 6px 12px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .badge-custom-success { background-color: #dcfce7; color: #15803d; }
    .badge-custom-danger { background-color: #fee2e2; color: #b91c1c; }
    .status-paid { background-color: #e0f2fe; color: #0369a1; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; }
    .status-unpaid { background-color: #fef3c7; color: #d97706; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; }
    .premium-table th {
        background-color: #f8fafc;
        color: #475569;
        font-weight: 700;
        border-bottom: 2px solid #e2e8f0;
    }
    .premium-table td { vertical-align: middle; }
    .filter-section {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    }
</style>
@endsection

@section('title')
تقرير العملاء والاشتراكات الشامل
@stop

@section('page-header')
<div class="breadcrumb-header justify-content-between mb-4">
    <div class="my-auto">
        <div class="d-flex">
            <h4 class="content-title mb-0 my-auto text-primary" style="font-weight: bold;">
                <i class="fas fa-chart-line mr-2"></i> تقرير الاشتراكات والعملاء المدمج
            </h4>
        </div>
        <p class="text-muted mt-1 font-weight-light">تقرير تفصيلي يربط بيانات الفواتير المحاسبية بتفاصيل الفروع والمستخدمين من جدول المبيعات</p>
    </div>
</div>
@endsection

@section('content')

<!-- 1. قسم كروت الإحصائيات (Stats Cards) -->
<div class="row row-sm mb-4">
    <div class="col-xl col-lg-4 col-md-6 col-sm-12 mb-3">
        <div class="card report-card bg-primary-gradient text-white h-100">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 tx-13" style="opacity: 0.9;">العملاء بالتقرير / الكلي</p>
                        <h3 class="mb-0 font-weight-bold" style="font-size: 20px;">{{ $stats['filtered_count'] }} <span class="tx-14 font-weight-light">/ {{ $stats['total_customers'] }}</span></h3>
                    </div>
                    <div class="bg-white-2 p-2 rounded-circle">
                        <i class="fas fa-users fa-lg text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl col-lg-4 col-md-6 col-sm-12 mb-3">
        <div class="card report-card bg-info-gradient text-white h-100">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 tx-13" style="opacity: 0.9;">إجمالي فروع العملاء</p>
                        <h3 class="mb-0 font-weight-bold" style="font-size: 22px;">{{ number_format($stats['total_branches']) }}</h3>
                    </div>
                    <div class="bg-white-2 p-2 rounded-circle">
                        <i class="fas fa-store fa-lg text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl col-lg-4 col-md-6 col-sm-12 mb-3">
        <div class="card report-card bg-success-gradient text-white h-100">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 tx-13" style="opacity: 0.9;">الفواتير المسددة</p>
                        <h3 class="mb-0 font-weight-bold" style="font-size: 22px;">{{ number_format($stats['paid_invoices']) }}</h3>
                    </div>
                    <div class="bg-white-2 p-2 rounded-circle">
                        <i class="fas fa-check-circle fa-lg text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl col-lg-4 col-md-6 col-sm-12 mb-3">
        <div class="card report-card bg-warning-gradient text-white h-100">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 tx-13" style="opacity: 0.9;">غير المسددة</p>
                        <h3 class="mb-0 font-weight-bold" style="font-size: 22px;">{{ number_format($stats['unpaid_invoices']) }}</h3>
                    </div>
                    <div class="bg-white-2 p-2 rounded-circle">
                        <i class="fas fa-times-circle fa-lg text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl col-lg-8 col-md-12 col-sm-12 mb-3">
        <div class="card report-card bg-purple-gradient text-white h-100">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <p class="mb-1 tx-13" style="opacity: 0.9;">الإيرادات المحصلة</p>
                        <h3 class="mb-0 font-weight-bold" style="font-size: 20px;">{{ number_format($stats['total_revenue'], 2) }} <small class="tx-12">ريال</small></h3>
                    </div>
                    <div class="bg-white-2 p-2 rounded-circle">
                        <i class="fas fa-money-bill-wave fa-lg text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 2. قسم فلاتر البحث -->
<div class="filter-section">
  <form action="{{ route('customers.report') }}" method="GET">
    <div class="row row-sm align-items-end">
        <div class="col-md-3 mb-3">
            <label class="font-weight-bold text-muted mb-2">بحث باسم العميل أو الجوال</label>
            <div class="input-group">
                <input type="text" name="search" class="form-control" placeholder="اكتب اسم العميل أو رقم الجوال..." value="{{ request('search') }}">
                <div class="input-group-append">
                    <span class="input-group-text bg-light"><i class="fas fa-search text-muted"></i></span>
                </div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <label class="font-weight-bold text-muted mb-2">نوع البرنامج</label>
            <select name="software_type" class="form-control">
                <option value="">الكل</option>
                <option value="cloud" {{ request('software_type') == 'cloud' ? 'selected' : '' }}>سحابي</option>
                <option value="local" {{ request('software_type') == 'local' ? 'selected' : '' }}>محلي</option>
            </select>
        </div>

        <div class="col-md-2 mb-3">
            <label class="font-weight-bold text-muted mb-2">نوع السيرفر</label>
            <select name="server_type" class="form-control">
                <option value="">الكل</option>
                <option value="new" {{ request('server_type') == 'new' ? 'selected' : '' }}>جديد (New)</option>
                <option value="old" {{ request('server_type') == 'old' ? 'selected' : '' }}>قديم (Old)</option>
                <option value="local" {{ request('server_type') == 'local' ? 'selected' : '' }}>محلي (Local)</option>
            </select>
        </div>

        <div class="col-md-1 mb-3">
            <label class="font-weight-bold text-muted mb-2">الدفع</label>
            <select name="payment_status" class="form-control">
                <option value="">الكل</option>
                <option value="1" {{ request('payment_status') == '1' ? 'selected' : '' }}>تم</option>
                <option value="0" {{ request('payment_status') == '0' ? 'selected' : '' }}>لم يتم</option>
            </select>
        </div>

        <div class="col-md-2 mb-3">
            <label class="font-weight-bold text-muted mb-2">حالة الاشتراك</label>
            <select name="status" class="form-control">
                <option value="">الكل</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>نشط</option>
                <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>منتهي</option>
            </select>
        </div>

        <div class="col-md-2 mb-3">
            <label class="d-none d-md-block mb-2">&nbsp;</label>
            <div class="d-flex" style="gap: 8px;">
                <button type="submit" class="btn btn-primary flex-grow-1 p-2 font-weight-bold">
                    <i class="fas fa-filter mr-1"></i> تصفية
                </button>
                <a href="{{ route('customers.report') }}" class="btn btn-secondary p-2 font-weight-bold" title="إعادة ضبط الفلاتر">
                    <i class="fas fa-undo"></i>
                </a>
            </div>
        </div>
    </div>
</form>
</div>

<!-- 3. جدول البيانات المدمج الشامل -->
<div class="card report-card">
    <div class="card-body p-0">
        <div class="table-responsive">
         <table class="table text-center premium-table mb-0" width="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>
            <tbody>
                @forelse ($reports as $customer)
                    @php
                        // جلب أحدث فاتورة مرتبطة بالعميل الحالي لقراءة تفاصيلها
                        $invoice = $customer->invoices->first();

                        // جلب تفاصيل المبيعات لأحدث فاتورة
                        $saleDetail = $invoice ? $invoice->sales->first() : null;

                        $totalWithTax = $invoice ? ($invoice->cashamount + $invoice->bankamount + $invoice->creaditamount + $invoice->Bank_transfer) : 0;
                    @endphp
                    <tr>
                        <td><span class="badge badge-light p-2">#{{ $customer->id }}</span></td>
                        <td>
                            <div class="text-right d-inline-block">
                                <strong class="text-dark d-block">{{ $customer->name ?? '---' }}</strong>
                                <small class="text-muted"><i class="fas fa-phone-alt mr-1"></i> {{ $customer->phone ?? '---' }}</small>
                            </div>
                        </td>

                        <td>
                            <span class="text-secondary font-weight-bold" style="font-size: 12px;">
                                <i class="far fa-calendar-check text-success ml-1"></i>
                                {{ $customer->subscription_date ? \Carbon\Carbon::parse($customer->subscription_date)->format('Y-m-d') : '---' }}
                            </span>
                        </td>

                        <td>
                            @if($saleDetail)
                                @if(($saleDetail->software_type ?? 'cloud') == 'cloud')
                                    <span class="badge-custom" style="background-color: #e0f2fe; color: #0369a1;">
                                        <i class="fas fa-cloud"></i> سحابي
                                    </span>
                                @else
                                    <span class="badge-custom" style="background-color: #f1f5f9; color: #475569;">
                                        <i class="fas fa-laptop-house"></i> محلي
                                    </span>
                                @endif
                            @else
                                <span class="text-muted">---</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge badge-warning p-2 text-dark font-weight-bold">
                                <i class="fas fa-store mr-1"></i> {{ $saleDetail->branches_count ?? '1' }}
                            </span>
                        </td>
                        <td>
                            @if($customer->server_type == 'new')
                                <span class="badge badge-pill p-2 px-3 text-white" style="background-color: #0284c7; font-size: 11px;">
                                    <i class="fas fa-server mr-1"></i> جديد
                                </span>
                            @elseif($customer->server_type == 'old')
                                <span class="badge badge-pill p-2 px-3 text-white" style="background-color: #f97316; font-size: 11px;">
                                    <i class="fas fa-database mr-1"></i> قديم
                                </span>
                            @elseif($customer->server_type == 'local')
                                <span class="badge badge-pill p-2 px-3 text-dark" style="background-color: #e2e8f0; font-size: 11px;">
                                    <i class="fas fa-hdd mr-1"></i> محلي
                                </span>
                            @else
                                <span class="text-muted">---</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge badge-info p-2 text-white font-weight-bold">
                                <i class="fas fa-users mr-1"></i> {{ $saleDetail->users_count ?? '1' }}
                            </span>
                        </td>
                    <td>
                        @if($saleDetail)
                            @if(($saleDetail->software_type ?? 'cloud') == 'local')
                                <div class="d-flex flex-column align-items-center" style="gap: 4px;">
                                    <span class="badge-custom" style="background-color: #e0f2fe; color: #0369a1; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold;">
                                        <i class="fas fa-infinity mr-1"></i> مدى الحياة
                                    </span>
                                    <small class="text-muted font-weight-bold" style="font-size: 11px;">
                                        <i class="far fa-calendar-alt ml-1"></i> {{ $saleDetail->subscription_start_date ?? '---' }}
                                    </small>
                                </div>
                            @else
                                @if($saleDetail->subscription_end_date)
                                    @if(\Carbon\Carbon::parse($saleDetail->subscription_end_date)->isPast())
                                        <span class="badge-custom badge-custom-danger">
                                            <i class="fas fa-exclamation-circle mr-1"></i> منتهي ({{ $saleDetail->subscription_end_date }})
                                        </span>
                                    @else
                                        <span class="badge-custom badge-custom-success">
                                            <i class="fas fa-check-circle mr-1"></i> نشط ({{ $saleDetail->subscription_end_date }})
                                        </span>
                                    @endif
                                @else
                                    <span class="text-muted">---</span>
                                @endif
                            @endif
                        @else
                            <span class="text-muted">---</span>
                        @endif
                    </td>
                        <td>
                            @if($invoice)
                                <span class="{{ $invoice->payment_status == 1 ? 'status-paid' : 'status-unpaid' }}">
                                    <i class="fas {{ $invoice->payment_status == 1 ? 'fa-check' : 'fa-times' }} mr-1"></i>
                                    {{ $invoice->payment_status == 1 ? 'تم الدفع' : 'لم يتم الدفع' }}
                                </span>
                            @else
                                <span class="text-muted">---</span>
                            @endif
                        </td>
                        <td class="font-weight-bold text-primary">
                            {{ number_format($totalWithTax, 2) }} <small class="text-muted">ريال</small>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="p-5 text-center text-muted">
                            <i class="fas fa-folder-open fa-3x mb-3 text-light"></i>
                            <p class="mb-0 font-weight-bold">لا توجد سجلات عملاء تطابق الفلاتر الحالية</p>
                        </td>
                    </tr>
                @endempty
            </tbody>
        </table>
        </div>
    </div>
</div>

<!-- 4. روابط التنقل بين الصفحات Pagination -->
<div class="d-flex justify-content-center mt-4">
    {{ $reports->links() }}
</div>

@endsection