@extends('user.layout')

@section('pagename')
    - {{ __('Service Form') }}
@endsection

@section('content')
    <style>
        body {
            background-color: #f0f2f5;
        }

        .emergency-box {
            background-color: #ffffff;
            border-radius: 6px;
            padding: 20px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            color: #333;
            text-align: center;
            border: 1px solid #e0e0e0;
        }

        .emergency-box h3 {
            font-size: 1.6rem;
            margin-top: 25px;
            color: #333;
        }

        .emergency-box h3 small {
            display: block;
            font-size: 1rem;
            color: #777;
            margin-top: 5px;
        }

        .emergency-box .form-control {
            border-radius: 6px;
            border: 1px solid #ced4da;
            box-shadow: none;
            padding: 5px 10px;
            background-color: #fdfdfd;
            color: #333;
            margin-bottom: 18px;
            font-size: 1rem;
            height: 35px;
        }

        .emergency-box .form-control::placeholder {
            color: #000;
            font-weight: 500;
        }

        .emergency-box .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
            outline: none;
        }

        .emergency-box .btn-danger {
            background-color: #dc3545;
            color: #fff;
            font-weight: 600;
            border-radius: 6px;
            padding: 12px 25px;
            transition: all 0.3s ease-in-out;
            font-size: 1.1rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .emergency-box .btn-danger:hover {
            background-color: #c82333;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        .select2-container--default .select2-selection--single {
            height: 35px;
            padding: 6px 12px;
            font-size: 1rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 35px;
        }

        .select2-container--default .select2-selection--single::placeholder {
            color: #000;
            font-weight: 500;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .alert {
            border-radius: 8px;
            font-size: 1.05rem;
            padding: 15px 20px;
            margin-bottom: 30px;
            text-align: center;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
        }


        .alert-warning {
            background-color: #fff3cd;
            color: #856404;
            font-weight: 500;
        }

        .form-header {
            background-color: #74D8D8;
            color: #000 !important;
            padding: 8px 10px;
            border-radius: 6px;
            margin-bottom: 10px;
            font-size: 1.1rem;
            font-weight: bold;
            text-align: center;
            width: 100%;
        }

        .custome-btn {
            padding: 6px !important;
            margin-left: 10px;
        }

        @media (max-width: 767.98px) {
            .emergency-box {
                padding: 10px 5px;
            }

            .emergency-box .form-control,
            .emergency-box .btn-danger {
                padding: 10px 15px;
                font-size: 1rem;
            }

            .form-group.col-md-6 {
                width: 100%;
            }
        }

        #experience_table th {
            font-size: 16px;
            text-align: center;
        }

        .form-group label {
            font-size: 16px;
            font-weig
        }

        .table th,
        td {
            font-size: 14px;
            font-weight: normal;
        }

        .steps {
            font-size: 15px;
            font-weight: 600;
            margin: 5px;
        }
    </style>


    @php
        $value = $user->email;
        $isEmail = filter_var($value, FILTER_VALIDATE_EMAIL);
        $isPhone = preg_match('/^\+?[0-9]{6,20}$/', $value); // basic phone check
    @endphp
    <section class="user-dashbord">
        <div class="container">
            <div class="row">
                <!--<div class="col-lg-3 col-md-4">-->
                <!--    @include('user.inc.site_bar')-->
                <!--</div>-->

                <div class="col-md-12" style="margin-top:10px;">
                    <div class="container py-3">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        <div class="row justify-content-center">
                            <div class="col-md-12">
                                @if(isset(auth()->user()->member) && auth()->user()->member->count() > 0)
                                <h3 class="font-bold text-center">You are already applied for Membership </h3>
                                <h4 class="font-bold text-center mb-5">({{ auth()->user()->member->type }})</h4>
                                <h5 class="font-bold text-center mb-5">
                                    Your membership status is 
                                    @if(auth()->user()->member->status == 0)
                                        <span class="text-warning">Initiate</span>
                                    @elseif(auth()->user()->member->status == 1)
                                        <span class="text-primary">Processing</span>
                                    @elseif(auth()->user()->member->status == 2)
                                        <span class="text-success">Active</span>
                                    @elseif(auth()->user()->member->status == 3)
                                        <span class="text-danger">Rejected</span>
                                    @else
                                        <span class="text-secondary">Unknown</span>
                                    @endif
                                    
                                    
                                    @if(auth()->user()->member->status == 2)
                                    <h4 class="font-bold text-center mb-5">Download your membership card <a class="btn btn-success" href="{{ route('download-card', auth()->user()->member->id) }}">Download</a></h4>
                                    @endif
                                </h5>
                                <div class="text-center">
                                    <h2>
                                        Select Membership Type
                                        <br>
                                        <small> সেবার ধরণ নির্বাচন করুন </small>
                                    </h2>
                                </div>
                                <div class="choice-buttons d-flex justify-content-center flex-wrap gap-3">
                                    
                                    <a class="btn btn-primary ml-3" style="font-weight:600; padding: 15px 20px;" href="{{ route('user-member-application', 'general') }}">General Member</a>
                                    <a class="btn btn-primary ml-3" style="font-weight:600; padding: 15px 20px;" href="{{ route('user-member-application', 'vip') }}">VIP Member</a>
                                </div>
                            @else
                            </div>
                            <div class="emergency-box">
                                <h3 class="font-bold text-center">Membership Application From</h3>
                                <h4 class="font-bold text-center">({{ $type == '' ? 'Free' : $type }})</h4>
                                <form method="POST" action="{{ route('user-member-application-submit') }}" class="text-left mt-4" id="application-form" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="type" value="{{ $type == '' ? 'Free' : $type }}">
                                
                                    <!-- User Information Section -->
                                    <div id="user-info-section" class="section">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="form-header">User Information / ব্যাক্তিগত তথ্য</p>
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="customer_name">Full Name / পুরো নাম <span class="text-danger">*</span></label>
                                                <input type="text" readonly value="{{ $user->username ?? '' }}" class="form-control"  required>
                                                <input type="hidden" name="customer_name" value="{{ $user->username ?? '' }}">
                                                <input type="hidden" name="user_sl" value="{{ $user->user_sl ?? '' }}">
                                                @if ($errors->has('customer_name'))
                                                    <small class="text-danger">{{ $errors->first('customer_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="father_name">Father's Name / পিতার নাম <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="father_name" required>
                                                @if ($errors->has('father_name'))
                                                    <small class="text-danger">{{ $errors->first('father_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="mother_name">Mother Name / মাতার নাম <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="mother_name"  required>
                                                @if ($errors->has('mother_name'))
                                                    <small class="text-danger">{{ $errors->first('mother_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="dob">Date of Birth / জন্ম তারিখ <span class="text-danger">*</span></label>
                                                <input type="text" name="dob" id="dob" class="form-control datepicker" placeholder="DD-MM-YYYY" autocomplete="off" required>
                                                @if ($errors->has('dob'))
                                                    <small class="text-danger">{{ $errors->first('dob') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="nid_number">NID Number / জাতীয় পরিচয় পত্র নম্বর <span class="text-danger">*</span></label>
                                                <input type="text" name="nid_number" class="form-control" required>
                                                @if ($errors->has('nid_number'))
                                                    <small class="text-danger">{{ $errors->first('nid_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="birth_reg_number">Birth Registration Number / জন্ম নিবন্ধন নাম্বার</label>
                                                <input type="text" name="birth_reg_number" class="form-control">
                                                @if ($errors->has('birth_reg_number'))
                                                    <small class="text-danger">{{ $errors->first('birth_reg_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="gender">Gender / লিঙ্গ <span class="text-danger">*</span></label>
                                                <select class="form-control select-2" name="gender" required>
                                                    <option value="">Select Gender / লিঙ্গ নির্বাচন করুন</option>
                                                    <option value="male">Male / পুরুষ</option>
                                                    <option value="female">Female / নারী</option>
                                                </select>
                                                @if ($errors->has('gender'))
                                                    <small class="text-danger">{{ $errors->first('gender') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="marital_status">Marital Status / বৈবাহিক অবস্থা <span class="text-danger">*</span></label>
                                                <select class="form-control select-2" name="marital_status" id="marital_status" required>
                                                    <option value="">Select Marital Status / বৈবাহিক অবস্থা নির্বাচন করুন</option>
                                                    <option value="single">Single / অবিবাহিত</option>
                                                    <option value="married">Married / বিবাহিত</option>
                                                    <option value="widowed">Widowed / বিধবা</option>
                                                    <option value="divorced">Divorced / তালাকপ্রাপ্ত</option>
                                                    <option value="separated">Separated / আলাদা থাকেন</option>
                                                </select>
                                                @if ($errors->has('marital_status'))
                                                    <small class="text-danger">{{ $errors->first('marital_status') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3" id="spouse_name_wrapper" style="display: none;">
                                                <label for="spouse_name">Spouse Name / স্বামী/স্ত্রীর নাম</label>
                                                <input type="text" class="form-control" name="spouse_name" id="spouse_name">
                                                @if ($errors->has('spouse_name'))
                                                    <small class="text-danger">{{ $errors->first('spouse_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="passport_number">Passport Number / পাসপোর্ট নম্বর <span class="text-danger">*</span></label>
                                                <input type="text" name="passport_number" class="form-control" required>
                                                @if ($errors->has('passport_number'))
                                                    <small class="text-danger">{{ $errors->first('passport_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="religion">Religion / ধর্ম <span class="text-danger">*</span></label>
                                                <select class="form-control select-2" name="religion" required>
                                                    <option value="">Select Religion / ধর্ম নির্বাচন করুন</option>
                                                    <option value="islam">Islam / ইসলাম</option>
                                                    <option value="hinduism">Hinduism / হিন্দু</option>
                                                    <option value="christianity">Christianity / খ্রিস্টান</option>
                                                    <option value="buddhism">Buddhism / বৌদ্ধ</option>
                                                    <option value="others">Others / অন্যান্য</option>
                                                </select>
                                                @if ($errors->has('religion'))
                                                    <small class="text-danger">{{ $errors->first('religion') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="mobile_number">Phone / ফোন নম্বর <span class="text-danger">*</span></label>
                                                <input type="text" name="mobile_number" class="form-control" value="{{ $isPhone ? $value : '' }}" required>
                                                @if ($errors->has('mobile_number'))
                                                    <small class="text-danger">{{ $errors->first('mobile_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="email">Email / ইমেইল <span class="text-danger">*</span></label>
                                                <input type="email" name="email" class="form-control" value="{{ $isEmail ? $value : '' }}" required>
                                                @if ($errors->has('email'))
                                                    <small class="text-danger">{{ $errors->first('email') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3" id="has_children_wrapper" style="display: none;">
                                                <label>Do you have children? / আপনার কি সন্তান আছে?</label><br>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="has_children" id="children_yes" value="yes" {{ old('has_children') == 'yes' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="children_yes">Yes / হ্যাঁ</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="has_children" id="children_no" value="no" {{ old('has_children') == 'no' ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="children_no">No / না</label>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6 mb-3 children_count_wrapper" style="display: none;">
                                                <label for="num_boys">Number of Boys / ছেলের সংখ্যা</label>
                                                <input type="number" class="form-control" name="num_boys" id="num_boys" min="0" value="{{ old('num_boys') }}" >
                                            </div>
                                            <div class="form-group col-md-6 mb-3 children_count_wrapper" style="display: none;">
                                                <label for="num_girls">Number of Girls / মেয়ের সংখ্যা</label>
                                                <input type="number" class="form-control" name="num_girls" id="num_girls" min="0" value="{{ old('num_girls') }}">
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- parmanent Address Section -->
                                    <div id="parmanent-address-section" class="section" style="display: none;">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="form-header">parmanent Address / স্থায়ী ঠিকানা</p>
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="parmanent_division_id">Select Division / বিভাগ নির্বাচন করুন <span class="text-danger">*</span></label>
                                                <select class="form-control select-2" name="parmanent_division_id" id="divisionSelect" required>
                                                    <option value="">Select Division / বিভাগ নির্বাচন করুন</option>
                                                    @foreach ($division as $div)
                                                        <option value="{{ $div->id }}">{{ $div->name }}</option>
                                                    @endforeach
                                                </select>
                                                @if ($errors->has('parmanent_division_id'))
                                                    <small class="text-danger">{{ $errors->first('parmanent_division_id') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="parmanent_district_id">Select District / জেলা নির্বাচন করুন <span class="text-danger">*</span></label>
                                                <select class="form-control select-2" name="parmanent_district_id" id="districtSelect" required>
                                                    <option value="">Select District / জেলা নির্বাচন করুন</option>
                                                </select>
                                                @if ($errors->has('parmanent_district_id'))
                                                    <small class="text-danger">{{ $errors->first('parmanent_district_id') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="parmanent_thana_id">Select Upazilla / উপজেলা নির্বাচন করুন <span class="text-danger">*</span></label>
                                                <select class="form-control select-2" name="parmanent_thana_id" id="upazillaSelect" required>
                                                    <option value="">Select Upazilla / উপজেলা নির্বাচন করুন</option>
                                                </select>
                                                @if ($errors->has('parmanent_thana_id'))
                                                    <small class="text-danger">{{ $errors->first('parmanent_thana_id') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="parmanent_post_code">parmanent Post Code / পোস্ট কোড <span class="text-danger">*</span></label>
                                                <input type="text" name="parmanent_post_code" class="form-control" required>
                                                @if ($errors->has('parmanent_post_code'))
                                                    <small class="text-danger">{{ $errors->first('parmanent_post_code') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-12 mb-3">
                                                <label for="parmanent_address">parmanent Address / স্থায়ী ঠিকানা</label>
                                                <textarea name="parmanent_address" class="form-control" rows="2" required></textarea>
                                                @if ($errors->has('parmanent_address'))
                                                    <small class="text-danger">{{ $errors->first('parmanent_address') }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Mailing Address Section -->
                                    <div id="mailing-address-section" class="section" style="display: none;">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="form-header">Mailing Address / বর্তমান ঠিকানা</p>
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="current_country">Select Country <span class="text-danger">*</span></label>
                                                <select class="form-control select-2 foreign_country" name="current_country" id="countrySelect" required>
                                                    <option value="">Select Country</option>
                                                </select>
                                                @if ($errors->has('current_country'))
                                                    <small class="text-danger">{{ $errors->first('current_country') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="currrent_state">Select State <span class="text-danger">*</span></label>
                                                <select class="form-control select-2" name="currrent_state" id="stateSelect" required>
                                                    <option value="">Select State</option>
                                                </select>
                                                @if ($errors->has('currrent_state'))
                                                    <small class="text-danger">{{ $errors->first('currrent_state') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="current_post_code">Current Postcode / বর্তমান পোস্টকোড <span class="text-danger">*</span></label>
                                                <input type="text" name="current_post_code" class="form-control"  required>
                                                @if ($errors->has('current_post_code'))
                                                    <small class="text-danger">{{ $errors->first('current_post_code') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="current_address">Current Address / বর্তমান ঠিকানা <span class="text-danger">*</span></label>
                                                <textarea name="current_address" class="form-control" rows="2" required></textarea>
                                                @if ($errors->has('current_address'))
                                                    <small class="text-danger">{{ $errors->first('current_address') }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Nominee Information Section -->
                                    <div id="nominee-information-section" class="section" style="display: none;">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="form-header">Nominee's & Contact Person's Information / মনোনীত এবং যোগাযোগকারী ব্যক্তির তথ্য</p>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="nominee_name">Nominee Name / মনোনীত বাক্তির নাম <span class="text-danger">*</span></label>
                                                <input type="text" name="nominee_name" class="form-control" required>
                                                @if ($errors->has('nominee_name'))
                                                    <small class="text-danger">{{ $errors->first('nominee_name') }}</small>
                                                @endif
                                            </div>
                                        
                                            <div class="col-md-6 mb-3">
                                                <label for="relationship">Relationship / সম্পর্ক <span class="text-danger">*</span></label>
                                                <input type="text" name="relationship" class="form-control" required>
                                                @if ($errors->has('relationship'))
                                                    <small class="text-danger">{{ $errors->first('relationship') }}</small>
                                                @endif
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="nominee_father_name">Father Name / পিতার নাম <span class="text-danger">*</span></label>
                                                <input type="text" name="nominee_father_name" class="form-control" required>
                                                @if ($errors->has('nominee_father_name'))
                                                    <small class="text-danger">{{ $errors->first('nominee_father_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="nominee_mother_name">Mother Name / মাতার নাম <span class="text-danger">*</span></label>
                                                <input type="text" name="nominee_mother_name" class="form-control" required>
                                                @if ($errors->has('nominee_mother_name'))
                                                    <small class="text-danger">{{ $errors->first('nominee_mother_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="nominee_address">Address / ঠিকানা <span class="text-danger">*</span></label>
                                                <input type="text" name="nominee_address" class="form-control" required>
                                                @if ($errors->has('nominee_address'))
                                                    <small class="text-danger">{{ $errors->first('nominee_address') }}</small>
                                                @endif
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="nominee_mobile_number">Mobile Number / মোবাইল নাম্বার <span class="text-danger">*</span></label>
                                                <input type="text" name="nominee_mobile_number" class="form-control" required>
                                                @if ($errors->has('nominee_mobile_number'))
                                                    <small class="text-danger">{{ $errors->first('nominee_mobile_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="emergency_contect_relation">Emergency Contact Person Name / জরুরী বাক্তির নাম <span class="text-danger">*</span></label>
                                                <input type="text" name="emergency_contect_relation" class="form-control" required>
                                                @if ($errors->has('emergency_contect_relation'))
                                                    <small class="text-danger">{{ $errors->first('emergency_contect_relation') }}</small>
                                                @endif
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="emergency_mobile_number">Emergency Contact Number / জরুরী মোবাইল নাম্বার <span class="text-danger">*</span></label>
                                                <input type="text" name="emergency_mobile_number" class="form-control" required>
                                                @if ($errors->has('emergency_mobile_number'))
                                                    <small class="text-danger">{{ $errors->first('emergency_mobile_number') }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Company Information Section -->
                                    <div id="company-information-section" class="section" style="display: none;">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="form-header">Company Information / কোম্পানি তথ্য</p>
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="company_name">Company Name / কোম্পানি নাম <span class="text-danger">*</span></label>
                                                <input type="text" name="company_name" class="form-control"  required>
                                                @if ($errors->has('company_name'))
                                                    <small class="text-danger">{{ $errors->first('company_name') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="company_address">Company Address / কম্পানির ঠিকানা <span class="text-danger">*</span></label>
                                                <textarea name="company_address" class="form-control" rows="2"  required></textarea>
                                                @if ($errors->has('company_address'))
                                                    <small class="text-danger">{{ $errors->first('company_address') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="akama_number">Akama Number / আকামা নম্বর <span class="text-danger">*</span></label>
                                                <input type="text" name="akama_number" class="form-control" required>
                                                @if ($errors->has('akama_number'))
                                                    <small class="text-danger">{{ $errors->first('akama_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="residence_id_number">Residence Id Number / আবাসিক পরিচয়পত্র নম্বর <span class="text-danger">*</span></label>
                                                <input type="text" name="residence_id_number" class="form-control" required>
                                                @if ($errors->has('residence_id_number'))
                                                    <small class="text-danger">{{ $errors->first('residence_id_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="social_id_number">Social Id Number / সামাজিক পরিচয়পত্র নম্বর</label>
                                                <input type="text" name="social_id_number" class="form-control" >
                                                @if ($errors->has('social_id_number'))
                                                    <small class="text-danger">{{ $errors->first('social_id_number') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="foreign_mission">Foreign Mission / বিদেশী মিশন <span class="text-danger">*</span></label>
                                                <input type="text" name="foreign_mission" class="form-control" required>
                                                @if ($errors->has('foreign_mission'))
                                                    <small class="text-danger">{{ $errors->first('foreign_mission') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="foreign_country">Foreign Country / বিদেশী দেশ <span class="text-danger">*</span></label>
                                                <select class="form-control select-2 foreign_country" name="foreign_country" id="foreign_country" required>
                                                    <option value="">Select Foreign Country</option>
                                                </select>
                                                @if ($errors->has('foreign_country'))
                                                    <small class="text-danger">{{ $errors->first('foreign_country') }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Experience Information Section -->
                                    <div id="experience-information-section" class="section" style="display: none;">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="form-header">Experience / অভিজ্ঞতা</p>
                                            </div>
                                            <div class="col-md-12">
                                                <table class="table table-bordered" id="experience_table">
                                                    <thead>
                                                        <tr>
                                                            <th style="width:200px;">Country</th>
                                                            <th>Job Category</th>
                                                            <th>Job Sub-Category</th>
                                                            <th>Job Sub-sub Category</th>
                                                            <th>Exp (Year)</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <select class="form-control select-2 foreign_country" name="experience_country[]" required>
                                                                    <option value="">Select Country</option>
                                                                </select>
                                                            </td>
                                                            <td><input type="text" name="job_category[]" class="form-control" required></td>
                                                            <td><input type="text" name="job_sub_category[]" class="form-control"></td>
                                                            <td><input type="text" name="job_sub_sub_category[]" class="form-control"></td>
                                                            <td><input type="number" name="exp_year[]" class="form-control" min="0"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                <div class="d-flex flex-column gap-2" style="position: absolute; top: 75px; left: -45px;">
                                                    <button type="button" class="btn btn-success btn-sm custome-btn mb-2" id="add_row"><i class="fa fa-plus"></i></button>
                                                    <button type="button" class="btn btn-danger btn-sm custome-btn" id="delete_row"><i class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Attachment Information Section -->
                                    <div id="attachment-info-section" class="section" style="display: none;">
                                        <div class="row">
                                            <div class="col-12 mb-3">
                                                <p class="form-header">Attachment / সংযুক্তি</p>
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="member_image">Member Image / সদস্য ছবি <span class="text-danger">*</span></label>
                                                <input type="file" style="padding:2px;" name="member_image" id="member_image" class="form-control" accept="image/*" required>
                                                @if ($errors->has('member_image'))
                                                    <small class="text-danger">{{ $errors->first('member_image') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="pasport_attachment">Passport Copy / পাসপোর্ট কপি <span class="text-danger">*</span></label>
                                                <input type="file" style="padding:2px;" name="pasport_attachment" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                                                @if ($errors->has('pasport_attachment'))
                                                    <small class="text-danger">{{ $errors->first('pasport_attachment') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="visa_attachment">VISA Copy / ভিসা কপি <span class="text-danger">*</span></label>
                                                <input type="file" style="padding:2px;" name="visa_attachment" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                                                @if ($errors->has('visa_attachment'))
                                                    <small class="text-danger">{{ $errors->first('visa_attachment') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="social_attachment">Social ID / Akama / Civil ID <span class="text-danger">*</span></label>
                                                <input type="file" style="padding:2px;" name="social_attachment" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                                                @if ($errors->has('social_attachment'))
                                                    <small class="text-danger">{{ $errors->first('social_attachment') }}</small>
                                                @endif
                                            </div>
                                            <div class="form-group col-md-6 mb-3">
                                                <label for="other_attachment">Other Attachment / অন্যান্য সংযুক্তি</label>
                                                <input type="file" style="padding:2px;" name="other_attachment" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                                                @if ($errors->has('other_attachment'))
                                                    <small class="text-danger">{{ $errors->first('other_attachment') }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Single Navigation Buttons -->
                                    <div class="col-12 navigation-buttons d-flex justify-content-end">
                                        <button type="button" class="btn btn-primary ml-2" id="back-button"><i class="fas fa-arrow-left me-1"></i> Back</button>
                                        <button type="button" class="btn btn-primary ml-2" id="next-button">Next <i class="fas fa-arrow-right ms-1"></i></button>
                                        <button type="button" class="btn btn-primary ml-2" id="previewButton" style="display: none;">Preview / প্রিভিউ দেখুন</button>
                                    </div>
                                </form>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div> {{-- /col-lg-9 for Membership Options --}}
        </div> {{-- /row --}}
        </div> {{-- /container --}}


        <!--modal-->
        <div class="modal fade" id="previewModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                        <div class="text-center">
                            <img class="lazy " data-src="{{ asset('assets/front/img/' . $bs->logo) }}" alt="">
                        </div>
                        <div class="row header-area-print">

                            <div class="col-md-8">
                                <h4 class="modal-title text-center">Probash service foundation membership form / প্রবাস
                                    সার্ভিস ফাউন্ডেশন মেম্বারশিপ ফরম </h4>
                                <h5 class="text-center">({{ $type == '' ? 'Free' : $type }})</h5>
                            </div>
                            <div class="col-md-4 mb-4 text-right">
                                <div class="text-right" style="width:100%;">
                                    <img class="img-fluid img-preview"
                                        style="width:150px; height:100px; border:1px solid #dfdfdf; border-radious:5px;"
                                        src="" alt="photo" />
                                </div>
                            </div>
                        </div>
                        <div class="user-info">

                        </div>
                        <!--<table class="table table-bordered" id="previewTable">-->
                        <!--  <tbody>-->

                        <!--  </tbody>-->
                        <!--</table>-->
                        <div class="exp-detail" id="exp-detail">

                        </div>
                        <div class="annouchment" id="annouchment">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" style="padding:10px 15px;" form=""
                            id="printModalBtn">
                            Print
                        </button>
                        <button type="button" class="btn btn-success" style="padding:10px 15px;"
                            form="application-form" id="confirmSubmitButton">
                            Confirm & Submit
                        </button>
                        <button type="button" class="btn btn-secondary" style="padding:10px 15px;"
                            data-dismiss="modal">Edit</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#member_image').on('change', function() {
                let file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        imageDataURL = e.target.result;
                        $('.img-preview').attr('src', imageDataURL);
                    };
                    reader.readAsDataURL(file);
                }
            });
            $('#previewButton').on('click', function() {
                let form = $('#application-form');
                let formData = form.serializeArray();

                let formDataObj = {};
                formData.forEach(item => {
                    if (item.name.endsWith('[]')) {
                        let name = item.name;
                        if (!formDataObj[name]) {
                            formDataObj[name] = [];
                        }
                        formDataObj[name].push(item.value);
                    } else {
                        formDataObj[item.name] = item.value;
                    }
                });

                let username = @json($user->username);
                let membership_number = @json($user->user_sl);

                let previewHtml = '';
                previewHtml += `
                
                <div class="steps"> Step 1: Applicant's Information </div>
                <table class="table table-bordered" >
                    <tbody>
                        <tr>
                            <th style="width:25%;">Applicant's Name</th><td style="width:25%;">${username}</td>
                            <th style="width:25%;">Membership Number</th><td style="width:25%;">${membership_number}</td>
                        </tr>
                        <tr>
                            <th>Father's Name</th><td>${formDataObj['father_name'] || '—'}</td>
                            <th>Mother's Name</th><td>${formDataObj['mother_name'] || '—'}</td>
                        </tr>
                        <tr>
                            <th>Date Of Birth</th><td>${formDataObj['dob'] || '—'}</td>
                            <th>Pasport Number</th><td>${formDataObj['passport_number'] || '—'}</td>
                        </tr>
                        <tr>
                            <th>Gender</th><td>${formDataObj['gender'] || '—'}</td>
                            <th>Religion</th><td>${formDataObj['religion'] || '—'}</td>
                        </tr>
                        
                        <tr>
                            <th>National ID</th><td>${formDataObj['nid_number'] || '—'}</td>
                            <th>Birth Reg. ID</th><td>${formDataObj['birth_reg_number'] || '—'}</td>
                        </tr>
                        <tr>
                            <th>Marital Status</th><td>${formDataObj['marital_status'] || '—'}</td>
                            <th>Spouse Name</th><td>${formDataObj['spouse_name'] || '—'}</td>
                        </tr>
                        <tr>
                            <th> Mobile (Residence)</th><td>${formDataObj['mobile_number'] || '—'}</td>
                            <th rowspan="2">No of Children</th>
                            <td>Boy: ${formDataObj['num_girls'] || '—'}</td>
                        </tr>
                        <tr>
                            <th>Email</th><td>${formDataObj['email'] || '—'}</th>
                            <td>Girls: ${formDataObj['num_boys'] || '—'}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="steps"> Step 2: Applicant's Address </div>
                   <table class="table table-bordered" id="previewTable">
                        <tbody>
                            <tr>
                                <th style="width:25%;"><span class="text-danger">*</span>District</th><td style="width:25%;">${formDataObj['parmanent_district_id'] || '—'}</td>
                                <th style="width:25%;"><span class="text-danger">*</span>Upazilla/Thana</th><td style="width:25%;">${formDataObj['parmanent_thana_id'] || '—'}</td>
                            </tr>
                            <tr>
                                <th><span class="text-danger">*</span>parmanent Address</th><td>${formDataObj['parmanent_address'] || '—'}</td>
                                <th><span class="text-danger">*</span>Post Office & Code </th><td>${formDataObj['parmanent_post_code'] || '—'}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="steps">Mailing Address </div>
                    <table class="table table-bordered" id="previewTable">
                        <tbody>
                            <tr>
                                <th style="width:25%;"><span class="text-danger">*</span>Present Country </th><td style="width:25%;">${formDataObj['current_country'] || '—'}</td>
                                <th style="width:25%;"><span class="text-danger">*</span>Present State / State </th><td style="width:25%;">${formDataObj['currrent_state'] || '—'}</td>
                            </tr>
                            <tr>
                                <th><span class="text-danger">*</span>Present Post Code </th><td>${formDataObj['current_post_code'] || '—'}</td>
                                <th><span class="text-danger">*</span>Present Full Address </th><td>${formDataObj['current_address'] || '—'}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="steps"> Step 3: Applicant's Nominee's & Contact Persons's Information  </div>
                    <table class="table table-bordered" id="previewTable">
                        <tbody>
                            <tr>
                                <th style="width:25%;"><span class="text-danger">*</span>Nominee's Name </th><td style="width:25%;">${formDataObj['nominee_name'] || '—'}</td>
                                <th style="width:25%;"><span class="text-danger">*</span>Relationship </th><td style="width:25%;">${formDataObj['relationship'] || '—'}</td>
                            </tr>
                            <tr>
                                <th><span class="text-danger">*</span>Nominee's Father's Name </th><td>${formDataObj['nominee_father_name'] || '—'}</td>
                                <th><span class="text-danger">*</span>Nominee's Mother's Name </th><td>${formDataObj['nominee_mother_name'] || '—'}</td>
                            </tr>
                            <tr>
                                <th><span class="text-danger">*</span>Nominee's Address </th><td>${formDataObj['nominee_address'] || '—'}</td>
                                <th><span class="text-danger">*</span>Nominee's Phone Number </th><td>${formDataObj['nominee_mobile_number'] || '—'}</td>
                            </tr>
                            <tr>
                                <th><span class="text-danger">*</span>Emergency Contact Person Name </th><td>${formDataObj['emergency_contect_relation'] || '—'}</td>
                                <th><span class="text-danger">*</span>Emergency Mobile Number </th><td>${formDataObj['emergency_mobile_number'] || '—'}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="steps mb-2"> Step 4: Legal Status and Experience  </div>
                    <div class="steps"> Employer Information </div>
                    <table class="table table-bordered" id="previewTable">
                        <tbody>
                            <tr>
                                <th style="width:25%;"><span class="text-danger">*</span>Company Name/Employer Name </th><td style="width:25%;">${formDataObj['company_name'] || '—'}</td>
                                <th style="width:25%;"><span class="text-danger">*</span>Company/Employer Address</th><td style="width:25%;">${formDataObj['company_address'] || '—'}</td>
                            </tr>
                            
                            <tr>
                                <th><span class="text-danger">*</span>Akama / Visa No </th><td>${formDataObj['akama_number'] || '—'}</td>
                                <th>Residence ID Number</th><td>${formDataObj['residence_id_number'] || '—'}</td>
                            </tr>
                            <tr>
                                <th>Social/Civil ID Number </th><td>${formDataObj['social_id_number'] || '—'}</td>
                                <th><span class="text-danger">*</span>Foreign Mission</th><td >${formDataObj['foreign_mission'] || '—'}</td>
                            </tr>
                            <tr>
                                <th><span class="text-danger">*</span>Foreign Country </th><td colspan="3">${formDataObj['foreign_country'] || '—'}</td>
                            </tr>
                        </tbody>
                    </table>
                `;

                let exp_detail = `
                    <div class="steps"> Experience </div>
                    <table class="table table-bordered mt-4">
                        <thead>
                            <tr>
                                <th>Country</th>
                                <th>Job Category</th>
                                <th>Job Sub-Category</th>
                                <th>Job Sub Sub-Category</th>
                                <th>Experience Year</th>
                            </tr>
                        </thead>
                    <tbody>
                `;

                let countries = formDataObj['experience_country[]'] || [];
                let categories = formDataObj['job_category[]'] || [];
                let subcategories = formDataObj['job_sub_category[]'] || [];
                let subsubcategories = formDataObj['job_sub_sub_category[]'] || [];
                let years = formDataObj['exp_year[]'] || [];

                let length = Math.max(
                    countries.length || 0,
                    categories.length || 0,
                    subcategories.length || 0,
                    subsubcategories.length || 0,
                    years.length || 0
                );

                for (let i = 0; i < length; i++) {
                    exp_detail += `
                        <tr>
                            <td>${countries[i] || '—'}</td>
                            <td>${categories[i] || '—'}</td>
                            <td>${subcategories[i] || '—'}</td>
                            <td>${subsubcategories[i] || '—'}</td>
                            <td>${years[i] || '—'}</td>
                        </tr>
                    `;
                }

                exp_detail += `</tbody></table>`;

                let annouchment = '';
                annouchment += `
                <div class="document-instructions" style="margin-top: 30px; font-size: 12px; line-height: 1.6;">
                        <p><strong>নির্দেশনা:</strong></p>
                        <ol>
                            <li>আপনার মেম্বারশীপ এর জরুরী প্রয়োজনে ০১৭৮৯৭৮৯৮৭৬ যোগাযোগ করুন।</li>
                        </ol>
                    </div>
                    `;

                $('#exp-detail').html(exp_detail);
                $('#annouchment').html(annouchment);
                $('.user-info').html(previewHtml);
                $('#previewModal').modal('show');
            });

            $('#confirmSubmitButton').on('click', function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: 'Do you really want to submit this form?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, submit it!',
                    cancelButtonText: 'No, go back'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#application-form').submit();
                    }
                });
            });
        });
    </script>
    <script>
        $(document).on("click", "#printModalBtn", function () {
            var modalContent = document.querySelector("#previewModal .modal-body").innerHTML;
        
            var printWindow = window.open('', '', 'height=800,width=1000');
            printWindow.document.write('<html><head><title>Print Preview</title>');
        
            // Load Bootstrap CSS
            printWindow.document.write('<link rel="stylesheet" href="{{ asset('assets/front/css/bootstrap.min.css') }}">');
        
            // Add custom CSS using template literal
            printWindow.document.write(`
                <style>
                    body { font-family: Arial, sans-serif; padding: 20px; }
                    .table { width: 100%; border-collapse: collapse; }
                    .table th, .table td { border: 1px solid #ccc; padding: 8px; }
                    img { max-width: 100%; height: auto; }
                </style>
            `);
        
            printWindow.document.write('</head><body>');
            printWindow.document.write(modalContent);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
        
            // Wait until window content is loaded
            printWindow.onload = function () {
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            };
        });


    </script>
    <script>
        $(document).ready(function() {
            $('.datepicker').datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true,
                todayHighlight: true
            });
            
        
            // Initialize Select2
            $('.select-2').select2({
                width: '100%',
                placeholder: function() {
                    if ($(this).attr('name') === 'country') return 'Select Country';
                    if ($(this).attr('name') === 'state') return 'Select State';
                    return 'Select an option';
                },
                allowClear: true
            });
        
            // Marital Status and Children Fields
            function toggleSpouseAndChildrenFields() {
                let maritalStatus = $('#marital_status').val();
                if (maritalStatus === 'married') {
                    $('#spouse_name_wrapper').show();
                    $('#spouse_name').prop('required', true);
                    $('#has_children_wrapper').show();
                    if ($('input[name="has_children"]:checked').val() === 'yes') {
                        $('.children_count_wrapper').show();
                        $('#num_boys, #num_girls').prop('required', true);
                    }
                } else if (['widowed', 'divorced', 'separated'].includes(maritalStatus)) {
                    $('#spouse_name_wrapper').hide();
                    $('#spouse_name').prop('required', false).val('');
                    $('#has_children_wrapper').show();
                    if ($('input[name="has_children"]:checked').val() === 'yes') {
                        $('.children_count_wrapper').show();
                        $('#num_boys, #num_girls').prop('required', true);
                    }
                } else {
                    $('#spouse_name_wrapper').hide();
                    $('#spouse_name').prop('required', false).val('');
                    $('#has_children_wrapper').hide();
                    $('.children_count_wrapper').hide();
                    $('#num_boys, #num_girls').prop('required', false).val('');
                    $('input[name="has_children"]').prop('checked', false);
                }
            }
        
            function toggleChildCountFields() {
                if ($('input[name="has_children"]:checked').val() === 'yes') {
                    $('.children_count_wrapper').show();
                    $('#num_boys, #num_girls').prop('required', true);
                } else {
                    $('.children_count_wrapper').hide();
                    $('#num_boys, #num_girls').prop('required', false).val('');
                }
            }
        
            toggleSpouseAndChildrenFields();
            toggleChildCountFields();
        
            $('#marital_status').on('change', toggleSpouseAndChildrenFields);
            $('input[name="has_children"]').on('change', toggleChildCountFields);
        
            // Form Navigation
            const sections = [
                '#user-info-section',
                '#parmanent-address-section',
                '#mailing-address-section',
                '#nominee-information-section',
                '#company-information-section',
                '#experience-information-section',
                '#attachment-info-section'
            ];
        
            const sectionNames = [
                'User Information',
                'parmanent Address',
                'Mailing Address',
                'Nominee Information',
                'Company Information',
                'Experience Information',
                'Attachment'
            ];
        
            function validateSection(section) {
                let isValid = true;
                section.find('input[required], select[required], textarea[required]').each(function() {
                    if (!$(this).val() || $(this).val() === '') {
                        console.log(this)
                        $(this).addClass('error');
                        isValid = false;
                    } else {
                        $(this).removeClass('error');
                    }
                });
                return isValid;
            }
        
            function showSection(index) {
                sections.forEach((section, i) => {
                    $(section).toggle(i === index);
                });
                $('#back-button').toggle(index !== 0);
                $('#next-button').toggle(index !== sections.length - 1);
                $('#previewButton').toggle(index === sections.length - 1);
            }
        
            showSection(0);
        
            function validateSection(section) {
                let isValid = true;
                // Clear previous client-side error messages and styles
                section.find('.error-message').remove();
                section.find('input[required], select[required], textarea[required]').each(function() {
                    if (!$(this).val() || $(this).val() === '') {
                        $(this).addClass('error');
                        // Add error message after the field's label
                        const label = $(this).closest('.form-group').find('label');
                        label.after('<br><span class="error-message text-danger">This field is required</span>');
                        isValid = false;
                    } else {
                        $(this).removeClass('error');
                    }
                });
                return isValid;
            }

            // Next Button Click Handler
            $('#next-button').click(function() {
                const currentIndex = sections.findIndex(section => $(section).is(':visible'));
                const currentSection = $(sections[currentIndex]);
                if (validateSection(currentSection)) {
                    if (currentIndex < sections.length - 1) {
                        showSection(currentIndex + 1);
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        text: `Please fill all required fields in the ${sectionNames[currentIndex]} section.`,
                        confirmButtonText: 'OK'
                    });
                }
            });
        
            $('#back-button').click(function() {
                const currentIndex = sections.findIndex(section => $(section).is(':visible'));
                if (currentIndex > 0) {
                    showSection(currentIndex - 1);
                }
            });
        
            $('#previewButton').click(function() {
                if (validateSection($('#attachment-info-section'))) {
                    alert('Form is ready for submission. Preview functionality can be implemented here.');
                    // $('#application-form').submit(); // Uncomment to submit
                } else {
                    alert('Please fill all required fields in the Attachment section.');
                }
            });
        
            // Dynamic Experience Table
            $('#add_row').click(function() {
                let $lastRow = $('#experience_table tbody tr:last');
                let $newRow = $lastRow.clone(false, false);
                $newRow.find('.select-2').removeClass('select2-hidden-accessible').next('.select2').remove();
                $newRow.find('input').val('');
                $newRow.find('select').val('');
                $('#experience_table tbody').append($newRow);
                $newRow.find('.select-2').select2({
                    width: '100%',
                    placeholder: 'Select Country',
                    allowClear: true
                });
            });
        
            $('#delete_row').click(function() {
                let rowCount = $('#experience_table tbody tr').length;
                if (rowCount > 1) {
                    $('#experience_table tbody tr:last').remove();
                } else {
                    alert('At least one row is required.');
                }
            });
        
            // AJAX for Country/State
            $.ajax({
                url: 'https://countriesnow.space/api/v0.1/countries/positions',
                method: 'GET',
                success: function(response) {
                    if (response.data) {
                        $('.foreign_country').append('<option value="">Select Country</option>');
                        response.data.forEach(function(country) {
                            $('.foreign_country').append(`<option value="${country.name}">${country.name}</option>`);
                        });
                        $('.foreign_country').trigger('change'); // Trigger Select2 update
                    }
                },
                error: function() {
                    $('.foreign_country').append('<option value="">Error loading countries</option>');
                }
            });
        
            $('#countrySelect').on('change', function() {
                const country = $(this).val();
                $('#stateSelect').html('<option value="">Loading...</option>');
                if (country) {
                    $.ajax({
                        url: 'https://countriesnow.space/api/v0.1/countries/states',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({ country: country }),
                        success: function(response) {
                            $('#stateSelect').html('<option value="">Select State</option>');
                            if (response.data && response.data.states) {
                                response.data.states.forEach(function(state) {
                                    $('#stateSelect').append(`<option value="${state.name}">${state.name}</option>`);
                                });
                            }
                        },
                        error: function() {
                            $('#stateSelect').html('<option value="">Error loading states</option>');
                        }
                    });
                } else {
                    $('#stateSelect').html('<option value="">Select State</option>');
                }
            });
        
            // AJAX for Division/District/Upazilla (replace with actual endpoints)
            $('#divisionSelect').on('change', function() {
                const divisionId = $(this).val();
                $('#districtSelect').html('<option value="">Loading...</option>');
                $('#upazillaSelect').html('<option value="">Select Upazilla</option>');
                if (divisionId) {
                    $.ajax({
                        url: '/get-districts/' + divisionId, // Replace with actual endpoint
                        type: 'GET',
                        success: function(data) {
                            $('#districtSelect').html('<option value="">Select District</option>');
                            $.each(data, function(key, district) {
                                $('#districtSelect').append(`<option value="${district.id}">${district.name}</option>`);
                            });
                            $('#districtSelect').trigger('change');
                        },
                        error: function() {
                            $('#districtSelect').html('<option value="">Error loading districts</option>');
                        }
                    });
                }
            });
        
            $('#districtSelect').on('change', function() {
                const districtId = $(this).val();
                $('#upazillaSelect').html('<option value="">Loading...</option>');
                if (districtId) {
                    $.ajax({
                        url: '/get-upazillas/' + districtId, // Replace with actual endpoint
                        type: 'GET',
                        success: function(data) {
                            $('#upazillaSelect').html('<option value="">Select Upazilla</option>');
                            $.each(data, function(key, upazilla) {
                                $('#upazillaSelect').append(`<option value="${upazilla.id}">${upazilla.name}</option>`);
                            });
                        },
                        error: function() {
                            $('#upazillaSelect').html('<option value="">Error loading upazillas</option>');
                        }
                    });
                }
            });
        });
    </script>
    <script>
        // Prevent all form submissions to stop reloads
        document.addEventListener("DOMContentLoaded", function() {
            const forms = document.querySelectorAll("form");
            forms.forEach(function(form) {
                form.addEventListener("submit", function(e) {
                    e.preventDefault(); // prevent reload
                });
            });
        });
    </script>
@endsection