@extends('frontend.layouts.app')
@section('title', 'Donate Us')
@section('content')
    <!-- ============================ header area ============================ -->
    @include('frontend.includes.headers.headerOne')
    <!-- ============================ header area end ============================ -->

    <!-- ==== banner section start ==== -->
      <section class="common-banner">
         <div class="container">
            <div class="row">
               <div class="common-banner__content text-center">
                  <span class="sub-title"><i class="icon-donation"></i>Start donating poor people</span>
                  <h2 class="title-animation">Donate Us</h2>
               </div>
            </div>
         </div>
         <div class="banner-bg">
            <img src="{{ asset('assets/images/banner/banner-bg.png') }}" alt="Image">
         </div>
         <div class="shape">
            <img src="{{ asset('assets/images/shape.png') }}" alt="Image">
         </div>
         <div class="sprade" data-aos="zoom-in" data-aos-duration="1000">
            <img src="{{ asset('assets/images/sprade-base.png') }}" alt="Image" class="base-img">
         </div>
      </section>
      <!-- ==== / banner section end ==== -->
      <!-- ==== donate us section start ==== -->
      <div class="cm-details donate-us community checkout faq">
         <div class="container">
            <div class="row gutter-60">
               <div class="col-12 col-xl-8">
                  <div class="cm-details__content">
                     <div class="cm-details__poster" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <img src="{{ asset('assets/images/event/poster-two.png') }}" alt="Image">
                     </div>
                     <div class="donate-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="cm-group">
                           <h3 class="title-animation">Help Children Rise out of Poverty</h3>
                           <p>Lorem Ipsum is simply dummy a of the printing and type setting industry Loreaim
                              Ipsum has been the industry's standard dummy
                           </p>
                        </div>
                        <div class="cta">
                           <div class="community-donation">
                              <div class="community-donation__inner">
                                 <h5>Support Where It Counts.</h5>
                                 <div class="warning">
                                    <div class="line"><i class="fa-solid fa-triangle-exclamation"></i></div>
                                    <p><strong>Notice:</strong> Test mode is enabled. While in test mode no
                                       live
                                       donations are processed.
                                    </p>
                                 </div>
                                 <div class="donation-form" data-aos-delay="300">
                                    <div class="donation-form__single">
                                       <h5>Your Donation:</h5>
                                       <div class="input-group-icon">
                                          <div class="thumb">
                                             <i class="fa-solid fa-dollar-sign"></i>
                                          </div>
                                          <input type="text" name="donation-amount" id="donationAmount">
                                       </div>
                                       <div class="made-amount">
                                          <span class="donation-amount">20</span>
                                          <span class="donation-amount">50</span>
                                          <span class="donation-amount active">100</span>
                                          <span class="donation-amount">200</span>
                                          <span class="donation-amount custom-amount">Custom</span>
                                       </div>
                                    </div>
                                    <div class="donation-form__single">
                                       <h5>Select Payment Method</h5>
                                       <div class="radio-wrapper">
                                          <div class="radio-single">
                                             <input type="radio" id="testDonation" name="donation-payment" checked>
                                             <label for="testDonation">Test Donation</label>
                                          </div>
                                          <div class="radio-single">
                                             <input type="radio" id="offlineDonation" name="donation-payment" checked>
                                             <label for="offlineDonation">Offline Donation</label>
                                          </div>
                                          <div class="radio-single">
                                             <input type="radio" id="cardDonation" name="donation-payment" checked>
                                             <label for="cardDonation">Credit Card</label>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="cta">
                                       <a href="{{ route('donate.us') }}" aria-label="donate us" title="donate us"
                                          class="btn--primary">Donate Now <i class="fa-solid fa-arrow-right"></i></a>
                                    </div>
                                 </div>
                              </div>
                              <hr>
                              <div class="checkout__form">
                                 <div class="intro">
                                    <h5>Details Information</h5>
                                 </div>
                                 <form action="{{ route('donate.submit') }}" method="post">
                                    @csrf
                                    <div class="input-group">
                                       <div class="input-single">
                                          <input type="text" name="c-name" id="cName" placeholder="First Name" required>
                                          <i class="fa-solid fa-user"></i>
                                       </div>
                                       <div class="input-single">
                                          <input type="text" name="c-lastname" id="clastName" placeholder="Last Name"
                                             required>
                                          <i class="fa-solid fa-user"></i>
                                       </div>
                                    </div>
                                    <div class="input-group">
                                       <div class="input-single">
                                          <input type="email" name="c-email" id="cEmail" placeholder="Your Email"
                                             required>
                                          <i class="fa-solid fa-envelope"></i>
                                       </div>
                                       <div class="input-single">
                                          <input type="text" name="c-phone" id="cPhone" placeholder="Your Number"
                                             required>
                                          <i class="fa-solid fa-phone"></i>
                                       </div>
                                    </div>
                                    <div class="input-single">
                                       <input type="text" name="c-address-two" id="cAddressTwo"
                                          placeholder="Your Address" required>
                                       <i class="fa-solid fa-location-dot"></i>
                                    </div>
                                    <div class="input-single alter-input">
                                       <textarea name="contact-message" id="contactMessage"
                                          placeholder="your message..."></textarea>
                                       <i class="fa-solid fa-envelope"></i>
                                    </div>
                                    <div class="form-cta">
                                       <button type="submit" aria-label="submit message" title="submit message"
                                          class="btn--primary">Save Informations <i
                                             class="fa-solid fa-arrow-right"></i></button>
                                    </div>
                                 </form>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="award">
                     <div class="container">
                        <div class="row gutter-24">
                           <div class="col-12 col-lg-8">
                              <div class="award__single" data-aos="fade-up" data-aos-duration="1000">
                                 <div class="thumb">
                                    <a href="{{ route('events.details') }}">
                                       <img src="{{ asset('assets/images/award/one.png') }}" alt="Image">
                                    </a>
                                 </div>
                              </div>
                           </div>
                           <div class="col-12 col-lg-4">
                              <div class="award__single" data-aos="fade-up" data-aos-duration="1000"
                                 data-aos-delay="200">
                                 <div class="thumb">
                                    <a href="{{ route('events.details') }}">
                                       <img src="{{ asset('assets/images/award/four.png') }}" alt="Image">
                                    </a>
                                 </div>
                              </div>
                           </div>
                           <div class="col-12 col-lg-5">
                              <div class="award__single" data-aos="fade-up" data-aos-duration="1000"
                                 data-aos-delay="100">
                                 <div class="thumb">
                                    <a href="{{ route('events.details') }}">
                                       <img src="{{ asset('assets/images/award/two.png') }}" alt="Image">
                                    </a>
                                 </div>
                              </div>
                           </div>
                           <div class="col-12 col-lg-7">
                              <div class="award__single" data-aos="fade-up" data-aos-duration="1000"
                                 data-aos-delay="300">
                                 <div class="thumb">
                                    <a href="{{ route('events.details') }}">
                                       <img src="{{ asset('assets/images/award/three.png') }}" alt="Image">
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="faq__content-inner" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                     <div class="accordion" id="accordion">
                        <div class="accordion-item">
                           <h6 class="accordion-header" id="headingOne">
                              <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                 data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                 What kind of recipes can I find on your website?
                              </button>
                           </h6>
                           <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                              data-bs-parent="#accordion">
                              <div class="accordion-body">
                                 <p>
                                    It is a long established fact that a reader will be distracted by
                                    the readable the a content of a page when looking at its layout.
                                    Many desktop publishing packages and web page editors.
                                 </p>
                              </div>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <h6 class="accordion-header" id="headingTwo">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                 data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                 Are the recipes suitable for beginners?
                              </button>
                           </h6>
                           <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                              data-bs-parent="#accordion">
                              <div class="accordion-body">
                                 <p>
                                    It is a long established fact that a reader will be distracted by
                                    the readable the a content of a page when looking at its layout.
                                    Many desktop publishing packages and web page editors.
                                 </p>
                              </div>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <h6 class="accordion-header" id="headingThree">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                 data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                 Do you offer cooking tips and techniques?
                              </button>
                           </h6>
                           <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                              data-bs-parent="#accordion">
                              <div class="accordion-body">
                                 <p>
                                    It is a long established fact that a reader will be distracted by
                                    the readable the a content of a page when looking at its layout.
                                    Many desktop publishing packages and web page editors.
                                 </p>
                              </div>
                           </div>
                        </div>
                        <div class="accordion-item">
                           <h6 class="accordion-header" id="headingFour">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                 data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                 How frequently do you update your recipe collection?
                              </button>
                           </h6>
                           <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                              data-bs-parent="#accordion">
                              <div class="accordion-body">
                                 <p>
                                    It is a long established fact that a reader will be distracted by
                                    the readable the a content of a page when looking at its layout.
                                    Many desktop publishing packages and web page editors.
                                 </p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-12 col-xl-4">
                  <div class="cm-details__sidebar">
                     <div class="cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="intro">
                           <h5>search here</h5>
                        </div>
                        <form action="#" method="post">
                           @csrf
                           <input type="text" name="search-product" id="searchProduct" placeholder="Search Here..."
                              required>
                           <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </form>
                     </div>
                     <div class="cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="intro">
                           <h5>Recent Causes</h5>
                        </div>
                        <div class="cm-sidebar-post">
                           <div class="single-item">
                              <div class="thumb">
                                 <a href="{{ route('blog.details') }}">
                                    <img src="{{ asset('assets/images/blog/ph-one.png') }}" alt="Image">
                                 </a>
                              </div>
                              <div class="content">
                                 <p><i class="fa-solid fa-calendar-days"></i> <span>November 19, 2024</span>
                                 </p>
                                 <p><a href="{{ route('blog.details') }}">Where Innovation Meets Foundation</a>
                                 </p>
                              </div>
                           </div>
                           <div class="single-item">
                              <div class="thumb">
                                 <a href="{{ route('blog.details') }}">
                                    <img src="{{ asset('assets/images/blog/ph-two.png') }}" alt="Image">
                                 </a>
                              </div>
                              <div class="content">
                                 <p><i class="fa-solid fa-calendar-days"></i> <span>November 19, 2024</span>
                                 </p>
                                 <p><a href="{{ route('blog.details') }}">Where Innovation Meets Foundation</a>
                                 </p>
                              </div>
                           </div>
                           <div class="single-item">
                              <div class="thumb">
                                 <a href="{{ route('blog.details') }}">
                                    <img src="{{ asset('assets/images/blog/three.png') }}" alt="Image">
                                 </a>
                              </div>
                              <div class="content">
                                 <p><i class="fa-solid fa-calendar-days"></i> <span>November 22, 2024</span>
                                 </p>
                                 <p><a href="{{ route('blog.details') }}">Structures That Stand,
                                       Dreams That Soar</a>
                                 </p>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="cm-sidebar-widget" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="intro">
                           <h5>Tags</h5>
                        </div>
                        <div class="tag-wrapper">
                           <a href="{{ route('shop') }}">t-shirt</a>
                           <a href="{{ route('shop') }}">Banner Design</a>
                           <a href="{{ route('shop') }}">Brochures</a>
                           <a href="{{ route('shop') }}">Landing</a>
                           <a href="{{ route('shop') }}">Print</a>
                           <a href="{{ route('shop') }}">Business Card</a>
                        </div>
                     </div>
                     <div class="cm-sidebar-overview" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="cm-logo">
                           <img src="{{ asset('assets/images/event/logo.png') }}" alt="Image">
                        </div>
                        <div class="cm-content">
                           <p>Small Donations Bigger Impact</p>
                           <h4>Education Health
                              for Every Child
                           </h4>
                        </div>
                        <div class="cm-cta">
                           <a href="{{ route('contact') }}" aria-label="contact us" title="contact us" class="btn--primary">
                              Get A Quote <i class="fa-solid fa-arrow-right"></i>
                           </a>
                        </div>
                        <img src="{{ asset('assets/images/event/overview.png') }}" alt="Image" class="parallax-image">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- ==== / donate us section end ==== -->

    <!-- ========================== footer area ============================ -->
    @include('frontend.includes.footers.footerOne')
    <!-- ========================== footer area end ============================ -->
@endsection