@extends('layouts.app')

@push('action')
    <li class="nav-item ms-3">
        <button type="button" onclick="submit_form()" class="btn btn-success btn-icon" >
        <i class="bi bi-check-circle"></i>Submit</button>
    </li>
@endpush

@section('contents')
    <div class="content ">
        <div class="mb-4">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{url('dashboard')}}">
                            <i class="bi bi-globe2 small me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{url('roles')}}">
                            <i class="bi bi-globe2 small me-2"></i> Roles
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">New Role</li>
                </ol>
            </nav>
        </div>
        <form class="form-label-left input_mask" method="POST" action="" name="frm" id="frm"
              data-parsley-validate="" enctype="multipart/form-data">
            @csrf
            <div class="form-group row" id="form-name">
                <label class="col-form-label col-md-3 col-sm-3 ">Role Name</label>
                <div class="mb-4">
                    <div class="col-md-3">
                         <input type="text" class="form-control pwd " placeholder=" Role Name" id="name"
                           name="name" required="">
                    <span style="color: red" class="help-block"></span>
                    </div>           
                </div>
            </div>
                <div class="form-group row" id="form-email" >
                    <label class="col-form-label col-md-3 col-sm-3 ">  Permissions</label>
                    <div class="mb-4">
                        @foreach($permission as $value)
                            <label>{{ Form::checkbox('permission[]', $value->id, false, array('class' => 'name')) }}
                            {{ $value->name }}</label>
                        <br/>
                        @endforeach
                    </div>
                    
                </div>         
        </form>
    </div>
@endsection
@push('script')
<script>
    function submit_form() {
        var form = $('#frm')[0];
        var formData = new FormData(form);
            $.ajax({
                type: "POST",
                url: "{{route('roles.store')}}",
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    window.location.href = "roles";
                    $("#orders").DataTable().ajax.reload();
                    if (response.status == 200) {
                        swal(response.message, {
                            icon: "success",
                            timer: 2000,
                        });
                    }
                },
                error: function(error){
                    if (error.status === 422) {
                        var data = error.responseJSON.errors;
                        
                        for (let i in data) {
                            showValidationErrors(i, data[i][0])
                        }
                        
                    }
                }
            });
    }
    function showValidationErrors(name, error)
    {
        var input = $("#"+ name);
        input.addClass('is-invalid');
        var group = $("#form-name");

        group.addClass('has-error');
        group.find('.help-block').text(error);
    }
</script>
@endpush