@extends('layouts.template.main')

@push('styles')
<style>
    /* ===== ROLE COLUMN VISIBILITY 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; }

        .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; }

        .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; }

        .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ý hiển thị')
@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="eye"></i></div>
                            Quản lý hiển thị cột
                        </h1>
                        <p class="rp-page-subtitle mb-0 ms-1">Cấu hình hiển thị cột trên Project Follow LVT (Android) và Project Follow iOS theo từng vai trò</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 p-3 mb-4" style="background:#eff6ff;">
            <div style="font-size:0.875rem;">
                <strong>Hướng dẫn:</strong> Tick chọn các ô tương ứng để cho phép vai trò đó nhìn thấy cột trên bảng Project Follow.
                Nếu bỏ chọn, cột đó sẽ tự động bị ẩn đi khi tài khoản có vai trò tương ứng truy cập.
                <strong>Admin</strong> luôn hiển thị đầy đủ tất cả các cột.
                Sau khi chỉnh sửa, bấm <strong>"Lưu hiển thị"</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 hiển thị cột</h5>
                    <small class="text-white opacity-75">Cột = Vai trò &nbsp;|&nbsp; Hàng = Cột hiển thị trên bảng</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>Hiện hết {{ $roleName }}
                        </button>
                        <button type="button" class="btn-bulk-deselect" data-role="{{ $roleKey }}">
                            <i class="fa-solid fa-xmark me-1"></i>Ẩn hết {{ $roleName }}
                        </button>
                    @endif
                @endforeach
            </div>

            <form id="visibilityForm">
                @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>Cột hiển thị trên bảng</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 bộ</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 ($columnDefinitions as $groupKey => $group)
                            {{-- Header nhóm --}}
                            <tr class="section-header">
                                <td colspan="{{ count($roles) + 1 }}">
                                    <i class="fa-solid fa-{{ $groupKey === 'basic' ? 'cube' : ($groupKey === 'config' ? 'sliders' : ($groupKey === 'personnel' ? 'users' : 'link')) }} me-2"></i>{{ $group['title'] }}
                                </td>
                            </tr>

                            @foreach ($group['items'] as $colKey => $colInfo)
                                <tr>
                                    <td class="perm-label-wrap">
                                        <span class="perm-label">{{ $colInfo['label'] }}</span>
                                        <span class="perm-desc">{{ $colInfo['desc'] }}</span>
                                    </td>
                                    @foreach ($roles as $roleKey => $roleName)
                                        @php
                                            $isAdmin   = $roleKey === 'Admin';
                                            $isChecked = $isAdmin || (!empty($matrix[$roleKey][$colKey]));
                                        @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 hiển thị toàn bộ cột">
                                                    <input type="hidden" name="columns[Admin][{{ $colKey }}]" value="1">
                                                @else
                                                    <input type="checkbox" class="perm-checkbox"
                                                        name="columns[{{ $roleKey }}][{{ $colKey }}]"
                                                        value="1"
                                                        data-role="{{ $roleKey }}"
                                                        {{ $isChecked ? 'checked' : '' }}
                                                        title="{{ $roleName }}: {{ $colInfo['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 hiển thị 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="btnSaveVis">
                            <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 hiển thị
                        </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 hiển thị mặc định?</h5>
                <p class="text-muted mb-0" style="font-size:0.875rem;">
                    Tất cả cấu hình ẩn/hiện cột hiện tại sẽ được đặt lại về cấu hình 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_column_visibility.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', 'Hiện tất cả', 'Đã bật hiển thị tất cả cột 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', 'Ẩn tất cả', 'Đã tắt hiển thị tất cả cột của <strong>' + role + '</strong>');
    });

    // ===== LƯU HIỂN THỊ CỘT =====
    $('#btnSaveVis').on('click', function () {
        var $btn = $(this);
        $btn.prop('disabled', true);
        $('#saveSpinner').removeClass('d-none');
        $('#saveIcon').addClass('d-none');

        var formData = {};
        // Checkboxes
        $('#visibilityForm input[type="checkbox"]').each(function () {
            var nameAttr = $(this).attr('name');
            if (!nameAttr) return;
            var match = nameAttr.match(/columns\[(.+?)\]\[(.+?)\]/);
            if (!match) return;
            var role = match[1];
            var col = match[2];
            if (!formData['columns']) formData['columns'] = {};
            if (!formData['columns'][role]) formData['columns'][role] = {};
            if ($(this).is(':checked')) {
                formData['columns'][role][col] = '1';
            }
        });
        // Hidden inputs (Admin)
        $('#visibilityForm input[type="hidden"]').each(function () {
            var nameAttr = $(this).attr('name');
            if (!nameAttr) return;
            var match = nameAttr.match(/columns\[(.+?)\]\[(.+?)\]/);
            if (!match) return;
            var role = match[1];
            var col = match[2];
            if (!formData['columns']) formData['columns'] = {};
            if (!formData['columns'][role]) formData['columns'][role] = {};
            formData['columns'][role][col] = $(this).val();
        });

        $.ajax({
            url: "{{ route('role_column_visibility.update') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                columns: formData['columns'] || {}
            },
            success: function (response) {
                if (response.success) {
                    showRpToast('success', 'Đã lưu thành công!', response.message || 'Cấu hình hiển thị cột đã đượ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