@extends('layouts.master')

@section('title', 'Manajemen Role')

@section('styles')
<style>
    .badge-role { font-size: .78rem; letter-spacing: .03em; }
    .role-admin { background: #f0e6ff; color: #7c3aed; border: 1px solid #d4b8fa; }
    .role-default { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
</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">Manajemen Role</p>
            <span class="fs-13 text-muted">Pengaturan &rarr; Manajemen Role</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Role</div>
                    @can('role.create')
                    <button type="button" class="btn btn-primary btn-sm" onclick="openTambah()">
                        <i class="bx bx-plus me-1"></i> Tambah Role
                    </button>
                    @endcan
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center ps-4" style="width:45px">No</th>
                                    <th>Nama Role</th>
                                    <th class="text-center" style="width:110px">Pengguna</th>
                                    <th class="text-center" style="width:110px">Permission</th>
                                    <th class="text-center" style="width:130px">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($roles as $i => $role)
                                <tr>
                                    <td class="text-center ps-4">{{ $i + 1 }}</td>
                                    <td>
                                        <span class="badge badge-role {{ $role->name === 'admin' ? 'role-admin' : 'role-default' }} px-2 py-1">
                                            {{ $role->name }}
                                        </span>
                                        @if($role->name === 'admin')
                                        <span class="ms-2 text-muted" style="font-size:.75rem"><i class="bx bx-shield-alt-2 me-1"></i>Super Admin</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="fw-semibold">{{ $role->user_count }}</span>
                                        <span class="text-muted ms-1" style="font-size:.8rem">pengguna</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="fw-semibold">{{ $role->permissions_count }}</span>
                                        <span class="text-muted ms-1" style="font-size:.8rem">permission</span>
                                    </td>
                                    <td class="text-center">
                                        @can('role.edit')
                                        @if($role->name !== 'admin')
                                        <a href="{{ route('pengaturan.role.edit', $role->id) }}" class="btn btn-warning btn-sm px-2 py-1 me-1" title="Atur Permission">
                                            <i class="bx bx-shield-quarter fs-14"></i>
                                        </a>
                                        @else
                                        <button class="btn btn-secondary btn-sm px-2 py-1 me-1" disabled title="Admin tidak dapat diubah">
                                            <i class="bx bx-shield-alt-2 fs-14"></i>
                                        </button>
                                        @endif
                                        @endcan
                                        @can('role.delete')
                                        @if($role->name !== 'admin')
                                        <button class="btn btn-danger btn-sm px-2 py-1" title="Hapus" onclick="hapus({{ $role->id }}, '{{ $role->name }}')">
                                            <i class="bx bx-trash fs-14"></i>
                                        </button>
                                        @endif
                                        @endcan
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="5" class="text-center text-muted py-4">Belum ada role.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Modal Tambah Role --}}
<div class="modal fade" id="modalTambah" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Tambah Role</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label fw-semibold">Nama Role <span class="text-danger">*</span></label>
                <input type="text" id="inputNamaRole" class="form-control form-control-sm" placeholder="contoh: staf_logistik" maxlength="50"
                       style="text-transform:lowercase">
                <div class="invalid-feedback" id="errNamaRole"></div>
                <div class="form-text">Hanya huruf kecil, angka, dan underscore.</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="simpanRole()">
                    <i class="bx bx-save me-1"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const URL_BASE = '{{ url("pengaturan/role") }}';
const CSRF     = '{{ csrf_token() }}';

function openTambah() {
    $('#inputNamaRole').val('').removeClass('is-invalid');
    $('#errNamaRole').text('');
    new bootstrap.Modal('#modalTambah').show();
}

function simpanRole() {
    const name = $('#inputNamaRole').val().toLowerCase().trim();
    $('#inputNamaRole').val(name).removeClass('is-invalid');
    $('#errNamaRole').text('');

    $.ajax({
        url: URL_BASE,
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: { name },
        success: function (res) {
            if (res.success) {
                bootstrap.Modal.getInstance('#modalTambah').hide();
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false })
                    .then(() => location.reload());
            }
        },
        error: function (xhr) {
            if (xhr.status === 422) {
                const err = xhr.responseJSON.errors?.name?.[0] ?? 'Nama role tidak valid.';
                $('#inputNamaRole').addClass('is-invalid');
                $('#errNamaRole').text(err);
            }
        }
    });
}

function hapus(id, nama) {
    Swal.fire({
        title: `Hapus role "${nama}"?`,
        text: 'Role yang sudah dihapus tidak bisa dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
    }).then(result => {
        if (!result.isConfirmed) return;
        $.ajax({
            url: URL_BASE + '/' + id,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function (res) {
                if (res.success) {
                    Swal.fire({ icon: 'success', title: 'Dihapus', text: res.message, timer: 1500, showConfirmButton: false })
                        .then(() => location.reload());
                }
            },
            error: function (xhr) {
                Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
            }
        });
    });
}
</script>
@endpush