@extends('layouts.app')

@section('title', 'Add Role')

@push('css')
@endpush

@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>

        <x-slot:title>
            <h4 class="card-title">Add New Role</h4>
        </x-slot:title>

        <x-form id="create-role-form">
            <div class="row">

                <input type="hidden" class="form-control form-control-sm" name="guard_name" value="api">

                <div class="mb-10 col-md-10">
                    <x-input-label for="role" :value="__('Role Title')" />
                    <x-text-input name="name" />
                </div>
            </div>

            <div class="row mt-4">
                <div class="col">
                    <div class="form-check">
                        <input class="form-check-input " type="checkbox" id="selectAll">
                        <label class="form-check-label" for="selectAll">
                            All Select
                        </label>
                    </div>
                </div>
            </div>

            @foreach($categorizedPermissions as $category => $permissions)
            <div class="row mt-4">
                <h6 class="px-5">{{ $category }}</h6>
                @foreach($permissions as $permission)
                @if ($loop->first)
                <div class="col-1 p-0">
                    <div class="form-check">
                        <input class="form-check-input category_all_permission_checked" type="checkbox" name=""
                            value="true" id="">
                    </div>
                </div>
                @endif
                <div class="col px-0">
                    <div class="form-check">
                        <input class="form-check-input permission-checkbox" type="checkbox" name="permissions[]"
                            value="{{ $permission['id'] }}" id="permission{{ $permission['id'] }}">
                        <label class="form-check-label" for="permission{{ $permission['id'] }}">
                            {{ ucwords(str_replace([$category], '', str_replace(['index', 'store','destroy'], ['list', 'create','Delete'], $permission['name']))) }}
                        </label>
                    </div>
                </div>
                @endforeach
            </div>
            @endforeach

            <div class="mt-4 text-end">
                <button type="submit" class="btn btn-primary submit">Add Role</button>
            </div>
        </x-form>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    document.getElementById('selectAll').addEventListener('change', function() {
            var checkboxes = document.querySelectorAll('.permission-checkbox');
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = this.checked;
            }, this); // Pass `this` as the second argument to maintain the correct context
        });
</script>
<script>
    // script for checked all the permissions of single category when the category checkbox is checked
    $(document).ready(function() {
        // Listen for changes on the main checkbox
        $(document).on('change', '.category_all_permission_checked', function() {
            const isChecked = $(this).is(':checked');
            
            // Find all checkboxes with class 'permission-checkbox' in the same row
            $(this).closest('.row').find('.permission-checkbox').prop('checked', isChecked);
        });
});
</script>

<script>
    $('form[id="create-role-form"]').validate({
            rules: {
                name: {
                    required: true 
                } 
            },
            messages: {
                role: {
                    name: "role title is required" 
                } 
            },
            errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.after(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid').addClass('is-valid');
        },
        errorClass: 'text-danger',
        submitHandler: function (form) {

                var formData = new FormData(form);
        var $form = $("#create-role-form");
        var $submitButton = $form.find('.submit');

    
        $.ajax({
            url: "{{ route('settings.user-management.roles.store') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            beforeSend: function() {
                $form.css('opacity', '0.5');
                $submitButton.data('original-text', $submitButton.text());
                $submitButton.text('Processing...');
                $form.find('.text-danger').remove();  // Remove previous errors
            }
        })
        .done(function(response) {
                if (response.success === false && response.server === true) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message,
                        showConfirmButton: true,
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        }
                    });
                }

            if (response.success) {
                Swal.fire({
                    title: 'Success!',
                    text: response.message,
                    icon: 'success',
                    showConfirmButton: true
                }).then(() => {
                        window.location.href = "{{ route('settings.user-management.roles.index') }}";
                    form.reset();
                });
            } else if (response.errors) {
                $.each(response.errors, function(key, messages) {
                    let $inputField = $form.find('[name="' + key + '"]');
                    if ($inputField.length) {
                        $inputField.next('.text-danger').remove();
                        $inputField.closest('.form-control').addClass('is-invalid');
                        $.each(messages, function(index, message) {
                            $inputField.after('<div class="text-danger">' + message + '</div>');
                        });
                    } else {
                        console.warn('Input field not found for key:', key);
                    }
                });
            }
        })
        .fail(function(xhr) {
            console.error('An error occurred:', xhr);
        })
        .always(function() {
            $form.css('opacity', '1');
            $submitButton.text($submitButton.data('original-text'));
        });
            },
        });
</script>


@endpush