@extends('backend.layouts.app')

@section('title', @$data['title'])

@section('content')
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '#' => @$data['title'],
    ]) !!}
    <div class="table-content table-basic">

        {{-- Show validation errors --}}
        @if ($errors->any())
            @if ($errors->has('permissions'))
                <div class="alert alert-danger">
                    {{ _trans('common.At least one permission is required') }}
                </div>
            @endif
        @endif

        <div class="card ot-card">
            <div class="card-body p-0">
                <form action="{{ route('roles.update', $data['show']->id) }}" class="form-validate" method="POST">
                    @csrf
                    @method('PATCH')

                    {{-- Update role information --}}
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label class="form-label" for="fv-full-name">{{ _trans('common.Name') }} <span
                                        class="text-danger">*</span>
                                </label>
                                <div class="form-control-wrap">
                                    <input type="text" class="form-control ot-form-control ot-input" id="fv-full-name"
                                        name="name" required placeholder="{{ _trans('common.Name') }}"
                                        value="{{ $data['show']->name }}">
                                </div>
                                @if ($errors->has('name'))
                                    <p class="text-danger">{{ $errors->first('name') }}</p>
                                @endif
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label class="form-label" for="fv-email">{{ _trans('common.Status') }} <span
                                        class="text-danger">*</span></label>
                                <div class="form-control-wrap">
                                    <select name="status_id" id="status_id"
                                        class="form-select select2-input ot-input mb-3 modal_select2" required>
                                        <option value="" disabled>{{ _trans('common.Choose One') }}
                                        </option>
                                        <option value="1" {{ $data['show']->status_id == 1 ? 'selected' : '' }}>
                                            {{ _trans('common.Active') }}
                                        </option>
                                        <option value="4" {{ $data['show']->status_id == 4 ? 'selected' : '' }}>
                                            {{ _trans('common.In-active') }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        @php
                            $upper_roles = json_decode($data['show']->upper_roles) ?? [];
                        @endphp

                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label class="form-label" for="fv-email">
                                    {{ _trans('common.Upper Roles') }}
                                    @if ($data['show']->id > 4)
                                        <span class="text-danger">*</span>
                                    @endif
                                </label>
                                <div class="form-control-wrap">
                                    <select name="upper_roles[]" multiple id="upper_roles"
                                        class="form-select select2-input ot-input mb-3 modal_select2"
                                        @if ($data['show']->id > 4) required @endif>
                                        <option value="" disabled>{{ _trans('common.Choose One') }}</option>
                                        @foreach ($data['roles']->where('id', '!=', $data['show']->id) as $role)
                                            <option value="{{ @$role->id }}"
                                                {{ in_array($role->id, $upper_roles) ? 'selected' : '' }}>
                                                {{ @$role->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Update permission --}}
                    <div class="row">
                        <div class="col-12 mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="check_all_permissions">
                                <label class="form-check-label fw-bold" for="check_all_permissions">
                                    {{ _trans('common.Check all') }}
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 mb-3">
                            {{-- Sidebar Navigation (Tabs) --}}
                            <div class="bg-white shadow-sm rounded p-3">
                                @include('backend.user.employee.permissionTab.menu')
                            </div>
                        </div>
                    
                        <div class="col-lg-9 col-md-8">
                            <div class="permission-container d-flex flex-wrap flex-sm-nowrap align-items-start gap-3">
                                {{-- Permission Data --}}
                                <div class="permission-data tab-content w-100 p-3 bg-white shadow-sm rounded" id="v-pills-tabContent">
                                    @foreach ($data['permissions'] ?? [] as $attribute => $keywords)
                                        @include('backend.user.employee.permissionTab.permission', [
                                            'attribute' => $attribute,
                                            'keywords' => $keywords,
                                            'isFirstItem' => $loop->first ? true : false,
                                        ])
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    

                    <div class="col-lg-12">
                        <div class="col-md-12 text-right mt-3 mb-3 mr-5">
                            <div class="form-group d-flex justify-content-end">
                                @if (hasPermission('role_update'))
                                    <button type="submit" class="btn btn-gradian">{{ _trans('common.Update') }}</button>
                                @endif
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

            </div>
        </section>
    </div>
@endsection
@section('script')
    <script src="{{ global_asset('backend/js/_roles.js') }}"></script>

    <script>
        function toggleCheckboxes(attributeId) {
            const isChecked = $('#' + attributeId).prop('checked');
            $('.' + attributeId + '-child').prop('checked', isChecked);
        }

        // Check all functionality
        $(document).ready(function() {
            // Update parent checkbox state on page load
            updateAllParentCheckboxes();
            updateCheckAllState();

            // Handle child checkbox changes
            $('input[name="permissions[]"]').on('change', function() {
                updateParentCheckbox($(this));
                updateCheckAllState();
            });

            // Handle check all
            $('#check_all_permissions').on('change', function() {
                const isChecked = $(this).is(':checked');
                $('input[name="permissions[]"]').prop('checked', isChecked);
                $('input[type="checkbox"][onchange*="toggleCheckboxes"]').prop('checked', isChecked);
            });
        });

        function updateCheckAllState() {
            const allPermissions = $('input[name="permissions[]"]');
            const checkedPermissions = allPermissions.filter(':checked');
            $('#check_all_permissions').prop('checked', allPermissions.length > 0 && allPermissions.length === checkedPermissions.length);
        }

        function updateParentCheckbox(childCheckbox) {
            const parentClass = childCheckbox.attr('class').match(/([\w-]+)-child/)?.[1];
            if (parentClass) {
                const allChildren = $('.' + parentClass + '-child[name="permissions[]"]');
                const checkedChildren = allChildren.filter(':checked');
                $('#' + parentClass).prop('checked', checkedChildren.length > 0);
            }
        }

        function updateAllParentCheckboxes() {
            $('input[type="checkbox"][onchange*="toggleCheckboxes"]').each(function() {
                const parentId = $(this).attr('id');
                const allChildren = $('.' + parentId + '-child[name="permissions[]"]');
                const checkedChildren = allChildren.filter(':checked');
                $(this).prop('checked', checkedChildren.length > 0);
            });
        }
    </script>
@endsection


@section('style')
    <style>
        .permission-title h4 {
            border-left: 5px solid #0d6efd;
            padding-left: 10px;
        }

        .single-permission {
            border-left: 4px solid #198754;
            padding: 15px;
            transition: all 0.3s ease-in-out;
        }

        .single-permission:hover {
            background-color: #f8f9fa;
            border-color: #20c997;
        }

        .form-check-input:checked {
            background-color: #198754;
            border-color: #198754;
        }

        .permission-container {
    gap: 20px;
}

/* Sidebar */
.bg-white {
    background-color: #ffffff !important;
}

.shadow-sm {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.rounded {
    border-radius: 8px !important;
}

/* Permission Data Box */
.permission-data {
    padding: 20px;
    border-left: 4px solid #0d6efd;
    transition: all 0.3s ease-in-out;
}

.permission-data:hover {
    background-color: #f8f9fa;
    border-color: #198754;
}

/* Spacing */
.p-3 {
    padding: 16px !important;
}

.mb-3 {
    margin-bottom: 16px !important;
}

    </style>
@endsection