@extends('mainlayout.layout')


@section('title')
@endsection

@push('css')
<style>
    .permission-card {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        height: 100%;
        background: #fff;
    }

    .permission-card .card-header {
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        font-weight: 600;
        padding: 0.75rem 1rem;
    }

    .permission-list {
        max-height: 220px;
        overflow-y: auto;
        padding: 0.75rem 1rem;
    }

    .permission-item {
        padding: 0.35rem 0;
        border-bottom: 1px dashed #eef1f4;
    }

    .permission-item:last-child {
        border-bottom: none;
    }
</style>
@endpush


@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-size-18">Add Role</h4>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">

                <form method="POST" action="/roles/add_role">
                    @csrf

                    @php
                    $groupedPermissions = collect($permissions)->groupBy(function ($permission) {
                    $parts = explode('.', $permission->name);
                    return strtoupper(str_replace('_', ' ', $parts[0] ?? 'other'));
                    });
                    $selectedPermissions = old('permissions', []);
                    @endphp

                    <h4 class="card-title mt-4 mb-2 text-uppercase"
                        style="background-color:#f8f8fb;padding:0.5em 0.25em;">Role Details</h4>

                    <div class="row">
                        <div class="col-lg-6 col-md-8">
                            <div class="form-group">
                                <label for="role-name">Role Name</label>
                                <input id="role-name" type="text" class="form-control" name="role"
                                    value="{{ old('role') }}" placeholder="e.g. support-manager" required>
                                @error('role')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <h4 class="card-title mt-4 mb-2 text-uppercase"
                        style="background-color:#f8f8fb;padding:0.5em 0.25em;">Permissions</h4>

                    <div class="row mb-3">
                        <div class="col-lg-5 col-md-8 mb-2">
                            <input type="text" id="permission-search" class="form-control"
                                placeholder="Search permission name">
                        </div>
                        <div class="col-lg-7 col-md-4 mb-2 text-md-right">
                            <button type="button" id="select-all-perms" class="btn btn-sm btn-outline-primary">Select
                                All</button>
                            <button type="button" id="clear-all-perms" class="btn btn-sm btn-outline-secondary">Clear
                                All</button>
                        </div>
                    </div>

                    <div class="row">
                        @foreach($groupedPermissions as $groupName => $groupPermissions)
                        <div class="col-lg-4 col-md-6 mb-3 permission-group" data-group="{{ strtolower($groupName) }}">
                            <div class="permission-card">
                                <div class="card-header d-flex align-items-center justify-content-between">
                                    <span>{{ $groupName }}</span>
                                    <button type="button" class="btn btn-sm btn-link p-0 text-primary group-toggle"
                                        data-group="{{ strtolower($groupName) }}">Toggle</button>
                                </div>
                                <div class="permission-list">
                                    @foreach($groupPermissions as $permission)
                                    <div class="form-check permission-item" data-label="{{ strtolower($permission->name) }}">
                                        <input class="form-check-input permission-checkbox" type="checkbox"
                                            id="perm-add-{{$permission->id}}" value="{{$permission->name}}"
                                            name="permissions[]" @if(in_array($permission->name,
                                        $selectedPermissions)) checked @endif>
                                        <label class="form-check-label" for="perm-add-{{$permission->id}}">
                                            {{$permission->name}}
                                        </label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <div class="row">
                        <div class="col-lg-3">
                            <button type="submit" class="mt-3 btn btn_blck w-md" style="width:100%;">Add Role</button>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>

@endsection


@push('scripts')
<script src="{{ asset('/web/assets/libs/select2/js/select2.min.js')}}"></script>
<script src="{{ asset('/web/assets/js/pages/form-advanced.init.js')}}"></script>

<script>
    (function() {
        const allCheckboxes = Array.from(document.querySelectorAll('.permission-checkbox'));
        const searchInput = document.getElementById('permission-search');
        const selectAllBtn = document.getElementById('select-all-perms');
        const clearAllBtn = document.getElementById('clear-all-perms');

        if (selectAllBtn) {
            selectAllBtn.addEventListener('click', function() {
                allCheckboxes.forEach(function(checkbox) {
                    if (checkbox.offsetParent !== null) {
                        checkbox.checked = true;
                    }
                });
            });
        }

        if (clearAllBtn) {
            clearAllBtn.addEventListener('click', function() {
                allCheckboxes.forEach(function(checkbox) {
                    checkbox.checked = false;
                });
            });
        }

        document.querySelectorAll('.group-toggle').forEach(function(button) {
            button.addEventListener('click', function() {
                const group = button.getAttribute('data-group');
                const groupElement = document.querySelector('.permission-group[data-group="' + group + '"]');
                if (!groupElement) {
                    return;
                }
                groupElement.querySelectorAll('.permission-checkbox').forEach(function(checkbox) {
                    checkbox.checked = !checkbox.checked;
                });
            });
        });

        if (searchInput) {
            searchInput.addEventListener('input', function() {
                const term = searchInput.value.toLowerCase().trim();
                document.querySelectorAll('.permission-item').forEach(function(item) {
                    const label = item.getAttribute('data-label') || '';
                    item.style.display = label.indexOf(term) > -1 ? '' : 'none';
                });
            });
        }
    })();
</script>
@endpush