{% extends 'admin_panel/base.html' %}
{% load static %}
{% load role_permissions %}

{% block page_title %}Data Disabilitas{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/references/references-general.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/references/references-pelajar-disabilitas.css' %}">
{% endblock %}

{% block content %}
<form id="csrfForm" style="display:none;">{% csrf_token %}</form>
<div class="container-fluid">

    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-2">
                <div class="mb-2 mb-md-0">
                    <h1 class="h3 mb-1 text-dark font-weight-bold">
                        <i class="fas fa-wheelchair text-primary me-2"></i>
                        Data Disabilitas
                    </h1>
                    <p class="text-muted mb-0 small">Kelola data disabilitas desa</p>
                </div>
                <div class="header-buttons-wrapper">
                    {% if user|can_add:"references" %}
                    <a href="{% url 'admin_panel:references_disabilitas_add' %}" class="btn btn-primary btn-header-action">
                        <i class="fas fa-plus"></i>
                        <span class="d-none d-sm-inline ms-1">Tambah</span>
                    </a>
                    {% endif %}
                    
                    <a href="{% url 'references:global_import' %}" class="btn btn-info btn-header-action">
                        <i class="fas fa-file-import"></i>
                        <span class="d-none d-sm-inline ms-1">Global Import</span>
                    </a>
                    
                    <a href="{% url 'references:import_export_dashboard' %}" class="btn btn-success btn-header-action">
                        <i class="fas fa-download"></i>
                        <span class="d-none d-sm-inline ms-1">Export Dashboard</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card filter-card">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-filter mr-2"></i>
                        Filter & Pencarian
                    </h6>
                </div>
                <div class="card-body">
                    <form method="get" id="filterForm">
                        <div class="row">
                            <div class="col-lg-3 col-md-4 col-6 mb-2">
                                <label for="search" class="form-label">Cari</label>
                                <input type="text" class="form-control" id="search" name="search"
                                       value="{{ search_query }}" placeholder="Nama...">
                            </div>
                            <div class="col-lg-3 col-md-4 col-6 mb-2">
                                <label for="type" class="form-label">Jenis</label>
                                <select class="form-control" id="type" name="type">
                                    <option value="">Semua</option>
                                    {% for type in type_options %}
                                        <option value="{{ type.id }}" {% if type_filter == type.id|stringformat:"s" %}selected{% endif %}>{{ type.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6 mb-2">
                                <label for="severity" class="form-label">Tingkat</label>
                                <select class="form-control" id="severity" name="severity">
                                    <option value="">Semua</option>
                                    <option value="ringan" {% if severity_filter == 'ringan' %}selected{% endif %}>Ringan</option>
                                    <option value="sedang" {% if severity_filter == 'sedang' %}selected{% endif %}>Sedang</option>
                                    <option value="berat" {% if severity_filter == 'berat' %}selected{% endif %}>Berat</option>
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6 mb-2">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="">Semua</option>
                                    <option value="aktif" {% if status_filter == 'aktif' %}selected{% endif %}>Aktif</option>
                                    <option value="tidak_aktif" {% if status_filter == 'tidak_aktif' %}selected{% endif %}>Tidak Aktif</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-auto mb-2 d-flex align-items-end gap-2">
                                <button type="submit" class="btn btn-sm btn-primary flex-fill">
                                    <i class="fas fa-search"></i>
                                    <span class="d-none d-md-inline ms-1">Cari</span>
                                </button>
                                <a href="{% url 'admin_panel:references_disabilitas_list' %}" class="btn btn-sm btn-outline-secondary flex-fill">
                                    <i class="fas fa-times"></i>
                                    <span class="d-none d-md-inline ms-1">Reset</span>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-list mr-2"></i>
                Daftar Disabilitas
            </h6>
        </div>
        <div class="card-body">
            {% if page_obj.object_list %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th class="th-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="selectAll">
                                        <label class="custom-control-label" for="selectAll"></label>
                                    </div>
                                </th>
                                <th class="th-no d-none d-md-table-cell">No</th>
                                <th class="th-name">Nama</th>
                                <th class="th-nik d-none d-sm-table-cell">NIK</th>
                                <th class="th-type d-none d-md-table-cell">Jenis</th>
                                <th class="th-severity d-none d-lg-table-cell">Tingkat</th>
                                <th class="th-status d-none d-lg-table-cell">Status</th>
                                <th class="th-action">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for disabilitas in page_obj.object_list %}
                            <tr>
                                <td class="td-checkbox">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input disabilitas-checkbox"
                                               id="disabilitas_{{ disabilitas.id }}" value="{{ disabilitas.id }}">
                                        <label class="custom-control-label" for="disabilitas_{{ disabilitas.id }}"></label>
                                    </div>
                                </td>
                                <td class="td-no d-none d-md-table-cell">
                                    <span class="badge badge-light">{{ forloop.counter|add:page_obj.start_index|add:"-1" }}</span>
                                </td>
                                <td class="td-name">
                                    <div class="d-flex align-items-start">
                                        <div class="d-none d-md-flex mr-2">
                                            {% if disabilitas.penduduk.photo and disabilitas.penduduk.photo.url %}
                                                <img src="{{ disabilitas.penduduk.photo.url }}"
                                                     alt="{{ disabilitas.penduduk.name }}"
                                                     class="avatar-sm rounded-circle">
                                            {% else %}
                                                <div class="avatar-sm bg-light rounded-circle d-flex align-items-center justify-content-center">
                                                    <i class="fas fa-user text-secondary"></i>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="flex-grow-1 min-w-0">
                                            <div class="fw-bold text-dark">{{ disabilitas.penduduk.name }}</div>
                                            <div class="d-sm-none text-muted small">
                                                {{ disabilitas.penduduk.nik }}
                                            </div>
                                            <div class="d-md-none text-muted small">
                                                {{ disabilitas.disability_type.name|default:"-" }}
                                            </div>
                                            <div class="d-lg-none text-muted small">
                                                {{ disabilitas.get_severity_display|default:"-" }}
                                                {% if disabilitas.is_active %}
                                                <span class="badge badge-success badge-sm ms-1">Aktif</span>
                                                {% else %}
                                                <span class="badge badge-secondary badge-sm ms-1">Non-Aktif</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="td-nik d-none d-sm-table-cell">{{ disabilitas.penduduk.nik }}</td>
                                <td class="td-type d-none d-md-table-cell">
                                    <span class="badge badge-warning">{{ disabilitas.disability_type.name|default:"-" }}</span>
                                </td>
                                <td class="td-severity d-none d-lg-table-cell">
                                    {% if disabilitas.severity %}
                                        <span class="badge badge-{% if disabilitas.severity == 'ringan' %}success{% elif disabilitas.severity == 'sedang' %}warning{% else %}danger{% endif %}">{{ disabilitas.get_severity_display }}</span>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td class="td-status d-none d-lg-table-cell">
                                    {% if disabilitas.is_active %}
                                        <span class="badge badge-success">Aktif</span>
                                    {% else %}
                                        <span class="badge badge-secondary">Tidak Aktif</span>
                                    {% endif %}
                                </td>
                                <td class="td-action">

                                    <div class="d-none d-md-inline-block">
                                        <a href="{% url 'admin_panel:references_disabilitas_detail' disabilitas.id %}"
                                           class="btn btn-sm btn-outline-primary" title="Detail">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if user|can_change:"references" %}
                                        <a href="{% url 'admin_panel:references_disabilitas_edit' disabilitas.id %}"
                                           class="btn btn-sm btn-outline-warning" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% endif %}
                                        {% if user|can_delete:"references" %}
                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                onclick="showDeleteModal({{ disabilitas.id }}, '{{ disabilitas.penduduk.nama|escapejs }}')"
                                                title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        {% endif %}
                                    </div>

                                    <div class="d-md-none btn-group-mobile">
                                        <a href="{% url 'admin_panel:references_disabilitas_detail' disabilitas.id %}"
                                           class="btn btn-sm btn-outline-primary btn-action-mobile" title="Detail">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if user|can_change:"references" %}
                                        <a href="{% url 'admin_panel:references_disabilitas_edit' disabilitas.id %}"
                                           class="btn btn-sm btn-outline-warning btn-action-mobile" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% endif %}
                                        {% if user|can_delete:"references" %}
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-action-mobile"
                                                onclick="showDeleteModal({{ disabilitas.id }}, '{{ disabilitas.penduduk.nama|escapejs }}')"
                                                title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
                    <div class="bulk-actions-inline" id="bulkActionsContainer">
                        <span class="bulk-count-badge" id="bulkActionsCount">0 dipilih</span>
                        <button type="button" class="bulk-btn bulk-btn-activate" onclick="executeBulkAction('activate')" title="Aktifkan">
                            <i class="fas fa-check"></i>
                            <span class="bulk-btn-text">Aktifkan</span>
                        </button>
                        <button type="button" class="bulk-btn bulk-btn-deactivate" onclick="executeBulkAction('deactivate')" title="Nonaktifkan">
                            <i class="fas fa-pause"></i>
                            <span class="bulk-btn-text">Nonaktifkan</span>
                        </button>
                        <button type="button" class="bulk-btn bulk-btn-delete" onclick="executeBulkAction('delete')" title="Hapus">
                            <i class="fas fa-trash"></i>
                            <span class="bulk-btn-text">Hapus</span>
                        </button>
                    </div>
                    <div class="text-muted small mt-2 mt-md-0">
                        {{ page_obj.start_index|default:0 }} - {{ page_obj.end_index|default:0 }} dari {{ page_obj.paginator.count|default:0 }}
                    </div>
                </div>

                {% if page_obj.has_other_pages %}
                <nav aria-label="Pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1">&laquo; First</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                            </li>
                        {% endif %}

                        <li class="page-item active">
                            <span class="page-link">
                                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                            </span>
                        </li>

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last &raquo;</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-wheelchair fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Belum ada data disabilitas</h5>
                    <p class="text-muted">Klik tombol "Tambah Disabilitas" untuk menambahkan data pertama</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white py-2">
                <h6 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle mr-1"></i>
                    Hapus Data
                </h6>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-3">
                <p class="mb-2">Yakin hapus data:</p>
                <p class="font-weight-bold mb-0" id="deleteItemName">-</p>

                <form id="deleteForm" method="post" action="" style="display:none;">
                    {% csrf_token %}
                    <input type="hidden" name="disabilitas_id" id="deleteDisabilitasId">
                    <input type="hidden" name="reason" value="Dihapus melalui sistem">
                </form>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash"></i> Hapus
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>let currentDisabilitasId = null;

