@extends('frontend.frontend_layout')
@section('content')
<!--Page Header Start-->
<section class="page-header">
    <div class="page-header-bg" style="background-image: url({{ asset($pageBanner->volunteer_page_banner) }})">
    </div>
    <div class="container">
        <div class="page-header__inner">
            <ul class="thm-breadcrumb list-unstyled">
                <li><a href="index.html">Home</a></li>
                <li><span>/</span></li>
                <li>Volunteer</li>
            </ul>
            <h2>Volunteer</h2>
        </div>
    </div>
</section>
<!--Page Header End-->

<!--Donate One Start-->
<section class="event-details" style="padding-top: 65px;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="volunteer">
                    <div class="">
                        <p class="pb-4 volunteer-title">If you are interested in becoming one of our volunteers, please
                            fill out the form below. Your helping hand is greatly appreciated!</p>
                    </div>
                    {{-- <div class="event-details__btn-box mt-3">
                        <a href="{{ url('/donation') }}" class="event-details__btn thm-btn">Donate Now</a>
                    </div> --}}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class=""
                    style="border: 2px solid #ececec; background: #fefefe; border-radius: 10px; padding: 30px 25px 10px 25px;">
                    <div class="volunteer">
                        <p class=""
                            style="color: red; font-weight: 700;  text-transform: uppercase; display: block; border-bottom: 5px solid #ddd; padding-bottom: 10px;  margin-bottom: 20px;">
                            * REQUIRED INFORMATION</p>
                        <div class="">
                            <form action="{{ route('frontend.volunteer.store') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group py-2">
                                            <label for="program" class="form_label">HOW DID YOU FIRST HEAR ABOUT
                                                OUR PROGRAM? <span style="color: red; font-size: 20px">*</span></label>
                                            <input type="text" name="program" class="form-control form_input_field"
                                                id="program" placeholder="Enter detail here" required>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group py-2">
                                            <label for="skills" class="form_label">PLEASE LIST ANY OF YOUR SPECIAL
                                                SKILLS AND OTHER LANGUAGES SPOKEN <span
                                                    style="color: red; font-size: 20px">*</span></label>
                                            <textarea class="form-control form_input_textarea_field" id="skills"
                                                name="skills"
                                                placeholder="Enter special skills and other languages spoken here" required></textarea>
                                        </div>
                                    </div>


                                    <div class="col-md-12">
                                        <div class="form-group py-2">
                                            <label for="experience" class="form_label">IF YOU HAVE PREVIOUS
                                                VOLUNTEER EXPERIENCE PLEASE DESCRIBE IT HERE <span
                                                    style="color: red; font-size: 20px">*</span></label>
                                            <textarea class="form-control form_input_textarea_field" id="experience"
                                                name="experience"
                                                placeholder="Enter previous volunteer experience and description here" required></textarea>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group py-2">
                                            <label for="receive" class="form_label">HOW WOULD YOU LIKE TO
                                                RECEIVE
                                                INFORMATION FROM US? <span
                                                    style="color: red; font-size: 20px">*</span></label>
                                            <input type="text" class="form-control form_input_field" id="receive"
                                                name="receive"
                                                placeholder="Enter previous volunteer experience and description here" required>
                                        </div>
                                    </div>

                                    <p style="font-size: 26px; font-weight: 700; color: #302b2b; margin: 20px 0;">
                                        CONTACT INFORMATION</p>

                                    <div class="col-md-6">
                                        <div class="form-group py-2">
                                            <label for="name" class="form_label">NAME <span
                                                    style="color: red; font-size: 20px">*</span></label>
                                            <input type="text" class="form-control form_input_field" id="name"
                                                name="name" placeholder="Enter name here" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group py-2">
                                            <label for="address" class="form_label">ADDRESS <span
                                                    style="color: red; font-size: 20px">*</span></label>
                                            <input type="text" class="form-control form_input_field" id="address"
                                                name="address" placeholder="Enter address here" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group py-2">
                                            <label for="phone" class="form_label">TELEPHONE NUMBER <span
                                                    style="color: red; font-size: 20px"><span
                                                        style="color: red; font-size: 20px">*</span></span></label>
                                            <input type="text" class="form-control form_input_field" id="phone"
                                                name="phone" placeholder="Enter telephone number here" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group py-2">
                                            <label for="email" class="form_label">EMAIL ADDRESS <span
                                                    style="color: red; font-size: 20px">*</span></label>
                                            <input type="email" class="form-control form_input_field" id="email"
                                                name="email" placeholder="Enter email address here" required>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group py-2">
                                            <label for="following_area" class="form_label">IF YOU ARE INTERESTED IN
                                                HELPING IN ANY OF THE FOLLOWING AREAS OF NEED, PLEASE SELECT ONE <span
                                                    style="color: red; font-size: 20px">*</span></label><br>
                                            <select name="following_area" id="following_area"
                                                class="form_field form_select_field" required>
                                                <option value="">Please select</option>
                                                <option value="Fundraising">Fundraising</option>
                                                <option value="PR/Marketing">PR/Marketing</option>
                                                <option value="Office Assistance">Office Assistance</option>
                                                <option value="Volunteer Recruitment">Volunteer Recruitment</option>
                                                <option value="Special Events">Special Events</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="thm-btn comment-form__btn"
                                    style="width: 250px; margin-top: 25px; margin-bottom: 40px">SUBMIT</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Donate One End-->

@endsection