@extends('layouts.app')

@section('title', 'Assign Permission')
 @section('page-title', 'Assign Permission')
@section('content')
    <style>
        input[type="checkbox"].is-invalid {
            outline: 2px solid red;
            box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
        }

        .is-invalid {
            outline: 2px solid red;
            outline-offset: 2px;
        }
    </style>

    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <nav aria-label="breadcrumb">
                            <ol class="mb-2 breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                                <li class="breadcrumb-item"><a href={{ route('admin.roles.index') }}>Role</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Assign Permission</li>
                            </ol>
                        </nav>
                        <div class="mb-5 card">
                            <div class="card-header">
                                <h3 class="card-title">Assign Permissions to <span
                                        class="font-weight-bold">{{ $role->title }}</span></h3>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('admin.role.assign-permission-store', $role->id) }}"
                                    data-id="{{ $role->id }}" method="POST" id="assign-permission-form">
                                    @csrf
                                    @method('POST')
                                    <table class="table" style="width: 80%">
                                        <thead>
                                            <tr>
                                                <th>Permission Group</th>
                                                <th>Permissions</th>
                                            </tr>
                                        </thead>
                                        {{-- @dd($errors) --}}
                                        @php
                                            $sectionNameWithoutSpace = '';
                                        @endphp
                                        <tbody>
                                            @foreach ($groupedPermissions as $section => $sectionPermissions)
                                                @php
                                                    $sectionNameWithoutSpace = str_replace(' ', '', $section);
                                                @endphp
                                                <tr class="mt-5">
                                                    <td style="vertical-align: middle"><b>{{ $section }}</b></td>
                                                    <td>
                                                        <div class="mt-2 mb-3 form-check form-switch">
                                                            <input type="checkbox"
                                                                id="select_all_{{ $sectionNameWithoutSpace }}"
                                                                class="form-check-input select-all-checkbox">
                                                            <label for="select_all_{{ $sectionNameWithoutSpace }}"><strong>Select
                                                                    All</strong></label>
                                                        </div>

                                                        <table class="table table-borderless">
                                                            <colgroup>
                                                                <col style="width: 50%;">
                                                                <col style="width: 50%;">
                                                            </colgroup>
                                                            <tbody>
                                                                @foreach ($sectionPermissions as $permission)
                                                                    <tr>
                                                                        <td>
                                                                            <div class="form-check form-switch">
                                                                                <input type="checkbox" name="permissions[]"
                                                                                    id="permission_{{ $permission->id }}"
                                                                                    value="{{ $permission->name }}"
                                                                                    class="form-check-input permission_{{ $sectionNameWithoutSpace }}"
                                                                                    @if (in_array($permission->id, $rolePermissionIds)) checked @endif>
                                                                                <label class="form-check-label"
                                                                                    for="permission_{{ $permission->id }}">{{ $permission->alias }}</label>
                                                                                <div class="mt-1 invalid-feedback d-block text-danger small"
                                                                                    id="error-permission-{{ str_replace('.', '-', $permission->name) }}">
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                        <td class="text-start" style="font-size: 14px">
                                                                            {{ $permission->description }}
                                                                        </td>
                                                                    </tr>
                                                                @endforeach

                                                            </tbody>
                                                        </table>

                                                    </td>

                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                    <div class="gap-3 mt-3 d-flex">
                                        <button id="submit" type="submit"
                                            class="btn btn-secondary d-flex align-items-center">Save
                                            Permissions</button>
                                        <a id="cancel" class="btn btn-danger"
                                            href=" {{ route('admin.roles.index') }} ">Cancel</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {
            const form = $('#assign-permission-form');
            const formAction = form.attr('action');

            // "Select All" checkbox handler
            $('.select-all-checkbox').on('click', function() {
                const sectionId = $(this).attr('id').replace('select_all_', '');
                const checkboxes = $('.permission_' + sectionId);
                const isChecked = $(this).prop('checked');

                // Update all checkboxes in this section
                checkboxes.prop('checked', isChecked).trigger('change');
            });

            // Individual permission checkbox handler
            $('input[name="permissions[]"]').on('change', function() {
                const checkbox = $(this);
                const isChecked = checkbox.prop('checked');
                const permissionName = checkbox.val();

                // Prepare form data
                const formData = new FormData();
                formData.append('_token', $('input[name="_token"]').val());
                formData.append('permissions[]', permissionName);

                // Disable during validation
                checkbox.prop('disabled', true);

                $.ajax({
                    url: formAction,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function() {
                        clearPermissionError(checkbox);
                        checkbox.prop('disabled', false);
                    },
                    error: function(xhr) {
                        checkbox.prop('disabled', false);

                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            // Uncheck if validation failed
                            checkbox.prop('checked', false);
                            showPermissionError(checkbox, errors['permissions.0'] ? errors[
                                'permissions.0'][0] : 'Validation failed');
                        } else {
                            checkbox.prop('checked', false);
                            showPermissionError(checkbox, 'Server error occurred');
                        }
                    }
                });
            });

            form.on('submit', function(e) {
                e.preventDefault();
                const submitBtn = $('#submit');

                $('input[type=checkbox]').removeClass('is-invalid');
                $('.invalid-feedback').text('');
                submitBtn.prop('disabled', true);

                $.ajax({
                    url: formAction,
                    type: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        toastr.success(response.message);
                        window.location.href = "{{ route('admin.roles.index') }}";
                    },
                    error: function(xhr) {
                        submitBtn.prop('disabled', false);

                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            toastr.error(xhr.responseJSON.message);

                            Object.keys(errors).forEach(function(field) {
                                if (field.startsWith('permissions.')) {
                                    const index = parseInt(field.split('.')[1]);
                                    const checkbox = $('input[name="permissions[]"]')
                                        .eq(index);
                                    checkbox.addClass('is-invalid');
                                    checkbox.closest('.form-check').find(
                                        '.invalid-feedback').text(errors[field][0]);
                                }
                            });
                        } else if (xhr.status === 403) {
                            toastr.error('Access Denied!');
                        } else {
                            toastr.error("Something went wrong!");
                        }
                    }
                });
            });

            // Utility Functions
            function showPermissionError(checkbox, message) {
                checkbox.addClass('is-invalid');
                const permissionName = checkbox.val();
                const errorDivId = `#error-permission-${permissionName.replace(/\./g, '-')}`;
                $(errorDivId).text(message);
            }

            function clearPermissionError(checkbox) {
                checkbox.removeClass('is-invalid');
                const permissionName = checkbox.val();
                const errorDivId = `#error-permission-${permissionName.replace(/\./g, '-')}`;
                $(errorDivId).text('');
            }
        });
    </script>
@endpush