$(document).ready(function() {
    console.log('Disabilitas List page loaded');

    $('#selectAll').change(function() {
        $('.disabilitas-checkbox').prop('checked', this.checked);
        updateBulkActions();
    });

    $(document).on('change', '.disabilitas-checkbox', function() {
        updateBulkActions();
    });

    $('#deleteModal .close, #deleteModal [data-dismiss="modal"]').on('click', function() {
        $('#deleteModal').modal('hide');
    });

    $('#deleteModal').on('hidden.bs.modal', function() {
        $('#deleteForm')[0].reset();
        $('#confirmDeleteBtn').prop('disabled', false).html('<i class="fas fa-trash"></i> Hapus');
    });
});

function showDeleteModal(disabilitasId, pendudukName) {
    const disabilitasName = 'Disabilitas ' + pendudukName;
    deleteDisabilitas(disabilitasId, disabilitasName);
}

function deleteDisabilitasFromButton(button) {
    const disabilitasId = $(button).data('disabilitas-id');
    const pendudukName = $(button).data('penduduk-name');
    const disabilitasName = 'Disabilitas ' + pendudukName;

    deleteDisabilitas(disabilitasId, disabilitasName);
}

function deleteDisabilitas(disabilitasId, disabilitasName) {
    $('#deleteItemName').text(disabilitasName);
    $('#deleteDisabilitasId').val(disabilitasId);
    $('#deleteForm').attr('action', `/admin-panel/references/disabilitas/delete/${disabilitasId}/`);

    $('#confirmDeleteBtn').off('click').on('click', function() {
        const btn = $(this);
        const originalText = btn.html();
        const csrfToken = $('#csrfForm input[name="csrfmiddlewaretoken"]').val();

        btn.html('<i class="fas fa-spinner fa-spin"></i> Menghapus...');
        btn.prop('disabled', true);

        const formData = new FormData($('#deleteForm')[0]);

        $.ajax({
            url: $('#deleteForm').attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRFToken': csrfToken
            },
            success: function(response) {
                if (response.success) {
                    if (typeof window.showSuccess === 'function') {
                        window.showSuccess(response.message || 'Data berhasil dihapus');
                    }
                    $('#deleteModal').modal('hide');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    if (typeof window.showError === 'function') {
                        window.showError(response.message || 'Gagal menghapus data');
                    }
                    btn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr, status, error) {
                let message = 'Terjadi kesalahan saat menghapus data';

                if (xhr.status === 403) {
                    message = 'Anda tidak memiliki izin untuk menghapus data ini';
                } else if (xhr.status === 404) {
                    message = 'Data tidak ditemukan';
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }

                if (typeof window.showError === 'function') {
                    window.showError(message);
                }

                btn.prop('disabled', false).html(originalText);
            }
        });
    });

    $('#deleteModal').modal('show');
}

