@extends('layouts.app')

@section('judul', $role->exists ? 'Ubah Role' : 'Tambah Role')
@section('subjudul', $role->exists ? $role->nama_role.' · '.$role->kode_role : 'Role baru beserta permission-nya')

@section('aksi-header')
    <a href="{{ route('role.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Daftar</a>
@endsection

@section('konten')
    @php
        $namaModul = \App\Http\Controllers\RoleController::MODUL;
        $superAdmin = $role->kode_role === \App\Models\Sistem\Pengguna::ROLE_SUPER_ADMIN;
        $terpilih = array_map('intval', old('permissions', $role->exists ? $role->permissions->pluck('id')->all() : []));
    @endphp

    <form method="POST" action="{{ $role->exists ? route('role.update', $role) : route('role.store') }}" class="form-validasi" id="form-role">
        @csrf
        @if ($role->exists) @method('PUT') @endif

        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header"><h3 class="card-title"><i class="fas fa-user-shield mr-1"></i> Identitas role</h3></div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="kode_role">Kode <span class="wajib">*</span></label>
                            <input type="text" id="kode_role" name="kode_role" maxlength="30" value="{{ old('kode_role', $role->kode_role) }}"
                                   class="form-control text-uppercase @error('kode_role') is-invalid @enderror" placeholder="mis. WAKIL_KETUA"
                                   @disabled($role->exists) @required(! $role->exists)>
                            @error('kode_role')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <small class="form-text teks-redup">Huruf kapital, angka, dan garis bawah. Tidak dapat diubah setelah disimpan.</small>
                        </div>
                        <div class="form-group">
                            <label for="nama_role">Nama <span class="wajib">*</span></label>
                            <input type="text" id="nama_role" name="nama_role" maxlength="100" required value="{{ old('nama_role', $role->nama_role) }}"
                                   class="form-control @error('nama_role') is-invalid @enderror" placeholder="mis. Wakil Ketua Yayasan">
                            @error('nama_role')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label for="keterangan">Keterangan</label>
                            <textarea id="keterangan" name="keterangan" rows="2" maxlength="255" class="form-control @error('keterangan') is-invalid @enderror">{{ old('keterangan', $role->keterangan) }}</textarea>
                            @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        @unless ($superAdmin)
                            @unless ($role->exists)
                                <div class="form-group">
                                    <label for="salin-dari">Salin permission dari</label>
                                    <select id="salin-dari" class="custom-select">
                                        <option value="">— Mulai dari kosong —</option>
                                        @foreach ($salinan as $id => $s)
                                            <option value="{{ $id }}">{{ $s['nama'] }}</option>
                                        @endforeach
                                    </select>
                                    <small class="form-text teks-redup">Centang permission diisi sesuai role terpilih, lalu dapat disesuaikan.</small>
                                </div>
                            @endunless
                        @endunless

                        <div class="custom-control custom-checkbox">
                            <input type="hidden" name="sesuaikan_tampilan" value="0">
                            <input type="checkbox" class="custom-control-input" id="sesuaikan_tampilan" name="sesuaikan_tampilan" value="1" @checked(old('sesuaikan_tampilan', ! $role->exists))>
                            <label class="custom-control-label font-weight-normal" for="sesuaikan_tampilan">
                                {{ $role->exists ? 'Atur ulang' : 'Atur' }} menu sidebar & widget dashboard sesuai permission
                                <span class="d-block small teks-redup">{{ $role->exists ? 'Mengganti susunan menu & dashboard role ini yang sudah diatur manual.' : 'Disarankan, agar pengguna role ini langsung melihat menu yang sesuai.' }}</span>
                            </label>
                        </div>
                    </div>
                </div>

                @if ($role->exists)
                    <div class="card">
                        <div class="card-body small">
                            <a href="{{ route('menu.index') }}"><i class="fas fa-bars-staggered mr-1"></i> Atur menu sidebar per role</a><br>
                            <a href="{{ route('dashboard-role.index') }}"><i class="fas fa-gauge mr-1"></i> Atur widget dashboard per role</a>
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title"><i class="fas fa-key mr-1"></i> Permission</h3>
                        <span class="small teks-redup"><span id="jumlah-terpilih">{{ $superAdmin ? 'Semua' : count($terpilih) }}</span> dipilih</span>
                    </div>
                    @if ($superAdmin)
                        <div class="card-body pb-0"><div class="alert alert-light border small mb-3"><i class="fas fa-lock mr-1"></i> Super Admin selalu memegang seluruh permission, termasuk permission baru. Daftar di bawah hanya untuk informasi.</div></div>
                    @endif
                    <div class="card-body pt-2">
                        @foreach ($permissionPerModul as $modul => $daftar)
                            <div class="border rounded mb-3 modul-permission">
                                <div class="d-flex justify-content-between align-items-center px-3 py-2" style="background:#f7f9fc;border-bottom:1px solid var(--ss-garis)">
                                    <span class="fw-semibold">{{ $namaModul[$modul] ?? \Illuminate\Support\Str::headline($modul) }}</span>
                                    @unless ($superAdmin)
                                        <button type="button" class="btn btn-xs btn-link p-0 pilih-modul">Pilih semua / tidak</button>
                                    @endunless
                                </div>
                                <div class="row px-3 pt-2">
                                    @foreach ($daftar as $p)
                                        <div class="col-md-6 mb-2">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input isian-permission" id="perm-{{ $p->id }}" name="permissions[]" value="{{ $p->id }}"
                                                       @checked($superAdmin || in_array($p->id, $terpilih, true)) @disabled($superAdmin)>
                                                <label class="custom-control-label font-weight-normal" for="perm-{{ $p->id }}">
                                                    {{ $p->nama_permission }}
                                                    <span class="d-block small teks-redup"><code>{{ $p->kode_permission }}</code></span>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body d-flex justify-content-between align-items-center flex-wrap" style="gap:.5rem">
                <small class="teks-redup"><i class="fas fa-circle-info mr-1"></i> Perubahan permission langsung berlaku bagi semua pengguna pemegang role ini.</small>
                <button type="submit" class="btn btn-primary"><i class="fas fa-floppy-disk mr-1"></i> {{ $role->exists ? 'Simpan perubahan' : 'Simpan role' }}</button>
            </div>
        </div>
    </form>
@endsection

@push('js')
<script>
$(function () {
    const salinan = {!! json_encode($salinan) !!};
    const hitung = () => $('#jumlah-terpilih').text($('.isian-permission:checked:enabled').length);

    $('.isian-permission').on('change', hitung);
    $('.pilih-modul').on('click', function () {
        const $kotak = $(this).closest('.modul-permission').find('.isian-permission');
        $kotak.prop('checked', $kotak.filter(':checked').length !== $kotak.length);
        hitung();
    });
    $('#salin-dari').on('change', function () {
        const daftar = (salinan[this.value] || { permissions: [] }).permissions;
        $('.isian-permission').each(function () { this.checked = daftar.includes(parseInt(this.value, 10)); });
        hitung();
    });
});
</script>
@endpush