@extends('layouts.back-end.body')
@section('content')
    <style>
        .form-check-label {
            color: black !important;
        }

        .permission-title {
            text-align: center;
            margin-bottom: 1.5rem;
            padding: 10px;
        }
    </style>
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <div class="row g-3 align-items-center justify-content-between">
                <div class="col-auto">
                    <h1 class="app-page-title"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                            fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
                            <path
                                d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z" />
                        </svg> <span class="sub-navicate">{{ __('message.role') }} <svg xmlns="http://www.w3.org/2000/svg"
                                width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right"
                                viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" />
                                <path fill-rule="evenodd"
                                    d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" />
                            </svg> @if($title) {{ __('message.new') }} @endif </h1></span>
                </div>
            </div>
            <form class="form-horizontal" id="form-role" method="POST"
                action="{{ !isset($role) ? route('roles.store') : route('roles.update', $role['id']) }}"
                enctype="multipart/form-data">
                @csrf
                @if (isset($role))
                    <input name="_method" type="hidden" value="PUT">
                    <input type="hidden" name="id" value="{{ isset($role['id']) ? $role['id'] : 0 }}">
                @endif
                <div class="app-card app-card-notification shadow-sm mb-4">
                    <div class="app-card-body p-4 input-p-4">
                        <div class="col-lg-12 col-md-12 col-sm-12 row middle-decoration slide-padding"
                            style="text-align:left;padding: 15px 45px;">
                            <label class="permission-title">
                                <h4>{{ __('message.permissions') }}</h4>
                            </label>

                            <div class="col-lg-1 col-md-1 col-sm-4 col-2"
                                style="padding: 0px 0px !important;text-align:left !important;padding-top: 8px !important;">
                                <label>{{ __('message.name') }}<span class="red">*</span>:</label>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-8 col-10" style="padding: 0px 0px !important;">
                                <input type="text" id="role" style="margin-bottom: 0.6rem;"
                                    class="form-control require-input" name="name"
                                    value="{{ isset($role['name']) ? $role['name'] : '' }}" placeholder="{{ __('message.please input') }}">
                            </div>
                            <div class="col-lg-6 col-md-7 col-sm-12 col-12"></div>

                            @foreach ($permission as $v)
                                <div class="form-check mb-3 col-lg-3 col-md-3 col-sm-3" style="border:solid 1px;">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="{!! $v->id !!}"
                                            name="permission[]" style="margin-left: -20px;" />{!! $v->name !!}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="btn-save-change">
                    <button type="submit" onclick="return Validation()" class="btn app-btn-primary float-right"><svg
                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-shield-check" viewBox="0 0 16 16">
                            <path
                                d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />
                            <path
                                d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
                        </svg> {{ __('message.save change') }}</button>

                    <button type="button" onclick="redirect_back();" class="btn btn-warning float-right cancel-margin"><svg
                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-arrow-left" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                        </svg> {{ __('message.go back') }}</button>

                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        function Validation() {
            var role = document.getElementById("role");
            if (role.value == "") {
                //If the "Please Select" option is selected display error.
                alert("{{ __('message.please input') }} {{ __('message.role') }} {{ __('message.name') }}!");
                return false;
            }
            return true;
        }
        // redirect back to listing page
        function redirect_back() {
            location.href = '{{ url('/admin/roles') }}';
        }
        $(document).ready(function() {
            // Edit role permission
            var rolePermissions = '{!! isset($rolePermissions) ? $rolePermissions : json_encode([]) !!}';
            var edit_role = JSON.parse(rolePermissions);
            $('input[type=checkbox]').each(function() {
                if ($(this).val() in edit_role) {
                    $(this).attr('checked', true);
                } else {
                    $(this).attr('checked', false);
                }
            });
        });
    </script>
@endsection