function updateBulkActions() {
    const selected = $('.disabilitas-checkbox:checked').length;
    const count = $('#bulkActionsCount');

    count.text(selected > 0 ? `${selected} dipilih` : '0 dipilih');

    const totalCheckboxes = $('.disabilitas-checkbox').length;
    const selectAll = $('#selectAll');

    if (selected === 0) {
        selectAll.prop('indeterminate', false).prop('checked', false);
    } else if (selected === totalCheckboxes) {
        selectAll.prop('indeterminate', false).prop('checked', true);
    } else {
        selectAll.prop('indeterminate', true);
    }
}

function executeBulkAction(action) {
    const selected = $('.disabilitas-checkbox:checked');

    if (selected.length === 0) {
        showError('Pilih minimal satu data');
        return;
    }

    const selectedIds = [];
    selected.each(function() {
        selectedIds.push($(this).val());
    });

    const actionLabels = {
        'activate': 'mengaktifkan',
        'deactivate': 'menonaktifkan',
        'delete': 'menghapus'
    };

    if (action === 'delete') {
        if (!confirm(`Apakah Anda yakin ingin menghapus ${selectedIds.length} data disabilitas?\n\nTindakan ini tidak dapat dibatalkan!`)) {
            return;
        }
    } else {
        if (!confirm(`Apakah Anda yakin ingin ${actionLabels[action]} ${selectedIds.length} data disabilitas?`)) {
            return;
        }
    }

    showLoading(`Menjalankan aksi ${actionLabels[action]} pada ${selectedIds.length} data...`);

    if (action === 'delete') {
        bulkDeleteDisabilitas(selectedIds);
    } else if (action === 'activate') {
        bulkActivateDisabilitas(selectedIds);
    } else if (action === 'deactivate') {
        bulkDeactivateDisabilitas(selectedIds);
    }
}

