@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    Add Role
@stop

@section('top_import_file')
@stop

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2>Create Role</h2>
</div>
<div class="card radius-10 w-100">
    <div class="card-body">
        <form id="regstr" class="row g-3">
            <div id="error" class="alert alert-danger d-none"></div>
            <div class="col-6">
              <label class="form-label">Role Name</label>
              <input type="text" name="name" class="form-control" placeholder="Enter Role Name" required>
            </div>
            <div class="col-6">
              <label class="form-label">Description</label>
              <input type="text" name="description" class="form-control" placeholder="Enter Description of this role" required>
            </div>
            <div class="col-12">
                <h6>Main Modules</h6>

                @foreach ( $m_and_p as $module )
                    <div class="form-check">
                        <input class="form-check-input module-checkbox" type="checkbox" id="module_{{ $module->code }}">
                        <label class="form-check-label" for="module_{{ $module->code }}">{{ $module->name }}</label>
                    </div>
                    
                    @php
                        $ps = json_decode($module->all_permissions);
                    @endphp

                    <div id="permissions_{{ $module->code }}" class="ms-4">
                        @foreach ($ps as $permission)
                            <div class="form-check">
                                <input class="form-check-input permission-checkbox" type="checkbox" name="permissions[{{ $module->code }}][{{ $permission }}]" value="true" id="{{ $module->code }}_{{ $permission }}">
                                <label class="form-check-label" for="{{ $module->code }}_{{ $permission }}">{{ ucfirst($permission) }}</label>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
            
            <div class="d-flex justify-content-end">
                <div class="d-grid">
                    <button class="btn btn-primary d-none" type="button" id="spinner" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Creating...
                    </button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </div>
        </form>
    </div>
</div>

@stop

@section('bottom-scripts')
    {{-- Add Role Script --}}
    <script>
        $(function() {
            $("#regstr").on("submit", function(e) {
                e.preventDefault();
                
                // Get all checkboxes
                let formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}');

                // Go through each module
                $(".module-checkbox").each(function() {
                    var moduleId = $(this).attr("id").split("_")[1];
                    var permissionsSection = "#permissions_" + moduleId;
                    var checkedPermissions = $(permissionsSection).find(".permission-checkbox:checked");
                    var uncheckedPermissions = $(permissionsSection).find(".permission-checkbox:not(:checked)");

                    // Add checked permissions as true
                    checkedPermissions.each(function() {
                        formdata.append(`permissions[${moduleId}][${$(this).attr("id").split('_')[1]}]`, 'true');
                    });

                    // Add unchecked permissions as false
                    uncheckedPermissions.each(function() {
                        formdata.append(`permissions[${moduleId}][${$(this).attr("id").split('_')[1]}]`, 'false');
                    });
                });

                $.ajax({
                    url: "{{ route('agency.roles.submit') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $(":submit").prop("disabled", true);
                        $(":submit").addClass("d-none");
                        $("#spinner").removeClass("d-none");
                        $("#error").addClass("d-none");
                    },
                    success: function(res) {
                        let obj = res;

                        if (obj.error) {
                            $("#error").html(obj.error);
                            $("#error").removeClass("d-none");
                            $("#spinner").addClass("d-none");
                            $(":submit").removeClass("d-none");
                            toast('error', 'Please check errors')
                            $(window).scrollTop(0);
                        } else if (obj.success) {
                            $("#spinner").addClass("d-none");
                            toast('success', 'Role has been added')
                            setTimeout(function() {
                                window.location.href = "{{ route('agency.roles') }}";
                            }, 1000);
                        } else {
                            $("#spinner").addClass("d-none");
                            $(":submit").prop("disabled", false);
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                        }

                        $(":submit").prop("disabled", false);
                    },
                    error: function(error) {
                        toast('error', 'Please check errors')
                        $("#error").html(error.responseJSON.message || error.responseJSON.error);
                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $(":submit").prop("disabled", false);
                        $(":submit").removeClass("d-none");
                    }
                });
            });

            // Toggle child checkboxes based on the parent checkbox selection
            $(".module-checkbox").on("change", function() {
                var moduleId = $(this).attr("id").split("_")[1];
                var permissionsSection = "#permissions_" + moduleId;

                // Check or uncheck all child checkboxes based on the parent checkbox status
                $(permissionsSection).find(".permission-checkbox").prop("checked", $(this).is(":checked"));
            });
        });
    </script>
@stop