@extends('admin.layouts.master')

@section('title', 'Manage Team')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0"><i class="fas fa-user-plus"></i> Employee Management</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Home</a></li>
                    <li class="breadcrumb-item active">Add Employee</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <form action="{{ route('employees.store') }}" method="POST" enctype="multipart/form-data" id="employeeForm">
            @csrf

            <div class="row">
                <!-- Personal Information Card -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-user-circle"></i> Personal Information
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        @include('admin.partial.validation-error')
                        <div class="card-body">
                            <div class="row">
                                <!-- Name -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="name">Full Name <span class="text-danger">*</span></label>
                                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                               id="name" value="{{ old('name') }}" required placeholder="Enter full name">
                                        @error('name')
                                            <span class="invalid-feedback">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Employee ID -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="employee_id">Employee ID</label>
                                        <input type="text" name="employee_id" class="form-control"
                                               id="employee_id" value="{{ old('employee_id') }}" placeholder="e.g., EMP-001">
                                    </div>
                                </div>

                                <!-- Email -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="email">Email Address</label>
                                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                               id="email" value="{{ old('email') }}" placeholder="example@company.com">
                                        @error('email')
                                            <span class="invalid-feedback">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Phone -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="phone">Phone Number</label>
                                        <input type="text" name="phone" class="form-control"
                                               id="phone" value="{{ old('phone') }}" placeholder="+880 1XXX-XXXXXX">
                                    </div>
                                </div>

                                <!-- Profile Image -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="image">Profile Image</label>
                                        <div class="custom-file">
                                            <input type="file" name="image" class="custom-file-input" id="image" accept="image/*">
                                            <label class="custom-file-label" for="image">Choose file</label>
                                        </div>
                                    </div>
                                </div>

                                <!-- CV Upload -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="cv">CV/Resume</label>
                                        <div class="custom-file">
                                            <input type="file" name="cv" class="custom-file-input" id="cv" accept=".pdf,.doc,.docx">
                                            <label class="custom-file-label" for="cv">Choose file</label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Image Preview -->
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div class="text-center preview-container mt-3">
                                        <img id="imagePreview" src="" alt="" class="img-thumbnail"
                                             style="max-width: 200px; display: none;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Employment Details Card -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-briefcase"></i> Employment Details
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Designation -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="designation_id">Designation</label>
                                        <div class="input-group">
                                            <select name="designation_id" id="designation_id" class="form-control" style="width: 100%;">
                                                <option value="">Select Designation</option>
                                                @foreach($designations ?? [] as $designation)
                                                    <option value="{{ $designation->id }}">{{ $designation->name }}</option>
                                                @endforeach
                                            </select>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#designationModal">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Department -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="department_id">Department</label>
                                        <div class="input-group">
                                            <select name="department_id" id="department_id" class="form-control" style="width: 100%;">
                                                <option value="">Select Department</option>
                                                @foreach($departments as $department)
                                                    <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>
                                                        {{ $department->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#departmentModal">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Position -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="position">Position</label>
                                        <input type="number" name="position" class="form-control"
                                               id="position" value="{{ old('position') }}" placeholder="e.g., Team Lead">
                                    </div>
                                </div>

                                <!-- Status -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="status">Status</label>
                                        <select name="status" class="form-control" id="status">
                                            <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                            <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Joining Date -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="joining_date">Joining Date</label>
                                        <input type="date" name="joining_date" class="form-control"
                                               id="joining_date" value="{{ old('joining_date') }}">
                                    </div>
                                </div>

                                <!-- Expired Date -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="expire_date">Contract Expiry</label>
                                        <input type="date" name="expire_date" class="form-control"
                                               id="expire_date" value="{{ old('expire_date') }}">
                                    </div>
                                </div>

                                <!-- Basic Salary -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="basic_salary">Basic Salary</label>
                                        <input type="number" name="basic_salary" class="form-control"
                                               id="basic_salary" value="{{ old('basic_salary') }}" step="0.01" placeholder="0.00">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Address Information Card -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-map-marked-alt"></i> Address Information
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Address -->
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <label for="address">Full Address</label>
                                        <textarea name="address" class="form-control" id="address" rows="3"
                                                  placeholder="Enter complete address">{{ old('address') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Social Media Card -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-share-alt"></i> Social Media Links
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Facebook -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="facebook">Facebook</label>
                                        <input type="text" name="facebook" class="form-control"
                                               id="facebook" value="{{ old('facebook') }}"
                                               placeholder="https://facebook.com/username">
                                    </div>
                                </div>

                                <!-- Twitter -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="twitter">Twitter</label>
                                        <input type="text" name="twitter" class="form-control"
                                               id="twitter" value="{{ old('twitter') }}"
                                               placeholder="https://twitter.com/username">
                                    </div>
                                </div>

                                <!-- LinkedIn -->
                                <div class="col-sm-12 col-md-4 col-lg-4">
                                    <div class="form-group">
                                        <label for="linkedin">LinkedIn</label>
                                        <input type="text" name="linkedin" class="form-control"
                                               id="linkedin" value="{{ old('linkedin') }}"
                                               placeholder="https://linkedin.com/in/username">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Notes Card -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-sticky-note"></i> Additional Information
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <label for="note">Notes</label>
                                        <textarea name="note" class="form-control" id="note" rows="4"
                                                  placeholder="Any additional information...">{{ old('note') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Is Journalist Card -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-newspaper"></i> Journalist Information
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Is Journalist Switch -->
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" name="is_journalist" class="custom-control-input"
                                                   id="is_journalist" value="1" {{ old('is_journalist') ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="is_journalist">
                                                <strong>Is Journalist?</strong>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Location Section -->
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div id="locationCollapse" class="collapse">
                                        <div class="row">
                                            <!-- Division -->
                                            <div class="col-sm-12 col-md-4 col-lg-4">
                                                <div class="form-group">
                                                    <label>Division</label>
                                                    <select name="division_id" class="form-control" id="divisionId">
                                                        <option value="">Select Division</option>
                                                        @foreach (divisions() as $division)
                                                            <option value="{{ $division->id }}">{{ $division->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- City -->
                                            <div class="col-sm-12 col-md-4 col-lg-4">
                                                <div class="form-group">
                                                    <label>City</label>
                                                    <select name="city_id" class="form-control" id="cityId">
                                                        <option value="">Select City</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- Upazila -->
                                            <div class="col-sm-12 col-md-4 col-lg-4">
                                                <div class="form-group">
                                                    <label>Upazila</label>
                                                    <select name="upazila_id[]" id="upazilaId" multiple class="form-control"></select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Add User Card -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">
                                <i class="fas fa-user-cog"></i> User Account
                            </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Add User Switch -->
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div class="form-group">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" name="add_user" class="custom-control-input"
                                                   id="add_user" value="1" {{ old('add_user') ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="add_user">
                                                <strong>Add User Account?</strong>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <!-- User Details Section -->
                                <div class="col-sm-12 col-md-12 col-lg-12">
                                    <div id="userCollapse" class="collapse">
                                        <div class="row">
                                            <!-- Username -->
                                            <div class="col-sm-12 col-md-4 col-lg-4">
                                                <div class="form-group">
                                                    <label for="username">Username <span class="text-danger">*</span></label>
                                                    <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                                                           id="username" value="{{ old('username') }}" placeholder="Enter username">
                                                    @error('username')
                                                        <span class="invalid-feedback">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <!-- Password -->
                                            <div class="col-sm-12 col-md-4 col-lg-4">
                                                <div class="form-group">
                                                    <label for="password">Password <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                                                               id="password" placeholder="Enter password">
                                                        <div class="input-group-append">
                                                            <button type="button" class="btn btn-outline-secondary" id="togglePassword">
                                                                <i class="fas fa-eye" id="togglePasswordIcon"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    @error('password')
                                                        <span class="text-danger small">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>

                                            <!-- Confirm Password -->
                                            <div class="col-sm-12 col-md-4 col-lg-4">
                                                <div class="form-group">
                                                    <label for="password_confirmation">Confirm Password <span class="text-danger">*</span></label>
                                                    <input type="password" name="password_confirmation" class="form-control"
                                                           id="password_confirmation" placeholder="Confirm password">
                                                </div>
                                            </div>

                                            <!-- Role -->
                                            <div class="col-sm-12 col-md-4 col-lg-4">
                                                <div class="form-group">
                                                    <label for="role_id">Role <span class="text-danger">*</span></label>
                                                    <select name="role_id" id="role_id" class="form-control @error('role_id') is-invalid @enderror">
                                                        <option value="">Select Role</option>
                                                        @foreach($roles ?? [] as $role)
                                                            <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                                                {{ $role->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('role_id')
                                                        <span class="invalid-feedback">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-5">
                                <i class="fas fa-save"></i> {{ @$button ?? 'Save Employee' }}
                            </button>
                            <a href="{{ route('employees.index') }}" class="btn btn-secondary btn-lg px-5">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                            <button type="reset" class="btn btn-warning btn-lg px-5">
                                <i class="fas fa-redo"></i> Reset
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</section>

<!-- Designation Modal -->
<div class="modal fade" id="designationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle"></i> Add New Designation
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="designationForm">
                    <div class="form-group">
                        <label for="designation_name">Designation Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="designation_name" placeholder="e.g., Senior Developer" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Close
                </button>
                <button type="button" class="btn btn-primary" id="saveDesignation">
                    <i class="fas fa-save"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Department Modal -->
<div class="modal fade" id="departmentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle"></i> Add New Department
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="departmentForm">
                    <div class="form-group">
                        <label for="department_name">Department Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="department_name" placeholder="e.g., IT Department" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Close
                </button>
                <button type="button" class="btn btn-primary" id="saveDepartment">
                    <i class="fas fa-save"></i> Save
                </button>
            </div>
        </div>
    </div>
</div>

@endsection
@section('js')
<script>
$(document).ready(function() {
    let isLoadingData = false; // Prevent infinite loop

    // Toggle Collapses
    $('#is_journalist').on('change', function() {
        $('#locationCollapse').collapse($(this).is(':checked') ? 'show' : 'hide');
    });
    $('#add_user').on('change', function() {
        $('#userCollapse').collapse($(this).is(':checked') ? 'show' : 'hide');
    });

    // Toggle Password
    $('#togglePassword').on('click', function() {
        var field = $('#password'), icon = $('#togglePasswordIcon');
        if (field.attr('type') === 'password') {
            field.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            field.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });

    // File Input
    $('.custom-file-input').on('change', function() {
        $(this).next('.custom-file-label').html($(this).val().split('\\').pop());
    });

    // Image Preview
    $('#image').on('change', function() {
        var file = this.files[0];
        if (file && file.type.match('image.*')) {
            var reader = new FileReader();
            reader.onload = e => $('#imagePreview').attr('src', e.target.result).show();
            reader.readAsDataURL(file);
        }
    });

    // Save Designation
    $('#saveDesignation').on('click', function() {
        var name = $('#designation_name').val();
        if (!name) { alert('Please enter designation name'); return; }
        $.ajax({
            url: '{{ route("designation.store") }}',
            method: 'POST',
            data: { name: name, _token: '{{ csrf_token() }}' },
            success: function(response) {
                var newOption = new Option(response.data.name, response.data.id, true, true);
                $('#designation_id').append(newOption).trigger('change');
                $('#designationModal').modal('hide');
                $('#designationForm')[0].reset();
                alert('Designation added successfully!');
            },
            error: function() { alert('Error adding designation'); }
        });
    });

    // Save Department
    $('#saveDepartment').on('click', function() {
        var name = $('#department_name').val();
        if (!name) { alert('Please enter department name'); return; }
        $.ajax({
            url: '{{ route("departments.store") }}',
            method: 'POST',
            data: { name: name, _token: '{{ csrf_token() }}' },
            success: function(response) {
                var newOption = new Option(response.data.name, response.data.id, true, true);
                $('#department_id').append(newOption).trigger('change');
                $('#departmentModal').modal('hide');
                $('#departmentForm')[0].reset();
                alert('Department added successfully!');
            },
            error: function() { alert('Error adding department'); }
        });
    });

    // Password Match Validation
    $('#password, #password_confirmation').on('keyup', function() {
        var pwd = $('#password').val(), conf = $('#password_confirmation').val();
        if (conf !== '') {
            $('#password_confirmation').toggleClass('is-valid', pwd === conf).toggleClass('is-invalid', pwd !== conf);
        }
    });

    // Username Validation
    $('#username').on('keypress', function(e) {
        if (!/^[a-zA-Z0-9_]*$/.test(String.fromCharCode(!e.charCode ? e.which : e.charCode))) {
            e.preventDefault();
        }
    });

    // Form Validation
    $('#employeeForm').on('submit', function(e) {
        var isValid = true, errorMsg = '';
        if (!$('#name').val().trim()) {
            isValid = false;
            errorMsg += '• Employee Name is required\n';
            $('#name').addClass('is-invalid');
        }
        if ($('#add_user').is(':checked')) {
            if (!$('#username').val().trim()) {
                isValid = false;
                errorMsg += '• Username is required\n';
                $('#username').addClass('is-invalid');
            }
            var pwd = $('#password').val();
            if (!pwd || pwd.length < 8) {
                isValid = false;
                errorMsg += '• Password must be at least 8 characters\n';
                $('#password').addClass('is-invalid');
            }
            if (pwd !== $('#password_confirmation').val()) {
                isValid = false;
                errorMsg += '• Passwords do not match\n';
                $('#password_confirmation').addClass('is-invalid');
            }
            if (!$('#role_id').val()) {
                isValid = false;
                errorMsg += '• Role is required\n';
                $('#role_id').addClass('is-invalid');
            }
        }
        if ($('#is_journalist').is(':checked') && !$('#divisionId').val()) {
            isValid = false;
            errorMsg += '• Division is required for journalists\n';
            $('#divisionId').addClass('is-invalid');
        }
        if (!isValid) {
            e.preventDefault();
            alert('Please fix:\n\n' + errorMsg);
            return false;
        }
        $(this).find('button[type="submit"]').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
    });



});

let isLoadingData = false;

$(document).ready(function() {
    // Initialize TomSelect
    initUniversalSelect('#divisionId', { multiple: false, plugins: ['clear_button'] });
    initUniversalSelect('#cityId', { multiple: false, plugins: ['clear_button'] });
    initUniversalSelect('#upazilaId', { multiple: true, plugins: ['remove_button'] }); // multiple

    // Division Change
    $('#divisionId').on('change', function() {
        if (!isLoadingData) {
            loadCitiesAndUpazilas();
        }
    });

    // City Change
    $('#cityId').on('change', function() {
        if (!isLoadingData) {
            let cityId = $(this).val();
            if (cityId) loadUpazilas();
        }
    });
});

// Load Cities + Clear Upazilas
function loadCitiesAndUpazilas() {
    let divisionId = $('#divisionId').val();
    let cityTS = document.querySelector('#cityId').tomselect;
    let upazilaTS = document.querySelector('#upazilaId').tomselect;

    // Clear old data
    cityTS.clear();
    cityTS.clearOptions();
    upazilaTS.clear();
    upazilaTS.clearOptions();

    if (!divisionId) return;

    isLoadingData = true;

    $.ajax({
        url: '{{ route("area") }}',
        type: 'GET',
        data: { division_id: divisionId },
        success: function(res) {
            // Add Cities
            $('<select>' + res.city_option + '</select>').find('option').each(function() {
                let val = $(this).val();
                let text = $(this).text();
                if (val) cityTS.addOption({ id: val, name: text });
            });
            cityTS.refreshOptions(false);

            // Upazila already cleared
            upazilaTS.refreshOptions(false);

            isLoadingData = false;
        },
        error: function(xhr) {
            console.error('Error loading cities:', xhr);
            isLoadingData = false;
        }
    });
}

// Load Upazilas (multiple)
function loadUpazilas() {
    let divisionId = $('#divisionId').val();
    let cityId = $('#cityId').val();
    let upazilaTS = document.querySelector('#upazilaId').tomselect;

    upazilaTS.clear();
    upazilaTS.clearOptions();

    if (!cityId) return;

    isLoadingData = true;

    $.ajax({
        url: '{{ route("area") }}',
        type: 'GET',
        data: { division_id: divisionId, city_id: cityId },
        success: function(res) {
            $('<select>' + res.upazila_option + '</select>').find('option').each(function() {
                let val = $(this).val();
                let text = $(this).text();
                if (val) upazilaTS.addOption({ id: val, name: text });
            });
            upazilaTS.refreshOptions(false);

            isLoadingData = false;
        },
        error: function(xhr) {
            console.error('Error loading upazilas:', xhr);
            isLoadingData = false;
        }
    });
}


</script>
@endsection