@php
    $groupedPermissions = [];
    foreach ($permissions as $value) {
        $module = explode('-', $value->name);
        if (count($module) == 1) {
            $moduleName = $module[0];
        } elseif (count($module) == 2) {
            $moduleName = $module[0];
        } elseif (count($module) == 3) {
            $moduleName = $module[0] . '-' . $module[1];
        }
        $groupedPermissions[$moduleName][] = $value;
    }
@endphp

@extends('admin.layouts.layouts')

@section('title', 'Edit | Roles')

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Roles
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('roles.index') }}">Roles</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form action="{{ route('roles.update', $role->id) }}" method="POST" id="role-form">
                    @csrf
                    @method('PUT')
                    <div class="card-header">
                        <div class="d-flex justify-content-start align-items-center">
                            <h5 class="mb-0">Edit Role</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="name">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control" placeholder="Enter Role Name"
                                        value="{{ $role->name }}" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <h5>Admin Permissions</h5>
                            </div>
                            <div class="col-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="selectAll"></th>
                                            <th style="width: 30%;">Module</th>
                                            <th>Permissions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($groupedPermissions as $module => $permissions)
                                            <tr>
                                                <th>
                                                    <input type="checkbox" class="selectModule"
                                                        data-module="{{ $module }}">
                                                </th>
                                                <th>
                                                    {{ ucfirst(str_replace('-', ' ', $module)) ?? ucfirst($module) }}
                                                </th>
                                                <td>
                                                    <div class="row">
                                                        @foreach ($permissions as $perm)
                                                            <div class="col-md-4 mb-2">
                                                                <div
                                                                    class="form-check form-check-inline d-flex align-items-center">
                                                                    <input type="checkbox"
                                                                        id="permission_{{ $perm['name'] ?? '' }}"
                                                                        name="permission[]"
                                                                        value="{{ $perm['name'] ?? '' }}"
                                                                        class="form-check-input permission-checkbox {{ $module }}"
                                                                        data-parsley-multiple="permission"
                                                                        data-parsley-required="true"
                                                                        {{ in_array($perm->id, $role_permissions) ? 'checked' : '' }}>
                                                                    <label for="permission_{{ $perm['name'] ?? '' }}"
                                                                        class="form-check-label ml-1">
                                                                        {{ ucwords(str_replace('-', ' ', $perm['name'] ?? '')) }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row mt-5">
                            <div class="col-12">
                                <h5>Mobile App Permissions</h5>
                            </div>
                            <div class="col-12">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" id="selectAllMobile"></th>
                                            <th style="width: 30%;">Module</th>
                                            <th>Permissions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($mobile_permissions as $module => $permissions)
                                            <tr>
                                                <th>
                                                    <input type="checkbox" class="selectMobileModule"
                                                        data-module="{{ $module }}">
                                                </th>
                                                <th>
                                                    {{ ucfirst(str_replace('-', ' ', $module)) ?? ucfirst($module) }}
                                                </th>
                                                <td>
                                                    <div class="row">
                                                        @foreach ($permissions as $permission)
                                                            <div class="col-md-4 mb-2">
                                                                <div
                                                                    class="form-check form-check-inline d-flex align-items-center">
                                                                    <input type="checkbox"
                                                                        id="mobile_permission_{{ $permission['name'] ?? '' }}"
                                                                        name="mobile_permissions[]"
                                                                        value="{{ $permission['name'] ?? '' }}"
                                                                        class="form-check-input mobile-permission-checkbox {{ $module }}"
                                                                        data-parsley-multiple="permission"
                                                                        data-parsley-required="true"
                                                                        {{ in_array($permission->id, $role_mobile_permissions) ? 'checked' : '' }}>
                                                                    <label
                                                                        for="mobile_permission_{{ $permission['name'] ?? '' }}"
                                                                        class="form-check-label ml-1">
                                                                        {{ ucwords(str_replace('-', ' ', $permission['name'] ?? '')) }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" id="updateButton" class="btn btn-primary btn-fw">Update</button>
                        <a href="{{ route('roles.index') }}" class="btn btn-light btn-fw">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script>
        $(document).ready(function() {
            $('#role-form').parsley();
            const selectAllCheckbox = $('#selectAll');
            const moduleCheckboxes = $('.selectModule');
            const permissionCheckboxes = $('.permission-checkbox');
            const selectAllMobileCheckbox = $('#selectAllMobile');
            const mobileModuleCheckboxes = $('.selectMobileModule');
            const mobilePermissionCheckboxes = $('.mobile-permission-checkbox');

            // Function to update module checkboxes
            function updateModuleCheckboxes() {
                moduleCheckboxes.each(function() {
                    let module = $(this).data('module');
                    let modulePermissions = $('.' + module);
                    let allChecked = modulePermissions.length > 0 && modulePermissions.filter(':checked')
                        .length === modulePermissions.length;
                    $(this).prop('checked', allChecked);
                });
            }

            // Function to update mobile module checkboxes
            function updateMobileModuleCheckboxes() {
                mobileModuleCheckboxes.each(function() {
                    let module = $(this).data('module');
                    let modulePermissions = $('.' + module);
                    let allChecked = modulePermissions.length > 0 && modulePermissions.filter(':checked')
                        .length === modulePermissions.length;
                    $(this).prop('checked', allChecked);
                });
            }

            // Function to update global "Select All" checkbox
            function updateSelectAllCheckbox() {
                let allChecked = permissionCheckboxes.length > 0 && permissionCheckboxes.filter(':checked')
                    .length === permissionCheckboxes.length;
                selectAllCheckbox.prop('checked', allChecked);
            }

            // Function to update global "Select All Mobile" checkbox
            function updateSelectAllMobileCheckbox() {
                let allChecked = mobilePermissionCheckboxes.length > 0 && mobilePermissionCheckboxes.filter(
                        ':checked')
                    .length === mobilePermissionCheckboxes.length;
                selectAllMobileCheckbox.prop('checked', allChecked);
            }

            // Global Select All
            selectAllCheckbox.on('change', function() {
                let isChecked = $(this).prop('checked');
                permissionCheckboxes.prop('checked', isChecked);
                moduleCheckboxes.prop('checked', isChecked);
            });

            // Global Select All Mobile
            selectAllMobileCheckbox.on('change', function() {
                let isChecked = $(this).prop('checked');
                mobilePermissionCheckboxes.prop('checked', isChecked);
                mobileModuleCheckboxes.prop('checked', isChecked);
            });

            // Module-wise Select All
            moduleCheckboxes.on('change', function() {
                let module = $(this).data('module');
                $('.' + module).prop('checked', $(this).prop('checked'));
                updateSelectAllCheckbox();
            });

            // Module-wise Select All Mobile
            mobileModuleCheckboxes.on('change', function() {
                let module = $(this).data('module');
                $('.' + module).prop('checked', $(this).prop('checked'));
                updateSelectAllMobileCheckbox();
            });

            // Individual Permission Change
            permissionCheckboxes.on('change', function() {
                updateModuleCheckboxes();
                updateSelectAllCheckbox();
            });

            // Individual Permission Change Mobile
            mobilePermissionCheckboxes.on('change', function() {
                updateMobileModuleCheckboxes();
                updateSelectAllMobileCheckbox();
            });

            // Initial Check for Module and Global Select All
            updateModuleCheckboxes();
            updateSelectAllCheckbox();

            // Initial Check for Mobile Module and Global Select All Mobile
            updateMobileModuleCheckboxes();
            updateSelectAllMobileCheckbox();
        });
    </script>
@endsection