function bulkDeleteDisabilitas(ids) {
    const csrfToken = $('#csrfForm input[name="csrfmiddlewaretoken"]').val();

    $.ajax({
        url: '{% url "admin_panel:references_disabilitas_bulk_delete" %}',
        type: 'POST',
        data: {
            'disabilitas_ids[]': ids,
            'csrfmiddlewaretoken': csrfToken
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRFToken', csrfToken);
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                if (typeof window.showSuccess === 'function') {
                    window.showSuccess(`Berhasil menghapus ${response.deleted_count} data disabilitas`);
                }
                setTimeout(function() {
                    location.reload();
                }, 1000);
            } else {
                let errorMessage = response.message || 'Gagal menghapus data disabilitas';
                if (typeof window.showError === 'function') {
                    window.showError(errorMessage);
                }
            }
        },
        error: function(xhr, status, error) {
            hideLoading();
            console.error('Bulk delete error:', xhr.responseText);
            if (typeof window.showError === 'function') {
                window.showError('Terjadi kesalahan saat menghapus data');
            }
        }
    });
}

function bulkActivateDisabilitas(ids) {
    const csrfToken = $('#csrfForm input[name="csrfmiddlewaretoken"]').val();

    $.ajax({
        url: '{% url "admin_panel:references_disabilitas_bulk_activate" %}',
        type: 'POST',
        data: {
            'disabilitas_ids[]': ids,
            'csrfmiddlewaretoken': csrfToken
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRFToken', csrfToken);
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                if (typeof window.showSuccess === 'function') {
                    window.showSuccess(`Berhasil mengaktifkan ${response.activated_count} data disabilitas`);
                }
                setTimeout(function() {
                    location.reload();
                }, 1000);
            } else {
                if (typeof window.showError === 'function') {
                    window.showError(response.message || 'Gagal mengaktifkan data disabilitas');
                }
            }
        },
        error: function(xhr, status, error) {
            hideLoading();
            console.error('Bulk activate error:', xhr.responseText);
            if (typeof window.showError === 'function') {
                window.showError('Terjadi kesalahan saat mengaktifkan data');
            }
        }
    });
}

