@extends('dashboard.layouts.app')
@section('content')
    <section class="cards">
        <div class="card" data-aos="fade-up">
            <h3>المتابعين والاشعارات</h3>
            <p>345</p>
        </div>
        <div class="card" data-aos="fade-up" data-aos-delay="100">
            <h3>اللوحة اللوجسيتة</h3>
            <small>التوصيل و </small>
            <small>التخزين و </small>
            <small>الدفع</small>
        </div>
        <div class="card" data-aos="fade-up" data-aos-delay="200">
            <h3>الفرص النشطة</h3>
            <p>237</p>
        </div>
        <div class="card" data-aos="fade-up" data-aos-delay="300">
            <h3>الموارد المشتركة</h3>
            <p>512</p>
        </div>
    </section>

    <section class="charts">
        <div class="chart-container" data-aos="fade-right">
            <canvas id="lineChart"></canvas>
        </div>
        <div class="chart-container" data-aos="fade-left">
            <canvas id="pieChart"></canvas>
        </div>
    </section>

    <!-- إضافة الفلتر للبحث حسب الاسم -->
    <section class="table-section" data-aos="fade-up">
        <h2 class="section-title">أحدث الشركات المسجلة / ابحث عن عملاء</h2>
        <input type="text" id="companyFilter" placeholder="ابحث عن شركة..." class="filter-input" />

        <table>
            <thead>
                <tr>
                    <th>الاسم</th>
                    <th>المجال</th>
                    <th>التاريخ</th>
                    <th>الإجراء</th>
                </tr>
            </thead>
            <tbody id="companyTableBody">
                <!-- سيتم إضافة البيانات الوهمية هنا -->
            </tbody>
        </table>
    </section>

    <script>
        // دالة لتوليد البيانات الوهمية
        const companies = [{
                name: 'شركة البدر',
                field: 'التسويق',
                date: '02/05/2025'
            },
            {
                name: 'شركة النجاح',
                field: 'التكنولوجيا',
                date: '03/05/2025'
            },
            {
                name: 'شركة الريادة',
                field: 'الخدمات المالية',
                date: '01/05/2025'
            },
            {
                name: 'شركة الرواد',
                field: 'التسويق',
                date: '29/04/2025'
            },
            {
                name: 'مبادرات',
                field: 'الخدمات المالية',
                date: '25/04/2025'
            },
            {
                name: 'رواد المستقبل',
                field: 'التكنولوجيا',
                date: '28/04/2025'
            },
        ];

        // دالة لعرض البيانات الوهمية
        function renderCompanies(companies) {
            const tableBody = document.getElementById('companyTableBody');
            tableBody.innerHTML = ''; // مسح البيانات السابقة
            companies.forEach(company => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${company.name}</td>
                    <td>${company.field}</td>
                    <td>${company.date}</td>
                    <td><button>عرض</button></td>
                `;
                tableBody.appendChild(row);
            });
        }

        // فلتر الشركات حسب الاسم
        document.getElementById('companyFilter').addEventListener('input', function() {
            const filterValue = this.value.toLowerCase();
            const filteredCompanies = companies.filter(company => company.name.toLowerCase().includes(filterValue));
            renderCompanies(filteredCompanies);
        });

        // عرض الشركات عند تحميل الصفحة
        renderCompanies(companies);
    </script>
@endsection