@extends('layouts.app')

@push('action')
    <li class="nav-item ms-3">
        <button type="button" id="btn-update" onclick="submit_form()" class="btn btn-success btn-icon" data-id="{{$role['id']}}" >
        <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">Role Edit</li>
                </ol>
            </nav>
        </div>
           <form class="form-label-left input_mask"  action="{{url('roles').'/'.$role['id']}}" name="frm" id="frm"
                 data-parsley-validate="" enctype="multipart/form-data">
               @csrf
               @method('PUT')
               <div class="form-group row" id="form-up_name">
                   <label class="col-form-label col-md-3 col-sm-3 "> Name</label>
                   <div class="mb-4">
                       <div class="col-md-3 col-sm-3 ">
                       <input type="text" class="form-control pwd " placeholder="Name" id="up_name" value="{{$role['name'] ?? null}}" name="up_name" required="">
                       <span style="color: red" class="help-block"></span>
                   </div>
                   </div>                  
               </div>
                <div class="form-group row" id="form-up_permission">
                   <label class="col-form-label col-md-3 col-sm-3 ">  Permission</label>
                   <div class="mb-4">
                       <div class="col-md-9 col-sm-9 ">
                             @foreach($permission as $value)
                           <input type="checkbox" name="up_permission" id="up_permission" value="{{$value->id}}" {{in_array($value->id, $rolePermissions) ? 'checked' : ''}}>{{ $value->name }}
                       <br/>
                       @endforeach
                       </div>
                   </div>
               </div>           
           </form>
    </div>
@endsection
@push('script')
<script >
    function submit_form() {
        var id = $("#btn-update").data('id');
        var url = $("#frm").attr('action');
        var permission = [];
        $("input[name='up_permission']:checked").each(function(){
                   permission.push(this.value);
               });
        $.ajax({
            url: url,
            data: {
                "_token": '{{ csrf_token() }}',
                "name": $('#up_name').val(),
                permission:permission
            },
            type: 'PUT',
            success: function (response) {
                if (response.status == 200) {

                    swal(response.message, {
                        icon: "success",
                        timer: 2000,
                    });
                    window.location.href = "{{route('roles.index')}}"
                } else {
                    swal(response.message, {
                        icon: "error",
                        timer: 2000,
                    });
                }

            },  error: function (error){
                    if (error.status === 422) {
                        var data = error.responseJSON.errors;
                        for (let i in data) {
                            showValidationErrors(i, data[i][0])
                        }
                    }
                }
        });
    } 
</script>
@endpush