@extends('dashboard.layouts.app')
<style>
    .add-button {
        background-color: #4CAF50;
        color: white;
        padding: 8px 14px;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
    }

    .filter-input {
        padding: 8px;
        width: 100%;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .action-buttons {
        display: flex;
        gap: 5px;
        justify-content: center;
    }

    .action-buttons button {
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s ease-in-out;
    }

    /* زر العرض */
    .btn-view {
        background-color: #3498db;
        color: white;
    }

    .btn-view:hover {
        background-color: #2980b9;
    }

    /* زر التعديل */
    .btn-edit {
        background-color: #f1c40f;
        color: #000;
    }

    .btn-edit:hover {
        background-color: #d4ac0d;
    }

    /* زر الحذف */
    .btn-delete {
        background-color: #e74c3c;
        color: white;
    }

    .btn-delete:hover {
        background-color: #c0392b;
    }
</style>
@section('content')
    <section class="resource-header" data-aos="fade-up">
        <h2>الموارد المشتركة</h2>
        <br>
        <a href="#" class="add-button">+ إضافة مورد جديد</a>
    </section>
    <br>

    <section class="resource-filter" data-aos="fade-up">
        <input type="text" id="resourceFilter" placeholder="ابحث عن مورد..." class="filter-input" />
    </section>

    <section class="resource-table" data-aos="fade-up">
        <table>
            <thead>
                <tr>
                    <th>اسم المورد</th>
                    <th>النوع</th>
                    <th>الوصف</th>
                    <th>الحالة</th>
                    <th>الإجراء</th>
                </tr>
            </thead>
            <tbody id="resourceTableBody">
                <!-- سيتم ملء المحتوى هنا -->
            </tbody>
        </table>
    </section>

    <script>
        const resources = [{
                name: 'رافعة شوكية',
                type: 'معدات',
                description: 'رافعة صناعية ثقيلة',
                status: 'متاح'
            },
            {
                name: 'خدمة توصيل سريع',
                type: 'خدمة',
                description: 'توصيل في نفس اليوم داخل المدينة',
                status: 'مشغول'
            },
            {
                name: 'مساحة تخزين',
                type: 'مساحة',
                description: 'مخزن مبرد في جدة',
                status: 'متاح'
            },
            {
                name: 'مستشار تقني',
                type: 'بشري',
                description: 'خبير أنظمة ERP',
                status: 'متاح'
            }
        ];

        function renderResources(list) {
            const tbody = document.getElementById('resourceTableBody');
            tbody.innerHTML = '';
            list.forEach(resource => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${resource.name}</td>
                    <td>${resource.type}</td>
                    <td>${resource.description}</td>
                    <td>${resource.status}</td>
                   <td>
                        <div class="action-buttons">
                            <button class="btn-view">عرض</button>
                            <button class="btn-edit">تعديل</button>
                            <button class="btn-delete">حذف</button>
                        </div>
                    </td>

                `;
                tbody.appendChild(row);
            });
        }

        document.getElementById('resourceFilter').addEventListener('input', function() {
            const keyword = this.value.toLowerCase();
            const filtered = resources.filter(r => r.name.toLowerCase().includes(keyword));
            renderResources(filtered);
        });

        renderResources(resources);
    </script>
@endsection