function bulkDeactivateDisabilitas(ids) {
    const csrfToken = $('#csrfForm input[name="csrfmiddlewaretoken"]').val();

    $.ajax({
        url: '{% url "admin_panel:references_disabilitas_bulk_deactivate" %}',
        type: 'POST',
        data: {
            'disabilitas_ids[]': ids,
            'csrfmiddlewaretoken': csrfToken
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-CSRFToken', csrfToken);
        },
        success: function(response) {
            hideLoading();
            if (response.success) {
                if (typeof window.showSuccess === 'function') {
                    window.showSuccess(`Berhasil menonaktifkan ${response.deactivated_count} data disabilitas`);
                }
                setTimeout(function() {
                    location.reload();
                }, 1000);
            } else {
                if (typeof window.showError === 'function') {
                    window.showError(response.message || 'Gagal menonaktifkan data disabilitas');
                }
            }
        },
        error: function(xhr, status, error) {
            hideLoading();
            console.error('Bulk deactivate error:', xhr.responseText);
            if (typeof window.showError === 'function') {
                window.showError('Terjadi kesalahan saat menonaktifkan data');
            }
        }
    });
}

function showError(message) {
    showAlert(message, 'error');
}

function showLoading(message) {

    $('body').append(`
        <div id="loadingOverlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;">
            <div style="background: white; padding: 20px; border-radius: 8px; text-align: center;">
                <div class="spinner-border text-primary mb-2"></div>
                <div>${message}</div>
            </div>
        </div>
    `);
}

function hideLoading() {
    $('#loadingOverlay').remove();
}

function showAlert(message, type) {
    const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-warning';
    const icon = type === 'success' ? 'fas fa-check-circle' : type === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-exclamation-triangle';

    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
            <i class="${icon} mr-2"></i>
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;

    $('body').append(alertHtml);

    setTimeout(function() {
        $('.alert').fadeOut();
    }, 5000);
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
{% endblock %}