@extends('layouts.master')

@section('title', 'Atur Permission — ' . $role->name)

@section('styles')
<style>
    .perm-table th, .perm-table td { vertical-align: middle; padding: .55rem .75rem; }
    .perm-table thead th { background: #f8f9fa; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
    .perm-table .section-header td { background: #f0e9ff; color: #6d28d9; font-weight: 600; font-size: .82rem; padding: .4rem .75rem; }
    .perm-table .module-label { font-size: .875rem; }
    .perm-table .cb-cell { text-align: center; width: 80px; }
    .perm-table .cb-cell .form-check { display: flex; justify-content: center; margin: 0; }
    .perm-table .cb-cell.disabled-cell { color: #dee2e6; }
    .action-header { min-width: 70px; }
    .check-all-col { cursor: pointer; }
    .check-all-col:hover { color: #7c3aed; }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Atur Permission</p>
            <span class="fs-13 text-muted">Pengaturan &rarr; <a href="{{ route('pengaturan.role.index') }}">Manajemen Role</a> &rarr; {{ $role->name }}</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            <a href="{{ route('pengaturan.role.index') }}" class="btn btn-light btn-sm">
                <i class="bx bx-arrow-back me-1"></i> Kembali
            </a>
            <button type="button" class="btn btn-primary btn-sm" onclick="simpan()">
                <i class="bx bx-save me-1"></i> Simpan Permission
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center gap-3">
                    <div>
                        <span class="badge px-2 py-1" style="background:#f0e6ff;color:#7c3aed;border:1px solid #d4b8fa;font-size:.85rem">
                            {{ $role->name }}
                        </span>
                    </div>
                    <div class="ms-auto d-flex gap-3 align-items-center" style="font-size:.82rem;color:#6c757d">
                        <span><i class="bx bx-check-square me-1"></i><span id="totalChecked">0</span> permission aktif</span>
                        <button type="button" class="btn btn-outline-secondary btn-sm py-0" onclick="checkAll()">Pilih Semua</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm py-0" onclick="uncheckAll()">Hapus Semua</button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered perm-table mb-0" id="permTable">
                            <thead>
                                <tr>
                                    <th style="min-width:180px">Modul</th>
                                    @foreach($allActions as $action)
                                    <th class="text-center action-header check-all-col" onclick="toggleColumn('{{ $action }}')" title="Klik untuk toggle semua {{ $action }}">
                                        {{ ucfirst($action) }}
                                    </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($modules as $section => $items)
                                <tr class="section-header">
                                    <td colspan="{{ count($allActions) + 1 }}">{{ $section }}</td>
                                </tr>
                                @foreach($items as $module)
                                <tr>
                                    <td class="module-label">{{ $module['label'] }}</td>
                                    @foreach($allActions as $action)
                                        @php $perm = $module['key'] . '.' . $action; $hasAction = in_array($action, $module['actions']); @endphp
                                        @if($hasAction)
                                        <td class="cb-cell">
                                            <div class="form-check">
                                                <input class="form-check-input perm-cb" type="checkbox"
                                                    name="permissions[]"
                                                    value="{{ $perm }}"
                                                    data-action="{{ $action }}"
                                                    {{ in_array($perm, $activePerms) ? 'checked' : '' }}>
                                            </div>
                                        </td>
                                        @else
                                        <td class="cb-cell disabled-cell text-center">—</td>
                                        @endif
                                    @endforeach
                                </tr>
                                @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end gap-2">
                    <a href="{{ route('pengaturan.role.index') }}" class="btn btn-light btn-sm">Batal</a>
                    <button type="button" class="btn btn-primary btn-sm" onclick="simpan()">
                        <i class="bx bx-save me-1"></i> Simpan Permission
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
const URL_UPDATE = '{{ route("pengaturan.role.update", $role->id) }}';
const CSRF       = '{{ csrf_token() }}';

function updateCounter() {
    $('#totalChecked').text($('.perm-cb:checked').length);
}

function checkAll()   { $('.perm-cb').prop('checked', true);  updateCounter(); }
function uncheckAll() { $('.perm-cb').prop('checked', false); updateCounter(); }

function toggleColumn(action) {
    const cbs = $(`.perm-cb[data-action="${action}"]`);
    const allChecked = cbs.length === cbs.filter(':checked').length;
    cbs.prop('checked', !allChecked);
    updateCounter();
}

function simpan() {
    const permissions = $('.perm-cb:checked').map(function () { return $(this).val(); }).get();

    $.ajax({
        url: URL_UPDATE,
        method: 'PUT',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: { permissions },
        success: function (res) {
            if (res.success) {
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1800, showConfirmButton: false });
            }
        },
        error: function (xhr) {
            Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
        }
    });
}

$(function () {
    updateCounter();
    $('.perm-cb').on('change', updateCounter);
});
</script>
@endpush