@extends('admin.layouts.app')

@section('content')
    <section class="section">
        <div class="card">
            <div class="card-header">
                <h4>Create Role</h4>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ isset($role) ? route('admin.roles.update', $role->id) : route('admin.roles.store') }}">
                    @csrf
                    @if (isset($role))
                    @method('PUT')
                    @endif
                    <div class="form-group">
                        <label class="form-label mb-1"><b>Role Name</b></label>
                        <input type="text" name="name" class="form-control" required value="{{ isset($role) ? $role->name : old('name') }}">
                    </div>

                    <div class="row p-2">
                        <div class="col-md-8">
                            <label class="form-label mb-1"><b>Assign Permissions</b></label>
                        </div>

                        {{-- Global Select All --}}
                        <div class="col-md-4 text-right">
                            <div class="form-check mb-2">
                                <input type="checkbox" class="form-check-input" id="select-all-global">
                                <label class="form-check-label" for="select-all-global"><b>Select All
                                        Permissions</b></label>
                            </div>
                        </div>
                    </div>

                    @foreach ($permissions as $module => $items)
                        <div class="border rounded p-2 mb-2 d-inline-block mr-3">
                            <div>
                                <input type="checkbox" class="form-check-input select-all-module"
                                    data-module="{{ $module }}" id="select-all-{{ $module }}">
                                    <b>{{ ucwords(str_replace('_', ' ', $module)) }}</b>
                            </div>
                            {{-- <label class="form-check-label" for="select-all-{{ $module }}">Select All</label> --}}
                            <div class="d-flex flex-wrap flex-column mt-1">
                                @foreach ($items as $permission)
                                    <label>
                                        <input class="form-check-input permission-checkbox" type="checkbox"
                                            name="permissions[]" value="{{ $permission->name }}"
                                            data-module="{{ $module }}"
                                            {{ (isset($role) && $role->permissions->contains($permission)) ? 'checked' : '' }}>
                                        {{ $permission->formatted_name }}
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach

                    <div class="text-right mt-3">
                        <button type="submit" class="btn btn-primary">{{ isset($role) ? 'Update' : 'Create' }} Role</button>
                        <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('footer-js')
    <script>
        $(document).ready(function() {
            // Global Select All
            $('#select-all-global').on('change', function() {
                const checked = $(this).is(':checked');
                $('.permission-checkbox, .select-all-module').prop('checked', checked);
            });

            // Module-wise Select All
            $('.select-all-module').on('change', function() {
                const module = $(this).data('module');
                const checked = $(this).is(':checked');
                $(`.permission-checkbox[data-module="${module}"]`).prop('checked', checked);
            });
        });
    </script>
@endsection