@extends('admin.layouts.app')
@section('header-script')
    @include('admin.layouts.forms-header-script')
@endsection

    @section('content')
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-25">
                    <a  href="{{URL::to('admin/joinsory_list')}}"  class="btn btn-custom  waves-effect waves-light"  >Join Soty List <span class="m-l-5"><i class="fa fa-list" aria-hidden="true"></i></span></a>
                </div>
                <h4 class="page-title">Update Join Soty</h4>
                {{-- @foreach (['danger', 'warning', 'success', 'info'] as $key)
                    @if(Session::has($key))
                        <p class="alert alert-{{ $key }}"><i class="fa fa-info-circle" style="color: #fe6271;"></i> {{ Session::get($key) }}</p>
                    @endif
                @endforeach --}}
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <h4 class="header-title m-t-0 m-b-30">Update Join Soty</h4>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="p-20">
                                <form method="POST" action="{{ url('admin/joinsoty') }}/{{$mentor->id}}/update" class="form-horizontal" enctype="multipart/form-data">
                                    {{ csrf_field() }}
                                    <!--@method('PUT')-->
                                
                                    <!-- Join As -->
                                    <div class="form-group">
                                        <h4></h4><label class="col-lg-2 control-label" for="join_as">Join As</label><span class="required">*</span></h4>
                                        <div class="col-lg-10">
                                            <select class="form-control" id="join_as" name="join_as" required>
                                                <option value="">Please Select</option>
                                                @foreach($joinAsTypes as $joinAs)
                                                    <option value="{{ $joinAs->id }}" {{ $mentor->join_as == $joinAs->id ? 'selected' : '' }}>
                                                        {{ $joinAs->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                
                                    <!-- Events -->
                                    <div class="form-group">
                                        <h4><label for="about">Events</label><span class="required">*</span></h4>
                                        <select class="form-control" id="about" name="event" required>
                                            <option value="">Please Select</option>
                                            @foreach($events as $event)
                                                <option value="{{ $event->id }}" {{ $mentor->event_id == $event->id ? 'selected' : '' }}>
                                                    {{ $event->session['title'] ?? $event->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                
                                    <!-- Personal Information -->
                                    <div class="section">
                                        <h3>Personal Information <span class="required">*</span></h3>
                                
                                        @if($mentor->profile_image)
                                            <img src="{{ asset("/storage/app/public/" .$mentor->profile_image) }}" width="100" alt="Profile Image">
                                        @endif
                                
                                        <div class="profile-upload">
                                            <label for="profileImage">
                                                <div class="image-placeholder">Change Image</div>
                                            </label>
                                            <input type="file" id="profileImage" name="profile_image" hidden />
                                            <p class="note">
                                                Upload New Profile Image<br><small>(Max 200KB)</small>
                                            </p>
                                        </div>
                                
                                        <div class="grid">
                                            <input type="text" name="full_name" value="{{ $mentor->full_name }}" placeholder="FULL NAME (in capital letters):" required />
                                            <input type="email" name="email" value="{{ $mentor->email }}" placeholder="E-mail:" required />
                                            <input type="tel" name="whatsapp_number" value="{{ $mentor->whatsapp_number }}" placeholder="WhatsApp Number:" required />
                                            <input type="tel" name="telegram_number" value="{{ $mentor->telegram_number }}" placeholder="Telegram Number:" />
                                        </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 value="">Select Division</option>
                                                @foreach($divisions as $division)
                                                    <option value="{{ $division->id }}" {{ $mentor->division_id == $division->id ? 'selected' : '' }}>
                                                        {{ $division->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                
                                            <select name="district" id="district" required>
                                                <option value="">Select District</option>
                                                @foreach($districts as $district)
                                                    <option value="{{ $district->id }}" {{ $mentor->district_id == $district->id ? 'selected' : '' }}>
                                                        {{ $district->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                
                                            <select name="upazila" id="upazila" required>
                                                <option value="">Select Upazila/Thana</option>
                                                @foreach($upazilas as $upazila)
                                                    <option value="{{ $upazila->id }}" {{ $mentor->upazila_id == $upazila->id ? 'selected' : '' }}>
                                                        {{ $upazila->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                
                                            <input type="text" name="village_area" value="{{ $mentor->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" value="{{ $mentor->institute }}" placeholder="Institute: School/College/University" required />
                                            <input type="text" name="class_level_designation" value="{{ $mentor->class_level_designation }}" placeholder="Enter: Class/Level/Designation" required />
                                            <input type="text" name="group_department_subject" value="{{ $mentor->group_department_subject }}" placeholder="Group/Department/Subject (Optional)" />
                                            <input type="text" name="institute_mobile" value="{{ $mentor->institute_mobile }}" placeholder="Institute Mobile:" required />
                                            <input type="text" name="institute_email" value="{{ $mentor->institute_email }}" placeholder="Institute Email:" />
                                            <input type="text" name="institute_eiin_no" value="{{ $mentor->institute_eiin_no }}" placeholder="Institute EIIN NO:" />
                                        </div>
                                    </div>
                                
                                    <!-- Agreement -->
                                    <div class="section terms-condition">
                                        <label>
                                            <input type="checkbox" name="agree_terms" {{ $mentor->agree_terms ? 'checked' : '' }} required />
                                            I agree to the Event (Terms & Condition)
                                        </label>
                                    </div>
                                
                                    <!-- Register Button -->
                                    <div class="section submit-btn">
                                        <button type="submit" class="register-btn">Update</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
    $(document).ready(function() {
    
        // Load Districts based on Division
        $('#division').on('change', function() {
            var division_id = $(this).val();
            $('#district').html('<option value="">Loading...</option>');
            $('#upazila').html('<option value="">Select Upazila/Thana</option>');
    
            if(division_id) {
                $.ajax({
                    url: '/get-districts/' + division_id,
                    type: "GET",
                    success: function(data) {
                        $('#district').empty().append('<option value="">Select District</option>');
                        $.each(data, function(key, value) {
                            $('#district').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                        });
                    }
                });
            } else {
                $('#district').html('<option value="">Select District</option>');
                $('#upazila').html('<option value="">Select Upazila/Thana</option>');
            }
        });
    
        // Load Upazilas based on District
        $('#district').on('change', function() {
            var district_id = $(this).val();
            $('#upazila').html('<option value="">Loading...</option>');
            
            if(district_id) {
                $.ajax({
                    url:  '/get-upazilas/' + district_id,
                    type: "GET",
                    success: function(data) {
                        $('#upazila').empty().append('<option value="">Select Upazila/Thana</option>');
                        if (Array.isArray(data)) {
                            $.each(data, function(key, value) {
                                $('#upazila').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                            });
                        }
                    
                        // Case 2: data = { upazilas: [ {id:1, name:"X"} ] }
                        else if (data.upazilas) {
                            $.each(data.upazilas, function(key, value) {
                                $('#upazila').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                            });
                        }
                    }
                });
            } else {
                $('#upazila').html('<option value="">Select Upazila/Thana</option>');
            }
        });
    
    });
    </script>
    @endsection