@extends('frontend.layouts.app')
@section('style')
    @include('frontend.pages.funding_opportunities.css')
@endsection
@section('content')
    <section class="export-invest-container">
        <div class="export-invest-header">
            <h1>حلول تمويل مبتكرة لـ SMEs ورواد الأعمال</h1>
        </div>
        <section class="container">
            <h2 class="section-title" data-aos="fade-up">اختر من بين فرص التمويل</h2>

            <!-- Filters -->
            <div class="filters" data-aos="fade-up" data-aos-delay="100">
                <input type="text" id="fund-search" placeholder="ابحث عن التمويل..." />
                <select id="filter-type">
                    <option value="">الكل</option>
                    <option value="Equity">رأس مال استثماري</option>
                    <option value="Crowdfunding">تمويل جماعي</option>
                    <option value="SMEoffers">عروض خاصة SMEs</option>
                    <option value="Apply">تقديم طلب</option>
                </select>
                <button id="apply-filters">تطبيق</button>
            </div>

            <!-- Cards Grid -->
            <div class="fund-grid" id="fund-grid"></div>
        </section>

        <!-- Modal -->
        <div class="modal" id="fund-modal">
            <div class="modal-content" data-aos="zoom-in">
                <span class="close" id="modal-close">&times;</span>
                <h2 id="modal-title" style="text-align: center !important;"></h2>
                <br>
                <div class="meta" id="modal-meta"></div>
                <p id="modal-desc"></p>
                <ul id="modal-bullets"></ul>
                <button id="modal-action">تقدم الآن</button>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        AOS.init({
            duration: 800,
            once: true
        });

        const funds = [{
                id: 1,
                title: "تمويل رأسمالي Series A",
                provider: "VC الخليج",
                type: "Equity",
                location: "الرياض",
                desc: "للشركات التقنية ذات النمو السريع.",
                bullets: [
                    "قيمة التمويل: حتى 5 مليون ريال",
                    "نسبة ملكية مقاسمة",
                    "دعم استشاري",
                ],
            },
            {
                id: 2,
                title: "منصة تمويل جماعي",
                provider: "CrowdFund",
                type: "Crowdfunding",
                location: "جدة",
                desc: "جمع التمويل من الجمهور لمشاريع مبتكرة.",
                bullets: ["تيسير الحملات", "رسوم منخفضة", "دعم تسويقي"],
            },
            {
                id: 3,
                title: "عرض SMEs الخاص",
                provider: "بنك التنمية",
                type: "SMEoffers",
                location: "الدمام",
                desc: "عروض تمويل بدون فوائد لفترة 6 أشهر.",
                bullets: ["فائدة 0%", "سداد مرن", "استشارة مالية مجانية"],
            },
            {
                id: 4,
                title: "تقديم طلب التمويل",
                provider: "همّام",
                type: "Apply",
                location: "الملكي",
                desc: "نموذج شامل يرسل طلبك للجهات الداعمة.",
                bullets: ["متابعة فورية", "توجيه شخصي", "تحليل احتياجات"],
            },
        ];

        function getImageByType(type) {
            switch (type) {
                case "Equity":
                    return "{{ asset('images/wallpaperflare.com_wallpaper (2).jpg') }}";
                case "Crowdfunding":
                    return "{{ asset('images/wallpaperflare.com_wallpaper (1).jpg') }}";
                case "SMEoffers":
                    return "{{ asset('images/wallpaperflare.com_wallpaper (3).jpg') }}";
                case "Apply":
                    return "https://images.unsplash.com/photo-1504384308090-c894fdcc538d";
                default:
                    return "https://via.placeholder.com/600x400?text=Funding";
            }
        }

        function renderFunds(list) {
            const grid = $("#fund-grid").empty();
            if (!list.length)
                grid.append('<p style="text-align:center;width:100%;">لا توجد فرص مطابقة</p>');
            list.forEach((f) => {
                const card = $(`
                    <div class="fund-card" data-aos="fade-up" data-id="${f.id}">
                        <img src="${getImageByType(f.type)}" alt="${f.title}" />
                        <div class="card-content">
                            <h3>${f.title}</h3>
                            <div class="meta">${f.provider} - ${f.location}</div>
                            <p>${f.desc}</p>
                        </div>
                        <div class="card-footer">
                            <button class="open-modal">التفاصيل</button>
                        </div>
                    </div>
                `);
                grid.append(card);
            });
        }

        $(document).ready(function() {
            renderFunds(funds);
            $("#apply-filters").click(applyFilters);
            $("#fund-search").keypress((e) => {
                if (e.key === "Enter") applyFilters();
            });
        });

        function applyFilters() {
            const q = $("#fund-search").val().toLowerCase();
            const t = $("#filter-type").val();
            const filtered = funds.filter(
                (f) =>
                (f.title.toLowerCase().includes(q) ||
                    f.provider.toLowerCase().includes(q)) &&
                (t === "" || f.type === t)
            );
            renderFunds(filtered);
        }

        // Modal
        $(document).on("click", ".open-modal", function() {
            const id = $(this).closest(".fund-card").data("id");
            const f = funds.find((x) => x.id === id);
            $("#modal-title").text(f.title);
            $("#modal-meta").text(f.provider + " - " + f.location);
            $("#modal-desc").text(f.desc);
            $("#modal-bullets").empty().append(f.bullets.map((b) => `<li>${b}</li>`).join(""));
            $("#fund-modal").fadeIn();
        });

        $("#modal-close,#modal-action").click(() => $("#fund-modal").fadeOut());
    </script>
@endsection