@extends('layouts.app')

@section('judul', 'Dashboard per Role')
@section('subjudul', 'Pilih kartu dan panel dashboard yang tampil untuk setiap role')

@section('konten')
    <div class="alert alert-light border small">
        <i class="fas fa-circle-info mr-1 text-primary"></i>
        Isi setiap widget tetap dibatasi hak lihat pengguna, jadi menampilkan widget tidak membuka data yang tidak berhak dilihat.
        Pengguna dengan beberapa role melihat gabungan widget seluruh role-nya.
    </div>

    <form method="POST" action="{{ route('dashboard-role.update') }}">
        @csrf
        @method('PUT')
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="tabel-widget">
                        <thead>
                        <tr>
                            <th>Widget</th>
                            @foreach ($daftarRole as $r)
                                <th class="text-center" style="min-width:110px">
                                    {{ $r->nama_role }}
                                    <div><button type="button" class="btn btn-xs btn-link p-0 small pilih-kolom" data-role="{{ $r->id }}">semua / tidak</button></div>
                                </th>
                            @endforeach
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($widget as $grup => $daftar)
                            <tr class="table-light"><td colspan="{{ 1 + $daftarRole->count() }}" class="small fw-semibold text-uppercase teks-redup">{{ $grup }}</td></tr>
                            @foreach ($daftar as $kode => $w)
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ $w[0] }}</div>
                                        <div class="small teks-redup">{{ $w[2] }}</div>
                                    </td>
                                    @foreach ($daftarRole as $r)
                                        <td class="text-center align-middle">
                                            <div class="custom-control custom-checkbox d-inline-block">
                                                <input type="checkbox" class="custom-control-input" id="w-{{ $r->id }}-{{ $kode }}" data-role="{{ $r->id }}"
                                                       name="widget[{{ $r->id }}][]" value="{{ $kode }}" @checked(in_array($kode, $terpilih[$r->id] ?? []))>
                                                <label class="custom-control-label" for="w-{{ $r->id }}-{{ $kode }}"><span class="sr-only">{{ $w[0] }} untuk {{ $r->nama_role }}</span></label>
                                            </div>
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-white text-right">
                <button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk mr-1"></i> Simpan</button>
            </div>
        </div>
    </form>
@endsection

@push('js')
<script>
$('.pilih-kolom').on('click', function () {
    const $kotak = $(`#tabel-widget input[data-role="${this.dataset.role}"]`);
    $kotak.prop('checked', $kotak.filter(':checked').length !== $kotak.length);
});
</script>
@endpush