@php $isEdit = isset($role); @endphp
@extends('layouts.master')

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<style>
.permissions-group {
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:8px 0;
  border-bottom: 1px solid #f2f4f7;
}
.permissions-type {
  width:220px; /* left column width */
}
.type-badge {
  display:inline-block;
  padding:6px 10px;
  border-radius:6px;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.permissions-list {
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.perm-item { display:flex; align-items:center; gap:8px; margin:4px 0; min-width:160px; }
.perm-item input[type="checkbox"] { width:18px; height:18px; }
.select-type-all { margin-left:8px; font-size:11px; color:#828282; cursor:pointer; text-decoration:underline; }
</style>
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}" />
@php
    $breadcrumbs = [
        ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
        ['label' => 'Roles', 'url' => route('admin.roles.index')],
        ['label' => $isEdit ? 'Edit Role' : 'Create Role', 'url' => '#', 'active' => true],
    ];
@endphp
<x-ui.breadcrumb :items="$breadcrumbs" title="{{ $isEdit ? 'Edit Role' : 'Create Role' }}" />

<div class="row">
    <div class="col-xl-12">
        <x-ui.card :cardClass="'overflow-hidden'">
            <form method="POST" action="{{ $isEdit ? route('admin.roles.update', $role->id) : route('admin.roles.store') }}">
                @csrf
                @if($isEdit) @method('PUT') @endif

                <div class="mb-3">
                    <label class="form-label">Role name</label>
                    <input name="name" value="{{ old('name', $role->name ?? '') }}" class="form-control" required>
                </div>

                <h5 class="mb-2">All Permissions</h5>

                <div class="mb-3">
                    @foreach($types as $type)
                        <div class="permissions-group">
                            <div class="permissions-type">
                                <span class="badge bg-primary-transparent type-badge">{{ $type->title ?? $type->name }}</span>
                                <div>
                                    <a href="#" class="select-type-all" data-type="{{ $type->id }}">Select All</a>
                                </div>
                            </div>

                            <div class="permissions-list" data-type="{{ $type->id }}">
                                @forelse($type->permissions as $perm)
                                    @php
                                        $checked = in_array($perm->id, old('permissions', $rolePermissions ?? []));
                                    @endphp
                                    <label class="perm-item">
                                        <input type="checkbox" name="permissions[]" value="{{ $perm->id }}" {{ $checked ? 'checked' : '' }}>
                                        <span>{{ $perm->name }}</span>
                                    </label>
                                @empty
                                    <div class="text-muted">No permissions in this category</div>
                                @endforelse
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    <button class="btn btn-primary">{{ $isEdit ? 'Update' : 'Create' }}</button>
                </div>
            </form>
        </x-ui.card>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function(){
    // Select-all toggle per type
    document.querySelectorAll('.select-type-all').forEach(function(a){
        a.addEventListener('click', function(e){
            e.preventDefault();
            var typeId = this.dataset.type;
            var container = document.querySelector('.permissions-list[data-type="'+typeId+'"]');
            if (!container) return;
            // if any unchecked exists -> check all, else uncheck all
            var checkboxes = Array.from(container.querySelectorAll('input[type="checkbox"]'));
            var anyUnchecked = checkboxes.some(cb => !cb.checked);
            checkboxes.forEach(cb => cb.checked = anyUnchecked);
            // optionally update UI text
            this.textContent = anyUnchecked ? 'Unselect All' : 'Select All';
        });
    });

    // preserve select-all text on page load
    document.querySelectorAll('.select-type-all').forEach(function(a){
        var typeId = a.dataset.type;
        var container = document.querySelector('.permissions-list[data-type="'+typeId+'"]');
        var checkboxes = container ? Array.from(container.querySelectorAll('input[type="checkbox"]')) : [];
        if (checkboxes.length && checkboxes.every(cb => cb.checked)) {
            a.textContent = 'Unselect All';
        } else {
            a.textContent = 'Select All';
        }
    });
});
</script>
@endsection