@extends('layouts.app')

@section('title', 'Refine Permissions')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-10">
        <form action="{{ route('roles.update', $role->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="card card-info card-outline shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h3 class="card-title font-weight-bold text-dark">
                        <i class="fas fa-user-lock mr-2 text-info"></i>Modify Role: {{ $role->name }}
                    </h3>
                </div>
                <div class="card-body">
                    <div class="form-group mb-5">
                        <label class="font-weight-bold h5">Role Identity</label>
                        <input type="text" name="name" class="form-control form-control-lg @error('name') is-invalid @enderror" placeholder="e.g. Finance Manager" value="{{ old('name', $role->name) }}" required>
                        @error('name')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="font-weight-bold text-muted mb-0">Feature-Level Permissions Matrix</h5>
                        <button type="button" class="btn btn-xs btn-outline-secondary" id="selectAll">Select All Features</button>
                    </div>
                    
                    <div class="row">
                        @php $userPerms = is_array($role->permissions) ? $role->permissions : []; @endphp
                        @foreach($permissions as $category => $actions)
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 shadow-none border {{ collect(array_keys($actions))->every(fn($p) => in_array($p, $userPerms)) ? 'border-info bg-light-info' : '' }}">
                                <div class="card-header py-2 d-flex justify-content-between align-items-center {{ collect(array_keys($actions))->every(fn($p) => in_array($p, $userPerms)) ? 'bg-info text-white' : 'bg-light' }}">
                                    <h6 class="mb-0 font-weight-bold">{{ $category }}</h6>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input category-toggle" id="cat_{{ Str::slug($category) }}" {{ collect(array_keys($actions))->every(fn($p) => in_array($p, $userPerms)) ? 'checked' : '' }}>
                                        <label class="custom-control-label small" for="cat_{{ Str::slug($category) }}">Select All</label>
                                    </div>
                                </div>
                                <div class="card-body py-2">
                                    @foreach($actions as $key => $label)
                                    <div class="custom-control custom-checkbox py-2 border-bottom-dashed">
                                        <input class="custom-control-input perm-check" type="checkbox" name="permissions[]" id="perm_{{ Str::slug($key) }}" value="{{ $key }}" {{ in_array($key, $userPerms) ? 'checked' : '' }}>
                                        <label class="custom-control-label w-100 cursor-pointer text-sm" for="perm_{{ Str::slug($key) }}">
                                            {{ $label }}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="card-footer bg-light d-flex justify-content-between">
                    <a href="{{ route('roles.index') }}" class="btn btn-default">Cancel</a>
                    <button type="submit" class="btn btn-info px-5 shadow-sm text-white">
                        <i class="fas fa-save mr-1"></i> Update Permissions
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
    .border-bottom-dashed { border-bottom: 1px dashed #eee; }
    .border-bottom-dashed:last-child { border-bottom: none; }
    .cursor-pointer { cursor: pointer; }
    .text-sm { font-size: 0.9rem; }
    .bg-light-info { background-color: #f0faff !important; }
</style>

@push('scripts')
<script>
    $(document).ready(function() {
        // Toggle Category
        $('.category-toggle').change(function() {
            const isChecked = $(this).prop('checked');
            $(this).closest('.card').find('.perm-check').prop('checked', isChecked);
            
            if(isChecked) {
                $(this).closest('.card').addClass('border-info bg-light-info');
                $(this).closest('.card-header').addClass('bg-info text-white').removeClass('bg-light');
            } else {
                $(this).closest('.card').removeClass('border-info bg-light-info');
                $(this).closest('.card-header').removeClass('bg-info text-white').addClass('bg-light');
            }
        });

        // Global Select All
        $('#selectAll').click(function() {
            const isChecked = $(this).text() === 'Select All Features';
            $('.perm-check, .category-toggle').prop('checked', isChecked).trigger('change');
            $(this).text(isChecked ? 'Deselect All' : 'Select All Features');
        });
    });
</script>
@endpush
@endsection