@extends('layout.app')
@section('title', 'Role Edit')
@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('main')

    <div class="row py-4">
        <div class="card card-body border-0 shadow mb-4">

            <div class="row">
                <div class="col-8 col-xl-8">
                    <h2 class="h5 mb-4">
                        <a href="{{url('orggroup')}}" class="btn btn-outline-warning text-dark d-inline-flex align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" class="icon icon-xs me-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H6M12 5l-7 7 7 7"></path>
                            </svg>
                            Back To Previous Page
                        </a></br></br>
                        ORG Group Update</h2>
                    <div class="user-information" id="role-info">
                        <form>@csrf
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div>
                                        <label for="last_name">Group Name</label>
                                        <input class="form-control" name="name" id="name" type="text" placeholder="Example : ISP" required>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <button class="btn btn-success mt-2 animate-up-2" type="button" onclick="submitData()">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
        <path color="#fff" d="M18 17h-.09c.058-.33.088-.665.09-1v-1h1a1 1 0 0 0 0-2h-1.09a5.97 5.97 0 0 0-.26-1H17a2 2 0 0 0 2-2V8a1 1 0 1 0-2 0v2h-.54a6.239 6.239 0 0 0-.46-.46V8a3.963 3.963 0 0 0-.986-2.6l.693-.693A1 1 0 0 0 16 4V3a1 1 0 1 0-2 0v.586l-.661.661a3.753 3.753 0 0 0-2.678 0L10 3.586V3a1 1 0 1 0-2 0v1a1 1 0 0 0 .293.707l.693.693A3.963 3.963 0 0 0 8 8v1.54a6.239 6.239 0 0 0-.46.46H7V8a1 1 0 0 0-2 0v2a2 2 0 0 0 2 2h-.65a5.97 5.97 0 0 0-.26 1H5a1 1 0 0 0 0 2h1v1a6 6 0 0 0 .09 1H6a2 2 0 0 0-2 2v2a1 1 0 1 0 2 0v-2h.812A6.012 6.012 0 0 0 11 21.907V12a1 1 0 0 1 2 0v9.907A6.011 6.011 0 0 0 17.188 19H18v2a1 1 0 0 0 2 0v-2a2 2 0 0 0-2-2Zm-4-8.65a5.922 5.922 0 0 0-.941-.251l-.111-.017a5.52 5.52 0 0 0-1.9 0l-.111.017A5.925 5.925 0 0 0 10 8.35V8a2 2 0 1 1 4 0v.35Z"/>
    </svg>


@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

    <script>
        showRole();
        showData('{{$id}}');

        function showData(id) {
            $.ajax({
                url: "{{ url('sidemenu') }}" + '/' + id,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    $('#id').val(data.id);
                    $('#name').val(data.name);
                    $('#icon').val(data.icon);
                    $('#url').val(data.url);
                    $('#parent_id').val(data.parent_id);
                },
                error: function (xhr, status, error) {
                    var errorMessage = "Error occurred";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        errorMessage = xhr.responseText;
                    }
                    swal({
                        title: "Oops",
                        text: errorMessage,
                        icon: "error",
                        timer: 1500
                    });
                }
            });
        }
        function submitData() {
            url = "{{ url('sidemenu') }}";
            $.ajax({
                url: url,
                type: "POST",
                data: new FormData($("#role-info form")[0]),
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.statusCode == 200) {
                        Swal.fire({
                            title: "Success!",
                            text: data.statusMsg,
                            icon: "success"
                        });
                        $("#role-info form")[0].reset();
                    }else if (data.statusCode == 204) {
                        showErrors(data.errors);
                    }else{
                        Swal.fire({
                            icon: "error",
                            text: data.statusMsg,
                        });

                    }
                }, error: function (data) {
                    Swal.fire({
                        text: "Internal Server Error",
                        icon: "question"
                    });
                }
            });
            return false;
        };

        function showRole() {
            url = "{{ url('get/ParentMenu') }}";
            $.ajax({
                url: url,
                type: "GET",
                success: function (data) {
                    if (data) {
                        var roles = data;
                        var selectElement = $('#parent_id');
                        selectElement.empty();
                        selectElement.append('<option value="null" selected>No Parent Menu</option>');
                        roles.forEach(function(role) {
                            selectElement.append('<option value="' + role.id + '">' + role.name + '</option>');
                        });
                        selectElement.select2();
                    } else {
                        console.error('Failed to load roles');
                    }
                },
                error: function (err) {
                    console.error('Error loading roles', err);
                }
            });
        }


    </script>
@endsection