<?php $__env->startSection('content'); ?>

    <section class="mentor-registration">
        <div class="container-fluid">
            <?php if(session('success')): ?>
                <div class="alert alert-success">
                    <?php echo e(session('success')); ?>

                </div>
            <?php endif; ?>
            
            <?php if($errors->any()): ?>
                <div class="alert alert-danger">
                    <ul>
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li><?php echo e($error); ?></li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            <?php endif; ?>
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <form method="POST" action="<?php echo e(route('mentor.store')); ?>" class="registration-form" enctype="multipart/form-data">
                        <?php echo e(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>
                                <?php $__currentLoopData = $joinAsTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $joinAs): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($joinAs->id); ?>"><?php echo e($joinAs->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </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>
                                <?php $__currentLoopData = $events; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $event): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($event->id); ?>"><?php echo e($event->session['title']); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </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>
                                <?php $__currentLoopData = $divisions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $division): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($division->id); ?>"><?php echo e($division->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </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>
    
<?php $__env->stopSection(); ?>

<?php $__env->startSection('footer'); ?>
    <?php echo $__env->make('layouts.footer', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    <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>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>