@extends('frontend.layouts.app')
@section('style')
    @include('frontend.pages.events_training.css')
    @include('frontend.pages.export.css')

    <style>
        .export-content {
            display: flex;
            align-items: flex-start;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .text-content {
            flex: 1 1 60%;
        }

        .image-content {
            flex: 1 1 35%;
            text-align: center;
        }

        .image-content img {
            width: 100%;
            max-width: 300px;
            border-radius: 10px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        }

        /* تحسين العرض على الموبايل */
        @media (max-width: 768px) {
            .export-content {
                flex-direction: column;
            }

            .image-content {
                text-align: center;
                margin-top: 1rem;
            }
        }
    </style>
@endsection
@section('content')
    <section class="events-container">
        <div class="events-header">
            <h1 style="color: #0077b6 !important;"> التدريب</h1>
            <p>اكتشف ورش العمل والمؤتمرات والجلسات التدريبية القادمة التي تهدف إلى تمكين المنشآت الصغيرة والمتوسطة وروّاد
                الأعمال بأحدث المهارات والفرص.</p>
        </div>

        <div class="filter-bar">
            <input type="text" placeholder="  كلمات مفتاحية ..." />
            <select>
                <option value="">منطقة</option>
                <option value="Marketing">الرياض</option>
                <option value="Finance">جدة</option>
                <option value="Export">الدمام</option>
                <option value="Investment">مكة</option>
            </select>
            <select>
                <option value="">القطاع</option>
                <option value="Marketing">القطاع غير الربحي</option>
                <option value="Finance">القطاع الربحي</option>
                <option value="Finance">الادارة</option>
                <option value="Finance">تسويق</option>
                <option value="Finance">ذكاء اصطناعي</option>
            </select>
            <select>
                <option value="">كل التصنيفات</option>
                <option value="Marketing">مجاني</option>
                <option value="Finance">مدفوع</option>
            </select>
        </div>

        <div class="events-grid">
            <div class="event-card">
                <img src="https://picsum.photos/400/200?random=11" alt="فعالية 1" />
                <div class="event-info">
                    <div class="date">25 أكتوبر</div>
                    <h3>مقدمة الى التمويل الاصغر</h3>
                    <p>تعلم استراتيجيات التسويق الرقمي، بناء العلامة التجارية، وأفضل ممارسات وسائل التواصل الاجتماعي لتنمية
                        جمهورك.</p>
                </div>
                <div class="event-actions">
                    <button class="btn-register">سجل الآن</button>
                </div>
            </div>

            <div class="event-card">
                <img src="https://picsum.photos/400/200?random=12" alt="فعالية 2" />
                <div class="event-info">
                    <div class="date">10 نوفمبر</div>
                    <h3>تدريب على برنامج للتسويق</h3>
                    <p>تعلم استراتيجيات التسويق الرقمي، بناء العلامة التجارية، وأفضل ممارسات وسائل التواصل الاجتماعي لتنمية
                        جمهورك.</p>
                </div>
                <div class="event-actions">
                    <button class="btn-register">سجل الآن</button>
                </div>
            </div>

            <div class="event-card">
                <img src="https://picsum.photos/400/200?random=13" alt="فعالية 3" />
                <div class="event-info">
                    <div class="date">18 نوفمبر</div>
                    <h3>حول متجرك الى متجر اونلاين</h3>
                    <p>اتقن إعداد وثائق الشحن والتعامل مع اللوائح واللوجستيات لتوسيع نشاطك على المستوى العالمي.</p>
                </div>
                <div class="event-actions">
                    <button class="btn-register">سجل الآن</button>
                </div>
            </div>
        </div>
    </section>

    <section class="dashboard-content">
        <div class="export-section">
            <h2 style="text-align: center !important;">بالتعاون مع التنمية البشرية</h2>
            <br>
            <div class="export-content">

                <div class="image-content">
                    <img style="margin: auto !important;"
                        src="{{ asset('images/WhatsApp Image 2025-05-12 at 09.45.21_1c9b6405.jpg') }}"
                        alt="لوحة جهوزية التصدير">
                </div>
            </div>
        </div>
    </section>
@endsection