@extends('layouts.app')
@section('title', 'Role Details')

@section('content')
<div class="fixed-action-bar">
    <div class="fw-semibold fixed-nav-title">Role Details</div>
    <div>
        @can('Role create')
        <a href="{{ route('roles.create') }}" data-toggle="tooltip" title="Add">
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"></i>
        </a>
        @endcan
        
        <!-- Save Button -->
        @can('Role save')
        <a href="#" id="saveButton" data-toggle="tooltip" title="Save">
            <i class="fa-regular fa-save fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
        </a>
        @endcan
        
        <!-- Edit Button -->
        @can('Role update')
        <a href="{{ route('roles.edit', $role->id) }}" data-toggle="tooltip" title="Edit">
            <i class="fa-regular fa-edit fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
        </a>
        @endcan
        
        <!-- Delete Button -->
        @can('Role delete')
        <a href="#" onclick="confirmDelete('{{ $role->id }}')" data-toggle="tooltip" title="Delete">
            <i class="fa-regular fa-trash-can fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
        </a>
        @endcan
        
        <!-- Close Button -->
        <a href="{{ route('roles.index') }}" data-toggle="tooltip" title="Close">
        <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"></i>
        </a>
    </div>    
</div>

<div class="row mt-3 mb-5">
    <div class="col-md-6">
        <div class="card">
            <h5 class="card-title">Role Details</h5>
            <div class="card-body">
                <div>
                    <div class="mt-2">
                        <div class="">
                            <label for="roleName" class="form-label required">Role Name</label>
                            <input type="text" class="form-control" id="roleName" name="name" required value="{{ $role->name }}" disabled>
                        </div>
                    </div>
                    <div class="d-md-flex mt-4 justify-content-between">
                        <div>
                            <h6>Allowed Permissions</h6>
                        </div>
                    </div>

                    @php
                        $previousGroup = null;
                        $groupedPermissions = $permissions->groupBy('group');
                    @endphp

                    <div id="all-permissions">
                        @foreach ($groupedPermissions as $groupName => $groupPermissions)
                            @php
                                $groupIndex = $loop->index;
                            @endphp

                            <div class="card mt-2">
                                <div class="card-body bg-white-20">
                                    <div class="d-md-flex justify-content-between">
                                        <div>
                                            {{ ucwords($groupName) }}
                                        </div>
                                    </div>
                                    <div>
                                        @foreach ($groupPermissions as $item)
                                            <div class="form-check ml-3 group-checkboxes-{{ $groupIndex }}">
                                                <input class="form-check-input" type="checkbox" disabled
                                                    value="{{ $item->name }}" name="permissions[]"
                                                    id="{{ $item->id }}"
                                                    @if($role->hasPermissionTo($item->name)) checked @endif>
                                                <label class="form-check-label" for="{{ $item->id }}">
                                                    {{ ucwords($item->name) }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="d-flex justify-content-between">
                <h5 class="card-title">Logs</h5>
                <i class="fa-solid fa-chevron-down fixed-nav-btn logs-collaps p-1 d-inline-flex align-items-center justify-content-center"
                    data-toggle="collapse" data-target="#logsCollapse" aria-expanded="false"
                    aria-controls="logsCollapse"></i>

            </div>
            <div class="card-body collapse" id="logsCollapse">
                <div class="table-responsive">
                    <table class="table mt-3 collapse.show table-striped" id="collapseExample">
                        <thead style="background-color: #eee;">
                            <tr>
                                <th scope="col" width="20%">User</th>
                                <th scope="col" style="width: 50%;">Log</th>
                                <th scope="col">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($rolesLogs as $log)
                            <tr>
                                <td>{{ auth()->user()->first_name }}</td>
                                <td>{{ $log->description  }}</td>
                                <td>{{ $log->created_at->format('Y-m-d - H:i:s') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="mt-2">
                        {{ $rolesLogs->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    function confirmDelete(roleId) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-role-form-' + roleId).submit();
            }
        });
    }
     </script>
@endpush