@extends('admin.layout')

@section('title', 'Add Employee - Step ' . ($step ?? 1))
@section('header_title', 'Employee Registration')
@section('header_subtitle', 'Step ' . ($step ?? 1) . ' of 4: Complete the details below.')



@section('content')
<div class="row justify-content-center">
    <div class="col-xl-10">
        <!-- Progress Bar -->
        <div class="registration-progress">
            <div class="progress-step {{ $step >= 1 ? ($step > 1 ? 'completed' : 'active') : '' }}">
                <div class="step-icon">@if($step > 1)<i class="fa fa-check"></i>@else 1 @endif</div>
                <div class="step-label">Personal & Identity</div>
            </div>
            <div class="progress-step {{ $step >= 2 ? ($step > 2 ? 'completed' : 'active') : '' }}">
                <div class="step-icon">@if($step > 2)<i class="fa fa-check"></i>@else 2 @endif</div>
                <div class="step-label">Address & KYC</div>
            </div>
            <div class="progress-step {{ $step >= 3 ? ($step > 3 ? 'completed' : 'active') : '' }}">
                <div class="step-icon">@if($step > 3)<i class="fa fa-check"></i>@else 3 @endif</div>
                <div class="step-label">Banking & Education</div>
            </div>
            <div class="progress-step {{ $step >= 4 ? ($step > 4 ? 'completed' : 'active') : '' }}">
                <div class="step-icon">@if($step > 4)<i class="fa fa-check"></i>@else 4 @endif</div>
                <div class="step-label">Experience & Access</div>
            </div>
        </div>

        <div class="card-premium">
            <form action="{{ route('admin.save_employee_step') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="employee_id" value="{{ $employee_id }}">
                <input type="hidden" name="step" value="{{ $step }}">

                @if($step == 1)
                    <!-- Step 1: Personal Details -->
                    <div style="border-bottom: 2px solid #f8fafc; padding-bottom: 25px; margin-bottom: 30px;">
                        <h4 style="font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 12px;">
                            <i class="fa fa-user" style="color: var(--primary-color);"></i>
                            Personal Information
                        </h4>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">First Name*</label>
                            <input type="text" name="first_name" class="form-control" value="{{ old('first_name', $employee->first_name ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Last Name*</label>
                            <input type="text" name="last_name" class="form-control" value="{{ old('last_name', $employee->last_name ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">Date of Birth*</label>
                            <input type="date" name="dob" class="form-control" value="{{ old('dob', $employee->dob ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">Gender*</label>
                            <select name="gender" class="form-control" required style="height: 50px; border-radius: 12px;">
                                <option value="Male" {{ old('gender', $employee->gender ?? '') == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender', $employee->gender ?? '') == 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Other" {{ old('gender', $employee->gender ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">Marital Status</label>
                            <select name="marital_status" class="form-control" style="height: 50px; border-radius: 12px;">
                                <option value="Single" {{ old('marital_status', $employee->marital_status ?? '') == 'Single' ? 'selected' : '' }}>Single</option>
                                <option value="Married" {{ old('marital_status', $employee->marital_status ?? '') == 'Married' ? 'selected' : '' }}>Married</option>
                                <option value="Divorced" {{ old('marital_status', $employee->marital_status ?? '') == 'Divorced' ? 'selected' : '' }}>Divorced</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Email Address*</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $employee->email ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-3 mb-4">
                            <label style="font-weight: 700; color: #475569;">Contact No*</label>
                            <input type="tel" name="contact_no" class="form-control" value="{{ old('contact_no', $employee->contact_no ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-3 mb-4">
                            <label style="font-weight: 700; color: #475569;">Alt Contact No</label>
                            <input type="tel" name="alt_contact_no" class="form-control" value="{{ old('alt_contact_no', $employee->alt_contact_no ?? '') }}" style="height: 50px; border-radius: 12px;">
                        </div>
                    </div>

                @elseif($step == 2)
                    <!-- Step 2: Address & KYC -->
                    <div style="border-bottom: 2px solid #f8fafc; padding-bottom: 25px; margin-bottom: 30px;">
                        <h4 style="font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 12px;">
                            <i class="fa fa-map-marker" style="color: var(--primary-color);"></i>
                            Address & KYC Verify
                        </h4>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Permanent Address*</label>
                            <textarea name="permanent_address" class="form-control" required style="border-radius: 12px; min-height: 100px;">{{ old('permanent_address', $employee->permanent_address ?? '') }}</textarea>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Temporary Address</label>
                            <textarea name="temporary_address" class="form-control" style="border-radius: 12px; min-height: 100px;">{{ old('temporary_address', $employee->temporary_address ?? '') }}</textarea>
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">City*</label>
                            <input type="text" name="city" class="form-control" value="{{ old('city', $employee->city ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">State*</label>
                            <input type="text" name="state" class="form-control" value="{{ old('state', $employee->state ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">Pincode*</label>
                            <input type="text" name="pincode" class="form-control" value="{{ old('pincode', $employee->pincode ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>

                        <div class="col-12 mt-4 pt-3" style="border-top: 1px solid #f1f5f9;">
                            <h5 style="font-weight: 800; margin-bottom: 20px;">Identity Verification</h5>
                        </div>

                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Aadhar Number*</label>
                            <input type="text" name="aadhar_number" class="form-control" value="{{ old('aadhar_number', $employee->aadhar_number ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">PAN Number*</label>
                            <input type="text" name="pan_number" class="form-control" value="{{ old('pan_number', $employee->pan_number ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>

                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">Aadhar Front</label>
                            <input type="file" name="aadhar_front_img" class="form-control" style="height: auto; padding: 10px; border-radius: 12px;">
                            @if(!empty($employee->aadhar_front_img))
                                <div class="mt-2"><small class="text-success"><i class="fa fa-check-circle"></i> File uploaded</small></div>
                            @endif
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">Aadhar Back</label>
                            <input type="file" name="aadhar_back_img" class="form-control" style="height: auto; padding: 10px; border-radius: 12px;">
                            @if(!empty($employee->aadhar_back_img))
                                <div class="mt-2"><small class="text-success"><i class="fa fa-check-circle"></i> File uploaded</small></div>
                            @endif
                        </div>
                        <div class="col-md-4 mb-4">
                            <label style="font-weight: 700; color: #475569;">PAN Card</label>
                            <input type="file" name="pan_img" class="form-control" style="height: auto; padding: 10px; border-radius: 12px;">
                            @if(!empty($employee->pan_img))
                                <div class="mt-2"><small class="text-success"><i class="fa fa-check-circle"></i> File uploaded</small></div>
                            @endif
                        </div>
                    </div>

                @elseif($step == 3)
                    <!-- Step 3: Banking & Education -->
                    <div style="border-bottom: 2px solid #f8fafc; padding-bottom: 25px; margin-bottom: 30px;">
                        <h4 style="font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 12px;">
                            <i class="fa fa-university" style="color: var(--primary-color);"></i>
                            Banking & Education
                        </h4>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Bank Name*</label>
                            <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name', $employee->bank_name ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Account Number*</label>
                            <input type="text" name="bank_account_no" class="form-control" value="{{ old('bank_account_no', $employee->bank_account_no ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">IFSC Code*</label>
                            <input type="text" name="ifsc_code" class="form-control" value="{{ old('ifsc_code', $employee->ifsc_code ?? '') }}" required style="height: 50px; border-radius: 12px;">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">Payment Mode*</label>
                            <select name="payment_mode" class="form-control" required style="height: 50px; border-radius: 12px;">
                                <option value="Bank Transfer" {{ old('payment_mode', $employee->payment_mode ?? '') == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                <option value="Cash" {{ old('payment_mode', $employee->payment_mode ?? '') == 'Cash' ? 'selected' : '' }}>Cash</option>
                                <option value="Cheque" {{ old('payment_mode', $employee->payment_mode ?? '') == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                            </select>
                        </div>

                        <div class="col-12 mt-4 pt-3" style="border-top: 1px solid #f1f5f9;">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 style="font-weight: 800; margin: 0;">Education History</h5>
                                <button type="button" id="btnAddEdu" class="btn btn-sm btn-light" style="font-weight: 700; color: var(--primary-color); border-radius: 10px;">
                                    <i class="fa fa-plus-circle mr-1"></i> Add Degree
                                </button>
                            </div>
                        </div>

                        <div class="col-12" id="eduContainer">
                            @if(count($education) > 0)
                                @foreach($education as $edu)
                                <div class="dynamic-row">
                                    <button type="button" class="btn-remove-row remove-row"><i class="fa fa-times"></i></button>
                                    <div class="row">
                                        <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Degree Name</label><input type="text" name="degree_name[]" value="{{ $edu->degree_name }}" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">College/University</label><input type="text" name="college_name[]" value="{{ $edu->college_name }}" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Specialization</label><input type="text" name="specialization[]" value="{{ $edu->specialization }}" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-6"><label style="font-weight: 700; font-size: 13px;">Passing Year</label><input type="text" name="passing_year[]" value="{{ $edu->passing_year }}" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-6"><label style="font-weight: 700; font-size: 13px;">Percentage/CGPA</label><input type="text" name="percentage[]" value="{{ $edu->percentage }}" class="form-control" style="border-radius: 10px;"></div>
                                    </div>
                                </div>
                                @endforeach
                            @else
                                <div class="dynamic-row">
                                    <div class="row">
                                        <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Degree Name</label><input type="text" name="degree_name[]" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">College/University</label><input type="text" name="college_name[]" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Specialization</label><input type="text" name="specialization[]" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-6"><label style="font-weight: 700; font-size: 13px;">Passing Year</label><input type="text" name="passing_year[]" class="form-control" style="border-radius: 10px;"></div>
                                        <div class="col-md-6"><label style="font-weight: 700; font-size: 13px;">Percentage/CGPA</label><input type="text" name="percentage[]" class="form-control" style="border-radius: 10px;"></div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                @elseif($step == 4)
                    <!-- Step 4: Experience & System Access -->
                    <div style="border-bottom: 2px solid #f8fafc; padding-bottom: 25px; margin-bottom: 30px;">
                        <h4 style="font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 12px;">
                            <i class="fa fa-briefcase" style="color: var(--primary-color);"></i>
                            Experience & Access
                        </h4>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 style="font-weight: 800; margin: 0;">Previous Experience</h5>
                            </div>
                        </div>

                        <div class="col-12" id="expList">
                                                        <div class="dynamic-row">
                                <div class="row">
                                    <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Company Name</label><input type="text" name="company_name[]" value="{{ $exp->company_name ?? '' }}" class="form-control" style="border-radius: 10px;"></div>
                                    <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Location</label><input type="text" name="exp_location[]" value="{{ $exp->location ?? '' }}" class="form-control" style="border-radius: 10px;"></div>
                                    <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Salary Drawn</label><input type="text" name="salary_drawn[]" value="{{ $exp->salary_drawn ?? '' }}" class="form-control" style="border-radius: 10px;"></div>
                                    <div class="col-md-4"><label style="font-weight: 700; font-size: 13px;">Start Date</label><input type="date" name="start_date[]" value="{{ $exp->start_date ?? '' }}" class="form-control" style="border-radius: 10px;"></div>
                                    <div class="col-md-4"><label style="font-weight: 700; font-size: 13px;">End Date</label><input type="date" name="end_date[]" value="{{ $exp->end_date ?? '' }}" class="form-control" style="border-radius: 10px;"></div>
                                    <div class="col-md-4"><label style="font-weight: 700; font-size: 13px;">Total years</label><input type="text" name="years_of_exp[]" value="{{ $exp->years_of_exp ?? '' }}" class="form-control" style="border-radius: 10px;"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 mt-4 pt-3" style="border-top: 1px solid #f1f5f9;">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 style="font-weight: 800; margin: 0; color: var(--primary-color);">System Access & Roles</h5>
                                
                            </div>
                        </div>

                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">System Username*</label>
                            <input type="text" name="username" class="form-control" value="{{ old('user_name', $employee->user_name ?? '') }}" required style="height: 50px; border-radius: 12px; border: 1px solid var(--primary-color);">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label style="font-weight: 700; color: #475569;">System Password {{ ($employee->user_name ?? null) ? '(Optional)' : '*' }}</label>
                            <input type="password" name="password" class="form-control" placeholder="••••••••" {{ ($employee->user_name ?? null) ? '' : 'required' }} style="height: 50px; border-radius: 12px; border: 1px solid var(--primary-color);">
                        </div>

                        <div class="col-12 mb-4">
                            <label style="font-weight: 700; color: #475569; display: block; margin-bottom: 15px;">Assigned Roles</label>
                            @php $assigned = explode(',', $employee->roles ?? ''); @endphp
                            <div class="row" id="rolesGrid" style="background: #f8fafc; padding: 25px; border-radius: 16px;">
                                @foreach($roles_list as $role)
                                <div class="col-md-4 mb-3">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="role_{{ $role->id }}" name="role[]" value="{{ $role->id }}" {{ in_array($role->id, $assigned) ? 'checked' : '' }}>
                                        <label class="custom-control-label font-weight-bold" for="role_{{ $role->id }}" style="cursor: pointer; color: #475569;">{{ $role->role_name }}</label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Navigation Buttons -->
                <div class="col-12 mt-4 pt-3" style="border-top: 1px solid #f1f5f9;">
                    <div class="d-flex justify-content-between">
                        @if($step > 1)
                            <a href="{{ route('admin.add_employee', ['id' => $employee_id, 'step' => $step - 1]) }}" class="btn btn-outline-secondary px-4 py-2" style="border-radius: 12px; font-weight: 700;">
                                <i class="fa fa-arrow-left mr-2"></i> Previous
                            </a>
                        @else
                            <div></div>
                        @endif

                        <div class="d-flex gap-3">
                            <a href="{{ route('admin.manage_employee') }}" class="btn btn-link text-muted px-4 py-2" style="font-weight: 700; text-decoration: none;">Cancel</a>
                            <button type="submit" class="btn-premium px-5 py-2">
                                {{ $step == 4 ? 'Complete Registration' : 'Save & Continue' }}
                                @if($step < 4) <i class="fa fa-arrow-right ml-2"></i> @else <i class="fa fa-check-circle ml-2"></i> @endif
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@if($step == 4)
<!-- Experience Modal -->
<div class="modal fade" id="expModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 20px; border: none; overflow: hidden;">
            <div class="modal-header" style="background: #f8fafc; border-bottom: 1px solid #f1f5f9; padding: 20px 30px;">
                <h5 class="modal-title" style="font-weight: 800;">Add Experience</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body" style="padding: 30px;">
                <form id="expAjaxForm">
                    <input type="hidden" name="employee_id" value="{{ $employee_id }}">
                    <div class="row">
                        <div class="col-md-6 mb-3"><label class="font-weight-bold">Company Name</label><input type="text" name="company_name" class="form-control" required style="border-radius: 10px;"></div>
                        <div class="col-md-6 mb-3"><label class="font-weight-bold">Location</label><input type="text" name="exp_location" class="form-control" style="border-radius: 10px;"></div>
                        <div class="col-md-6 mb-3"><label class="font-weight-bold">Start Date</label><input type="date" name="start_date" class="form-control" style="border-radius: 10px;"></div>
                        <div class="col-md-6 mb-3"><label class="font-weight-bold">End Date</label><input type="date" name="end_date" class="form-control" style="border-radius: 10px;"></div>
                        <div class="col-md-6 mb-3"><label class="font-weight-bold">Salary Drawn</label><input type="text" name="salary_drawn" class="form-control" style="border-radius: 10px;"></div>
                        <div class="col-md-6 mb-3"><label class="font-weight-bold">Years of Exp</label><input type="text" name="years_of_exp" class="form-control" style="border-radius: 10px;"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="padding: 20px 30px; border-top: 1px solid #f1f5f9;">
                <button type="button" class="btn btn-light" data-dismiss="modal" style="font-weight: 700; border-radius: 10px;">Close</button>
                <button type="button" id="btnSaveExpAjax" class="btn btn-primary" style="background: var(--primary-color); border: none; font-weight: 700; border-radius: 10px; padding: 10px 25px;">Save Record</button>
            </div>
        </div>
    </div>
</div>

<!-- Role Modal -->
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 20px; border: none; overflow: hidden;">
            <div class="modal-header" style="background: #f8fafc; border-bottom: 1px solid #f1f5f9; padding: 20px 30px;">
                <h5 class="modal-title" style="font-weight: 800;">Quick Add Role</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body" style="padding: 30px;">
                <form id="roleAjaxForm">
                    <div class="form-group">
                        <label class="font-weight-bold">Role Name</label>
                        <input type="text" name="role_name" class="form-control" placeholder="e.g. Supervisor" required style="border-radius: 10px;">
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="padding: 20px 30px; border-top: 1px solid #f1f5f9;">
                <button type="button" class="btn btn-light" data-dismiss="modal" style="font-weight: 700; border-radius: 10px;">Close</button>
                <button type="button" id="btnSaveRoleAjax" class="btn btn-primary" style="background: var(--primary-color); border: none; font-weight: 700; border-radius: 10px; padding: 10px 25px;">Add Role</button>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@section('extra_scripts')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                text: "{{ session('error') }}",
                confirmButtonColor: '#991b1b',
                background: '#fef2f2',
                color: '#991b1b',
                customClass: {
                    popup: 'rounded-xl border-0'
                }
            });
        @endif
        
        @if($errors->any())
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                html: '<ul style="text-align: left; margin: 0; padding-left: 20px;">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>',
                confirmButtonColor: '#991b1b',
                background: '#fef2f2',
                color: '#991b1b',
                customClass: {
                    popup: 'rounded-xl border-0'
                }
            });
        @endif
    });
