@extends('layouts.template.main')

@push('styles')
<style>
    /* ===== ROLE PERMISSION PAGE ===== */
    .rp-page-title {
        font-size: 1.45rem;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: -0.3px;
    }

    .rp-page-subtitle {
        font-size: 0.875rem;
        color: #64748b;
        margin-top: 2px;
    }

    /* ===== ROLE BADGE ===== */
    .role-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 11px;
        border-radius: 20px;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .role-badge.admin    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
    .role-badge.developer{ background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
    .role-badge.designer { background: #fce7f3; color: #9d174d; border: 1px solid #fbcfe8; }
    .role-badge.tester   { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
    .role-badge.marketing{ background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }

    /* ===== MA TRẬN BẢNG ===== */
    .perm-matrix-card {
        border: none;
        border-radius: 14px;
        box-shadow: 0 2px 16px rgba(0,0,0,0.07);
        overflow: hidden;
    }

    .perm-matrix-card .card-header {
        background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
        color: white;
        padding: 18px 24px;
        border-bottom: none;
    }

    .perm-matrix-table {
        margin-bottom: 0;
    }

    .perm-matrix-table thead th {
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        padding: 12px 10px;
        text-align: center;
        vertical-align: middle;
        font-size: 0.82rem;
        color: #475569;
        white-space: nowrap;
    }

    .perm-matrix-table thead th:first-child {
        text-align: left;
        padding-left: 20px;
        min-width: 260px;
    }

    .perm-matrix-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s ease;
    }

    .perm-matrix-table tbody tr:hover {
        background-color: #f8fafc;
    }

    .perm-matrix-table tbody tr.section-header {
        background: linear-gradient(90deg, #f0f7ff 0%, #f8fafc 100%);
        cursor: default;
    }

    .perm-matrix-table tbody tr.section-header td {
        padding: 10px 20px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #3b82f6;
        border-bottom: 1px solid #bfdbfe;
    }

    .perm-matrix-table tbody td {
        padding: 12px 10px;
        vertical-align: middle;
        text-align: center;
    }

    .perm-matrix-table tbody td:first-child {
        text-align: left;
        padding-left: 20px;
        padding-right: 16px;
    }

    /* ===== PERM LABEL ===== */
    .perm-label-wrap .perm-label {
        font-weight: 600;
        font-size: 0.875rem;
        color: #1e293b;
        display: block;
    }

    .perm-label-wrap .perm-desc {
        font-size: 0.77rem;
        color: #94a3b8;
        display: block;
        margin-top: 1px;
    }

    /* ===== CHECKBOX TÙY CHỈNH ===== */
    .perm-checkbox-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .perm-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: #3b82f6;
        border-radius: 5px;
        transition: transform 0.1s ease;
    }

    .perm-checkbox:hover {
        transform: scale(1.15);
    }

    .perm-checkbox:disabled {
        cursor: not-allowed;
        opacity: 0.6;
        accent-color: #f59e0b;
    }

    /* ===== ADMIN COLUMN ===== */
    .col-admin-header {
        background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    }

    .col-admin-cell {
        background: linear-gradient(135deg, #fffbeb, #fefce8) !important;
    }

    .admin-full-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #f59e0b;
        color: white;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 20px;
        letter-spacing: 0.5px;
    }

    /* ===== BULK ACTIONS ===== */
    .bulk-action-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        background: #f0f7ff;
        border-bottom: 1px solid #dbeafe;
        flex-wrap: wrap;
    }

    .bulk-action-bar span {
        font-size: 0.82rem;
        color: #475569;
        font-weight: 600;
        margin-right: 4px;
    }

    .btn-bulk-select, .btn-bulk-deselect {
        font-size: 0.75rem;
        padding: 4px 10px;
        border-radius: 6px;
        border: 1px solid;
        background: transparent;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.15s ease;
    }

    .btn-bulk-select {
        border-color: #3b82f6;
        color: #3b82f6;
    }
    .btn-bulk-select:hover { background: #3b82f6; color: white; }

    .btn-bulk-deselect {
        border-color: #ef4444;
        color: #ef4444;
    }
    .btn-bulk-deselect:hover { background: #ef4444; color: white; }

    /* ===== SAVE BUTTON ===== */
    .btn-save-perm {
        background: linear-gradient(135deg, #1e3a5f, #2d5a87);
        color: white;
        border: none;
        padding: 10px 28px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-save-perm:hover {
        background: linear-gradient(135deg, #162d4a, #234d75);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(30,58,95,0.3);
    }

    .btn-save-perm:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .btn-reset-perm {
        border: 1px solid #e2e8f0;
        background: white;
        color: #64748b;
        padding: 10px 22px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-reset-perm:hover {
        border-color: #94a3b8;
        color: #1e293b;
        background: #f8fafc;
    }

    /* ===== TOAST ===== */
    #rp-toast-container {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: none;
        min-width: 340px;
        max-width: 400px;
    }

    .rp-toast {
        background: white;
        border-radius: 12px;
        padding: 14px 16px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.13);
        display: flex;
        align-items: flex-start;
        gap: 12px;
        pointer-events: all;
        border-left: 4px solid transparent;
        animation: rpToastIn 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .rp-toast.success { border-left-color: #10b981; }
    .rp-toast.error   { border-left-color: #ef4444; }
    .rp-toast.warning { border-left-color: #f59e0b; }

    .rp-toast .rp-toast-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
    .rp-toast.success .rp-toast-icon { color: #10b981; }
    .rp-toast.error   .rp-toast-icon { color: #ef4444; }
    .rp-toast.warning .rp-toast-icon { color: #f59e0b; }

    .rp-toast .rp-toast-body { flex: 1; }
    .rp-toast .rp-toast-title { font-weight: 700; font-size: 0.875rem; color: #1e293b; }
    .rp-toast .rp-toast-msg   { font-size: 0.82rem; color: #64748b; margin-top: 2px; }

    .rp-toast .rp-toast-close {
        background: none; border: none; font-size: 16px; color: #94a3b8;
        cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0;
        margin-top: -2px;
    }

    .rp-toast .rp-toast-progress {
        position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: #f1f5f9;
    }

    .rp-toast .rp-toast-bar {
        height: 100%; width: 100%; border-radius: 2px;
        animation: rpToastBar 3.5s linear forwards;
    }

    .rp-toast.success .rp-toast-bar { background: #10b981; }
    .rp-toast.error   .rp-toast-bar { background: #ef4444; }
    .rp-toast.warning .rp-toast-bar { background: #f59e0b; }

    @keyframes rpToastIn {
        from { opacity: 0; transform: translateX(30px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes rpToastHide {
        to { opacity: 0; transform: translateX(30px); }
    }

    @keyframes rpToastBar {
        from { width: 100%; }
        to   { width: 0%; }
    }

    /* ===== MOBILE RESPONSIVE ===== */
    .scroll-hint {
        display: none;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        color: #64748b;
        padding: 6px 16px 2px;
        background: #fffbeb;
        border-bottom: 1px solid #fde68a;
    }

    @media (max-width: 768px) {
        .perm-matrix-card .card-header { padding: 14px 16px; }
        .perm-matrix-card .card-header .d-flex.gap-2.flex-wrap { display: none !important; }

        .bulk-action-bar {
            overflow-x: auto;
            flex-wrap: nowrap;
            padding: 8px 12px;
            gap: 6px;
        }
        .bulk-action-bar span    { white-space: nowrap; }
        .btn-bulk-select,
        .btn-bulk-deselect       { white-space: nowrap; flex-shrink: 0; }

        .scroll-hint { display: flex; }

        .perm-table-scroll-wrap  { overflow-x: auto; -webkit-overflow-scrolling: touch; }

        .perm-matrix-table       { min-width: 560px; }

        /* Cột đầu sticky */
        .perm-matrix-table thead th:first-child,
        .perm-matrix-table tbody td:first-child {
            position: sticky;
            left: 0;
            z-index: 2;
            min-width: 150px;
            max-width: 150px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.07);
        }
        .perm-matrix-table thead th:first-child { background: #f8fafc; z-index: 3; }
        .perm-matrix-table tbody td:first-child  { background: #fff; }
        .perm-matrix-table tbody tr:hover td:first-child { background: #f8fafc; }
        .perm-matrix-table tbody tr.section-header td { background: #f0f7ff; }

        /* Cột role thu gọn */
        .perm-matrix-table thead th { min-width: 68px !important; padding: 10px 4px; }
        .perm-matrix-table tbody td { padding: 10px 4px; }

        .perm-label-wrap .perm-label { font-size: 0.8rem; }
        .perm-label-wrap .perm-desc  { display: none; }

        .admin-full-badge { font-size: 0.62rem; padding: 2px 5px; }

        /* Footer stack */
        .card-footer.d-flex       { flex-direction: column !important; align-items: stretch !important; }
        .card-footer .d-flex.gap-2{ flex-direction: column; }
        .btn-save-perm,
        .btn-reset-perm           { width: 100%; justify-content: center; }

        #rp-toast-container { min-width: 260px; max-width: calc(100vw - 24px); right: 12px; top: 12px; }
    }

    @media (max-width: 420px) {
        .perm-matrix-table thead th:first-child,
        .perm-matrix-table tbody td:first-child { min-width: 120px; max-width: 120px; }
        .perm-matrix-table { min-width: 480px; }
    }
</style>
@endpush

@section('title', 'Quản lý quyền')
@section('content')
<main>
    <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
        <div class="container-full px-4">
            <div class="page-header-content">
                <div class="row align-items-center justify-content-between pt-3 pb-2">
                    <div class="col-auto">
                        <h1 class="page-header-title">
                            <div class="page-header-icon"><i data-feather="shield"></i></div>
                            Quản lý quyền
                        </h1>
                        <p class="rp-page-subtitle mb-0 ms-1">Cấu hình quyền chỉnh sửa theo vai trò trên màn hình Project Follow LVT</p>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container-full px-4 mt-4">

        {{-- Toast alerts --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4">
                <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show mb-4">
                <i class="fa-solid fa-circle-exclamation me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Thông tin --}}
        <div class="alert-info border-0 rounded-3 d-flex align-items-start gap-3" style="background:#eff6ff;">
            <div style="font-size:0.875rem;">
                <strong>Hướng dẫn:</strong> Tick chọn các ô tương ứng để cấp quyền cho từng vai trò.
                <strong>Admin</strong> luôn có <strong>toàn quyền</strong> và không thể tắt.
                Sau khi chỉnh sửa, bấm <strong>"Lưu phân quyền"</strong> để áp dụng ngay.
            </div>
        </div>

        <div class="card perm-matrix-card mb-4">
            <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h5 class="mb-0 text-white fw-bold"><i class="fa-solid fa-table-columns me-2"></i>Bảng phân quyền</h5>
                    <small class="text-white opacity-75">Cột = Vai trò &nbsp;|&nbsp; Hàng = Quyền thao tác</small>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    @foreach ($roles as $roleKey => $roleName)
                        @php $roleClass = strtolower($roleName); @endphp
                        <span class="role-badge {{ $roleClass }}">
                            <i class="fa-solid fa-{{ $roleKey === 'Admin' ? 'crown' : ($roleKey === 'Developer' ? 'code' : ($roleKey === 'Designer' ? 'pen-nib' : ($roleKey === 'Tester' ? 'bug' : 'chart-line'))) }}"></i>
                            {{ $roleName }}
                        </span>
                    @endforeach
                </div>
            </div>

            {{-- Bulk action bar --}}
            <div class="bulk-action-bar">
                <span>Chọn nhanh:</span>
                @foreach ($roles as $roleKey => $roleName)
                    @if ($roleKey !== 'Admin')
                        <button type="button" class="btn-bulk-select" data-role="{{ $roleKey }}">
                            <i class="fa-solid fa-check-double me-1"></i>Tất cả {{ $roleName }}
                        </button>
                        <button type="button" class="btn-bulk-deselect" data-role="{{ $roleKey }}">
                            <i class="fa-solid fa-xmark me-1"></i>Bỏ {{ $roleName }}
                        </button>
                    @endif
                @endforeach
            </div>

            <form id="permissionForm">
                @csrf
                {{-- Scroll hint chỉ hiện trên mobile --}}
                <div class="scroll-hint">
                    <i class="fa-solid fa-hand-pointer" style="color:#f59e0b;"></i>
                    <span>Vuốt ngang để xem đủ các vai trò</span>
                    <i class="fa-solid fa-arrow-right" style="color:#f59e0b;"></i>
                </div>
                <div class="perm-table-scroll-wrap">
                <table class="table perm-matrix-table">
                    <thead>
                        <tr>
                            <th>Quyền / Thao tác</th>
                            @foreach ($roles as $roleKey => $roleName)
                                <th class="{{ $roleKey === 'Admin' ? 'col-admin-header' : '' }}" style="min-width: 90px;">
                                    @if ($roleKey === 'Admin')
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            <span style="font-size:0.83rem;font-weight:700;color:#92400e;">{{ $roleName }}</span>
                                            <span class="admin-full-badge"><i class="fa-solid fa-crown me-1"></i>Toàn quyền</span>
                                        </div>
                                    @else
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            <span style="font-size:0.83rem;font-weight:700;">{{ $roleName }}</span>
                                        </div>
                                    @endif
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($permissionDefinitions as $groupKey => $group)
                            {{-- Header nhóm --}}
                            <tr class="section-header">
                                <td colspan="{{ count($roles) + 1 }}">
                                    <i class="fa-solid fa-{{ $groupKey === 'columns' ? 'table-columns' : 'gears' }} me-2"></i>{{ $group['title'] }}
                                </td>
                            </tr>

                            @foreach ($group['items'] as $permKey => $permInfo)
                                <tr>
                                    <td class="perm-label-wrap">
                                        <span class="perm-label">{{ $permInfo['label'] }}</span>
                                        <span class="perm-desc">{{ $permInfo['desc'] }}</span>
                                    </td>
                                    @foreach ($roles as $roleKey => $roleName)
                                        @php
                                            $isAdmin   = $roleKey === 'Admin';
                                            $isChecked = $isAdmin || (!empty($matrix[$roleKey][$permKey]));
                                        @endphp
                                        <td class="{{ $isAdmin ? 'col-admin-cell' : '' }}">
                                            <div class="perm-checkbox-wrap">
                                                @if ($isAdmin)
                                                    {{-- Admin: luôn checked, disabled, ẩn input --}}
                                                    <input type="checkbox" class="perm-checkbox"
                                                        disabled checked
                                                        title="Admin luôn có toàn quyền">
                                                    <input type="hidden" name="permissions[Admin][{{ $permKey }}]" value="1">
                                                @else
                                                    <input type="checkbox" class="perm-checkbox"
                                                        name="permissions[{{ $roleKey }}][{{ $permKey }}]"
                                                        value="1"
                                                        data-role="{{ $roleKey }}"
                                                        {{ $isChecked ? 'checked' : '' }}
                                                        title="{{ $roleName }}: {{ $permInfo['label'] }}">
                                                @endif
                                            </div>
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
                </div>{{-- end perm-table-scroll-wrap --}}

                {{-- Footer actions --}}
                <div class="card-footer bg-white d-flex justify-content-between align-items-center flex-wrap gap-2 px-4 py-3">
                    <div class="text-muted" style="font-size:0.82rem;">
                        <i class="fa-solid fa-clock me-1"></i>
                        Thay đổi có hiệu lực ngay sau khi lưu.
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn-reset-perm" id="btnResetDefaults">
                            <i class="fa-solid fa-rotate-left"></i> Khôi phục mặc định
                        </button>
                        <button type="button" class="btn-save-perm" id="btnSavePerm">
                            <span class="spinner-border spinner-border-sm d-none" id="saveSpinner" role="status" aria-hidden="true"></span>
                            <i class="fa-solid fa-floppy-disk" id="saveIcon"></i>
                            Lưu phân quyền
                        </button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</main>

{{-- Toast container --}}
<div id="rp-toast-container"></div>

{{-- Confirm reset modal --}}
<div class="modal fade" id="confirmResetModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 420px;">
        <div class="modal-content rounded-3 border-0 shadow">
            <div class="modal-body p-4 text-center">
                <div class="mb-3" style="font-size: 48px; color: #f59e0b;">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
                <h5 class="fw-bold mb-2">Khôi phục mặc định?</h5>
                <p class="text-muted mb-0" style="font-size:0.875rem;">
                    Tất cả cấu hình phân quyền hiện tại sẽ được đặt lại về mặc định ban đầu.
                    Thao tác này không thể hoàn tác.
                </p>
            </div>
            <div class="modal-footer border-0 justify-content-center pb-4 gap-2">
                <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Hủy</button>
                <form action="{{ route('role_permission.reset') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-warning px-4 fw-semibold">
                        <i class="fa-solid fa-rotate-left me-1"></i> Khôi phục
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function () {

    // ===== TOAST =====
    function showRpToast(type, title, msg) {
        var icons = { success: 'fa-circle-check', error: 'fa-circle-xmark', warning: 'fa-triangle-exclamation' };
        var $t = $('<div class="rp-toast ' + type + '">' +
            '<i class="fa-solid ' + (icons[type] || 'fa-circle-info') + ' rp-toast-icon"></i>' +
            '<div class="rp-toast-body">' +
                '<div class="rp-toast-title">' + title + '</div>' +
                (msg ? '<div class="rp-toast-msg">' + msg + '</div>' : '') +
            '</div>' +
            '<button class="rp-toast-close">&times;</button>' +
            '<div class="rp-toast-progress"><div class="rp-toast-bar"></div></div>' +
            '</div>');

        $('#rp-toast-container').append($t);
        var timer = setTimeout(function () { dismissRpToast($t); }, 3500);
        $t.find('.rp-toast-close').on('click', function () { clearTimeout(timer); dismissRpToast($t); });
    }

    function dismissRpToast($el) {
        $el.css({ animation: 'rpToastHide 0.3s ease forwards' });
        setTimeout(function () { $el.remove(); }, 300);
    }

    // ===== BULK SELECT / DESELECT =====
    $(document).on('click', '.btn-bulk-select', function () {
        var role = $(this).data('role');
        $('input.perm-checkbox[data-role="' + role + '"]:not(:disabled)').prop('checked', true);
        showRpToast('success', 'Chọn tất cả', 'Đã chọn tất cả quyền cho <strong>' + role + '</strong>');
    });

    $(document).on('click', '.btn-bulk-deselect', function () {
        var role = $(this).data('role');
        $('input.perm-checkbox[data-role="' + role + '"]:not(:disabled)').prop('checked', false);
        showRpToast('warning', 'Bỏ chọn tất cả', 'Đã bỏ tất cả quyền của <strong>' + role + '</strong>');
    });

    // ===== LƯU PHÂN QUYỀN =====
    $('#btnSavePerm').on('click', function () {
        var $btn = $(this);
        $btn.prop('disabled', true);
        $('#saveSpinner').removeClass('d-none');
        $('#saveIcon').addClass('d-none');

        var formData = {};
        // Lấy dữ liệu từ checkbox
        $('#permissionForm input[type="checkbox"]').each(function () {
            var nameAttr = $(this).attr('name');
            if (!nameAttr) return;
            // parse name: permissions[Role][perm_key]
            var match = nameAttr.match(/permissions\[(.+?)\]\[(.+?)\]/);
            if (!match) return;
            var role = match[1];
            var perm = match[2];
            if (!formData['permissions']) formData['permissions'] = {};
            if (!formData['permissions'][role]) formData['permissions'][role] = {};
            if ($(this).is(':checked')) {
                formData['permissions'][role][perm] = '1';
            }
        });
        // Hidden inputs cho Admin
        $('#permissionForm input[type="hidden"]').each(function () {
            var nameAttr = $(this).attr('name');
            if (!nameAttr) return;
            var match = nameAttr.match(/permissions\[(.+?)\]\[(.+?)\]/);
            if (!match) return;
            var role = match[1];
            var perm = match[2];
            if (!formData['permissions']) formData['permissions'] = {};
            if (!formData['permissions'][role]) formData['permissions'][role] = {};
            formData['permissions'][role][perm] = $(this).val();
        });

        $.ajax({
            url: "{{ route('role_permission.update') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                permissions: formData['permissions'] || {}
            },
            success: function (response) {
                if (response.success) {
                    showRpToast('success', 'Đã lưu thành công!', response.message || 'Cấu hình phân quyền đã được cập nhật.');
                } else {
                    showRpToast('error', 'Lỗi!', response.message || 'Có lỗi xảy ra khi lưu.');
                }
            },
            error: function (xhr) {
                var errMsg = 'Không thể kết nối máy chủ.';
                try { errMsg = JSON.parse(xhr.responseText).message || errMsg; } catch(e) {}
                showRpToast('error', 'Lỗi!', errMsg);
            },
            complete: function () {
                $btn.prop('disabled', false);
                $('#saveSpinner').addClass('d-none');
                $('#saveIcon').removeClass('d-none');
            }
        });
    });

    // ===== KHÔI PHỤC MẶC ĐỊNH =====
    $('#btnResetDefaults').on('click', function () {
        var modal = new bootstrap.Modal(document.getElementById('confirmResetModal'));
        modal.show();
    });

});
</script>
@endpush
@endsection