@extends('frontend.layouts.app')
@section('content')
    <div class="container-xxl-5 py-5">
        <div class="container">
            @if(Session::has('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert" style="position: fixed; top:90%; left: 50%; transform: translate(-50%, -50%);">
                    {{ Session::get('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="row join-form-row">
                <div class="col-lg-7 mx-auto">
                    <div class="pt-5 h-100">
                        <h2 class="display-6 mb-3 text-white">Join Us</h2>
                        <p class="text-white">
                            ग्राम पंचायत हेल्प डेस्क मिशन (ट्रस्ट) का मूल उद्देश्य ग्रामीण एवं शहरी क्षेत्रों में गरीब परिवार
                            से बिलांग करने वाले परिवारों को आर्थिक सहयोग प्रदान करना व उनके सुख-दुःख में साथ देना है।
                        </p>
                        <form class="join-form" action="{{ route('frontend.join-form') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <label class="form-label" for="name">Name</label>
                                    <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="parent_name">Father / Husband Name</label>
                                    <input type="text" class="form-control" placeholder="Enter Father Name" id="parent_name" name="parent_name" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="state">State</label>
                                    <select class="form-control" name="state" id="state" required>
                                        <option value="" selected>Select State</option>
                                        @foreach (array_keys(districts()) as $state)
                                            <option value="{{ $state }}">{{ $state }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="district">District</label>
                                    <select class="form-control" name="district" id="district" required>
                                        <option value="" selected>Select District</option>
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="block">Block/Nagar</label>
                                    <input type="text" class="form-control" placeholder="Enter Block/Nagar" id="block" name="block" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="gram_panchayat">Gram Panchayat/Mohla</label>
                                    <input type="text" class="form-control" placeholder="Enter Gram Panchayat/Mohla" id="gram_panchayat" name="gram_panchayat" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="village_street">Village/Street</label>
                                    <input type="text" class="form-control" placeholder="Enter Village/Street" id="village_street" name="village_street" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="contact">Contact Number</label>
                                    <input type="number" class="form-control" id="contact" name="contact"
                                        placeholder="Enter Contact Number" required oninput="validateMobileNumber()">
                                    <small class="text-danger" id="result"></small>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="other_contact">Other Contact Number</label>
                                    <input type="number" class="form-control" id="other_contact" name="other_contact"
                                        placeholder="Enter Other Contact Number">
                                    <small class="text-danger" id="result"></small>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="designation">Designation</label>
                                    <select class="form-select" id="designation" name="designation" required>
                                        <option>Select Designation</option>
                                        <option value="District Manager/ Media Prabhari (DMM)">District Manager/ Media Prabhari (DMM)</option>
                                        <option value="Block Manager/ Media Prabhari (BMM)">Block Manager/ Media Prabhari (BMM)</option>
                                        <option value="Block Sakhi/ Sachiv (BSS) - Only Female">Block Sakhi/ Sachiv (BSS) - Only Female</option>
                                        <option value="Panchayat Sakhi/ Koshaadhyaksha (PSK) -  Only Female">Panchayat Sakhi/ Koshaadhyaksha (PSK) -  Only Female</option>
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="dob">DOB</label>
                                    <input type="date" class="form-control" id="dob" name="dob" max="{{date('Y-m-d')}}" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="qualification_10">High School Marks</label>
                                    <input type="number" class="form-control" id="qualification_10" name="qualification_10"
                                        placeholder="Enter High School Marks" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="qualification_12">Intermediate Marks</label>
                                    <input type="number" class="form-control" id="qualification_12" name="qualification_12"
                                        placeholder="Enter Intermediate Marks">
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label" for="other_qualification">Other Qualification</label>
                                    <input type="text" class="form-control" id="other_qualification" name="other_qualification"
                                        placeholder="Enter Other Qualification (Graduation, Post Graduation, etc.)">
                                </div>
                                <div class="col-lg-12">
                                    <label class="form-label" for="work_experience">Work Experience</label>
                                    <textarea class="form-control" id="work_experience" name="work_experience" rows="3"
                                        placeholder="Enter Your Work Experience"></textarea>
                                </div>
                                <div class="col-lg-12">
                                    <label class="form-label" for="photo">Upload Photo</label>
                                    <input type="file" class="form-control" id="photo" name="photo" accept="image/*">
                                    <small class="text-white">Accepted formats: JPG, PNG, JPEG (Max size: 2MB)</small>
                                </div>
                                <div class="col-lg-12 text-end">
                                    <button type="submit" class="btn submit-btn">SUBMIT</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function validateMobileNumber() {
            var mobileNumber = document.getElementById('contact').value;
            var regex = /^[0-9]{10}$/;

            if (regex.test(mobileNumber)) {
                document.getElementById('result').innerHTML = 'Valid Mobile Number';
            } else {
                document.getElementById('result').innerHTML = 'Invalid Mobile Number';
            }
        }
    </script>
    <script>
        setTimeout(function() {
            $('.alert').fadeOut('slow');
        }, 3000);
    </script>

    <script>
        const districts = @json(districts());

        document.getElementById('state').addEventListener('change', function () {
            const state = this.value;
            const districtSelect = document.getElementById('district');
            districtSelect.innerHTML = '<option value="" selected>Select District</option>';

            if (districts[state]) {
                districts[state].forEach(function (district) {
                    const option = document.createElement('option');
                    option.value = district;
                    option.textContent = district;
                    districtSelect.appendChild(option);
                });
            }
        });
    </script>
@endsection