@extends('adminlte::page')

@section('title', 'Roller')

@section('css')
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="{{ asset('build/assets/datatable-B_fUXaNs.css') }}">
    
    <link rel="stylesheet" href="{{ asset('build/assets/form-CQWj5XmD.css') }}">

    <style>
        .select2-container .select2-selection--single {
            height: calc(2.25rem + 2px) !important;
        }
        .select2-container .select2-selection__rendered {
            line-height: calc(2.25rem + 2px) !important;
        }
    </style>
@endsection


@section('js')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Bootstrap JS (opsiyonel ama layout için gerekebilir) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables Core -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <!-- DataTables Bootstrap 5 Style -->
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script src="{{ asset('build/assets/datatable-RX_jKVpA.js') }}"></script>

    <script src="{{ asset('build/assets/form-SgYMX6OZ.js') }}"></script>

    
@endsection


@section('content')
<div class="container-fluid pt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold">Rol Listesi</h2>
        <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createModal">
            <i class="fas fa-plus"></i> Yeni Rol
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0 table-responsive">
            <table id="rolesTable" class="table table-striped table-hover mb-0 datatable" style="width:100%">
                <thead class="table-success">
                    <tr>
                        <th>Rol Adı</th>
                        <th>Yetkiler</th>
                        <th class="text-center">İşlemler</th>
                    </tr>
                </thead>
                <tbody>

                    @foreach ($roles as $role)
                        <tr>
                            <td class="fw-semibold">{{ $role->name }}</td>
                            <td>
                                @if (!empty($role->grouped_permissions))
                                    @foreach ($role->grouped_permissions as $module => $actions)
                                        <strong>{{ $module }}</strong> –
                                        {{ implode(', ', $actions) }}<br>
                                    @endforeach
                                @else
                                    <span class="text-muted">Yetki atanmadı</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-outline-warning me-1"
                                        data-bs-toggle="modal"
                                        data-bs-target="#editModal{{ $role->id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </td>
                        </tr>

                        {{-- Düzenleme Modalı --}}
                        @include('staff.roles.edit', ['role' => $role])
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection