@extends('layouts.app')

<style>
    .badge-info {
        display: inline-block; /* or inline-flex */
        white-space: normal;  /* allow wrapping inside the badge text */
        word-break: break-word; /* break long words */
        max-width: 100%; /* prevent from growing beyond container */
    }

    .badge-container {
        white-space: normal;  /* allow badges to wrap to next line */
        overflow-wrap: break-word;
        max-width: 100%;
    }

</style>

@section('content')
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="main-body">
                    <div class="page-wrapper">
                        <div class="page-header">
                            <div class="page-block">
                                <div class="row align-items-center">
                                    <div class="col-md-12">                                                      
                                        <div class="page-header-title">
                                            <h5 class="m-b-10">Pengurusan Peranan</h5>
                                        </div>
                                        <ul class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="feather icon-home"></i></a></li>
                                            <li class="breadcrumb-item"><a href="#">Peranan</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col">
                                            <h5>Senarai Peranan</h5>
                                        </div>
                                        <div class="col">
                                            <a class="btn btn-primary btn-sm float-right" href="{{ route('peranan.create') }}">Tambah Peranan</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="dt-responsive table-responsive">
                                        <table class="table table-striped table-bordered nowrap">
                                            <thead>
                                                <tr>
                                                    <th>No.</th>
                                                    <th>Nama Peranan</th>
                                                    <th>Senarai Kebenaran</th>
                                                    <th class="text-center">Tindakan</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($peranan as $index => $role)
                                                    <tr>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $role->peranan }}</td>
                                                        <td>
                                                            @if($role->peranan == 'Admin')
                                                                <span class="badge badge-success">Admin - Semua Kebenaran</span>
                                                            @elseif($role->akses->isEmpty())
                                                                <a href="{{ route('peranan.editPermissions', $role->id) }}" class="btn btn-warning btn-sm">Tetapkan Kebenaran</a>
                                                            @else
                                                                <div class="badge-container">
                                                                    @foreach ($role->akses as $akses)
                                                                        @php
                                                                            $actionName = config('optionHandler.actions')[$akses->action_id] ?? 'TIDAK DIKENALI';
                                                                            $moduleName = $akses->module->name ?? 'Modul Tidak Dikenali';
                                                                        @endphp
                                                                        <span class="badge badge-info mb-1" title="Kebenaran">
                                                                            {{ $moduleName }} - {{ $actionName }}
                                                                        </span>
                                                                    @endforeach
                                                                </div>
                                                                <br>
                                                                <a href="{{ route('peranan.editPermissions', $role->id) }}" class="btn btn-warning btn-sm mt-1">
                                                                    Kemaskini Kebenaran
                                                                </a>
                                                            @endif
                                                        </td>
                                                        <td class="text-center">
                                                            @if($role->peranan !== 'Admin')
                                                                <a href="{{ route('peranan.edit', $role->id) }}" title="Edit"><i class="bi bi-pencil-square"></i></a>
                                                                <form action="{{ route('peranan.destroy', $role->id) }}" 
                                                                    method="POST" style="display:inline;">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="text-danger border-0 bg-transparent p-0"  
                                                                            title="Hapus" onclick="return confirm('Adakah anda pasti?')">
                                                                        <i class="bi bi-trash"></i>
                                                                    </button>
                                                                </form>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- /.col-sm-12 -->
                    </div> <!-- /.page-wrapper -->
                </div> <!-- /.main-body -->
            </div> <!-- /.pcoded-inner-content -->
        </div> <!-- /.pcoded-content -->
    </div> <!-- /.pcoded-wrapper -->
</section>
@endsection