@extends('layouts.master')
@section('title', 'تقرير مبيعات الخدمات الإحصائي')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* التكيف مع الثيم الداكن والفاتح باستخدام متغيرات النظام */
        :root {
            --card-bg: #555353;
            --text-main: #212529;
            --stat-bg: #6d6f70;
        }

        [data-bs-theme="dark"] {
            --card-bg: #4e5255;
            --text-main: #f8f9fa;
            --stat-bg: #464749;
        }

        .stat-card {
            border: none;
            border-radius: 15px;
            background-color: var(--card-bg) !important;
            color: var(--text-main) !important;
            transition: transform 0.3s;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        /* تعديل ألوان الأيقونات لتبقى واضحة في الثيمين */
        .icon-box {
            width: 55px;
            height: 55px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .custom-table {
            border-radius: 15px;
            overflow: hidden;
            border: none !important;
        }

        /* جعل الهيدر بلون مميز وثابت أو متكيف */
        .custom-table thead tr {
            background-color: #0d6efd !important;
            /* لون البراند الأساسي */
            color: #ffffff !important;
        }

        .filter-section {
            background-color: var(--stat-bg);
            border-radius: 15px;
            padding: 20px;
        }

        /* تنسيقات الطباعة القوية */
        @media print {
            body {
                direction: rtl !important;
                background: #fff !important;
            }

            .no-print {
                display: none !important;
            }

            /* تنسيق الكروت العلوية (المشتركين والإيرادات) */
            .stat-card {
                border: 1px solid #ccc !important;
                margin-bottom: 20px !important;
                padding: 15px !important;
                flex: 0 0 48% !important;
                /* لضمان ظهورهم بجانب بعض في الطباعة */
            }

            /* تنسيق الجدول ليطابق صورة النظام */
            .custom-table {
                width: 100% !important;
                border: 1px solid #000 !important;
                border-collapse: collapse !important;
            }

            .custom-table thead tr {
                background-color: #dbdbdb !important;
                /* لون غامق كما في الصورة */
                color: #ffffff !important;
                -webkit-print-color-adjust: exact;
            }

            .custom-table th,
            .custom-table td {
                border: 1px solid #444 !important;
                padding: 12px 8px !important;
                font-size: 14px !important;
            }

            .custom-table tfoot tr {
                background-color: #f2f2f2 !important;
                font-weight: bold !important;
                -webkit-print-color-adjust: exact;
            }
        }




        .badge.bg-primary.bg-opacity-10 {
            color: #0d6efd !important;
            background-color: rgba(13, 110, 253, 0.1) !important;
            font-size: 0.9rem;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">

        <div class="row mb-4 no-print align-items-center">
            <div class="col-md-7">
                <h3 class="fw-bold"><i class="fas fa-chart-line text-primary me-2"></i> إحصائيات مبيعات الخدمات</h3>
            </div>
            <div class="col-md-5 text-center">
                <button id="printReportBtn" class="btn btn-outline-secondary rounded-pill px-4 me-2">
                    <i class="fas fa-print"></i> طباعة
                </button>
                <a href="{{ route('reports.services.exportStats', request()->all()) }}"
                    class="btn btn-success rounded-pill px-4">
                    <i class="fas fa-file-excel me-1"></i> تصدير إكسيل
                </a>
            </div>
        </div>

        <div class="filter-section mb-4 shadow-sm no-print">
            <form method="GET" action="{{ route('reports.services') }}" id="filterForm" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label small fw-bold">من تاريخ</label>
                    <input type="date" name="from_date" id="from_date" class="form-control"
                        value="{{ request('from_date') }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label small fw-bold">إلى تاريخ</label>
                    <input type="date" name="to_date" id="to_date" class="form-control"
                        value="{{ request('to_date') }}">
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <div class="btn-group w-100" role="group">
                        <button type="submit" class="btn btn-primary w-50 rounded-end-3">
                            <i class="fas fa-filter me-1"></i> تطبيق
                        </button>
                        <a href="{{ route('reports.services') }}" class="btn btn-outline-danger w-50 rounded-start-3"
                            title="إعادة ضبط">
                            <i class="fas fa-undo"></i> إعادة ضبط
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <div id="printableArea">
            <div id="printHeader" class="d-none">
                <div style="direction: rtl; font-family: 'Arial', sans-serif;">
                    <div class="row mb-3">
                        <div class="col-4 text-center">
                            <h5 class="fw-bold mb-1">إدارة الأنشطة الرياضية</h5>
                            <p class="mb-0 small text-muted">قسم الحسابات والتقارير المالية</p>
                            <p class="mb-0 small">تاريخ الاستخراج: <span dir="ltr">{{ date('Y-m-d H:i') }}</span></p>
                        </div>
                        <div class="col-4 text-center">
                            <h3 class="fw-bold text-dark"
                                style="border-bottom: 2px solid #000; display: inline-block; padding-bottom: 5px;">تقرير
                                مبيعات الخدمات</h3>
                            <div class="mt-2"><span class="badge border border-dark text-dark px-3">نسخة معتمدة
                                    للنظام</span></div>
                        </div>
                        <div class="col-4 text-center">
                            <p class="mb-1"><strong>الفترة من:</strong> {{ request('from_date') ?: 'بداية النشاط' }}</p>
                            <p class="mb-0"><strong>إلى تاريخ:</strong> {{ request('to_date') ?: date('Y-m-d') }}</p>
                        </div>
                    </div>
                    <div style="border-top: 1px solid #000; margin-top: 10px; margin-bottom: 20px;"></div>
                </div>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-6 col-md-6">
                    <div class="card stat-card shadow-sm">
                        <div class="card-body d-flex align-items-center">
                            <div class="icon-box bg-primary bg-opacity-10 text-primary">
                                <i class="fas fa-user-check"></i>
                            </div>
                            <div class="ms-3">
                                <div class="text-muted small">عدد المشتركين</div>
                                <h4 class="fw-bold mb-0">{{ number_format($grandTotalMembers) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-6">
                    <div class="card stat-card shadow-sm border-bottom border-success border-3">
                        <div class="card-body d-flex align-items-center">
                            <div class="icon-box bg-success bg-opacity-10 text-success">
                                <i class="fas fa-wallet"></i>
                            </div>
                            <div class="ms-3">
                                <div class="text-muted small">إجمالي الإيرادات</div>
                                <h4 class="fw-bold mb-0 text-success">{{ number_format($grandTotalRevenue, 2) }} <small
                                        class="small"></small></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card stat-card shadow-sm border-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle custom-table mb-0 text-center">
                        <thead>
                            <tr>
                                <th class="ps-4 text-center">اسم الخدمة</th>
                                <th class="text-center">عدد الاشتراكات </th>
                                <th class="text-center ">إجمالي المبيعات (شامل الضريبة)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($reportData as $row)
                                <tr>
                                    <td class="ps-4 fw-bold text-center">{{ $row->item_name }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill">
                                            {{ number_format($row->total_members) }}
                                        </span>
                                    </td>
                                    <td class="text-center pe-4 fw-bold text-success">
                                        {{ number_format($row->total_revenue, 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center py-5 text-muted">
                                        <i class="fas fa-info-circle me-1"></i> لا توجد مبيعات مسجلة لهذه الفترة
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot class="table-light fw-bold">
                            <tr>
                                <td class="ps-4 text-center">الإجمالي الكلي</td>
                                <td class="text-center text-primary">{{ number_format($grandTotalMembers) }} </td>
                                <td class="text-center pe-4 text-success">{{ number_format($grandTotalRevenue, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"></script>
    <script>
        $(document).ready(function() {

            $('.btn-outline-danger').on('click', function(e) {
                // الحقول سيتم مسحها تلقائياً لأن الرابط سيوجه لصفحة بدون Query Params
                // لكن هذا السطر يضمن تفريغ الحقول بصرياً فور النقر
                $('#from_date, #to_date').val('');
            });

            $('#printReportBtn').on('click', function() {
                $('#printableArea').printThis({
                    importCSS: true,
                    importStyle: true,
                    loadCSS: "", // يمكنك إضافة رابط ملف CSS خارجي هنا إذا أردت
                    header: $('#printHeader').html(), // جلب الهيدر الذي صممناه
                    copyTagClasses: true,
                    pageTitle: "تقرير المبيعات الإحصائي",
                    printContainer: true,
                    removeInline: false
                });
            });
        });
    </script>
@endsection