@extends('layouts.app')

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

@section('content')
<div class="row justify-content-center">
    <div class="col-md-10">
        <form action="{{ route('roles.store') }}" method="POST">
            @csrf
            <div class="card card-primary 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-shield-alt mr-2 text-primary"></i>Define New Enterprise Role
                    </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, Operations Head" value="{{ old('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">
                        @foreach($permissions as $category => $actions)
                        <div class="col-md-6 mb-4">
                            <div class="card h-100 shadow-none border">
                                <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0 font-weight-bold text-dark">{{ $category }}</h6>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input category-toggle" id="cat_{{ Str::slug($category) }}">
                                        <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 }}">
                                        <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">Discard</a>
                    <button type="submit" class="btn btn-primary px-5 shadow-sm">
                        <i class="fas fa-save mr-1"></i> Provision Role
                    </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; }
</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);
        });

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