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

@extends('admin.layouts.layouts')

@section('title', 'Create | 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">Create</li>
            </ol>
        </nav>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <form action="{{ route('roles.store') }}" method="POST" id="role-form" enctype="multipart/form-data">
                    @csrf
                    <div class="card-header">
                        <div class="d-flex justify-content-start align-items-center">
                            <h5 class="mb-0">Create 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-trigger='keyup' data-parsley-required
                                        data-parsley-required-message="Please enter name"
                                        data-parsley-pattern="^[a-zA-Z\s]+$"
                                        data-parsley-pattern-message="Please enter only alphabets"
                                        />
                                    <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">Permissions <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 $permission)
                                                            <div class="col-md-4 mb-2">
                                                                <div
                                                                    class="form-check form-check-inline d-flex align-items-center">
                                                                    <input type="checkbox"
                                                                        id="permission_{{ $permission }}"
                                                                        name="permission[]" value="{{ $permission }}"
                                                                        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'>
                                                                    <label for="permission_{{ $permission }}"
                                                                        class="form-check-label ml-1">
                                                                        {{ ucwords(str_replace('-', ' ', $permission)) }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" id="saveButton" class="btn btn-primary btn-fw">Save</button>
                        <a href="{{ route('roles.index') }}" class="btn btn-light btn-fw">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script>
        $('#role-form').parsley();

        // Global Select All
        $('#selectAll').on('change', function() {
            $('.permission-checkbox, .selectModule').prop('checked', $(this).prop('checked'));
        });

        // Module-wise Select All
        $('.selectModule').on('change', function() {
            let module = $(this).data('module');
            $('.' + module).prop('checked', $(this).prop('checked'));
        });
    </script>
@endsection