<?php include 'include/links.php'?> <title>Event Steps</title> <?php include 'include/Donation-header.php'?> <div class="content">
     <!--content inner-->
     <div class="content__inner">
          <div class="container overflow-hidden">
               <!--multisteps-form-->
               <div class="multisteps-form">
                    <!--progress bar-->
                    <div class="row">
                         <div class="col-12 col-lg-12 ml-auto mr-auto mb-4">
                              <div class="multisteps-form__progress">
                                   <button class="multisteps-form__progress-btn js-active" type="button" title="User Info"><span>01</span>General Information</button>
                                   <button class="multisteps-form__progress-btn" type="button" title="Address"><span>02</span>Tickets</button>
                                   <button class="multisteps-form__progress-btn" type="button" title="Order Info"><span>03</span>Events</button>
                                   <button class="multisteps-form__progress-btn" type="button" title="Comments"><span>04</span>Payments </button>
                                   <button class="multisteps-form__progress-btn" type="button" title="last"><span>05</span>Thank you </button>
                              </div>
                         </div>
                    </div>
                    <!--form panels-->
                    <div class="row">
                         <div class="col-12 col-lg-12 m-auto">
                              <form class="multisteps-form__form">
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel   js-active" data-animation="scaleIn">
                                        <div class="multisteps-form__content">
                                             <div class="DonationMain">
                                                  <h2>General event info</h2>
                                                  <div class="row">
                                                       <div class="col-md-6">
                                                            <div class="form-group">
                                                                 <label for="title">Title of The Form*</label>
                                                                 <input type="text" id="title" name="title" value="Donate To Make A Difference" required>
                                                            </div>
                                                       </div>
                                                       <div class="col-md-6">
                                                            <div class="form-group">
                                                                 <label for="language">Language*</label>
                                                                 <select id="language" name="language" required>
                                                                      <option value="en">En</option>
                                                                      <option value="es">Es</option>
                                                                      <!-- More language options can be added here -->
                                                                 </select>
                                                            </div>
                                                       </div>
                                                  </div>
                                                  <div class="form-group flexj">
                                                       <input type="checkbox" id="autoTaxReceipts" name="autoTaxReceipts" checked>
                                                       <label for="autoTaxReceipts">Generate Automatic Tax Receipts</label>
                                                       <a href="KNOXVILLE-Invoice.pdf" target="_blank" id="invoicePreview">Invoice Preview <i class="fa-regular fa-eye"></i>
                                                       </a>
                                                  </div>
                                                  <div class="form-group">
                                                       <p class="info-text">
                                                            <img src="images/er.png" alt="">
                                                            <span>It is important to explain what you will do with the donation. It is proven that donations increase by 120% if the donor knows the exact purpose of their donation.</span>
                                                       </p>
                                                  </div>
                                                  <div class="form-group">
                                                       <label for="description">Description</label>
                                                       <div class="customdes">
                                                            <p> 🎉 Excitement is in the air! Get ready to be part of something extraordinary at Business's fundraising event. It's an event like no other, and we want you to be there! 🎉 </p>
                                                            <p class="Second-para"> Every registration to this event will bring us closer to achieving our mission. Together, we can create a brighter, more compassionate world for all. </p>
                                                            <p> Thank you for supporting our mission, your support is invaluable. </p>
                                                       </div>
                                                  </div>
                                                  <div class="event-date">
                                                       <h2>Event date and time</h2>
                                                       <h6>If your event is on a specific day, let your buyers know when that is. Multiple dates can be added.</h6>
                                                       <div class="Even-dat">
                                                            <a href="#"  id="invoicePreview">
                                                                 <i class="fa-solid fa-plus"></i> add event date </a>
                                                                 
                                                                <div class="eventpick">
                                                                 <div class="input-group date" id="datepicker">
                                                                      <input type="text" class="form-control" id="date"/>
                                                                      <span class="input-group-append">
                                                                           <span class="input-group-text bg-light d-block">
                                                                           <i class="fa fa-calendar"></i>
                                                                           </span>
                                                                      </span>
                                                                      </div>
                                                                </div>
                                                       </div>
                                                  </div>
                                                  <div class="event-date">
                                                       <h2>Event location</h2>
                                                       <h6>Let your buyers know where your event will take place. If this is a virtual event, leave blank.</h6>
                                                  </div>
                                                  <div class="form-group">
                                                       <div class="locat">
                                                            <img src="images/locat.png" alt="">
                                                       </div>
                                                       <label for="description">Event address</label>
                                                       <input type="text" id="title" name="title" placeholder="Event an address" required>
                                                  </div>
                                             </div>
                                             <div class="button-row d-flex justify-content-end">
                                                  <button class="btn next-btn  js-btn-next" type="button" title="Next">Next</button>
                                             </div>
                                        </div>
                                   </div>
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel spacebott" >
                                        <div class="multisteps-form__content donationForm DonationMain ">
                                             <h2>Ticket Info</h2>
                                             <div class="row">
                                                  <div class="col-md-12">
                                                       <div class="form-group">
                                                            <label for="title">Total number of tickets</label>
                                                            <input type="text" id="title" name="name" placeholder="unlimited" required>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="row">
                                                  <div class="col-md-6">
                                                       <div class="form-group">
                                                            <label for="title">Ticket title*</label>
                                                            <input type="text" id="title" name="name" placeholder="General admission" required>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-6">
                                                       <div class="form-group">
                                                            <label for="exampleFormControlSelect1">Ticket price*</label>
                                                            <select class="form-select" id="exampleFormControlSelect1">
                                                                 <option value="">01</option>
                                                                 <option value="">02</option>
                                                                 <option value="">12</option>
                                                                 <option value="">19</option>
                                                            </select>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="row">
                                                  <div class="col-md-4">
                                                       <div class="form-group gha">
                                                            <label for="title">Total # of tickets for this rate per date</label>
                                                            <input type="text" id="rate" name="name" required>
                                                       </div>
                                                       <div class="form-group form-check">
                                                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                            <label class="form-check-label" for="exampleCheck1">Generate charity receipt</label>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-4">
                                                       <div class="form-group">
                                                            <label for="title">Minimum # of tickets per purchase</label>
                                                            <input type="text" id="title" name="name" required>
                                                       </div>
                                                       <div class="form-group form-check">
                                                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                            <label class="form-check-label" for="exampleCheck1">This is a group ticket</label>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-4">
                                                       <div class="form-group">
                                                            <label for="title">Maximum # of tickets per purchase</label>
                                                            <input type="text" id="title" name="name" required>
                                                       </div>
                                                       <div class="form-group form-check">
                                                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                            <label class="form-check-label" for="exampleCheck1">This is an early bird ticket</label>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="event-date">
                                                  <h2>Event location</h2>
                                                  <div class="form-group form-check">
                                                       <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                       <label class="form-check-label" for="exampleCheck1">Give the option to participants to add a donation for your organization</label>
                                                  </div>
                                             </div>
                                             <div class="event-date">
                                                  <h2>Questions for the buyer</h2>
                                                  <h6>These questions will only be asked once. By default, we ask email, full name, state, and country.</h6>
                                             </div>
                                             <div class="row">
                                                  <div class="col-md-4">
                                                       <div class="form-group ">
                                                            <label for="title">Email*</label>
                                                            <input type="text" name="email" placeholder="johnsmith123@gmail.com" required>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-4">
                                                       <div class="form-group ">
                                                            <label for="title">First name*</label>
                                                            <input type="text" name="text" placeholder="john" required>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-4">
                                                       <div class="form-group ">
                                                            <label for="title">Last name*</label>
                                                            <input type="text" name="text" placeholder="Smith" required>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="row">
                                                  <div class="col-md-4">
                                                       <div class="form-group ">
                                                            <label for="title">Country*</label>
                                                            <input type="text" name="email" placeholder="USA" required>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-4">
                                                       <div class="form-group ">
                                                            <label for="title">State*</label>
                                                            <input type="text" name="text" placeholder="New York" required>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-4">
                                                       <div class="form-group ">
                                                            <label for="title">Address</label>
                                                            <input type="text" name="text" required>
                                                       </div>
                                                  </div>
                                                  <div class="col-md-12">
                                                       <div class="customplan">
                                                                 <div class="evnt-btn">
                                                                      <a href="void:;" id="invoicePreview" class="Hidebutn">
                                                                           <i class="fa-solid fa-plus"></i> add a custom question </a>
                                                                 </div>
                                                                 <div class="Hidearea">
                                                                                
                                                                           <textarea class="form-control"  rows="3"></textarea>
                                                                      </div>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="button-row d-flex spacingbtt">
                                                  <button class="btn BackButon js-btn-prev" type="button" title="Prev">BACK</button>
                                                  <button class="btn next-btn  js-btn-next" type="button" title="Next">Next</button>
                                             </div>
                                        </div>
                                   </div>
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel " data-animation="scaleIn">
                                        <div class="multisteps-form__content">
                                             <div class="DonationMain">
                                                  <h3>Business Event</h3>
                                                  <h2>2024 Gala Events</h2>
                                             </div>
                                             <div class="Donationprice">
                                                  <div class="DOnate-Second ">
                                                       <div class="row">
                                                            <div class="col-md-12">
                                                                 <div class="spce"></div>
                                                                 <h2 class="Customh4">General admission</h2>
                                                                 <div class="summary-container">
                                                                      <div class="summary-item">
                                                                           <p>Payment</p>
                                                                           <a href="#">$15.00</a>
                                                                      </div>
                                                                 </div>
                                                                 <div class="form-group">
                                                                      <label for="title">Tickets*</label>
                                                                      <select class="form-select" id="exampleFormControlSelect1">
                                                                           <option value="">Select Tickets</option>
                                                                           <option value="">Select Tickets</option>
                                                                           <option value="">Select Tickets</option>
                                                                           <option value="">Select Tickets</option>
                                                                           <option value="">Select Tickets</option>
                                                                      </select>
                                                                 </div>
                                                                 <div class="form-group spc">
                                                                      <p class="textnew">
                                                                           <img src="images/err.png" alt="">
                                                                           <span>
                                                                                <strong>Did you know?</strong> When you give on any other platform, up to 10% of your gift is used to cover fees. We choose to fundraise on Knoxville to receive 100% of your gift. </span>
                                                                      </p>
                                                                 </div>
                                                                 <div class="form-group">
                                                                      <label for="description">Description</label>
                                                                      <div class="customdes">
                                                                           <p> 🎉 Excitement is in the air! Get ready to be part of something extraordinary at&nbsp;Business's fundraising event. It's an event like no other, and we want you to be there! 🎉 </p>
                                                                           <p class="Second-para"> Every registration to this event will bring us closer to achieving our mission. Together, we can create a brighter, more compassionate world for all. </p>
                                                                           <p class=""> Thank you for supporting our mission, your support is invaluable. </p>
                                                                      </div>
                                                                      <a href="javascript:;" class="btn btn-Custom mt-3">Select</a>
                                                                 </div>
                                                            </div>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="row">
                                                  <div class="button-row d-flex  col-12">
                                                       <button class="btn BackButon js-btn-prev" type="button" title="Prev">BACK</button>
                                                       <button class="btn next-btn  js-btn-next" type="button" title="Next">Next</button>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel DonationMain " data-animation="scaleIn">
                                        <div class="multisteps-form__content">
                                             <div>
                                                  <h3>Foundation</h3>
                                                  <h2>Donate to make a difference</h2>
                                             </div>
                                             <div class="Donationprice">
                                                  <div class="DOnate-Second">
                                                       <div class="donationForm">
                                                            <div class="row ">
                                                                 <div class="col-md-12">
                                                                      <div class="form-group">
                                                                           <h4>Your Details</h4>
                                                                      </div>
                                                                 </div>
                                                            </div>
                                                            <div class="row">
                                                                 <div class="col-md-12">
                                                                      <div class="form-group">
                                                                           <label for="title">Email*</label>
                                                                           <input type="text" id="title" name="name" required>
                                                                      </div>
                                                                 </div>
                                                            </div>
                                                            <div class="row">
                                                                 <div class="col-md-6">
                                                                      <div class="form-group">
                                                                           <label for="title">Last name*</label>
                                                                           <input type="text" id="title" name="name" required>
                                                                      </div>
                                                                 </div>
                                                                 <div class="col-md-6">
                                                                      <div class="form-group">
                                                                           <label for="title">Last name*</label>
                                                                           <input type="text" id="title" name="name" required>
                                                                      </div>
                                                                 </div>
                                                            </div>
                                                            <div class="row">
                                                                 <div class="col-md-6">
                                                                      <div class="form-group">
                                                                           <label for="exampleFormControlSelect1">Country*</label>
                                                                           <select class="form-select" id="exampleFormControlSelect1">
                                                                                <option value="">United State</option>
                                                                                <option value="">United kingdom</option>
                                                                                <option value="">Australia</option>
                                                                                <option value="">france</option>
                                                                                <option value="">Canada</option>
                                                                           </select>
                                                                      </div>
                                                                 </div>
                                                                 <div class="col-md-6">
                                                                      <div class="form-group">
                                                                           <label for="title">State*</label>
                                                                           <input type="text" id="title" name="name" required>
                                                                      </div>
                                                                 </div>
                                                            </div>
                                                            <div class="form-group form-check">
                                                                 <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                                 <label class="form-check-label" for="exampleCheck1">This is a corporate/organization donation</label>
                                                            </div>
                                                            <div class="spce"></div>
                                                            <h2 class="Customh4">Summary</h2>
                                                            <div class="summary-container">
                                                                 <div class="summary-item">
                                                                      <p>10x General admission</p>
                                                                      <a href="#">$0.00</a>
                                                                 </div>
                                                            </div>
                                                            <h2 class="Customh4">Payment Method</h2>
                                                            <div class="payment-container">
                                                                 <div class="cards">
                                                                      <img src="images/card-1.png" alt="Visa">
                                                                      <img src="images/card-2.png" alt="MasterCard">
                                                                      <img src="images/card-3.png" alt="PayPal">
                                                                      <img src="images/card-4.png" alt="Skrill">
                                                                      <img src="images/card-5.png" alt="Google Pay">
                                                                      <img src="images/card-6.png" alt="Google Pay">
                                                                      <img src="images/card-7.png" alt="Google Pay">
                                                                 </div>
                                                                 <form action="#">
                                                                      <div class="row">
                                                                           <div class="col-md-12">
                                                                                <div class="form-group">
                                                                                     <label for="title">Card Number</label>
                                                                                     <input type="text" id="title" name="name" placeholder="1234 4567 8900 1480" required>
                                                                                </div>
                                                                           </div>
                                                                      </div>
                                                                      <div class="row">
                                                                           <div class="col-md-6">
                                                                                <div class="form-group">
                                                                                     <label for="title">Expiration Date</label>
                                                                                     <input type="text" id="title" name="name" placeholder="MM/YY" required>
                                                                                </div>
                                                                           </div>
                                                                           <div class="col-md-6">
                                                                                <div class="form-group">
                                                                                     <label for="title">Security Code </label>
                                                                                     <input type="text" id="title" name="name" placeholder="Security Code (CVC)" required>
                                                                                </div>
                                                                           </div>
                                                                      </div>
                                                                      <a href="javascripts:;" class="btn btn-Custom">Donate</a>
                                                                      <p class="footer-text"> This site is protected by reCAPTCHA, their <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a> apply. By confirming your payment, you agree to Knoxville <a href="#"> Privacy Policy.</a>
                                                                      </p>
                                                            </div>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="button-row d-flex mt-4">
                                                  <button class="btn BackButon js-btn-prev" type="button" title="Prev">BACK</button>
                                                  <button class="btn next-btn  js-btn-next" type="button" title="Next">Next</button>
                                             </div>
                                        </div>
                                   </div>
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel DonationMain " data-animation="scaleIn">
                                        <div class="multisteps-form__content">
                                             <div class="Donationprice">
                                                  <div class="ThankyouPage">
                                                       <figure>
                                                            <img src="images/thank.png" alt="">
                                                       </figure>
                                                       <h5>Thank You! </h2>
                                                            <p> Your Payment have been received Successfully! </p>
                                                            <div class="buttonflex">
                                                                 <a href="step-02.php" class="btn next-btn">Back Home</a>
                                                            </div>
                                                            <h6>if You have any issues <a href="">contact us! </a>
                                                            </h6>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                              </form>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div> <?php include 'include/footer.php'?>