@php
    $groupedPermissions = [];
    foreach ($permissions as $value) {
        if (!empty($value->module_name)) {
            $moduleName = $value->module_name;
        } else {

            $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];
            } elseif (count($module) == 4) {
                $moduleName = $module[0] . '-' . $module[1]. '-' . $module[2];
            } elseif (count($module) == 5) {
                $moduleName = $module[0] . '-' . $module[1]. '-' . $module[2]. '-' . $module[3];
            }
        }
        $groupedPermissions[$moduleName][] = $value;
    }

    // Define category groupings
    $officeMasters = [
        'source-of-application', 'soa-subcategory', 'employee-department', 'employee-designation',
        'location', 'qualification', 'grade', 'ctc', 'conveyance-master', 'holiday',
        'shift-type', 'leave-type', 'leave-setting', 'monthly-leave-allocation',
        'mod-of-travel', 'purpose', 'expense-type', 'expense-sub-type',
        'office-expense-type', 'office-expense-sub-type', 'asset', 'asset-category',
        'country', 'courier-company', 'consultancy-type', 'legal-document-type',
        'license-type', 'document-signature', 'bank'
    ];

    $plantMasters = [
        'ticket-category', 'land-type', 'irrigation-source', 'irrigation-system',
        'product-type', 'soil-texture', 'size-master', 'vendor-type', 'way-bridge'
    ];
@endphp

@extends('admin.layouts.layouts')

@section('title', 'Edit | Role Permission')

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Role Permission
        </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') }}">Role Permission</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" data-parsley-required
                                        data-parsley-required-message="Please enter name"
                                        value="{{ $role->name }}" />
                                    <span class="text-danger" id="name_error">{{ $errors->first('name') }}</span>
                                </div>
                            </div>
                        </div>

                        {{-- <div class="row">
                            <div class="col-12">
                                <span style="display: flex;">
                                    <label class="form-label" for="permission"><b>Admin Permissions</b> <span class="text-danger">*</span></label>
                                    <span class="text-danger" id="permission_error" style="margin: -5px 0 0px 10px;">{{ $errors->first('permission') }}</span>
                                </span>
                            </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"
                                                                        data-parsley-required-message="Please select any one permission."
                                                                        data-parsley-errors-container='#permission_error'
                                                                        {{ 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">
                            <div class="col-12">
                                <span style="display: flex;">
                                    <label class="form-label" for="permission"><b>Admin Permissions</b> <span class="text-danger">*</span></label>
                                    <span class="text-danger" id="permission_error" style="margin: -5px 0 0px 10px;">{{ $errors->first('permission') }}</span>
                                </span>
                            </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>

                                        {{-- ================= OFFICE MASTER ================= --}}
                                        <tr class="table-primary">
                                            <td colspan="3" class="fw-bold text-center"><h5><b>Office Master</b></h5></td>
                                        </tr>
                                        @foreach ($groupedPermissions as $module => $permissions)
                                            @if (in_array($module, $officeMasters))
                                                <tr>
                                                    <th><input type="checkbox" class="selectModule" data-module="{{ $module }}"></th>
                                                    <th>{{ ucfirst(str_replace('-', ' ', $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 }}"
                                                                            {{ in_array($perm->id, $role_permissions) ? 'checked' : '' }}
                                                                            data-parsley-multiple="permission"
                                                                            data-parsley-required="true"
                                                                            data-parsley-required-message="Please select any one permission."
                                                                            data-parsley-errors-container='#permission_error'>
                                                                        <label for="permission_{{ $perm->name }}" class="form-check-label ml-1">
                                                                            {{ ucwords(str_replace('-', ' ', $perm->name)) }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endif
                                        @endforeach


                                        {{-- ================= PLANT MASTER ================= --}}
                                        <tr>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr class="table-primary">
                                            <td colspan="3" class="fw-bold text-center"><h5><b>Plant Master</b></h5></td>
                                        </tr>
                                        @foreach ($groupedPermissions as $module => $permissions)
                                            @if (in_array($module, $plantMasters))
                                                <tr>
                                                    <th><input type="checkbox" class="selectModule" data-module="{{ $module }}"></th>
                                                    <th>{{ ucfirst(str_replace('-', ' ', $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 }}"
                                                                            {{ in_array($perm->id, $role_permissions) ? 'checked' : '' }}
                                                                            data-parsley-multiple="permission"
                                                                            data-parsley-required="true"
                                                                            data-parsley-required-message="Please select any one permission."
                                                                            data-parsley-errors-container='#permission_error'>
                                                                        <label for="permission_{{ $perm->name }}" class="form-check-label ml-1">
                                                                            {{ ucwords(str_replace('-', ' ', $perm->name)) }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endif
                                        @endforeach


                                        {{-- ================= OTHER MODULES ================= --}}
                                        <tr>
                                            <td colspan="3"></td>
                                        </tr>
                                        <tr class="table-primary">
                                            <td colspan="3" class="fw-bold text-center"><h5><b>Other Modules</b></h5></td>
                                        </tr>
                                        @foreach ($groupedPermissions as $module => $permissions)
                                            @if (!in_array($module, array_merge($officeMasters, $plantMasters)))
                                                <tr>
                                                    <th><input type="checkbox" class="selectModule" data-module="{{ $module }}"></th>
                                                    <th>{{ ucfirst(str_replace('-', ' ', $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 }}"
                                                                            {{ in_array($perm->id, $role_permissions) ? 'checked' : '' }}
                                                                            data-parsley-multiple="permission"
                                                                            data-parsley-required="true"
                                                                            data-parsley-required-message="Please select any one permission."
                                                                            data-parsley-errors-container='#permission_error'>
                                                                        <label for="permission_{{ $perm->name }}" class="form-check-label ml-1">
                                                                            {{ ucwords(str_replace('-', ' ', $perm->name)) }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endif
                                        @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