@extends('layouts.master')
@section('content')

    <section class="mentor-registration">
        <div class="container-fluid">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                    </ul>
                </div>
            @endif
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <form method="POST" action="{{route('mentor.store')}}" class="registration-form" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <!-- Join As -->
                        <div class="form-group">
                           <h4> <label for="join_as">Join As</label><span class="required">*</span></h4>
                            <select class="form-control" id="join_as" name="join_as">
                                <option selected>Please Select</option>
                                @foreach($joinAsTypes as $joinAs)
                                    <option value="{{$joinAs->id}}">{{$joinAs->name}}</option>
                                @endforeach
                            </select>
                        </div>
                      <div class="section">
                        </div>
                        <div class="form-group">
                           <h4> <label for="about">EVENTS</label><span class="required">*</span></h4>
                            <select class="form-control" id="about" name="event">
                                <option selected>Please Select</option>
                                @foreach($events as $event)
                                <option value="{{ $event->id }}">{{ $event->session['title'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <!-- Personal Information -->
                        <div class="section">
                          <h3>Personal Information <span class="required">*</span></h3>
                          <div class="profile-upload">
                            <label for="profileImage">
                              <div class="image-placeholder">Image Upload</div>
                            </label>
                            <input type="file" id="profileImage" name="profile_image" hidden />
                            <p class="note">Upload Profile Image <span class="required">*</span><br><small>(Max File Size: 200KB)</small></p>
                          </div>
                          <div class="grid">
                            <input type="text" name="full_name" placeholder="FUll NMAE (in capital leter):" required />
                            <input type="email" name="email" placeholder="E-mail:" required />
                            <input type="tel" name="whatsapp_number" placeholder="Whatapps Number:" required />
                             <input type="tel" name="telegram_number" placeholder="Telegram Number:" required />
                            <input type="password" name="password" placeholder="Password" required />
                            <input type="password" name="password_confirmation" placeholder="Confirm New Password" required />
                          </div>
                        </div>
                    
                        <!-- Residence Information -->
                        <div class="section">
                          <h3>Residence Information <span class="required">*</span></h3>
                          <div class="grid">
                            <select name="division" id="division" required>
                              <option disabled selected>Select Division</option>
                                @foreach($divisions as $division)
                                <option value="{{ $division->id }}">{{ $division->name }}</option>
                                @endforeach
                            </select>
                            <select name="district" id="district" required>
                              <option disabled selected>Select District</option>
                              <option value="Dhaka" selected>Select District</option>
                            </select>
                            <select name="upazila" id="upazila" required>
                              <option disabled selected>Select Upazila/Thana</option>
                              <option value="Mirpur" selected>Select Upazila/Thana</option>
                            </select>
                            <input type="text" name="village_area" placeholder="Village/Area" required />
                          </div>
                        </div>
                    
                        <!-- Institute or Job Information -->
                        <div class="section">
                          <h3>Institute or Job Information <span class="required">*</span></h3>
                          <div class="grid">
                            <input type="text" name="institute" placeholder="Institute: School/College/University" required />
                            <input type="text" name="class_level_designation" placeholder="Enter: Class/Level/Designation" required />
                            <input type="text" name="group_department_subject" placeholder="Group/Department/Subject (Optional)" />
                            <input type="text" name="institute_mobile" placeholder="Institute Mobile:" required />
                            <input type="text" name="institute_email" placeholder="Institute Email:" />
                            <input type="text" name="institute_eiin_no" placeholder="Institute EIIN NO:" />
                          </div>
                        </div>
                    
                        <!-- Agreement -->
                        <div class="section terms-condition">
                          <label>
                            <input type="checkbox" name="agree_terms" required />
                            I agree to the Event  (Terms & Condition)</a>
                          </label>
                        </div>
                    
                        <!-- Register Button -->
                        <div class="section submit-btn">
                          <button type="submit" class="register-btn">Register</button>
                        </div>
                      </form>
                </div>
            </div>
        </div>
    </section>
    
@endsection

@section('footer')
    @include('layouts.footer')
    <script>
        $(document).ready(function () {
            var $districtSelect = $('#district');
            var $upazilaSelect = $('#upazila');
            var sub_category_trigger = false;
            // $('.select2').select2();
        
            // Generic function to populate dropdowns
            function populateSelect($select, options, placeholder, key = 'id', valueKey = 'name') {
        
                $select.empty().append($('<option>', { value: '', text: placeholder }));
                options.forEach(option => {
                    $select.append($('<option>', {
                        value: option[key] || option,
                        text: option[valueKey] || option
                    }));
                });
            }
        
            // Division change event
            $('#division').on('change', function () {
                var selectedDivisionId = $(this).val();
                populateSelect($districtSelect, [], 'Select District');
                populateSelect($upazilaSelect, [], 'Select Upazila');
        
                if (selectedDivisionId) {
                    $.ajax({
                        type: 'GET',
                        url: '/get-districts/' + selectedDivisionId,
                        success: function (data) {
                            populateSelect($districtSelect, data.districts, 'Select District');
                        },
                        error: function (xhr, status, error) {
                            console.error('Error fetching districts:', error);
                        }
                    });
                }
            });
        
            // District change event
            $districtSelect.on('change', function () {
                var selectedDistrictId = $(this).val();
                populateSelect($upazilaSelect, [], 'Select Upazila');
        
                if (selectedDistrictId) {
                    $.ajax({
                        type: 'GET',
                        url: '/get-upazilas/' + selectedDistrictId,
                        success: function (data) {
                            populateSelect($upazilaSelect, data.upazilas, 'Select Upazila');
                            // $('.select2').select2();
                        },
                        error: function (xhr, status, error) {
                            console.error('Error fetching upazilas:', error);
                        }
                    });
                }
            });
        });
    </script>
@endsection