@extends("layouts.home")
@section("title")
    ساهم معنا | مركز د.حيدر عبد الشافي
@endsection



<!--       ثابت بالاعلى -->
@section("page-content")
<main class="section">



    <div class="icon-fixed--green">
        <img src="assets/img/Vector.png" alt="">
    </div>
    <div class="icon-fixed--right">
        <img src="assets/img/zzzzz2.png" alt="">
    </div>
    <div class="icon-fixed--bottom">
        <img src="assets/img/zzzzz3.png" alt="">
    </div>




    <section class="donate-page" dir="rtl" id="donate">
        <div class="container donate-page__wrap" style="max-width:1100px;">

            <!-- Head -->
            <header class="donate-head">
                <div class="donate-crumb">
                    <a href="index.html">الرئيسية</a>
                    <span class="sep">›</span>
                    <span class="current">تبرّع للمؤسسة</span>
                </div>

                <div class="donate-hero">
                    <div class="donate-hero__content">
                        <h1 class="donate-title">تبرّع للمؤسسة</h1>
                        <p class="donate-sub">
                            مساهمتك تُحدث أثرًا مباشرًا. اختر مبلغًا مناسبًا أو حدّد مبلغًا مخصصًا، وسنستخدم تبرعك لدعم البرامج والأنشطة ذات الأولوية.
                        </p>

                        <div class="donate-hero__tags">
                            <span class="tag"><i class="bi bi-shield-check"></i> شفافية</span>
                            <span class="tag"><i class="bi bi-graph-up-arrow"></i> أثر مستدام</span>
                            <span class="tag"><i class="bi bi-people"></i> دعم المجتمع</span>
                        </div>
                    </div>

                    <!-- Decor -->
                    <span class="donate-decor donate-decor--r"></span>
                    <span class="donate-decor donate-decor--l"></span>
                </div>
            </header>

            <div class="row g-4">
                <!-- FORM -->
                <div class="col-lg-7">
                    <div class="donate-card">
                        <div class="donate-card__head">
                            <h3 class="donate-card__title">معلومات التبرّع</h3>
                            <span class="donate-secure"><i class="bi bi-lock"></i> آمن</span>
                        </div>

                        <!-- Amounts -->
                        <div class="donate-amounts">
                            <button class="amt is-active" type="button" data-amount="10">10$</button>
                            <button class="amt" type="button" data-amount="25">25$</button>
                            <button class="amt" type="button" data-amount="50">50$</button>
                            <button class="amt" type="button" data-amount="100">100$</button>

                            <div class="amt-custom">
                                <i class="bi bi-cash-coin"></i>
                                <input id="customAmount" type="number" min="1" placeholder="مبلغ مخصص">
                                <span class="cur">$</span>
                            </div>
                        </div>

                        <!-- Methods -->
                        <div class="donate-methods">
                            <div class="method-title">طريقة التبرّع</div>
                            <div class="method-pills">
                                <label class="m-pill">
                                    <input type="radio" name="pay" checked>
                                    <span><i class="bi bi-credit-card-2-front"></i> بطاقة</span>
                                </label>

                                <label class="m-pill">
                                    <input type="radio" name="pay">
                                    <span><i class="bi bi-bank"></i> تحويل بنكي</span>
                                </label>

                                <label class="m-pill">
                                    <input type="radio" name="pay">
                                    <span><i class="bi bi-wallet2"></i> محفظة</span>
                                </label>
                            </div>
                        </div>

                        <!-- Form -->
                        <form class="donate-form" action="#" method="post">
                            <div class="row g-3 mt-1">
                                <div class="col-md-6">
                                    <label class="form-label">الاسم الكامل</label>
                                    <input type="text" class="form-control d-input" placeholder="اكتب اسمك" required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">البريد الإلكتروني</label>
                                    <input type="email" class="form-control d-input" placeholder="example@email.com" required>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">رقم الجوال (اختياري)</label>
                                    <input type="tel" class="form-control d-input" placeholder="+970...">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">الغرض (اختياري)</label>
                                    <select class="form-select d-input">
                                        <option selected>حيث الحاجة</option>
                                        <option>برامج شبابية</option>
                                        <option>أنشطة مجتمعية</option>
                                        <option>دعم ثقافي</option>
                                    </select>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">ملاحظة قصيرة (اختياري)</label>
                                    <textarea class="form-control d-input" rows="3" placeholder="رسالة أو ملاحظة..."></textarea>
                                </div>

                                <div class="col-12 d-flex flex-wrap gap-2 align-items-center mt-2">
                                    <button class="btn d-btn" type="submit">
                                        <i class="bi bi-heart-fill"></i>
                                        تبرّع الآن
                                    </button>

                                    <a class="btn d-btn-outline" href="contact.html">
                                        <i class="bi bi-chat-dots"></i>
                                        تواصل معنا
                                    </a>

                                    <div class="d-note ms-auto">
                                        <i class="bi bi-info-circle"></i>
                                        سيتم تفعيل الدفع لاحقًا
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- SIDE -->
                <div class="col-lg-5">
                    <aside class="donate-side">

                        <div class="impact-card">
                            <h3 class="impact-title">أين يذهب تبرعك؟</h3>

                            <div class="impact-list">
                                <div class="impact-item">
                                    <span class="impact-ic"><i class="bi bi-mortarboard"></i></span>
                                    <div class="impact-txt">
                                        <div class="impact-k">برامج تدريبية</div>
                                        <div class="impact-v">تمكين الشباب وبناء المهارات.</div>
                                    </div>
                                </div>

                                <div class="impact-item">
                                    <span class="impact-ic"><i class="bi bi-megaphone"></i></span>
                                    <div class="impact-txt">
                                        <div class="impact-k">أنشطة توعوية</div>
                                        <div class="impact-v">مبادرات تثقيف ومشاركة مجتمعية.</div>
                                    </div>
                                </div>

                                <div class="impact-item">
                                    <span class="impact-ic"><i class="bi bi-journal-text"></i></span>
                                    <div class="impact-txt">
                                        <div class="impact-k">مواد وإنتاج معرفي</div>
                                        <div class="impact-v">تقارير ومحتوى يدعم الوعي العام.</div>
                                    </div>
                                </div>
                            </div>

                            <div class="impact-mini">
                                <div class="mini-box">
                                    <div class="mini-num">+120</div>
                                    <div class="mini-label">فعالية</div>
                                </div>
                                <div class="mini-box">
                                    <div class="mini-num">+3K</div>
                                    <div class="mini-label">مستفيد</div>
                                </div>
                                <div class="mini-box">
                                    <div class="mini-num">2014</div>
                                    <div class="mini-label">تأسس</div>
                                </div>
                            </div>
                        </div>

                        <div class="bank-card">
                            <h3 class="bank-title">بيانات التحويل البنكي</h3>

                            <div class="kv"><span>اسم الحساب</span><span>HCCD</span></div>
                            <div class="kv"><span>البنك</span><span>بنك فلسطين</span></div>
                            <div class="kv"><span>رقم الحساب</span><span>000000000</span></div>
                            <div class="kv"><span>IBAN</span><span>PS00 PALS 0000 0000 0000 0000 0000</span></div>

                            <div class="bank-note">
                                <i class="bi bi-exclamation-circle"></i>
                                يمكنك تعديل هذه البيانات لاحقًا حسب معلوماتك الرسمية.
                            </div>
                        </div>

                    </aside>
                </div>
            </div>

        </div>
    </section>

    <!-- Bootstrap JS (اختياري فقط إذا بدك تفاعلات جاهزة) -->
    <script>
        // اختيار مبلغ سريع (UI فقط)
        document.querySelectorAll('.amt').forEach(btn=>{
            btn.addEventListener('click', ()=>{
                document.querySelectorAll('.amt').forEach(b=>b.classList.remove('is-active'));
                btn.classList.add('is-active');
                const v = btn.getAttribute('data-amount');
                const input = document.getElementById('customAmount');
                if(input) input.value = v;
            });
        });
    </script>


</main>

@endsection