@extends('layouts.master')

@section('title', 'access')

@section('content')

    <style>
        .treeview-permissions {
            list-style: none;
            padding-left: 0;
        }

        .permissions-wrapper .title,
        .treeview-permissions-wrapper .title {
            font-weight: 700;
            border-bottom: solid 1px #cacaca;
            padding-bottom: 0.75rem;
            margin-bottom: 1rem;
            display: block;
            text-transform: capitalize;
            font-size: 1rem;
            width: 100%;
        }

        .treeview-permissions li {
            border-bottom-style: dotted !important;
            padding: 8px;
            cursor: pointer;
            width: 100%;
            text-transform: capitalize;
            font-size: 16px;
        }

        .treeview-permissions li:hover {
            background-color: #e4e4e466;
            font-weight: 600;
        }

        .treeview-permissions li.active {
            background-color: #e4e4e4;
            font-weight: 600;

        }

        .treeview-permissions :last-child {
            border: none !important;
        }

        .title-permission {
            background-color: #e4e4e4;
            color: #111111;
            font-size: 16px;
            font-weight: 600;
        }

        .permissions label {
            font-weight: 600;
            font-size: 14px;
        }
    </style>
    <div class="container-fluid" id="App">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <div class="my-auto">
                <h4 class="mb-0">{{ trans('label.access') }}</h4>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">{{ trans('label.homepage') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ trans('label.access') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- End Page Header -->
        <div class="col-xl-12">
            <!-- begin::Body -->
            <div class="card-bodypy-3">
                <div class="row  p-5 gap-4">
                    <div class="col-xl-3 bg-white group-body-form border rounded pt-4 treeview-permissions-wrapper">
                        <div class="title">
                            {{ trans('label.choose_identity') }}

                        </div>
                        <ul class="treeview-permissions ">
                            <li v-for=" item in identities "
                                :class="[{ 'active': item.identity_id == currentIdentity }, 'border-bottom']"
                                @click="chooseIdentity(item)">(( item.name ))</li>
                        </ul>
                    </div>
                    <div class="col-xl-8 bg-white permissions-wrapper group-body-form border rounded pt-3"
                        v-if="dataCreateDefault.length > 0">
                        <div class="title text-justify d-flex ">
                            <span class="align-self-center">{{ trans('label.set_permission') }}</span>
                            <div class="ms-auto">
                                <button class="btn btn-success " @click="updatePermission()">
                                    {{ trans('label.create') }}{{--  <i class="fe fe-plus"></i> --}}</button>
                            </div>
                        </div>
                        <div class="permission-identities" v-for="(data,key) in dataCreateDefault">
                            <div class="title-permission py-2 d-flex bg-red px-2">
                                (( data.name ))
                                <label :for="'permissionall-' + key" class="ms-auto"> All </label>
                                <input class="form-check-input mb-1 ms-2 " :id="'permissionall-' + key" type="checkbox"
                                    value="" @change="checkAll($event,data)" />
                            </div>
                            <div class="permissions d-flex justify-content-between pb-3 pt-2">
                                <div class="form-check form-check-md d-flex align-items-center">
                                    <input v-model="data.canAdd" :id="'permission1-' + key" class="form-check-input mb-1"
                                        name="add" type="checkbox" value="" />
                                    <label :for="'permission1-' + key"> Add</label>
                                </div>
                                <div class="form-check form-check-md d-flex align-items-center px-2">
                                    <input v-model="data.canEdit" :id="'permission2-' + key" class="form-check-input mb-1"
                                        name="edit" type="checkbox" value="" />
                                    <label :for="'permission2-' + key"> Edit</label>
                                </div>
                                <div class="form-check form-check-md d-flex align-items-center px-2">
                                    <input v-model="data.canDelete" :id="'permission3-' + key" class="form-check-input mb-1"
                                        name="delete" type="checkbox" value="" />
                                    <label :for="'permission3-' + key"> Delete</label>
                                </div>
                                <div class="form-check form-check-md d-flex align-items-center px-2">
                                    <input v-model="data.canView" :id="'permission4-' + key" class="form-check-input mb-1"
                                        name="view" type="checkbox" value="" {{--  @change="logitem(dataCreateDefault)" --}} />
                                    <label :for="'permission4-' + key"> View</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-7 bg-white border rounded py-3" style="height: 51px;"
                        v-if="dataCreateDefault.length == 0">
                        <span>Please select identities first.</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('script-footer')

    <!-- Chartjs Chart JS -->
    <!-- <script src="{{ asset('assets/js/index.js') }}"></script> -->

    <script src="{{ asset('assets/js/prism-custom.js') }}"></script>

    <script src="{{ asset('assets/js/custom-switcher.min.js') }}"></script>
    <!-- Custom JS -->
    <script src="{{ asset('assets/js/custom.js') }}"></script>


    <!-- Lodash -->
     



    <script type="text/javascript">
        var CSRF_TOKEN = jQuery('meta[name="csrf-token"]').attr('content');
        var S_HYPEN = "-";
        var options = {
            
            durations: {
                alert: 9000,
                warning: 9000,
                success: 9000,
            },
            icons: {
                enabled: false
            }
        }
        var notifier = new AWN(options);

        new Vue({
            el: '#App',
            data: {
                identities: [],
                permissions: [],
                permission_identities: [],
                dataCreateDefault: [],
                dataCreateDefaultSample: [],
                currentIdentity: 0,
            },
            delimiters: ["((", "))"],
            mounted() {
                const that = this;
                this.loadIdentityDefault();
                this.loadAccessDefault();
            },
            computed: {},

            methods: {
                checkAll(e, item) {
                    item.canAdd = e.target.checked
                    item.canEdit = e.target.checked
                    item.canDelete = e.target.checked
                    item.canView = e.target.checked
                },
                logitem(data) {
                    console.log(data);
                },
                loadIdentityDefault() {
                    let that = this

                    jQuery.ajax({
                        type: 'GET',
                        url: "{{ route('api.identities.list') }}",
                        success: function(data) {

                            that.identities = data.result.data;


                        },
                        error: function(xhr, textStatus, error) {
                            notifier.warning('システムエラーが発生しました。 大変お手数ですが、サイト管理者までご連絡ください');
                        }
                    });

                },

                loadAccessDefault() {
                    let that = this

                    jQuery.ajax({
                        type: 'GET',
                        data: {
                            currentIdentity: that.currentIdentity
                        },
                        url: "{{ route('api.permissions.list') }}?add_access=1",
                        success: function(data) {
                            that.permissions = data.result.data;
                        },
                        error: function(xhr, textStatus, error) {
                            notifier.warning('システムエラーが発生しました。 大変お手数ですが、サイト管理者までご連絡ください');
                        }
                    });
                },


                loadAccesssDefault() {
                    if (this.currentIdentity == 0) {
                        return;
                    }

                    let params = '?currentIdentity=' + this.currentIdentity;
                    const that = this;
                    jQuery.ajax({
                        type: 'GET',
                        url: "{{ route('api.accesss.list') }}" + params,
                        success: function(data) {
                            that.dataCreateDefault = [];
                            that.dataCreateDefaultSample = [];
                            that.Accesss = data.result;

                            that.permissions.map(permissions => {
                                let newAccess = {
                                    identity_id: that.currentIdentity,
                                    permission_id: permissions.permission_id,
                                    name: permissions.name,
                                    canAdd: 0,
                                    canEdit: 0,
                                    canDelete: 0,
                                    canView: 0,
                                }
                                that.Accesss.map(findData => {
                                    if (permissions.permission_id == findData.permission_id) {
                                        newAccess.canAdd = findData.canAdd;
                                        newAccess.canEdit = findData.canEdit;
                                        newAccess.canView = findData.canView;
                                        newAccess.canDelete = findData.canDelete;
                                    }
                                });
                                that.dataCreateDefault.push(newAccess);
                            });
                            that.dataCreateDefaultSample = _.cloneDeep(that.dataCreateDefault)

                        },
                        error: function(xhr, textStatus, error) {
                            notifier.warning('システムエラーが発生しました。 大変お手数ですが、サイト管理者までご連絡ください');
                        }
                    });

                },
                chooseIdentity(item) {
                    if (this.currentIdentity == 0) {
                        this.currentIdentity = item.identity_id;
                        this.loadAccesssDefault();
                        return;
                    }
                    let that = this
                    
                    if(JSON.stringify(that.dataCreateDefault) == JSON.stringify(that.dataCreateDefaultSample)){
                            that.currentIdentity = item.identity_id;
                            console.log(item.identity_id);
                            that.loadAccesssDefault();
                    } else {

                        Swal.fire({
                            title: 'Data Change Confirmation?',
                            text: "Do you want to Save permission before changing identity ?",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#dc3545',
                            cancelButtonColor: '#ffffff',
                            confirmButtonText: 'Change'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                jQuery.ajax({
                                    type: 'POST',
                                    data: {
                                        "items": that.dataCreateDefault
                                    },
                                    headers: {
                                        'X-CSRF-TOKEN': CSRF_TOKEN
                                    },
                                    url: `{{ asset('api/accesses') }}/${that.currentIdentity}`,
                                    success: function(data) {
                                        that.currentIdentity = item.identity_id;
                                        that.loadAccesssDefault();
                                        notifier.success('success');
                                    },
                                    error: function(xhr, textStatus, error) {
    
                                        notifier.warning(error);
                                    }
                                });
                            } else {
                                that.currentIdentity = item.identity_id;
                                console.log(item.identity_id);
                                that.loadAccesssDefault();
                            }
                        })
                    }

                },
                updatePermission() {
                    let that = this
                    Swal.fire({
                        title: 'Data Change Confirmation?',
                        text: "Do you want to Save permission ?",
                        icon: 'info',
                        showCancelButton: true,
                        confirmButtonColor: '#dc3545',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Change'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            jQuery.ajax({
                                type: 'POST',
                                data: {
                                    "items": that.dataCreateDefault
                                },
                                headers: {
                                    'X-CSRF-TOKEN': CSRF_TOKEN
                                },
                                url: `{{ asset('api/accesses') }}/${that.currentIdentity}`,
                                success: function(data) {
                                    notifier.success('success');
                                    that.dataCreateDefaultSample = _.cloneDeep(that.dataCreateDefault)
                                },
                                error: function(xhr, textStatus, error) {
                                    notifier.warning(error);
                                }
                            });
                        }
                    })
                }
            },
        });
    </script>

    @if (session('changePasswordAlert'))
        <script>
            notifier.warning(`{{ session('changePasswordAlert') }}`);
        </script>
    @endif

    @if ($errors->any())
        <script>
            let alertMessage = `
    @foreach ($errors->all() as $error)
    <br>
        {{ $error }}
    @endforeach
    `
            notifier.alert(alertMessage);
        </script>
    @endif

    @if (session('error'))
        <script>
            notifier.alert(`{{ session('error') }}`);
        </script>
    @endif

    @if (session('success'))
        <script>
            notifier.success(`{{ session('success') }}`);
        </script>
    @endif

@endsection