{% extends 'Base.html' %}
{% load static %}

{% block head %}
    <style>
        /* اضافه کردن استایل برای گروه فیلدهای پسورد با آیکون چشم */
        .password-input-group {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #6c757d;
            z-index: 5;
        }

        .password-toggle:hover {
            color: #495057;
        }

        /* اضافه کردن استایل برای بخش جدید */
        #newPasswordFields {
            margin-top: 15px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }

        #resetpasswordStrength {
            height: 5px;
            border-radius: 3px;
            transition: all 0.3s ease;
            margin-top: 5px;
        }

        #resetpasswordStrength.weak {
            background-color: #dc3545;
        }

        #resetpasswordStrength.medium {
            background-color: #ffc107;
        }

        #resetpasswordStrength.strong {
            background-color: #28a745;
        }

        .person-selection {
            display: none;
            margin-top: 15px;
        }

        .person-list {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
        }

        .person-item {
            padding: 8px;
            cursor: pointer;
            border-radius: 3px;
            margin-bottom: 5px;
        }

        .person-item:hover {
            background-color: #f8f9fa;
        }

        .person-item.selected {
            background-color: #007bff;
            color: white;
        }

        .password-display {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-top: 15px;
            font-family: 'Courier New', monospace;
        }

        .create-new-btn {
            margin-top: 10px;
        }

        .is-invalid {
            border-color: #dc3545;
        }

        .invalid-feedback {
            color: #dc3545;
            font-size: 0.875em;
            margin-top: 0.25rem;
        }

        .nav-tabs .nav-link {
            color: #495057;
        }

        .nav-tabs .nav-link.active {
            color: #007bff;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

        .btn-delete {
            background-color: #dc3545;
            border-color: #dc3545;
            color: white;
        }

        .btn-delete:hover {
            background-color: #c82333;
            border-color: #bd2130;
            color: white;
        }

        .btn-edit {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }

        .btn-edit:hover {
            background-color: #0056b3;
            border-color: #004085;
            color: white;
        }

        .password-section {
            border-top: 1px solid #dee2e6;
            padding-top: 20px;
            margin-top: 20px;
        }

        .verification-code-section {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-top: 15px;
        }

        .password-strength {
            margin-top: 5px;
            height: 5px;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        .password-strength.weak {
            background-color: #dc3545;
        }

        .password-strength.medium {
            background-color: #ffc107;
        }

        .password-strength.strong {
            background-color: #28a745;
        }

        .password-requirements {
            font-size: 0.875em;
            margin-top: 10px;
            list-style: none;
            padding: 0;
        }

        .password-requirements li {
            margin-bottom: 2px;
            padding-left: 20px;
            position: relative;
        }

        .password-requirements li:before {
            content: "✗";
            position: absolute;
            left: 0;
            color: #dc3545;
            font-weight: bold;
        }

        .password-requirements li.valid:before {
            content: "✓";
            color: #28a745;
        }

        .password-requirements li.valid {
            color: #28a745;
        }

        .password-requirements li.invalid {
            color: #dc3545;
        }

        .alert {
            margin-bottom: 1rem;
        }

        .modal-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .verification-code-input {
            text-align: center;
            font-size: 1.25rem;
            font-weight: bold;
            letter-spacing: 0.25rem;
        }
    </style>
{% endblock %}

{% block title %}
    Shiraz Center - Security Settings
{% endblock %}

{% block body %}
    <div class="container-fluid">
        <h2>Security Settings</h2>
        <hr>

        <!-- Alert Container for Dynamic Messages -->
        <div class="alertContainer"></div>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                    {{ message|linebreaksbr }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}

        <!-- Tab Navigation -->
        <ul class="nav nav-tabs" id="securityTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="users-tab" data-bs-toggle="tab" data-bs-target="#users-pane"
                        type="button" role="tab" aria-controls="users-pane" aria-selected="true">
                    <i class="fas fa-users"></i> Users Management
                </button>
            </li>
            {% if is_admin %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register-pane"
                            type="button" role="tab" aria-controls="register-pane" aria-selected="false">
                        <i class="fas fa-user-plus"></i> Register Employee
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="templates-tab" data-bs-toggle="tab" data-bs-target="#templates-pane"
                            type="button" role="tab" aria-controls="templates-pane" aria-selected="false">
                        <i class="fas fa-comment-dots"></i> Message Templates
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="templates-custom-tab" data-bs-toggle="tab"
                            data-bs-target="#templates-custom-pane"
                            type="button" role="tab" aria-controls="templates-custom-pane" aria-selected="false">
                        <i class="fas fa-comment-dots"></i> Message Custom
                    </button>
                </li>
            {% endif %}
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="securityTabsContent">
            <!-- Users Management Tab -->
            <div class="tab-pane fade show active" id="users-pane" role="tabpanel" aria-labelledby="users-tab">
                <div class="mt-4">
                    {% if page_obj %}
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">First Name</th>
                                <th scope="col">Last Name</th>
                                <th scope="col">Username</th>
                                <th scope="col">Phone</th>
                                <th scope="col">Access Level</th>
                                <th scope="col">Options</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for sec in page_obj %}
                                <tr>
                                    <td>{{ sec.id }}</td>
                                    <td>{{ sec.first_name }}</td>
                                    <td>{{ sec.last_name }}</td>
                                    <td>{{ sec.username }}</td>
                                    <td>{{ sec.country_code }}{{ sec.phone_number }}</td>
                                    <td>{{ sec.access_level }}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-edit btn-sm me-1"
                                                onclick="editUser({{ sec.id }}, '{{ sec.first_name }}', '{{ sec.last_name }}', '{{ sec.username }}', '{{ sec.phone_number|default:'' }}','{{ sec.country_code|default:'' }}', '{{ sec.access_level }}')">
                                            Edit
                                        </button>
                                        <button type="button" class="btn btn-delete btn-sm " id="delete-user"
                                                onclick="deleteUser(this,{{ sec.id }}, '{{ sec.first_name }} {{ sec.last_name }}')">
                                            Delete
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="?page={{ page_obj.previous_page_number }}&searchQuery={{ search_query }}&filterType={{ filter_type }}"
                                           aria-label="Previous">«</a>
                                    </li>
                                {% endif %}
                                {% for page_num in page_obj.paginator.page_range %}
                                    <li class="page-item {% if page_obj.number == page_num %}active{% endif %}">
                                        <a class="page-link"
                                           href="?page={{ page_num }}&searchQuery={{ search_query }}&filterType={{ filter_type }}">{{ page_num }}</a>
                                    </li>
                                {% endfor %}
                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="?page={{ page_obj.next_page_number }}&searchQuery={{ search_query }}&filterType={{ filter_type }}"
                                           aria-label="Next">»</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% endif %}
                </div>
            </div>

            <!-- Register Employee Tab -->
            {% if is_admin %}
                <div class="tab-pane fade" id="register-pane" role="tabpanel" aria-labelledby="register-tab">
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <h4>Register new employee</h4>

                            {% if employee_form.errors %}
                                <div class="alert alert-danger" id="django-messages">
                                    <strong>Errors:</strong>
                                    <ul>
                                        {% for field in employee_form %}
                                            {% for error in field.errors %}
                                                <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                                            {% endfor %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endif %}

                            <form method="post" enctype="multipart/form-data" id="employeeForm">
                                {% csrf_token %}

                                <div class="row mb-4" id="formFields">
                                    <div class="col-md-3 mt-2 labeld">
                                        <label for="{{ employee_form.access_level.id_for_label }}">{{ employee_form.access_level.label }}</label>
                                        {{ employee_form.access_level }}
                                    </div>

                                    <!-- Person Selection Section -->
                                    <div id="personSelection" class="col-md-3 person-selection">
                                        <h6>Select person</h6>
                                        <div class="mb-3">
                                            <label>Persons with any account:</label>
                                            <div id="personList" class="person-list">
                                                <div class="text-muted">Loading...</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Form Fields -->
                                    <div class="col-md-3 mt-2">
                                        <label for="{{ employee_form.first_name.id_for_label }}">{{ employee_form.first_name.label }}</label>
                                        {{ employee_form.first_name }}
                                    </div>
                                    <div class="col-md-3 mt-2">
                                        <label for="{{ employee_form.last_name.id_for_label }}">{{ employee_form.last_name.label }}</label>
                                        {{ employee_form.last_name }}
                                    </div>
                                    <div class="col-md-3 mt-2">
                                        <label for="{{ employee_form.email.id_for_label }}">{{ employee_form.email.label }}</label>
                                        {{ employee_form.email }}
                                    </div>
                                    <div class="col-md-4 mt-2">
                                        <label for="phone_number" class="form-label">Phone Number</label>
                                        <div class="input-group">
                            <span class="input-group-text p-0">
                                <div class="country-dropdown">
                                    <button type="button" class="selected-country" id="selectedCountryAdd">
                                        <span class="country-flag" id="country_flag"></span>
                                        <span class="country-code" id="country_code"></span>
                                        <span class="dropdown-arrow">▼</span>
                                    </button>
                                    <div class="country-search-container" id="countryDropdownAdd">
                                        <input type="text" class="country-search" id="country_search"
                                               placeholder="Search countries...">
                                        <div id="countryListAdd"></div>
                                    </div>
                                </div>
                            </span>
                                            <input type="tel" class="form-control rounded-end" id="id_phone_number"
                                                   name="phone_number"
                                                   placeholder="Phone without 0" required>
                                        </div>
                                        {{ employee_form.country_code }}
                                    </div>
                                </div>

                                {{ employee_form.selected_person }}

                                <button type="submit" class="btn btn-success w-100">Create Employee</button>
                            </form>
                        </div>
                    </div>
                </div>
            {% endif %}

            <!-- Message Templates -->
            <div class="tab-pane fade" id="templates-pane" role="tabpanel" aria-labelledby="templates-tab">
                <div class="row mt-4">
                    <div class="col-md-6">
                        <label for="messageTypeSelect" class="form-label"><strong>Select Message Type</strong></label>
                        <select id="messageTypeSelect" class="form-select">
                            <option value="" disabled selected>Choose a message type...</option>
                            <option value="reservation_created">Reservation Created</option>
                            <option value="reservation_assigned_doctor">Assigned to Doctor</option>
                            <option value="reservation_assigned_technician">Assigned to Technician</option>
                            <option value="reservation_rejected_doctor">Rejected by Doctor</option>
                            <option value="reservation_rejected_technician">Rejected by technician</option>
                            <option value="reservation_completed_service">Reservation completed service</option>
                            <option value="reservation_canceled_service">Reservation canceled service</option>
                            <option value="patient_add_user">Add Patient</option>
                            <option value="doctor_add_user">Add Doctor</option>
                            <option value="technician_add_user">Add Technician</option>
                            <option value="patient_wallet">Withdrawal Patient Wallet</option>
                            <option value="patient_add_wallet">Add Patient Wallet</option>
                            <option value="doctor_wallet">Withdrawal Doctor Wallet</option>
                            <option value="technician_wallet">Withdrawal Technician Wallet</option>
                            <option value="doctor_add_wallet">Add Doctor Wallet</option>
                            <option value="technician_add_wallet">Add Technician Wallet</option>
                            <option value="patient_no_complete_service_before_2_day">Send reminder message before 2 day
                                for patient service
                            </option>
                            <option value="daily_report">Send daily report</option>
                            <option value="monthly_report">Send monthly report</option>
                            <option value="patient_without_service">Send message to all patient without special service
                                or all
                            </option>
                            <option value="patient_with_service">Send message to all patient with special service or
                                all
                            </option>
                            <option value="patient_complete_service_after_6_month">Send message to all patient with
                                complete service or all after 6 month.
                            </option>
                            <option value="patient_birth_date">Send message to all patient Birth date.</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label"><strong>Available Variables</strong></label>
                        <div id="availableVars" class="border rounded p-2 bg-light text-muted small"
                             style="min-height: 60px;">
                            Please select a message type
                        </div>
                    </div>
                    <div id="SectionServiceList" class="col-md-4 d-none">
                        <label class="form-label">Select Service</label>
                        <div id="noServiceList" class="text-center py-4 d-none">
                            <div class="alert alert-warning alert-custom">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                No Service
                            </div>
                        </div>
                        <div id="YServiceList">
                            <select class="form-select" id="ServiceSelect" required>
                            </select>
                        </div>
                    </div>
                </div>
                ex: <small id="sampleTemplate" class="text-danger" style="font-size: 10px;"></small>
                <div class="mt-3">
                    <label for="messageContent" class="form-label"><strong>Message Content</strong></label>
                    <textarea id="messageContent" class="form-control" rows="10"
                              placeholder="Enter message..."></textarea>
                </div>

                <div class="mt-3 text-end">
                    <button class="btn btn-primary" onclick="saveTemplate()">Save Template</button>
                </div>
            </div>
            <!-- Message Custom Templates -->
            <div class="tab-pane fade" id="templates-custom-pane" role="tabpanel"
                 aria-labelledby="templates-custom-tab">
                <div class="row mt-4">
                    <div class="col-md-6">
                        <label for="messageCustomTypeSelect" class="form-label"><strong>Select Message
                            Type</strong></label>
                        <select id="messageCustomTypeSelect" class="form-select">
                            <option value="" disabled selected>Choose a message type...</option>
                            <option value="patient_without_service">Send message to all patient without service
                                or all
                            </option>
                            <option value="patient_with_service">Send message to all patient with service or
                                all
                            </option>
                        </select>
                    </div>
                    <div id="SectionCustomServiceList" class="col-md-4">
                        <label class="form-label">Select Service</label>
                        <div id="noCustomServiceList" class="text-center py-4 d-none">
                            <div class="alert alert-warning alert-custom">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                No Service
                            </div>
                        </div>
                        <div id="YCustomServiceList">
                            <select class="form-select" id="CustomServiceSelect" required>
                            </select>
                        </div>
                    </div>
                    <div id="SectionCustomPatientist" class="col-md-4">
                        <label class="form-label">Select Patient</label>
                        <div id="noPatientList" class="text-center py-4 d-none">
                            <div class="alert alert-warning alert-custom">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                No Patient
                            </div>
                        </div>
                        <div id="YPatientList">
                            <select class="form-select" id="PatientSelect" multiple>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <label for="messageCustomContent" class="form-label"><strong>Message Content</strong></label>
                    <textarea id="messageCustomContent" class="form-control" rows="10"
                              placeholder="Enter message..." required></textarea>
                </div>

                <div class="mt-3 text-end">
                    <button class="btn btn-primary send-message-btn" onclick="sendCustomMessage()">Send message</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alertContainer"></div>
                    <div id="verificationSectionDelete" class="verification-code-section" style="display: none;">
                        <div class="alert alert-info mb-3">
                            <i class="fas fa-info-circle"></i>
                            A verification code has been sent to the admin. Please enter the code to
                            proceed.
                        </div>
                        <div class="mb-3">
                            <label for="verificationCode" class="form-label">Verification Code</label>
                            <input type="text" class="form-control verification-code-delete"
                                   id="verificationCodeDelete" name="verification_code_delete"
                                   placeholder="Enter 6-digit code" maxlength="6">
                        </div>
                    </div>
                    <p>Are you sure you want to delete user <strong id="userNameToDelete"></strong>?</p>
                    <p class="text-danger">This action cannot be undone.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editUserModalLabel">
                        <i class="fas fa-user-edit"></i> Edit User
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alertContainer"></div>
                    <form id="editUserForm">
                        <input type="hidden" id="editUserId" name="user_id">

                        <!-- Basic Information -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="editFirstName" class="form-label">First Name</label>
                                <input type="text" class="form-control" id="editFirstName" name="first_name" required>
                            </div>
                            <div class="col-md-4">
                                <label for="editLastName" class="form-label">Last Name</label>
                                <input type="text" class="form-control" id="editLastName" name="last_name" required>
                            </div>
                            <!-- در بخش Edit User Modal، جایگزین کردن فیلد phone_number با کد کشور -->
                            <div class="col-md-4">
                                <label for="editPhoneNumber" class="form-label">Phone</label>
                                <div class="input-group">
        <span class="input-group-text p-0">
            <div class="country-dropdown">
                <button type="button" class="selected-country" id="selectedCountryEdit">
                    <span class="country-flag" id="country_flag_edit"></span>
                    <span class="country-code" id="country_code_edit"></span>
                    <span class="dropdown-arrow">▼</span>
                </button>
                <div class="country-search-container" id="countryDropdownEdit">
                    <input type="text" class="country-search" id="country_search_edit"
                           placeholder="Search countries...">
                    <div id="countryListEdit"></div>
                </div>
            </div>
        </span>
                                    <input type="tel" class="form-control rounded-end" id="editPhoneNumber"
                                           name="phone_number" placeholder="Phone without 0">
                                </div>
                                <input type="hidden" id="editCountryCode" name="country_code">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="editUsername" class="form-label">Username</label>
                                <input type="text" class="form-control" id="editUsername" name="username" required>
                            </div>
                            <div class="col-md-6">
                                <label for="editAccessLevel" class="form-label">Access Level</label>
                                <select class="form-select" id="editAccessLevel" name="access_level" required>
                                    <option value="Administrator">Administrator</option>
                                    <option value="Doctor">Doctor</option>
                                    <option value="Technician">Technician</option>
                                    <option value="Supervisor">Supervisor</option>
                                    <option value="Accountant">Accountant</option>
                                </select>
                            </div>
                        </div>

                        <!-- Password Section -->
                        <!-- Password Section -->
                        <!-- Password Section -->
                        <div class="password-section">
                            <h6><i class="fas fa-lock"></i> Password Management</h6>

                            <!-- Option 1: Change Password (Admin knows current password) -->
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="passwordOption"
                                       id="changePasswordOption" value="change">
                                <label class="form-check-label" for="changePasswordOption">
                                    Change Password (I know current password)
                                </label>
                            </div>

                            <div id="changePasswordSection" style="display: none;">
                                <div class="mb-3">
                                    <label for="currentPassword" class="form-label">Current Password</label>
                                    <div class="password-input-group">
                                        <input type="password" class="form-control" id="currentPassword"
                                               name="current_password">
                                        <i class="fas fa-eye password-toggle"
                                           onclick="togglePassword('currentPassword')"></i>
                                    </div>
                                </div>

                                <div class="mb-3 ">

                                    <label for="newPassword" class="form-label">New Password</label>
                                    <div class="password-input-group">
                                        <input type="password" class="form-control" id="newPassword"
                                               name="new_password">
                                        <i class="fas fa-eye password-toggle"
                                           onclick="togglePassword('newPassword')"></i>
                                    </div>
                                    <div class="password-strength" id="passwordStrength"></div>
                                    <ul class="password-requirements mt-2">
                                        <li id="LengthReq" class="invalid">At least 8 characters</li>
                                        <li id="UpperReq" class="invalid">At least one uppercase letter</li>
                                        <li id="LowerReq" class="invalid">At least one lowercase letter</li>
                                        <li id="NumberReq" class="invalid">At least one number</li>
                                        <li id="SpecialReq" class="invalid">At least one special character</li>
                                    </ul>
                                </div>

                                <div class="mb-3 password-input-group">
                                    <label for="confirmPassword" class="form-label">Confirm New Password</label>
                                    <div class="password-input-group">
                                        <input type="password" class="form-control" id="confirmPassword"
                                               name="confirm_password">
                                        <i class="fas fa-eye password-toggle"
                                           onclick="togglePassword('confirmPassword')"></i>
                                    </div>
                                    <div id="passwordMatch" class="form-text"></div>
                                </div>
                            </div>

                            <!-- Option 2: Reset Password (Admin forgot password) -->
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="passwordOption"
                                       id="resetPasswordOption" value="reset">
                                <label class="form-check-label" for="resetPasswordOption">
                                    Reset Password (I forgot current password)
                                </label>
                            </div>

                            <div id="resetPasswordSection" class="verification-code-section" style="display: none;">
                                <div class="alert alert-info mb-3">
                                    <i class="fas fa-info-circle"></i>
                                    A verification code will be sent to admin's email/phone.
                                </div>
                                <button type="button" class="btn btn-warning mb-3" id="requestVerificationBtn">
                                    <i class="fas fa-key"></i> Request Verification Code
                                </button>
                                <div class="mb-3">
                                    <label for="verificationCode" class="form-label">Verification Code</label>
                                    <input type="text" class="form-control verification-code-input"
                                           id="verificationCode"
                                           name="verification_code" placeholder="Enter 6-digit code" maxlength="6">
                                </div>

                                <!-- اضافه کردن این بخش جدید -->
                                <div id="newPasswordFields" style="display: none;">
                                    <div class="mb-3 password-input-group">
                                        <label for="resetNewPassword" class="form-label">New Password</label>
                                        <div class="password-input-group">
                                            <input type="password" class="form-control" id="resetNewPassword"
                                                   name="reset_new_password">
                                            <i class="fas fa-eye password-toggle"
                                               onclick="togglePassword('resetNewPassword')"></i>
                                        </div>
                                        <div class="password-strength" id="resetpasswordStrength"></div>
                                        <ul class="password-requirements mt-2">
                                            <li id="resetLengthReq" class="invalid">At least 8 characters</li>
                                            <li id="resetUpperReq" class="invalid">At least one uppercase letter</li>
                                            <li id="resetLowerReq" class="invalid">At least one lowercase letter</li>
                                            <li id="resetNumberReq" class="invalid">At least one number</li>
                                            <li id="resetSpecialReq" class="invalid">At least one special character</li>
                                        </ul>
                                    </div>
                                    <div class="mb-3 password-input-group">
                                        <label for="resetConfirmPassword" class="form-label">Confirm New
                                            Password</label>
                                        <div class="password-input-group">
                                            <input type="password" class="form-control" id="resetConfirmPassword"
                                                   name="reset_confirm_password">
                                            <i class="fas fa-eye password-toggle"
                                               onclick="togglePassword('resetConfirmPassword')"></i>
                                        </div>
                                        <div id="resetPasswordMatch" class="form-text"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" id="requestVerificationBtn" style="display: none;"
                            onclick="requestVerificationCode()">
                        <i class="fas fa-key"></i> Request Verification Code
                    </button>
                    <button type="button" class="btn btn-primary" id="saveUserBtn" onclick="saveUser()">
                        <i class="fas fa-save"></i> Save Changes
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const messageVariables = {
            reservation_created: ['full_name', 'reservation_date', 'deposit', 'service_name'],
            reservation_assigned_doctor: ['doctor_name', 'patient_name', 'reservation_date', 'service_name'],
            reservation_assigned_technician: ['technician_name', 'patient_name', 'reservation_date', 'service_name'],
            reservation_rejected_doctor: ['doctor_name', 'patient_name', 'reservation_date', 'service_name'],
            reservation_rejected_technician: ['technician_name', 'patient_name', 'reservation_date', 'service_name'],
            reservation_completed_service: ['warehouse_detail', 'technician_detail', 'doctor_detail', 'leader_name', 'patient_name', 'patient_wallet', 'discount', 'patient_payment', 'patient_payment_from_wallet', 'patient_payment_deposit', 'reservation_date', 'service_name', 'expenses', 'income', 'profit'],
            reservation_canceled_service: ['patient_name', 'reservation_date', 'service_name'],
            patient_add_user: ['patient_name'],
            doctor_add_user: ['doctor_name'],
            technician_add_user: ['technician_name'],
            patient_wallet: ['patient_name', 'patient_wallet', 'price'],
            patient_add_wallet: ['patient_name', 'patient_wallet', 'price'],
            doctor_wallet: ['doctor_name', 'doctor_wallet', 'price'],
            technician_wallet: ['technician_name', 'technician_wallet', 'price'],
            doctor_add_wallet: ['doctor_name', 'doctor_wallet', 'price'],
            technician_add_wallet: ['technician_name', 'technician_wallet', 'price'],
            patient_no_complete_service_before_2_day: ['admin_phone', 'patient_name', 'reservation_date', 'doctor_name', 'technician_name', 'service_name'],
            daily_report: ['total_reservations', 'service_completed_count', 'service_cancelled_count', 'service_doctor_reject_count', 'service_doctor_confirmed_count', 'service_send_to_doctor_count', 'service_technician_reject_count', 'service_technician_confirmed_count', 'service_confirmed_count', 'expenses_details', 'fee_details', 'expenses', 'fees', 'income', 'profit'],
            monthly_report: ['total_reservations', 'service_completed_count', 'service_cancelled_count', 'service_doctor_reject_count', 'service_doctor_confirmed_count', 'service_send_to_doctor_count', 'service_technician_reject_count', 'service_technician_confirmed_count', 'service_confirmed_count', 'expenses_details', 'fee_details', 'expenses', 'fees', 'income', 'profit'],
            patient_without_service: ['patient_name', 'service_name'],
            patient_with_service: ['patient_name', 'service_name'],
            patient_complete_service_after_6_month: ['patient_name', 'service_name', 'reservation_date'],
            patient_birth_date: ['patient_name'],
        };

        // Default templates
        const defaultTemplates = {
            reservation_created: "Hello {\{ full_name }},\nYour reservation for {\{ service_name }} is confirmed on {\{ reservation_date }} with {\{deposit}}$ deposit.",
            reservation_assigned_doctor: "{\{ doctor_name }},\nYou have a new reservation with {\{ patient_name }} for {\{ service_name }} on {\{ reservation_date }}.",
            reservation_assigned_technician: "{\{ technician_name }},\nYou have a new reservation with {\{ patient_name }} for {\{ service_name }} on {\{ reservation_date }}.",
            reservation_rejected_doctor: "{\{ doctor_name }} rejected reservation with {\{ patient_name }} for {\{ service_name }} on {\{ reservation_date }}.",
            reservation_rejected_technician: "{\{ technician_name }} rejected reservation with {\{ patient_name }} for {\{ service_name }} on {\{ reservation_date }}.",
            reservation_completed_service: `Dear Manager, Service {\{ service_name }} was completed for Patient {\{ patient_name }} on {\{ reservation_date }}. Description of this service:
                                            Leader name is {\{ leader_name }},
                                            Discount on Service {\{ discount }},
                                            Deposit from Patient {\{ patient_payment_deposit }},
                                            Payment from Patient {\{ patient_payment }},
                                            Withdrawal from Patient {\{ patient_payment_from_wallet }}'s wallet,
                                            Wallet Patient now is {\{ patient_wallet }},
                                            {\{ warehouse_detail }},
                                            {\{ doctor_detail }},
                                            {\{ technician_detail }},
                                            Expenses {\{ expenses }},
                                            Income {\{ income }},
                                            Net profit {\{ profit }}.`,
            reservation_canceled_service: "Reservation with {\{ patient_name }} for {\{ service_name }} on {\{ reservation_date }} was canceled!",
            patient_add_user: "Dear {\{ patient_name }} welcome to Shiraz center.",
            doctor_add_user: "Dear {\{ doctor_name }} welcome to Shiraz center.",
            technician_add_user: "Dear {\{ technician_name }} welcome to Shiraz center.",
            patient_wallet: "{\{ patient_name }} took ${\{ price }} out of his wallet. Now there is another ${\{ patient_wallet }} in the wallet.",
            patient_add_wallet: "Add ${\{ price }} to  {\{ patient_name }}'s wallet. Now there is ${\{ patient_wallet }} in the wallet.",
            doctor_wallet: "{\{ doctor_name }} took ${\{ price }} out of his wallet. Now there is another ${\{ doctor_wallet }} in the wallet.",
            technician_wallet: "{\{ technician_name }} took ${\{ price }} out of his wallet. Now there is another ${\{ technician_wallet }} in the wallet.",
            doctor_add_wallet: "Add ${\{ price }} to  {\{ doctor_name }}'s wallet. Now there is ${\{ doctor_wallet }} in the wallet.",
            technician_add_wallet: "Add ${\{ price }} to  {\{ technician_name }}'s wallet. Now there is ${\{ technician_wallet }} in the wallet.",
            patient_no_complete_service_before_2_day: `Hello dear {\{ patient_name }}\n
Reminder for your appointment:\n
Date&Time: {\{ reservation_date }}\n
Doctor: {\{ doctor_name }}\n
Technician: {\{ technician_name }}\n
Service: {\{ service_name }}\n
Please arrive 15 minutes early.\n
If you need to change or cancel your appointment, please let us know in advance.\n
Contact: {\{admin_phone}}`,

            daily_report: `
 Total Appointments: {\{ total_reservations }}\n
 Completed: {\{ service_completed_count }}\n
 Technician confirmed: {\{ service_technician_confirmed_count' }}\n
 Doctor confirmed: {\{ service_doctor_confirmed_count }}\n
 Send to Doctor: {\{ service_send_to_doctor_count }}\n
 Technician reject: {\{ service_technician_reject_count }}\n
 Doctor reject: {\{ service_doctor_reject_count }}\n
 Cancelled: {\{ service_cancelled_count }}\n
 Confirmed: {\{ service_confirmed_count }}\n
 Total Expenses: {\{ expenses }}\n
 Total Fees: {\{ fees }}\n
 Expenses Details: {\{ expenses_details }}\n
 Fee Details: {\{ fee_details }}\n
 Total Income: {\{ income }}\n
 Profit {\{ profit }}\n
Automatic System Report`,

            monthly_report: `
 Total Appointments: {\{ total_reservations }}\n
 Completed: {\{ service_completed_count }}\n
 Technician confirmed: {\{ service_technician_confirmed_count' }}\n
 Doctor confirmed: {\{ service_doctor_confirmed_count }}\n
 Send to Doctor: {\{ service_send_to_doctor_count }}\n
 Technician reject: {\{ service_technician_reject_count }}\n
 Doctor reject: {\{ service_doctor_reject_count }}\n
 Cancelled: {\{ service_cancelled_count }}\n
 Confirmed: {\{ service_confirmed_count }}\n
 Total Expenses: {\{ expenses }}\n
 Total Fees: {\{ fees }}\n
 Expenses Details: {\{ expenses_details }}\n
 Fee Details: {\{ fee_details }}\n
 Total Income: {\{ income }}\n
 Profit {\{ profit }}\n
Automatic System Report`,

            patient_without_service: "Hi Dear {\{ patient_name }} without {\{ service_name }} service",
            patient_with_service: "Hi Dear {\{ patient_name }} with {\{ service_name }} service",
            patient_complete_service_after_6_month: "Hi Dear {\{ patient_name }} with {\{ service_name }} service on {\{ reservation_date }}",
            patient_birth_date: "Happy birth date Dear {\{ patient_name }}.",
        };
        // Variables for edit mode
        let isEditMode = false;
        let currentTemplate = null;

        // User Edit Variables
        let currentEditingUserId = null;
        let verificationCodeRequested = false;

        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            const icon = input.nextElementSibling;

            if (input.type === "password") {
                input.type = "text";
                icon.classList.replace("fa-eye", "fa-eye-slash");
            } else {
                input.type = "password";
                icon.classList.replace("fa-eye-slash", "fa-eye");
            }
        }

        // Get CSRF Token
        function getCsrfToken() {
            return document.querySelector('[name=csrfmiddlewaretoken]').value;
        }

        // Show Alert Function
        function showError(message = "An error occur", errors = []) {
            const toast = document.createElement('div');
            toast.className = `alert alert-danger alert-dismissible fade show centered-toast`;
            toast.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        max-width: 400px;
        min-width: 300px;
        padding: 1rem 1.5rem;
        box-shadow: 0 0 25px rgba(0,0,0,0.2);
        text-align: center;
        background: white;
        font-size: 1rem;
    `;

            let content = `<strong>${message}</strong>`;
            if (errors.length > 0) {
                content += "<hr><ul style='text-align: right; padding-right: 1rem'>";
                errors.forEach(err => {
                    content += `<li>${err}</li>`;
                });
                content += "</ul>";
            }

            toast.innerHTML = `
        ${content}
        <button type="button" class="btn-close position-absolute top-0 end-0 m-2" data-bs-dismiss="alert" aria-label="Close"></button>
    `;

            document.body.appendChild(toast);

            setTimeout(() => {
                if (toast.parentNode) toast.remove();
            }, 6000);
        }

        function showSuccess(message) {
            const toast = document.createElement('div');
            toast.className = `alert alert-success alert-dismissible fade show centered-toast`;
            toast.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        max-width: 400px;
        min-width: 300px;
        padding: 1rem 1.5rem;
        box-shadow: 0 0 25px rgba(0,0,0,0.2);
        text-align: center;
        background: white;
        font-size: 1rem;
    `;

            let content = `<strong>${message}</strong>`;

            toast.innerHTML = `
        ${content}
        <button type="button" class="btn-close position-absolute top-0 end-0 m-2" data-bs-dismiss="alert" aria-label="Close"></button>
    `;

            document.body.appendChild(toast);

            setTimeout(() => {
                if (toast.parentNode) toast.remove();
            }, 1000);
        }
        function showSuccessEmployee(message) {
    const toast = document.createElement('div');
    toast.className = `alert alert-success alert-dismissible fade show centered-toast`;
    toast.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        max-width: 400px;
        min-width: 300px;
        padding: 1rem 1.5rem;
        box-shadow: 0 0 25px rgba(0,0,0,0.2);
        text-align: center;
        background: white;
        font-size: 1rem;
    `;

    let content = `<strong>${message}</strong>`;

    toast.innerHTML = `
        ${content}
        <button type="button" class="btn-close position-absolute top-0 end-0 m-2" data-bs-dismiss="alert" aria-label="Close"></button>
    `;

    document.body.appendChild(toast);

    // اضافه کردن event listener برای زمانی که toast بسته می‌شود
    toast.addEventListener('closed.bs.alert', function() {
        location.reload();
    });

    // یا می‌توانید مستقیماً به دکمه close event listener اضافه کنید
    const closeButton = toast.querySelector('.btn-close');
    closeButton.addEventListener('click', function() {
        setTimeout(() => {
            location.reload();
        }, 300); // تأخیر کوچک برای اطمینان از کامل شدن انیمیشن بسته شدن
    });
}

        // Edit User Functions
        function editUser(userId, firstName, lastName, username, phoneNumber, countryCode, accessLevel) {
            currentEditingUserId = userId;
            verificationCodeRequested = false;

            // Fill form with current data
            document.getElementById('editUserId').value = userId;
            document.getElementById('editFirstName').value = firstName;
            document.getElementById('editLastName').value = lastName;
            document.getElementById('editUsername').value = username;
            document.getElementById('editPhoneNumber').value = phoneNumber;
            document.getElementById('editCountryCode').value = countryCode;
            selectedCountryBtnEdit.querySelector('.country-flag').textContent = getFlagByCode(countryCode);
            selectedCountryBtnEdit.querySelector('span:nth-child(2)').textContent = `+${countryCode}`;
            document.getElementById('editAccessLevel').value = accessLevel;
            /*
                        // Reset password section
                        //document.getElementById('editPassword').checked = false;
                        document.getElementById('passwordChangeSection').style.display = 'none';
                        document.getElementById('verificationSection').style.display = 'none';
                        document.getElementById('verificationSectionDelete').style.display = 'none';
                        document.getElementById('requestVerificationBtn').style.display = 'none';

                        // Clear password fields
                        document.getElementById('currentPassword').value = '';
                        document.getElementById('newPassword').value = '';
                        document.getElementById('confirmPassword').value = '';
                        document.getElementById('verificationCode').value = '';

                        // Reset password strength indicator
                        document.getElementById('passwordStrength').className = 'password-strength';

                        // Reset password requirements
                        const requirements = ['lengthReq', 'upperReq', 'lowerReq', 'numberReq', 'specialReq'];
                        requirements.forEach(req => {
                            document.getElementById(req).className = 'invalid';
                        });

                        // Clear password match indicator
                        document.getElementById('passwordMatch').textContent = '';


             */
            // Show modal
            const editModal = new bootstrap.Modal(document.getElementById('editUserModal'));
            editModal.show();
        }

        function getFlagByCode(countryCode) {
            const country = allcountry.find(c => c.code === countryCode);
            return country ? country.flag : '🇺🇳'; // Default to UN flag if not found
        }

        function saveUser() {
            const formData = new FormData(document.getElementById('editUserForm'));
            formData.append('action', 'edit_user');
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            // Validate basic fields
            const firstName = document.getElementById('editFirstName').value.trim();
            const lastName = document.getElementById('editLastName').value.trim();
            const username = document.getElementById('editUsername').value.trim();

            if (!firstName || !lastName || !username) {
                showError('Please fill in all required fields');
                return;
            }

            // Handle password change
            const passwordOption = document.querySelector('input[name="passwordOption"]:checked');
            if (passwordOption) {
                if (passwordOption.value === 'change') {
                    const currentPassword = document.getElementById('currentPassword').value;
                    const newPassword = document.getElementById('newPassword').value;
                    const confirmPassword = document.getElementById('confirmPassword').value;

                    if (!currentPassword) {
                        showError('Please enter current password');
                        return;
                    }

                    if (!newPassword || !confirmPassword) {
                        showError('Please enter and confirm new password');
                        return;
                    }

                    if (newPassword !== confirmPassword) {
                        showError('Passwords do not match');
                        return;
                    }

                    if (!isPasswordStrong(newPassword)) {
                        showError('Password does not meet security requirements');
                        return;
                    }

                    formData.append('password_change', 'true');
                    formData.append('current_password', currentPassword);
                    formData.append('new_password', newPassword);
                } else if (passwordOption.value === 'reset') {
                    const verificationCode = document.getElementById('verificationCode').value;
                    if (!verificationCode) {
                        showError('Please enter verification code');
                        return;
                    }
                    formData.append('password_reset', 'true');
                    formData.append('verification_code', verificationCode);
                }
            }

            // Disable save button during request
            const saveBtn = document.getElementById('saveUserBtn');
            const originalText = saveBtn.innerHTML;
            saveBtn.disabled = true;
            saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showSuccess(data.message);
                        // Close modal and reload
                        const editModal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
                        editModal.hide();
                        setTimeout(() => location.reload(), 500);
                    } else {
                        showError(data.error || 'Failed to update user');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('Network error occurred while updating user');
                })
                .finally(() => {
                    saveBtn.disabled = false;
                    saveBtn.innerHTML = originalText;
                });
        }

        function requestVerificationCode() {
            const btn = document.getElementById('requestVerificationBtn');
            const originalText = btn.innerHTML;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';

            const formData = new FormData();
            formData.append('action', 'request_verification');
            formData.append('user_id', currentEditingUserId);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showSuccess(data.message);
                    } else {
                        showError(data.error || 'Failed to send verification code');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('Network error occurred');
                })
                .finally(() => {
                    btn.disabled = false;
                    btn.innerHTML = originalText;
                });
        }

        function requestVerificationCodeDelete(userId) {
            const personList = document.getElementById('personList');
            personList.innerHTML = '<div class="text-muted">Loading...</div>';
            console.log("in requestVerificationCodeDelete=", userId)
            const formData = new FormData();
            formData.append('action', 'request_verification');
            formData.append('user_id', userId);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    console.log("data=", data)
                    if (data.success) {
                        document.getElementById('verificationSectionDelete').style.display = 'block';
                        const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                        deleteModal.show();
                        showSuccess(data.message);

                        // Focus on verification code input
                        setTimeout(() => {
                            document.getElementById('verificationSectionDelete').focus();
                        }, 500);
                    } else {
                        showError(data.error || 'Failed to send verification code');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('Network error occurred while sending verification code');
                })
        }

        // Delete User Functions
        function deleteUser(deleteBtn, userId, userName) {
            document.getElementById('userNameToDelete').textContent = userName;

            // Set up the delete confirmation button
            document.getElementById('confirmDeleteBtn').onclick = function () {
                performDeleteUser(userId);
            };

            // Show modal

            console.log("start requestVerificationCodeDelete()")
            deleteBtn.disabled = true;
            deleteBtn.innerText = 'Sending code...';
            console.log(deleteBtn.innerHTML)

            requestVerificationCodeDelete(userId)

        }

        function performDeleteUser(userId) {
            const formData = new FormData();
            let verificationCodeDelete = document.getElementById("verificationCodeDelete").value;
            if (verificationCodeDelete) {
                verificationCodeDelete = parseInt(verificationCodeDelete);
            } else {
                verificationCodeDelete = '';
            }

            formData.append('action', 'delete_user');
            formData.append('user_id', userId);
            formData.append('verification', verificationCodeDelete);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            const deleteBtn = document.getElementById('confirmDeleteBtn');
            const originalText = deleteBtn.innerHTML;
            deleteBtn.disabled = true;
            deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showSuccess(data.message);

                        // Close modal
                        const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                        deleteModal.hide();

                        // Reload page after short delay
                        setTimeout(() => {
                            location.reload();
                        }, 500);
                    } else {
                        showSuccess(data.error || 'Failed to delete user');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('Network error occurred while deleting user');
                })
                .finally(() => {
                    deleteBtn.disabled = false;
                    deleteBtn.innerHTML = originalText;

                });
        }

        // Password Strength and Validation Functions
        function isPasswordStrong(password) {
            const minLength = 8;
            const hasUpper = /[A-Z]/.test(password);
            const hasLower = /[a-z]/.test(password);
            const hasNumber = /\d/.test(password);
            const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);

            return password.length >= minLength && hasUpper && hasLower && hasNumber && hasSpecial;
        }

        function updatePasswordStrength(password, prefix = '') {
            let passId = prefix + 'passwordStrength';
            console.log("in updatePasswordStrength=", passId)
            const strengthBar = document.getElementById(passId);
            console.log("strengthBar=", strengthBar)
            if (!strengthBar) return; // اگر عنصر وجود نداشت، از تابع خارج شو
            const lengthReq = document.getElementById(prefix + 'LengthReq');
            const upperReq = document.getElementById(prefix + 'UpperReq');
            const lowerReq = document.getElementById(prefix + 'LowerReq');
            const numberReq = document.getElementById(prefix + 'NumberReq');
            const specialReq = document.getElementById(prefix + 'SpecialReq');

            // Reset all requirements
            const requirements = [lengthReq, upperReq, lowerReq, numberReq, specialReq];
            requirements.forEach(req => {
                req.className = 'invalid';
            });

            if (!password) {
                strengthBar.className = 'password-strength';
                return;
            }

            let score = 0;

            // Check length
            if (password.length >= 8) {
                lengthReq.className = 'valid';
                score++;
            }

            // Check uppercase
            if (/[A-Z]/.test(password)) {
                upperReq.className = 'valid';
                score++;
            }

            // Check lowercase
            if (/[a-z]/.test(password)) {
                lowerReq.className = 'valid';
                score++;
            }

            // Check numbers
            if (/\d/.test(password)) {
                numberReq.className = 'valid';
                score++;
            }

            // Check special characters
            if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
                specialReq.className = 'valid';
                score++;
            }

            // Update strength bar
            if (score < 3) {
                strengthBar.className = 'password-strength weak';
            } else if (score < 5) {
                strengthBar.className = 'password-strength medium';
            } else {
                strengthBar.className = 'password-strength strong';
            }
        }

        function checkPasswordMatch(prefix = '') {
            const newPassword = document.getElementById(prefix + 'NewPassword').value;
            const confirmPassword = document.getElementById(prefix + 'ConfirmPassword').value;
            const matchIndicator = document.getElementById(prefix + 'PasswordMatch');
            if (!confirmPassword) {
                matchIndicator.textContent = '';
                return;
            }

            if (newPassword === confirmPassword) {
                matchIndicator.textContent = '✓ Passwords match';
                matchIndicator.style.color = '#28a745';
            } else {
                matchIndicator.textContent = '✗ Passwords do not match';
                matchIndicator.style.color = '#dc3545';
            }
        }


        // Message Templates Functions
        function handleServiceSelectChange() {

            console.log("in handleMessageTypeChange=", this)
            console.log("in handleMessageTypeChange=", this.value)
            const messageType = document.getElementById('messageTypeSelect').value;
            let service_id = parseInt(this.value)
            loadTemplate(messageType, service_id);
        }

        function handleMessageTypeChange() {
            console.log("in handleMessageTypeChange")
            const messageType = document.getElementById('messageTypeSelect').value;
            console.log("messageType=", messageType)
            const varsDiv = document.getElementById('availableVars');
            console.log("varsDiv=", varsDiv)
            const contentTextarea = document.getElementById('messageContent');
            console.log("contentTextarea=", contentTextarea)
            let SectionServiceList = document.getElementById("SectionServiceList")


            if (messageType === 'patient_without_service' || messageType === 'patient_with_service' || messageType === 'patient_complete_service_after_6_month') {
                SectionServiceList.classList.remove('d-none');

                const urlAllInfo = '/medical/all_services/';

                fetch(`${urlAllInfo}`)
                    .then(response => response.json())
                    .then(data => {
                        console.log("data=", data)
                        let services = data.results.services

                        const noServiceDiv = document.getElementById('noServiceList');
                        const yesServiceDiv = document.getElementById('YServiceList');
                        const selectServices = document.getElementById('ServiceSelect');
                        if (!services || services.length === 0) {
                            noServiceDiv.classList.remove('d-none');
                            yesServiceDiv.classList.add('d-none');
                        } else {
                            noServiceDiv.classList.add('d-none');
                            yesServiceDiv.classList.remove('d-none');

                            selectServices.innerHTML = '<option value="999" selected>All</option>';

                            services.forEach(service => {
                                const option = document.createElement('option');
                                option.value = service.id;
                                option.textContent = `${service.name} - ${service.unit_price.toLocaleString()} $`;
                                selectServices.appendChild(option);
                            });
                        }
                    })
                    .catch(error => {
                        console.log(error)
                        showError(String(error));
                    });
                console.log("********####********")

            } else {
                SectionServiceList.classList.add('d-none');
            }
            if (messageType && messageVariables[messageType]) {
                const variables = messageVariables[messageType];
                console.log("variables=", variables)
                varsDiv.innerHTML = variables.map(v => `<code>{{ '${v}' }}</code>`).join(', ');

                // Load existing template or default
                if (messageType === 'patient_without_service' || messageType === 'patient_with_service' || messageType === 'patient_complete_service_after_6_month') {
                    loadTemplate(messageType, 999);
                } else {
                    loadTemplate(messageType);
                }

            } else {
                varsDiv.innerHTML = 'Please select a message type';
                contentTextarea.value = '';
            }
        }

        function loadTemplate(messageType, service_id = '') {
            const contentTextarea = document.getElementById('messageContent');

            // Try to load from server first
            const formData = new FormData();
            formData.append('action', 'load_template');
            formData.append('message_type', messageType);
            formData.append('service_id', service_id);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.template) {
                        contentTextarea.value = data.template;
                    } else {
                        // Use default template
                        contentTextarea.value = '';
                    }
                    document.getElementById("sampleTemplate").textContent = defaultTemplates[messageType] || ''
                })
                .catch(error => {
                    console.error('Error loading template:', error);
                    // Fallback to default template
                    contentTextarea.value = defaultTemplates[messageType] || '';
                });
        }


        function saveTemplate() {
            const messageType = document.getElementById('messageTypeSelect').value;
            let service_id = ''
            if (messageType === 'patient_without_service' || messageType === 'patient_with_service' || messageType === 'patient_complete_service_after_6_month') {

                let ServiceSelect = document.getElementById("ServiceSelect")
                console.log("ServiceSelect=", ServiceSelect)
                if (ServiceSelect) {
                    service_id = ServiceSelect.value
                    console.log("service_id=", service_id)
                }
            }
            console.log("service_id=", service_id)
            const content = document.getElementById('messageContent').value.trim();

            if (!messageType) {
                showError('Please select a message type');
                return;
            }

            if (!content) {
                showError('Please enter message content');
                return;
            }

            const formData = new FormData();
            formData.append('action', 'save_template');
            formData.append('service_id', service_id);
            formData.append('message_type', messageType);
            formData.append('content', content);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showSuccess(data.message);
                    } else {
                        showError(data.error || 'Failed to save template');
                    }
                })
                .catch(error => {
                    console.error('Error saving template:', error);
                    showError('Network error occurred while saving template');
                });
        }

        function handleMessageCustomTypeChange() {
            console.log("in handleMessageCustomTypeChange")
            const messageCustomTypeSelect = document.getElementById('messageCustomTypeSelect');
            console.log("messageCustomTypeSelect=", messageCustomTypeSelect)
            const CustomServiceId = document.getElementById('CustomServiceSelect');
            let messageCustomTypeSelect_value = messageCustomTypeSelect.value
            let CustomServiceId_value = parseInt(CustomServiceId.value)
            console.log("messageCustomTypeSelect_value=",messageCustomTypeSelect_value)
            console.log("CustomServiceId_value=",CustomServiceId_value)
            const urlAllPatient = `/medical/patients_services/${CustomServiceId_value}/${messageCustomTypeSelect_value}/`;

            fetch(`${urlAllPatient}`)
                .then(response => response.json())
                .then(data => {
                    console.log("data doctors=", data)
                    let patients = data.results.patients
                    const noPatientDiv = document.getElementById('noPatientList');
                    const yesPatientDiv = document.getElementById('YPatientList');
                    const selectPatients = document.getElementById('PatientSelect');
                    console.log("selectPatients=", selectPatients)
                    if (!patients || patients.length === 0) {
                        noPatientDiv.classList.remove('d-none');
                        yesPatientDiv.classList.add('d-none');
                    } else {
                        noPatientDiv.classList.add('d-none');
                        yesPatientDiv.classList.remove('d-none');


                        selectPatients.innerHTML = '<option value="999999">All</option>';

                        // افزودن گزینه‌های پزشکان
                        patients.forEach(patient => {
                            const option = document.createElement('option');
                            option.value = patient.id;
                            option.textContent = patient.name;
                            selectPatients.appendChild(option);
                        });
                    }

                })
                .catch(error => {
                    console.log("eror=", error)
                    showError(String(error));
                });

        }
        function sendCustomMessage() {
            console.log("in sendCustomMessage")
            const messageType = document.getElementById('messageCustomTypeSelect').value;
            const content = document.getElementById('messageCustomContent').value.trim();
            const service_id = document.getElementById('CustomServiceSelect').value;
            let patient_ids = Array.from(document.getElementById("PatientSelect").selectedOptions).map(option => option.value);
            patient_ids+=','
            console.log("messageType=",messageType)
            console.log("content=",content)
            console.log("service_id=",service_id)
            console.log("Patient_ids=",patient_ids)
            if (!messageType) {
                showError('Please select a message type');
                return;
            }

            if (!content) {
                showError('Please enter message content');
                return;
            }

            const formData = new FormData();
            console.log("messageType=",messageType)
            console.log("content=",content)
            console.log("service_id=",service_id)
            console.log("Patient_ids=",patient_ids)
            formData.append('service_id', service_id);
            formData.append('messageType', messageType);
            formData.append('content', content);
            formData.append('Patient_ids', patient_ids);
            formData.append('csrfmiddlewaretoken', getCsrfToken());
            const sendMessageObj = document.querySelector(".send-message-btn");
                if (sendMessageObj) {
                    sendMessageObj.disabled = true;
                    sendMessageObj.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Sending Message...';
                }
            fetch('/accounts/send_whatsapp_message/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showSuccess(data.message);
                        location.reload();
                    } else {
                        showError(data.error || 'Failed to send message');
                        location.reload();
                    }
                })
                .catch(error => {
                    console.error('Error saving template:', error);
                    showError('Network error occurred while saving template');
                });
        }
        function handleCustomServiceIdChange() {
            const messageType = document.getElementById('messageCustomTypeSelect').value;
            console.log("messageType=", document.getElementById('messageCustomTypeSelect'))
            console.log("messageType=", messageType)
            const service_id = document.getElementById('CustomServiceSelect').value;
            console.log("messageType=", messageType)
            const urlAllPaatient = `/medical/patients_services/${service_id}/${messageType}/`;

            fetch(`${urlAllPaatient}`)
                .then(response => response.json())
                .then(data => {
                    console.log("data doctors=", data)
                    let patients = data.results.patients
                    const noPatientDiv = document.getElementById('noPatientList');
                    const yesPatientDiv = document.getElementById('YPatientList');
                    const selectPatients = document.getElementById('PatientSelect');
                    console.log("selectPatients=", selectPatients)
                    if (!patients || patients.length === 0) {
                        noPatientDiv.classList.remove('d-none');
                        yesPatientDiv.classList.add('d-none');
                    } else {
                        noPatientDiv.classList.add('d-none');
                        yesPatientDiv.classList.remove('d-none');


                        selectPatients.innerHTML = '<option value="999999">All</option>';

                        // افزودن گزینه‌های پزشکان
                        patients.forEach(patient => {
                            const option = document.createElement('option');
                            option.value = patient.id;
                            option.textContent = patient.name;
                            selectPatients.appendChild(option);
                        });
                    }

                })
                .catch(error => {
                    console.log("eror=", error)
                    showError(String(error));
                });

        }
        // Password Reset Functions
        function submitPasswordReset() {
            const username = document.getElementById('reset_username').value.trim();

            if (!username) {
                showError('Please enter a username');
                return;
            }

            const formData = new FormData();
            formData.append('action', 'reset_password');
            formData.append('username', username);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showError(`New password for ${username}: ${data.new_password}`);
                        document.getElementById('reset_username').value = '';
                    } else {
                        showError(data.error || 'Failed to reset password');
                    }
                })
                .catch(error => {
                    console.error('Error resetting password:', error);
                    showError('Network error occurred while resetting password');
                });
        }

        // Person Selection Functions
        function handleAccessLevelChange() {

            console.log("in handleAccessLevelChange")
            document.getElementById('id_first_name').value = '';
            document.getElementById('id_last_name').value = '';
            document.getElementById('id_phone_number').value = '';
            console.log("in handleAccessLevelChange2")
            const personSelection = document.getElementById('personSelection');
            console.log("in handleAccessLevelChange3")
            const accessLevel = document.getElementById('id_access_level').value;

            if (accessLevel === 'Doctor' || accessLevel === 'Technician') {
                console.log("in handleAccessLevelChange4")
                personSelection.style.display = 'block';
                loadPersons(accessLevel);
                console.log("in handleAccessLevelChange5")
            } else {
                personSelection.style.display = 'none';
                document.getElementById('selected_person').value = '';
            }
        }

        function loadPersons(accessLevel) {
            console.log("in loadPersons=", accessLevel)
            const personList = document.getElementById('personList');
            personList.innerHTML = '<div class="text-muted">Loading...</div>';

            const formData = new FormData();
            formData.append('action', 'load_persons');
            formData.append('access_level', accessLevel);
            formData.append('csrfmiddlewaretoken', getCsrfToken());

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    console.log("data=", data)
                    if (data.success && data.persons) {
                        displayPersons(data.persons);
                    } else {
                        personList.innerHTML = '<div class="text-muted">No persons found</div>';
                    }
                })
                .catch(error => {
                    console.error('Error loading persons:', error);
                    personList.innerHTML = '<div class="text-danger">Error loading persons</div>';
                });
        }

        function displayPersons(persons) {
            console.log("in displayPersons=", persons)
            const personList = document.getElementById('personList');

            if (persons.length === 0) {
                personList.innerHTML = '<div class="text-muted">No persons found</div>';
                return;
            }

            const personItems = persons.map(person => `
                <div class="person-item" data-person-id="${person.id}" onclick="selectPerson(${person.id}, '${person.first_name}', '${person.last_name}', '${person.phone_number}')">
                    <strong>${person.first_name} ${person.last_name}</strong>
                </div>
            `).join('');

            personList.innerHTML = personItems;
        }

        function selectPerson(personId, firstName, lastName, phoneNumber) {
            // Remove previous selection
            document.querySelectorAll('.person-item').forEach(item => {
                item.classList.remove('selected');
            });

            // Add selection to clicked item
            event.target.classList.add('selected');

            // Fill form fields
            document.getElementById('id_first_name').value = firstName;
            document.getElementById('id_last_name').value = lastName;
            document.getElementById('id_phone_number').value = phoneNumber;
            document.getElementById('id_selected_person').value = personId;
        }

        // Event Listeners
        document.addEventListener('DOMContentLoaded', function () {
            const urlAllInfo = '/medical/all_services/';

            fetch(`${urlAllInfo}`)
                .then(response => response.json())
                .then(data => {
                    console.log("data=", data)
                    let services = data.results.services

                    const noCustomServiceDiv = document.getElementById('noCustomServiceList');
                    const yesCustomServiceDiv = document.getElementById('YCustomServiceList');
                    const CustomselectServices = document.getElementById('CustomServiceSelect');
                    if (!services || services.length === 0) {
                        noCustomServiceDiv.classList.remove('d-none');
                        yesCustomServiceDiv.classList.add('d-none');
                    } else {
                        noCustomServiceDiv.classList.add('d-none');
                        yesCustomServiceDiv.classList.remove('d-none');

                        CustomselectServices.innerHTML = '<option value="999" selected>All</option>';

                        services.forEach(service => {
                            const option = document.createElement('option');
                            option.value = service.id;
                            option.textContent = `${service.name} - ${service.unit_price.toLocaleString()} $`;
                            CustomselectServices.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.log(error)
                    showError(String(error));
                });
            const messageCustomTypeSelect = document.getElementById('messageCustomTypeSelect');
            console.log("messageCustomTypeSelect=", messageCustomTypeSelect)
            const CustomServiceId = document.getElementById('CustomServiceSelect');
            console.log("CustomServiceId=", CustomServiceId)

            if (messageCustomTypeSelect) {
                messageCustomTypeSelect.addEventListener('change', handleMessageCustomTypeChange);
            }
            if (CustomServiceId) {
                CustomServiceId.addEventListener('change', handleCustomServiceIdChange);
            }
            const modal = document.getElementById('deleteModal');
            document.querySelectorAll('input[name="passwordOption"]').forEach(radio => {
                radio.addEventListener('change', function () {
                    document.getElementById('changePasswordSection').style.display = 'none';
                    document.getElementById('resetPasswordSection').style.display = 'none';

                    if (this.value === 'change') {
                        document.getElementById('changePasswordSection').style.display = 'block';
                    } else if (this.value === 'reset') {
                        document.getElementById('resetPasswordSection').style.display = 'block';
                    }
                });
            });

            // Request verification code
            document.getElementById('requestVerificationBtn').addEventListener('click', function () {
                requestVerificationCode();
            });
            document.getElementById('verificationCode').addEventListener('input', function () {
                if (this.value.length === 6) {
                    // وقتی کد 6 رقمی کامل شد، فیلدهای رمز جدید را نمایش بده
                    document.getElementById('newPasswordFields').style.display = 'block';

                    // اعتبارسنجی رمز جدید
                    document.getElementById('resetNewPassword').addEventListener('input', function () {
                        console.log("in reset pass=", this.value)
                        updatePasswordStrength(this.value, 'reset');
                    });

                    document.getElementById('resetConfirmPassword').addEventListener('input', function () {
                        checkPasswordMatch('reset');
                    });
                } else {
                    document.getElementById('newPasswordFields').style.display = 'none';
                }
            });
            // Password strength checker
            document.getElementById('newPassword').addEventListener('input', function () {
                updatePasswordStrength(this.value);
            });

            // Password match checker
            document.getElementById('confirmPassword').addEventListener('input', checkPasswordMatch);


            modal.addEventListener('hidden.bs.modal', function () {

                const deleteBtn = document.getElementById('delete-user');
                deleteBtn.disabled = false;
                deleteBtn.innerText = 'Delete';
            });
            // Message type selection
            const messageTypeSelect = document.getElementById('messageTypeSelect');
            if (messageTypeSelect) {
                messageTypeSelect.addEventListener('change', handleMessageTypeChange);
            }
            let ServiceSelect = document.getElementById("ServiceSelect")
            if (ServiceSelect) {
                ServiceSelect.addEventListener('change', handleServiceSelectChange);
            }

            // Access level change
            const accessLevelSelect = document.getElementById('id_access_level');


            console.log("in accessLevelSelect=", accessLevelSelect)
            if (accessLevelSelect) {
                accessLevelSelect.addEventListener('change', handleAccessLevelChange);
            }
            /*
                        // Password change checkbox
                        const editPasswordCheckbox = document.getElementById('editPassword');
                        if (editPasswordCheckbox) {
                            editPasswordCheckbox.addEventListener('change', function () {
                                const passwordSection = document.getElementById('passwordChangeSection');
                                const requestVerificationBtn = document.getElementById('requestVerificationBtn');

                                if (this.checked) {
                                    passwordSection.style.display = 'block';
                                    requestVerificationBtn.style.display = 'inline-block';
                                } else {
                                    passwordSection.style.display = 'none';
                                    requestVerificationBtn.style.display = 'none';
                                    document.getElementById('verificationSection').style.display = 'none';

                                    // Clear password fields
                                    document.getElementById('currentPassword').value = '';
                                    document.getElementById('newPassword').value = '';
                                    document.getElementById('confirmPassword').value = '';
                                    document.getElementById('verificationCode').value = '';
                                }
                            });
                        }

             */

            // Password strength checking
            /*
            const newPasswordInput = document.getElementById('newPassword');
            if (newPasswordInput) {
                newPasswordInput.addEventListener('input', function () {
                    updatePasswordStrength(this.value);
                });
            }

            // Password match checking
            const confirmPasswordInput = document.getElementById('confirmPassword');
            if (confirmPasswordInput) {
                confirmPasswordInput.addEventListener('input', checkPasswordMatch);
            }

            // Verification code input formatting
            const verificationCodeInput = document.getElementById('verificationCode');
            if (verificationCodeInput) {
                verificationCodeInput.addEventListener('input', function () {
                    // Only allow numbers
                    this.value = this.value.replace(/\D/g, '');

                    // Limit to 6 digits
                    if (this.value.length > 6) {
                        this.value = this.value.slice(0, 6);
                    }
                });
            }

             */
        });

        // Form submission handler
        document.getElementById('employeeForm').addEventListener('submit', function (e) {
            e.preventDefault();
            console.log("document.getElementById('country_code')=",document.getElementById('country_code'))
            console.log("document.getElementById('country_code')=",document.getElementById('country_code').textContent)
            console.log("document.getElementById('id_country_code')=",document.getElementById('id_country_code'))
document.getElementById('id_country_code').value = document.getElementById('country_code').textContent;
            console.log("document.getElementById('id_country_code')=",document.getElementById('id_country_code').value)
            const formData = new FormData(this);
            formData.append('action', 'create_employee');
            formData.append('country_code', document.getElementById("id_country_code").value);

            fetch('/accounts/security/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showSuccessEmployee(data.message);
                        //setTimeout(function () {
                        //    location.reload();
                        //}, 5000);
                        this.reset();
                        document.getElementById('personSelection').style.display = 'none';
                    } else {
                        showError(data.error || 'Failed to create employee');
                    }
                })
                .catch(error => {
                    console.error('Error creating employee:', error);
                    showError('Network error occurred while creating employee');
                });
        });
    </script>
    <script>
        // Complete list of countries with flags and codes
        const allcountry = [
            {name: "Afghanistan", code: "93", flag: "🇦🇫"},
            {name: "Albania", code: "355", flag: "🇦🇱"},
            {name: "Algeria", code: "213", flag: "🇩🇿"},
            {name: "Andorra", code: "376", flag: "🇦🇩"},
            {name: "Angola", code: "244", flag: "🇦🇴"},
            {name: "Argentina", code: "54", flag: "🇦🇷"},
            {name: "Armenia", code: "374", flag: "🇦🇲"},
            {name: "Australia", code: "61", flag: "🇦🇺"},
            {name: "Austria", code: "43", flag: "🇦🇹"},
            {name: "Azerbaijan", code: "994", flag: "🇦🇿"},
            {name: "Bahamas", code: "1242", flag: "🇧🇸"},
            {name: "Bahrain", code: "973", flag: "🇧🇭"},
            {name: "Bangladesh", code: "880", flag: "🇧🇩"},
            {name: "Barbados", code: "1246", flag: "🇧🇧"},
            {name: "Belarus", code: "375", flag: "🇧🇾"},
            {name: "Belgium", code: "32", flag: "🇧🇪"},
            {name: "Belize", code: "501", flag: "🇧🇿"},
            {name: "Benin", code: "229", flag: "🇧🇯"},
            {name: "Bhutan", code: "975", flag: "🇧🇹"},
            {name: "Bolivia", code: "591", flag: "🇧🇴"},
            {name: "Bosnia and Herzegovina", code: "387", flag: "🇧🇦"},
            {name: "Botswana", code: "267", flag: "🇧🇼"},
            {name: "Brazil", code: "55", flag: "🇧🇷"},
            {name: "Brunei", code: "673", flag: "🇧🇳"},
            {name: "Bulgaria", code: "359", flag: "🇧🇬"},
            {name: "Burkina Faso", code: "226", flag: "🇧🇫"},
            {name: "Burundi", code: "257", flag: "🇧🇮"},
            {name: "Cambodia", code: "855", flag: "🇰🇭"},
            {name: "Cameroon", code: "237", flag: "🇨🇲"},
            {name: "Canada", code: "1", flag: "🇨🇦"},
            {name: "Cape Verde", code: "238", flag: "🇨🇻"},
            {name: "Central African Republic", code: "236", flag: "🇨🇫"},
            {name: "Chad", code: "235", flag: "🇹🇩"},
            {name: "Chile", code: "56", flag: "🇨🇱"},
            {name: "China", code: "86", flag: "🇨🇳"},
            {name: "Colombia", code: "57", flag: "🇨🇴"},
            {name: "Comoros", code: "269", flag: "🇰🇲"},
            {name: "Congo", code: "242", flag: "🇨🇬"},
            {name: "Costa Rica", code: "506", flag: "🇨🇷"},
            {name: "Croatia", code: "385", flag: "🇭🇷"},
            {name: "Cuba", code: "53", flag: "🇨🇺"},
            {name: "Cyprus", code: "357", flag: "🇨🇾"},
            {name: "Czech Republic", code: "420", flag: "🇨🇿"},
            {name: "Denmark", code: "45", flag: "🇩🇰"},
            {name: "Djibouti", code: "253", flag: "🇩🇯"},
            {name: "Dominica", code: "1767", flag: "🇩🇲"},
            {name: "Dominican Republic", code: "1809", flag: "🇩🇴"},
            {name: "Ecuador", code: "593", flag: "🇪🇨"},
            {name: "Egypt", code: "20", flag: "🇪🇬"},
            {name: "El Salvador", code: "503", flag: "🇸🇻"},
            {name: "Equatorial Guinea", code: "240", flag: "🇬🇶"},
            {name: "Eritrea", code: "291", flag: "🇪🇷"},
            {name: "Estonia", code: "372", flag: "🇪🇪"},
            {name: "Ethiopia", code: "251", flag: "🇪🇹"},
            {name: "Fiji", code: "679", flag: "🇫🇯"},
            {name: "Finland", code: "358", flag: "🇫🇮"},
            {name: "France", code: "33", flag: "🇫🇷"},
            {name: "Gabon", code: "241", flag: "🇬🇦"},
            {name: "Gambia", code: "220", flag: "🇬🇲"},
            {name: "Georgia", code: "995", flag: "🇬🇪"},
            {name: "Germany", code: "49", flag: "🇩🇪"},
            {name: "Ghana", code: "233", flag: "🇬🇭"},
            {name: "Greece", code: "30", flag: "🇬🇷"},
            {name: "Grenada", code: "1473", flag: "🇬🇩"},
            {name: "Guatemala", code: "502", flag: "🇬🇹"},
            {name: "Guinea", code: "224", flag: "🇬🇳"},
            {name: "Guinea-Bissau", code: "245", flag: "🇬🇼"},
            {name: "Guyana", code: "592", flag: "🇬🇾"},
            {name: "Haiti", code: "509", flag: "🇭🇹"},
            {name: "Honduras", code: "504", flag: "🇭🇳"},
            {name: "Hungary", code: "36", flag: "🇭🇺"},
            {name: "Iceland", code: "354", flag: "🇮🇸"},
            {name: "India", code: "91", flag: "🇮🇳"},
            {name: "Indonesia", code: "62", flag: "🇮🇩"},
            {name: "Iran", code: "98", flag: "🇮🇷"},
            {name: "Iraq", code: "964", flag: "🇮🇶"},
            {name: "Ireland", code: "353", flag: "🇮🇪"},
            {name: "Israel", code: "972", flag: "🇮🇱"},
            {name: "Italy", code: "39", flag: "🇮🇹"},
            {name: "Jamaica", code: "1876", flag: "🇯🇲"},
            {name: "Japan", code: "81", flag: "🇯🇵"},
            {name: "Jordan", code: "962", flag: "🇯🇴"},
            {name: "Kazakhstan", code: "7", flag: "🇰🇿"},
            {name: "Kenya", code: "254", flag: "🇰🇪"},
            {name: "Kiribati", code: "686", flag: "🇰🇮"},
            {name: "Kuwait", code: "965", flag: "🇰🇼"},
            {name: "Kyrgyzstan", code: "996", flag: "🇰🇬"},
            {name: "Laos", code: "856", flag: "🇱🇦"},
            {name: "Latvia", code: "371", flag: "🇱🇻"},
            {name: "Lebanon", code: "961", flag: "🇱🇧"},
            {name: "Lesotho", code: "266", flag: "🇱🇸"},
            {name: "Liberia", code: "231", flag: "🇱🇷"},
            {name: "Libya", code: "218", flag: "🇱🇾"},
            {name: "Liechtenstein", code: "423", flag: "🇱🇮"},
            {name: "Lithuania", code: "370", flag: "🇱🇹"},
            {name: "Luxembourg", code: "352", flag: "🇱🇺"},
            {name: "Madagascar", code: "261", flag: "🇲🇬"},
            {name: "Malawi", code: "265", flag: "🇲🇼"},
            {name: "Malaysia", code: "60", flag: "🇲🇾"},
            {name: "Maldives", code: "960", flag: "🇲🇻"},
            {name: "Mali", code: "223", flag: "🇲🇱"},
            {name: "Malta", code: "356", flag: "🇲🇹"},
            {name: "Marshall Islands", code: "692", flag: "🇲🇭"},
            {name: "Mauritania", code: "222", flag: "🇲🇷"},
            {name: "Mauritius", code: "230", flag: "🇲🇺"},
            {name: "Mexico", code: "52", flag: "🇲🇽"},
            {name: "Micronesia", code: "691", flag: "🇫🇲"},
            {name: "Moldova", code: "373", flag: "🇲🇩"},
            {name: "Monaco", code: "377", flag: "🇲🇨"},
            {name: "Mongolia", code: "976", flag: "🇲🇳"},
            {name: "Montenegro", code: "382", flag: "🇲🇪"},
            {name: "Morocco", code: "212", flag: "🇲🇦"},
            {name: "Mozambique", code: "258", flag: "🇲🇿"},
            {name: "Myanmar", code: "95", flag: "🇲🇲"},
            {name: "Namibia", code: "264", flag: "🇳🇦"},
            {name: "Nauru", code: "674", flag: "🇳🇷"},
            {name: "Nepal", code: "977", flag: "🇳🇵"},
            {name: "Netherlands", code: "31", flag: "🇳🇱"},
            {name: "New Zealand", code: "64", flag: "🇳🇿"},
            {name: "Nicaragua", code: "505", flag: "🇳🇮"},
            {name: "Niger", code: "227", flag: "🇳🇪"},
            {name: "Nigeria", code: "234", flag: "🇳🇬"},
            {name: "North Korea", code: "850", flag: "🇰🇵"},
            {name: "North Macedonia", code: "389", flag: "🇲🇰"},
            {name: "Norway", code: "47", flag: "🇳🇴"},
            {name: "Oman", code: "968", flag: "🇴🇲"},
            {name: "Pakistan", code: "92", flag: "🇵🇰"},
            {name: "Palau", code: "680", flag: "🇵🇼"},
            {name: "Panama", code: "507", flag: "🇵🇦"},
            {name: "Papua New Guinea", code: "675", flag: "🇵🇬"},
            {name: "Paraguay", code: "595", flag: "🇵🇾"},
            {name: "Peru", code: "51", flag: "🇵🇪"},
            {name: "Philippines", code: "63", flag: "🇵🇭"},
            {name: "Poland", code: "48", flag: "🇵🇱"},
            {name: "Portugal", code: "351", flag: "🇵🇹"},
            {name: "Qatar", code: "974", flag: "🇶🇦"},
            {name: "Romania", code: "40", flag: "🇷🇴"},
            {name: "Russia", code: "7", flag: "🇷🇺"},
            {name: "Rwanda", code: "250", flag: "🇷🇼"},
            {name: "Saint Kitts and Nevis", code: "1869", flag: "🇰🇳"},
            {name: "Saint Lucia", code: "1758", flag: "🇱🇨"},
            {name: "Saint Vincent and the Grenadines", code: "1784", flag: "🇻🇨"},
            {name: "Samoa", code: "685", flag: "🇼🇸"},
            {name: "San Marino", code: "378", flag: "🇸🇲"},
            {name: "Saudi Arabia", code: "966", flag: "🇸🇦"},
            {name: "Senegal", code: "221", flag: "🇸🇳"},
            {name: "Serbia", code: "381", flag: "🇷🇸"},
            {name: "Seychelles", code: "248", flag: "🇸🇨"},
            {name: "Sierra Leone", code: "232", flag: "🇸🇱"},
            {name: "Singapore", code: "65", flag: "🇸🇬"},
            {name: "Slovakia", code: "421", flag: "🇸🇰"},
            {name: "Slovenia", code: "386", flag: "🇸🇮"},
            {name: "Solomon Islands", code: "677", flag: "🇸🇧"},
            {name: "Somalia", code: "252", flag: "🇸🇴"},
            {name: "South Africa", code: "27", flag: "🇿🇦"},
            {name: "South Korea", code: "82", flag: "🇰🇷"},
            {name: "South Sudan", code: "211", flag: "🇸🇸"},
            {name: "Spain", code: "34", flag: "🇪🇸"},
            {name: "Sri Lanka", code: "94", flag: "🇱🇰"},
            {name: "Sudan", code: "249", flag: "🇸🇩"},
            {name: "Suriname", code: "597", flag: "🇸🇷"},
            {name: "Sweden", code: "46", flag: "🇸🇪"},
            {name: "Switzerland", code: "41", flag: "🇨🇭"},
            {name: "Syria", code: "963", flag: "🇸🇾"},
            {name: "Taiwan", code: "886", flag: "🇹🇼"},
            {name: "Tajikistan", code: "992", flag: "🇹🇯"},
            {name: "Tanzania", code: "255", flag: "🇹🇿"},
            {name: "Thailand", code: "66", flag: "🇹🇭"},
            {name: "Togo", code: "228", flag: "🇹🇬"},
            {name: "Tonga", code: "676", flag: "🇹🇴"},
            {name: "Trinidad and Tobago", code: "1868", flag: "🇹🇹"},
            {name: "Tunisia", code: "216", flag: "🇹🇳"},
            {name: "Turkey", code: "90", flag: "🇹🇷"},
            {name: "Turkmenistan", code: "993", flag: "🇹🇲"},
            {name: "Tuvalu", code: "688", flag: "🇹🇻"},
            {name: "Uganda", code: "256", flag: "🇺🇬"},
            {name: "Ukraine", code: "380", flag: "🇺🇦"},
            {name: "United Arab Emirates", code: "971", flag: "🇦🇪"},
            {name: "United Kingdom", code: "44", flag: "🇬🇧"},
            {name: "United States", code: "1", flag: "🇺🇸"},
            {name: "Uruguay", code: "598", flag: "🇺🇾"},
            {name: "Uzbekistan", code: "998", flag: "🇺🇿"},
            {name: "Vanuatu", code: "678", flag: "🇻🇺"},
            {name: "Vatican City", code: "379", flag: "🇻🇦"},
            {name: "Venezuela", code: "58", flag: "🇻🇪"},
            {name: "Vietnam", code: "84", flag: "🇻🇳"},
            {name: "Yemen", code: "967", flag: "🇾🇪"},
            {name: "Zambia", code: "260", flag: "🇿🇲"},
            {name: "Zimbabwe", code: "263", flag: "🇿🇼"}
        ];


        let filteredAllCountry = [...allcountry];
        let selectedIndexAdd = -1;
        let isDropdownOpenAdd = false;
        const selectedCountryBtnAdd = document.getElementById('selectedCountryAdd');
        const countryDropdownAdd = document.getElementById('countryDropdownAdd');
        const countrySearchAdd = document.getElementById('country_search');
        const countryListAdd = document.getElementById('countryListAdd');
        const selectedCountryCodeAdd = document.getElementById('country_code');
        const dropdownArrowAdd = selectedCountryBtnAdd.querySelector('.dropdown-arrow');

        // Initialize
        renderCountryListAdd();

        // Toggle dropdown
        selectedCountryBtnAdd.addEventListener('click', (e) => {
            console.log("in selectedCountryBtnAdd")
            e.preventDefault();
            toggleDropdownAdd();
        });

        // Search functionality
        countrySearchAdd.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            filteredAllCountry = allcountry.filter(country =>
                country.name.toLowerCase().includes(searchTerm) ||
                country.code.includes(searchTerm)
            );
            selectedIndexAdd = -1;
            renderCountryListAdd();
        });

        // Keyboard navigation
        countrySearchAdd.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    selectedIndexAdd = Math.min(selectedIndexAdd + 1, filteredAllCountry.length - 1);
                    updateHighlightAdd();
                    break;
                case 'ArrowUp':
                    e.preventDefault();
                    selectedIndexAdd = Math.max(selectedIndexAdd - 1, 0);
                    updateHighlightAdd();
                    break;
                case 'Enter':
                    e.preventDefault();
                    if (selectedIndexAdd >= 0) {
                        selectCountryAdd(filteredAllCountry[selectedIndexAdd]);
                    }
                    break;
                case 'Escape':
                    closeDropdownAdd();
                    break;
            }
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!selectedCountryBtnAdd.contains(e.target) && !countryDropdownAdd.contains(e.target)) {
                closeDropdownAdd();
            }
        });

        function toggleDropdownAdd() {
            if (isDropdownOpenAdd) {
                closeDropdownAdd();
            } else {
                openDropdownAdd();
            }
        }

        function openDropdownAdd() {
            isDropdownOpenAdd = true;
            countryDropdownAdd.style.display = 'block';
            dropdownArrowAdd.classList.add('open');
            countrySearchAdd.focus();
            countrySearchAdd.value = '';
            filteredAllCountry = [...allcountry];
            selectedIndexAdd = -1;
            renderCountryListAdd();
        }

        function closeDropdownAdd() {
            isDropdownOpenAdd = false;
            countryDropdownAdd.style.display = 'none';
            dropdownArrowAdd.classList.remove('open');
        }

        function renderCountryListAdd() {
            console.log("in renderCountryListAdd")
            countryListAdd.innerHTML = '';
            filteredAllCountry.forEach((country, index) => {
                const option = document.createElement('div');
                option.className = 'country-option';
                option.innerHTML = `
                    <span class="country-flag" id="country_flag">${country.flag}</span>
                    <span class="country-code"  id="country_code">+${country.code}</span>
                `;
                option.addEventListener('click', () => selectCountryAdd(country));
                countryListAdd.appendChild(option);
            });
        }

        function updateHighlightAdd() {
            const options = countryListAdd.querySelectorAll('.country-option');
            options.forEach((option, index) => {
                option.classList.toggle('highlighted', index === selectedIndexAdd);
            });

            // Scroll highlighted option into view
            if (selectedIndexAdd >= 0 && options[selectedIndexAdd]) {
                options[selectedIndexAdd].scrollIntoView({block: 'nearest'});
            }
        }

        function selectCountryAdd(country) {

            console.log("in selectCountryAdd=", country)
            // Update the selected country display
            selectedCountryBtnAdd.querySelector('.country-flag').textContent = country.flag;
            selectedCountryBtnAdd.querySelector('span:nth-child(2)').textContent = `+${country.code}`;
            const CountryCodeField = document.getElementById('country_code');
            CountryCodeField.textContent = country.code
            console.log("CountryCodeField=", CountryCodeField.textContent)
            // Update hidden input
            selectedCountryCodeAdd.textContent = country.code;
            console.log("selectedCountryCodeAdd=", selectedCountryCodeAdd.textContent)

            // Close dropdown
            closeDropdownAdd();
        }

        {#document.getElementById('employeeForm').addEventListener('submit', function () {#}
        {#    #}
        {#});#}

        // Variables for edit country dropdown
        let filteredAllCountryEdit = [...allcountry];
        let selectedIndexEdit = -1;
        let isDropdownOpenEdit = false;
        const selectedCountryBtnEdit = document.getElementById('selectedCountryEdit');
        const countryDropdownEdit = document.getElementById('countryDropdownEdit');
        const countrySearchEdit = document.getElementById('country_search_edit');
        const countryListEdit = document.getElementById('countryListEdit');
        const selectedCountryCodeEdit = document.getElementById('country_code_edit');
        const dropdownArrowEdit = selectedCountryBtnEdit.querySelector('.dropdown-arrow');

        // Initialize edit country dropdown
        renderCountryListEdit();

        // Toggle dropdown for edit
        selectedCountryBtnEdit.addEventListener('click', (e) => {
            e.preventDefault();
            toggleDropdownEdit();
        });

        // Search functionality for edit
        countrySearchEdit.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            filteredAllCountryEdit = allcountry.filter(country =>
                country.name.toLowerCase().includes(searchTerm) ||
                country.code.includes(searchTerm)
            );
            selectedIndexEdit = -1;
            renderCountryListEdit();
        });

        // Keyboard navigation for edit
        countrySearchEdit.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowDown':
                    e.preventDefault();
                    selectedIndexEdit = Math.min(selectedIndexEdit + 1, filteredAllCountryEdit.length - 1);
                    updateHighlightEdit();
                    break;
                case 'ArrowUp':
                    e.preventDefault();
                    selectedIndexEdit = Math.max(selectedIndexEdit - 1, 0);
                    updateHighlightEdit();
                    break;
                case 'Enter':
                    e.preventDefault();
                    if (selectedIndexEdit >= 0) {
                        selectCountryEdit(filteredAllCountryEdit[selectedIndexEdit]);
                    }
                    break;
                case 'Escape':
                    closeDropdownEdit();
                    break;
            }
        });

        // Close dropdown when clicking outside for edit
        document.addEventListener('click', (e) => {
            if (!selectedCountryBtnEdit.contains(e.target) && !countryDropdownEdit.contains(e.target)) {
                closeDropdownEdit();
            }
        });

        function toggleDropdownEdit() {
            if (isDropdownOpenEdit) {
                closeDropdownEdit();
            } else {
                openDropdownEdit();
            }
        }

        function openDropdownEdit() {
            isDropdownOpenEdit = true;
            countryDropdownEdit.style.display = 'block';
            dropdownArrowEdit.classList.add('open');
            countrySearchEdit.focus();
            countrySearchEdit.value = '';
            filteredAllCountryEdit = [...allcountry];
            selectedIndexEdit = -1;
            renderCountryListEdit();
        }

        function closeDropdownEdit() {
            isDropdownOpenEdit = false;
            countryDropdownEdit.style.display = 'none';
            dropdownArrowEdit.classList.remove('open');
        }

        function renderCountryListEdit() {
            countryListEdit.innerHTML = '';
            filteredAllCountryEdit.forEach((country, index) => {
                const option = document.createElement('div');
                option.className = 'country-option';
                option.innerHTML = `
            <span class="country-flag">${country.flag}</span>
            <span class="country-code">+${country.code}</span>
        `;
                option.addEventListener('click', () => selectCountryEdit(country));
                countryListEdit.appendChild(option);
            });
        }

        function updateHighlightEdit() {
            const options = countryListEdit.querySelectorAll('.country-option');
            options.forEach((option, index) => {
                option.classList.toggle('highlighted', index === selectedIndexEdit);
            });

            if (selectedIndexEdit >= 0 && options[selectedIndexEdit]) {
                options[selectedIndexEdit].scrollIntoView({block: 'nearest'});
            }
        }

        function selectCountryEdit(country) {
            selectedCountryBtnEdit.querySelector('.country-flag').textContent = country.flag;
            selectedCountryBtnEdit.querySelector('span:nth-child(2)').textContent = `+${country.code}`;
            document.getElementById('editCountryCode').value = country.code;
            closeDropdownEdit();
        }

    </script>
{% endblock %}