@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Create Role</h5>
                        </div>
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form id="role-create-form" action="{{ route('roles.store') }}" method="POST">
                                @csrf

                                <div class="row mb-30">
                                    <div class="col-md-6">
                                        <div class="form-group mb-0">
                                            <label for="name">Role Name <span class="text-danger">*</span></label>
                                            <input type="text" name="name" id="name" class="form-control"
                                                value="{{ old('name') }}" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="permissions-section">
                                    <div class="d-flex justify-content-between align-items-center flex-wrap mb-15"
                                        style="gap: 10px;">
                                        <div>
                                            <label class="d-block mb-0 fw-500">Permissions</label>
                                            <span class="text-muted fs-13">Choose what users with this role can
                                                access &mdash;
                                                <span id="permission-summary" class="fw-500"></span></span>
                                        </div>
                                        <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
                                            <input type="text" id="permission-search"
                                                class="form-control form-control-sm w-auto"
                                                placeholder="Search permissions...">
                                            <button type="button" id="select-all-permissions"
                                                class="btn btn-sm btn-outline-primary px-15">Select All</button>
                                            <button type="button" id="clear-all-permissions"
                                                class="btn btn-sm btn-outline-secondary px-15">Clear All</button>
                                        </div>
                                    </div>

                                    @php
                                        // Icons for the top-level permission categories.
                                        $categoryIcons = [
                                            'Administrator' => 'users',
                                            'Configuration' => 'settings',
                                            'Main' => 'layout',
                                            'Reporting' => 'bar-chart-2',
                                        ];

                                        // Icons for the sub-categories nested within each category.
                                        $subCategoryIcons = [
                                            'Company' => 'briefcase',
                                            'Customer' => 'user',
                                            'Roles' => 'shield',
                                            'Users' => 'user-check',
                                            'Branch Management' => 'map-pin',
                                            'Gold Price' => 'dollar-sign',
                                            'EKYC' => 'eye',
                                            'Inventory Management' => 'box',
                                            'Spread Management' => 'trending-up',
                                            'Withdrawal' => 'arrow-down-circle',
                                            'Audit Trail' => 'activity',
                                            'Contract' => 'file',
                                            'Transactions' => 'clock',
                                            'Reference Data' => 'database',
                                            'Additional Charges' => 'percent',
                                            'Ledger' => 'book',
                                        ];
                                    @endphp
                                    <div id="permission-groups">
                                        @foreach ($permissionGroups as $category => $subCategories)
                                            <div class="permission-category mb-25" data-category="{{ $category }}">
                                                <div class="permission-category__header">
                                                    <div class="permission-category__title">
                                                        <span data-feather="{{ $categoryIcons[$category] ?? 'grid' }}"
                                                            class="permission-category__icon"></span>
                                                        <span>{{ $category }}</span>
                                                    </div>
                                                    <label class="permission-category__select-all mb-0">
                                                        <input type="checkbox" class="js-category-select-all"
                                                            data-category="{{ $category }}">
                                                        Select all
                                                    </label>
                                                </div>
                                                <div class="row">
                                                    @foreach ($subCategories as $subCategory => $permissions)
                                                        @php $subCategoryKey = $category . '|' . $subCategory; @endphp
                                                        <div class="col-md-4 col-sm-6 mb-20 permission-module-col"
                                                            data-category="{{ $category }}">
                                                            <div class="permission-module">
                                                                <div class="permission-module__header">
                                                                    <div class="permission-module__title">
                                                                        <span
                                                                            data-feather="{{ $subCategoryIcons[$subCategory] ?? 'key' }}"
                                                                            class="permission-module__icon"></span>
                                                                        <span>{{ $subCategory }}</span>
                                                                    </div>
                                                                    <label class="permission-module__select-all mb-0">
                                                                        <input type="checkbox"
                                                                            class="js-module-select-all"
                                                                            data-subcategory-key="{{ $subCategoryKey }}">
                                                                        Select all
                                                                    </label>
                                                                </div>
                                                                <div class="permission-list">
                                                                    @foreach ($permissions as $permission)
                                                                        @php
                                                                            $actionLabel = ucwords(
                                                                                str_replace(
                                                                                    ['_', '-'],
                                                                                    ' ',
                                                                                    \Illuminate\Support\Str::after(
                                                                                        $permission->name,
                                                                                        '.',
                                                                                    ),
                                                                                ),
                                                                            );
                                                                        @endphp
                                                                        <div class="permission-chip">
                                                                            <div class="custom-checkbox">
                                                                                <input type="checkbox"
                                                                                    name="permissions[]"
                                                                                    value="{{ $permission->name }}"
                                                                                    id="permission-{{ $permission->id }}"
                                                                                    class="js-permission-checkbox"
                                                                                    data-category="{{ $category }}"
                                                                                    data-subcategory-key="{{ $subCategoryKey }}"
                                                                                    data-search="{{ strtolower($permission->name . ' ' . $subCategory . ' ' . $category) }}"
                                                                                    {{ in_array($permission->name, old('permissions', [])) ? 'checked' : '' }}>
                                                                                <label
                                                                                    for="permission-{{ $permission->id }}">
                                                                                    <span
                                                                                        class="permission-chip__name">{{ $actionLabel }}</span>
                                                                                    <span
                                                                                        class="permission-chip__key">{{ $permission->name }}</span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <p id="permission-no-results" class="text-center text-muted mt-10"
                                        style="display:none;">No permissions match your search.</p>
                                </div>

                                <div class="d-flex" style="gap: 10px;">
                                    <button type="submit" class="btn btn-primary px-30">Save</button>
                                    <a href="{{ route('roles.index') }}" class="btn btn-light px-30">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .permission-category__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            padding-bottom: 10px;
            margin-bottom: 15px;
            border-bottom: 2px solid #e2e7f1;
        }

        .permission-category__title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 700;
            color: #1b2e4b;
        }

        .permission-category__title .permission-category__icon {
            width: 18px;
            height: 18px;
            color: #19bdb4;
            stroke: #19bdb4;
        }

        .permission-category__select-all {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            font-weight: 500;
            color: #7e8299;
            cursor: pointer;
            user-select: none;
        }

        .permission-category__select-all input {
            cursor: pointer;
        }

        .permission-category.is-hidden {
            display: none;
        }

        .permission-module {
            border: 1px solid #e2e7f1;
            border-radius: 10px;
            background: #fff;
            padding: 16px;
            height: 100%;
        }

        .permission-module__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eef1f5;
        }

        .permission-module__title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #1b2e4b;
        }

        .permission-module__title .permission-module__icon {
            width: 16px;
            height: 16px;
            color: #19bdb4;
            stroke: #19bdb4;
        }

        .permission-module__select-all {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #7e8299;
            cursor: pointer;
            user-select: none;
        }

        .permission-module__select-all input {
            cursor: pointer;
        }

        .permission-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .permission-chip {
            border: 1px solid #e2e7f1;
            border-radius: 8px;
            background: #fff;
            transition: all 0.2s ease;
        }

        .permission-chip:hover {
            border-color: #19bdb4;
            box-shadow: 0 2px 8px rgba(25, 189, 180, 0.12);
        }

        .permission-chip:has(input:checked) {
            border-color: #19bdb4;
            background: rgba(25, 189, 180, 0.08);
        }

        .permission-chip .custom-checkbox input[type=checkbox]+label {
            display: flex !important;
            flex-flow: column nowrap;
            gap: 2px;
            padding: 10px 14px 10px 34px;
            margin: 0;
            cursor: pointer;
        }

        .permission-chip .custom-checkbox input[type=checkbox]+label:after {
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
        }

        .permission-chip .custom-checkbox input[type=checkbox]+label:before {
            left: 20px;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .permission-chip__name {
            font-size: 13.5px;
            font-weight: 500;
            color: #45535f;
        }

        .permission-chip:has(input:checked) .permission-chip__name {
            color: #0a5f5a;
        }

        .permission-chip__key {
            font-size: 11px;
            color: #a4acbb;
            font-family: monospace;
        }

        .permission-module-col.is-hidden {
            display: none;
        }

        .permission-chip.is-hidden {
            display: none;
        }
    </style>
@endsection

@section('scripts')
    <script>
        $(function() {
            var $checkboxes = $('.js-permission-checkbox');
            var $moduleToggles = $('.js-module-select-all');
            var $categoryToggles = $('.js-category-select-all');
            var $summary = $('#permission-summary');
            var $search = $('#permission-search');
            var $noResults = $('#permission-no-results');

            function updateSummary() {
                var total = $checkboxes.length;
                var checked = $checkboxes.filter(':checked').length;
                $summary.text(checked + ' of ' + total + ' selected');
            }

            function updateModuleToggleState(subcategoryKey) {
                var $inModule = $checkboxes.filter('[data-subcategory-key="' + subcategoryKey + '"]');
                var $toggle = $moduleToggles.filter('[data-subcategory-key="' + subcategoryKey + '"]');
                var checkedCount = $inModule.filter(':checked').length;

                $toggle.prop('checked', checkedCount > 0 && checkedCount === $inModule.length);
                $toggle.prop('indeterminate', checkedCount > 0 && checkedCount < $inModule.length);
            }

            function updateCategoryToggleState(category) {
                var $inCategory = $checkboxes.filter('[data-category="' + category + '"]');
                var $toggle = $categoryToggles.filter('[data-category="' + category + '"]');
                var checkedCount = $inCategory.filter(':checked').length;

                $toggle.prop('checked', checkedCount > 0 && checkedCount === $inCategory.length);
                $toggle.prop('indeterminate', checkedCount > 0 && checkedCount < $inCategory.length);
            }

            function refreshAllToggles() {
                $moduleToggles.each(function() {
                    updateModuleToggleState($(this).data('subcategoryKey'));
                });
                $categoryToggles.each(function() {
                    updateCategoryToggleState($(this).data('category'));
                });
            }

            $checkboxes.on('change', function() {
                updateModuleToggleState($(this).data('subcategoryKey'));
                updateCategoryToggleState($(this).data('category'));
                updateSummary();
            });

            $moduleToggles.on('change', function() {
                var subcategoryKey = $(this).data('subcategoryKey');
                var isChecked = $(this).prop('checked');

                $checkboxes.filter('[data-subcategory-key="' + subcategoryKey + '"]').prop('checked', isChecked);
                updateCategoryToggleState($(this).closest('.permission-category').data('category'));
                updateSummary();
            });

            $categoryToggles.on('change', function() {
                var category = $(this).data('category');
                var isChecked = $(this).prop('checked');

                $checkboxes.filter('[data-category="' + category + '"]').prop('checked', isChecked);
                refreshAllToggles();
                updateSummary();
            });

            $('#select-all-permissions').on('click', function() {
                $checkboxes.prop('checked', true);
                refreshAllToggles();
                updateSummary();
            });

            $('#clear-all-permissions').on('click', function() {
                $checkboxes.prop('checked', false);
                refreshAllToggles();
                updateSummary();
            });

            $search.on('keyup', function() {
                var value = $(this).val().toLowerCase().trim();
                var visibleTotal = 0;

                $('.permission-category').each(function() {
                    var $category = $(this);
                    var visibleModulesInCategory = 0;

                    $category.find('.permission-module-col').each(function() {
                        var $col = $(this);
                        var visibleChips = 0;

                        $col.find('.permission-chip').each(function() {
                            var $chip = $(this);
                            var matches = $chip.find('input').data('search').indexOf(value) > -1;

                            $chip.toggleClass('is-hidden', !matches);

                            if (matches) visibleChips++;
                        });

                        $col.toggleClass('is-hidden', visibleChips === 0);

                        if (visibleChips > 0) visibleModulesInCategory++;
                    });

                    $category.toggleClass('is-hidden', visibleModulesInCategory === 0);
                    visibleTotal += visibleModulesInCategory;
                });

                $noResults.toggle(visibleTotal === 0);
            });

            refreshAllToggles();
            updateSummary();

            var form = document.getElementById('role-create-form');

            form.addEventListener('submit', function(e) {
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                e.preventDefault();

                Swal.fire({
                    icon: 'question',
                    title: 'Create this role?',
                    text: 'Please confirm the permissions selected are correct.',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, create',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#19bdb4',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    </script>
@endsection