</script>

<script>
    $(document).ready(function() {
        // Step 3 Dynamic Rows
        $('#btnAddEdu').on('click', function() {
            var html = `<div class="dynamic-row"><button type="button" class="btn-remove-row remove-row"><i class="fa fa-times"></i></button><div class="row"><div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Degree Name</label><input type="text" name="degree_name[]" class="form-control" style="border-radius: 10px;"></div><div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">College/University</label><input type="text" name="college_name[]" class="form-control" style="border-radius: 10px;"></div><div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Specialization</label><input type="text" name="specialization[]" class="form-control" style="border-radius: 10px;"></div><div class="col-md-6"><label style="font-weight: 700; font-size: 13px;">Passing Year</label><input type="text" name="passing_year[]" class="form-control" style="border-radius: 10px;"></div><div class="col-md-6"><label style="font-weight: 700; font-size: 13px;">Percentage/CGPA</label><input type="text" name="percentage[]" class="form-control" style="border-radius: 10px;"></div></div></div>`;
            $('#eduContainer').append(html);
        });

        // Step 4 AJAX Experience
        $('#btnSaveExpAjax').on('click', function() {
            var formData = $('#expAjaxForm').serialize();
            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');

            $.ajax({
                url: "{{ route('admin.save_experience_ajax') }}",
                type: "POST",
                data: formData,
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                success: function(res) {
                    if(res.success) {
                        $('#expModal').modal('hide');
                        $('.no-exp-msg').remove();
                        
                        var row = `<div class="dynamic-row" style="opacity: 0; transform: translateY(10px);">
                                <button type="button" class="btn-remove-row remove-row"><i class="fa fa-times"></i></button>
                                <div class="row">
                                    <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Company Name</label><input type="text" name="company_name[]" value="${res.data.company_name}" class="form-control" style="border-radius: 10px; border: 1px solid #e2e8f0;"></div>
                                    <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Location</label><input type="text" name="exp_location[]" value="${res.data.location || ''}" class="form-control" style="border-radius: 10px; border: 1px solid #e2e8f0;"></div>
                                    <div class="col-md-4 mb-3"><label style="font-weight: 700; font-size: 13px;">Salary Drawn</label><input type="text" name="salary_drawn[]" value="${res.data.salary_drawn || ''}" class="form-control" style="border-radius: 10px; border: 1px solid #e2e8f0;"></div>
                                    <div class="col-md-4"><label style="font-weight: 700; font-size: 13px;">Start Date</label><input type="date" name="start_date[]" value="${res.data.start_date || ''}" class="form-control" style="border-radius: 10px; border: 1px solid #e2e8f0;"></div>
                                    <div class="col-md-4"><label style="font-weight: 700; font-size: 13px;">End Date</label><input type="date" name="end_date[]" value="${res.data.end_date || ''}" class="form-control" style="border-radius: 10px; border: 1px solid #e2e8f0;"></div>
                                    <div class="col-md-4"><label style="font-weight: 700; font-size: 13px;">Total years</label><input type="text" name="years_of_exp[]" value="${res.data.years_of_exp || ''}" class="form-control" style="border-radius: 10px; border: 1px solid #e2e8f0;"></div>
                                </div>
                            </div>`;
                        
                        var $row = $(row);
                        $('#expList').append($row);
                        
                        // Simple animation
                        setTimeout(function() {
                            $row.css({ 'opacity': '1', 'transform': 'translateY(0)' });
                        }, 50);

                        $('#expAjaxForm')[0].reset();
                    } else {
                        alert(res.message);
                    }
                },
                complete: function() {
                    btn.prop('disabled', false).text('Save Record');
                }
            });
        });

        // Step 4 AJAX Role
        $('#btnSaveRoleAjax').on('click', function() {
            var roleName = $('#roleAjaxForm input[name="role_name"]').val();
            if(!roleName) return alert('Enter role name');

            var btn = $(this);
            btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Adding...');

            $.ajax({
                url: "{{ route('admin.save_role_ajax') }}",
                type: "POST",
                data: { role_name: roleName },
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                success: function(res) {
                    if(res.success) {
                        var roleId = 'role_' + res.role_id;
                        var html = `<div class="col-md-4 mb-3"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="${roleId}" name="role[]" value="${res.role_id}" checked><label class="custom-control-label font-weight-bold" for="${roleId}" style="cursor: pointer; color: #475569;">${res.role_name}</label></div></div>`;
                        $('#rolesGrid').append(html);
                        $('#roleModal').modal('hide');
                        $('#roleAjaxForm')[0].reset();
                    } else {
                        alert(res.message || 'Error creating role');
                    }
                },
                complete: function() {
                    btn.prop('disabled', false).text('Add Role');
                }
            });
        });

        $(document).on('click', '.remove-row', function() {
            $(this).closest('.dynamic-row').remove();
        });

        // Experience Calculation Logic
        function updateYears(startInput, endInput, yearsInput) {
            let start = $(startInput).val();
            let end = $(endInput).val();
            if (start) {
                let startDate = new Date(start);
                let endDate = end ? new Date(end) : new Date();
                let diff = endDate - startDate;
                let years = (diff / (1000 * 60 * 60 * 24 * 365.25)).toFixed(1);
                if (years < 0) years = 0;
                $(yearsInput).val(years);
            }
        }

        $(document).on('change', '.exp-calc-trigger', function() {
            updateYears('#in_start', '#in_end', '#in_years');
        });

        $(document).on('change', 'input[name="start_date[]"], input[name="end_date[]"]', function() {
            let row = $(this).closest('.row');
            updateYears(row.find('input[name="start_date[]"]'), row.find('input[name="end_date[]"]'), row.find('input[name="years_of_exp[]"]'));
        });

    });
</script>
@endsection