@extends('layouts.app')

@push('css')
    <style>
        /* Let permission badges wrap instead of forcing the row to scroll
           horizontally (the table itself is text-nowrap). */
        .permissions-cell {
            white-space: normal;
            max-width: 560px;
        }

        /* Swap the "+N more" / "Show less" label based on collapse state. */
        .when-expanded { display: none; }
        [data-bs-toggle="collapse"]:not(.collapsed) .when-collapsed { display: none; }
        [data-bs-toggle="collapse"]:not(.collapsed) .when-expanded { display: inline; }
    </style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="page-header mb-0">Roles Management</h1>
    <a href="{{ route('roles.create') }}" class="btn btn-primary"><i class="fa fa-plus fa-fw"></i> New Role</a>
</div>
<div class="panel panel-inverse border-0">
    <div class="panel-heading">List of roles</div>
    <div class="panel-body">
        <form action="{{ route('sites.index') }}" method="GET" class="row g-3 align-items-center mb-3">
            <div class="col-3">
                <label class="visually-hidden" for="search_by">Site ID</label>
                <input type="text" class="form-control" id="site_id" name="site_id" value="{{ request()->get('site_id') }}" placeholder="Site ID">
            </div>
            <div class="col-3">
                <label class="visually-hidden" for="site_name">Site Name</label>
                <input type="text" class="form-control" id="site_name" name="site_name" value="{{ request()->get('site_name') }}" placeholder="Site Name">
            </div>
            {{-- <div class="col-3">
                <select name="region" id="region" class="form-select" placeholder="Region">
                    <option value="">Region</option>
                    @foreach ($regions as $region)
                        <option value="{{ $region->region_id }}" @selected(request()->get('region') == $region->region_id)>{{ $region->name }}</option>
                    @endforeach
                </select>
            </div> --}}
            <div class="col-3">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('sites.index') }}" class="btn btn-white">Reset</a>
            </div>
        </form>
        <div class="table-responsive mb-3">
            <table id="data-tsable-default" class="table table-hover border text-nowrap align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th width="1%" data-orderable="false">#</th>
                        <th>Name</th>
                        <th>Permission</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    @forelse ($roles as $index => $role)
                        <tr>
                            <td>{{ $roles->firstItem() + $index }}</td>
                            <td>{{ $role->name ?? '-' }}</td>
                            <td class="permissions-cell">
                                @php($perms = $role->permissions)
                                @if($perms->isEmpty())
                                    <span class="text-muted">No permissions</span>
                                @else
                                    @php($limit = 8)
                                    @php($extra = $perms->count() - $limit)
                                    <div class="mb-1">
                                        <span class="badge bg-primary">{{ $perms->count() }} {{ \Illuminate\Support\Str::plural('permission', $perms->count()) }}</span>
                                    </div>
                                    <div class="d-flex flex-wrap gap-1 align-items-start">
                                        @foreach($perms->take($limit) as $entry)
                                            <span class="badge bg-secondary">{{ $entry->name }}</span>
                                        @endforeach

                                        @if($extra > 0)
                                            <button type="button" class="btn btn-xs btn-white collapsed"
                                                    data-bs-toggle="collapse" data-bs-target="#perm{{ $role->id }}"
                                                    aria-expanded="false" aria-controls="perm{{ $role->id }}">
                                                <span class="when-collapsed">+{{ $extra }} more</span>
                                                <span class="when-expanded">Show less</span>
                                            </button>
                                        @endif
                                    </div>

                                    @if($extra > 0)
                                        <div class="collapse mt-1" id="perm{{ $role->id }}">
                                            <div class="d-flex flex-wrap gap-1">
                                                @foreach($perms->slice($limit) as $entry)
                                                    <span class="badge bg-secondary">{{ $entry->name }}</span>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </td>
                            <td class="text-end">
                                <form id="deleteForm" action="{{ route('roles.destroy', $role->id) }}" method="POST">
                                    @method('DELETE')
                                    @csrf
                                    <a href="{{ route('roles.edit', $role->id) }}" class="btn btn-sm btn-white me-1"><i class="fa-solid fa-pen-to-square fa-fw"></i></a>
                                    <button type="submit" id="delete" value="Delete Role"  data-bs-toggle="tooltip" title="Padam" class="btn btn-sm btn-dark"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-center" colspan="5">Tiada data dijumpai</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{  $roles->links() }}
    </div>
</div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).on('click', '#delete', function (e) {
                e.preventDefault();
                var self = $(this);
                Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this record!",
                    icon: "warning",
                    confirmButtonColor: '#276baa',
                    showCancelButton: true,
                    dangerMode: true,
                })
                .then((result) => {
                    if (result.isConfirmed) {
                        self.parents("#deleteForm").submit();
                    }
                });
            });
    </script>
@endpush