@extends('frontend.layouts.main')
@push('title')
    <title>Volunteer With Us</title>
@endpush
@section('main-section')
    {{-- start-breadcrumb --}}
    <div class="breadcrumb-banner">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Volunteer With Us</li>
                </ol>
            </nav>
            <h3>Volunteer With Us</h3>
        </div>
    </div>
    {{-- end-breadcrumb --}}

    {{-- start-main --}}

    <main>
        <section class="volunteer-section">
            <div class="container ptb">
                <div class="row g-0">
                    <div class="col-lg-5 volunteer-info-pane">
                        <div class="pane-padding">
                            <h2 class="display-5 fw-bold mb-4">Join our <span class="brand-text">Mission</span></h2>
                            <p class="mb-5 opacity-75">Your dedication can change lives. Fill out the form to begin your
                                journey as a volunteer with our foundation.</p>

                            <div class="info-link mb-3">
                                <i class="fa-solid fa-circle-check me-2"></i> Flexible Hours
                            </div>
                            <div class="info-link">
                                <i class="fa-solid fa-circle-check me-2"></i> Community Impact
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7 volunteer-form-pane">
                        <div class="pane-padding">
                            <h3 class="mb-4 fw-bold text-dark">Volunteer Registration</h3>

                            <form action="#" class="registration-form" id="volunteerForm">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label custom-label">Full Name</label>
                                        <input type="text" class="form-control custom-input" name="name"
                                            placeholder="Your Name">
                                        <span id="name_err" class="text-danger"></span>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label custom-label">Email Address</label>
                                        <input type="email" class="form-control custom-input" name="email"
                                            placeholder="email@example.com">
                                        <span id="email_err" class="text-danger"></span>
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label class="form-label custom-label">Mobile Number</label>
                                        <input type="text" class="form-control custom-input" name="mobile"
                                            placeholder="+91 00000 00000">
                                        <span id="mobile_err" class="text-danger"></span>
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label class="form-label custom-label">Area of Interest</label>
                                        <select class="form-select custom-input" name="interest">
                                            <option value="" selected disabled>Select Area</option>
                                            <option value="Education">Education</option>
                                            <option value="Healthcare">Healthcare</option>
                                            <option value="Environmental">Environment</option>
                                            <option value="Medical">Medical</option>
                                            <option value="Social Work">Social Work</option>
                                            <option value="Other">Other</option>
                                        </select>
                                        <span id="interest_err" class="text-danger"></span>
                                    </div>

                                    <div class="col-md-12 mb-4">
                                        <label class="form-label custom-label">Message (Optional)</label>
                                        <textarea class="form-control custom-input" name="message" rows="3" placeholder="Tell us why you want to join"></textarea>
                                        <span id="message_err" class="text-danger"></span>
                                    </div>
                                </div>

                                <button type="button" id="volunteerBtn" class="custom-bttn">
                                    SUBMIT APPLICATION <i class="fa-solid fa-paper-plane ms-2"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </main>

    {{-- end-main --}}
    <script>
        $('#volunteerBtn').click(function() {

            let btn = $('#volunteerBtn');
            let formData = $("#volunteerForm").serialize();
            // Clear previous errors
            $(".text-danger").text('');

            $.ajax({
                url: "{{ url('volunteer-with-us') }}",
                type: "POST",
                data: formData,
                dataType: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                beforeSend: function() {
                    btn.prop('disabled', true);
                    btn.html('Processing...');
                },

                success: function(response) {

                    btn.prop('disabled', false);
                    btn.html('Submit Application');

                    if (response.success) {
                        alert(response.message);
                        document.getElementById('volunteerForm').reset();
                    } else {
                        $.each(response.errors, function(key, value) {
                            $("#" + key + "_err").text(value);
                        })
                    }
                },
                error: function(xhr) {
                    btn.prop('disabled', false);
                    btn.html('Submit Application');
                }
            });
        });
    </script>
@endsection