@extends('site.layouts.app')

@section('title', 'Detail Role')
@section('stylesheets')
<link href="{{asset('creative/component/bootstrap-fileinput/css/fileinput.min.css')}}" rel="stylesheet">
<link href="{{asset('creative/component/bootstrap-fileinput/themes/explorer-fas/theme.min.css')}}" rel="stylesheet">
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Role</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{route('site.home',['site'=>$site->slug])}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{route('site.role.index',['site'=>$site->slug])}}">Role</a></li>
                    <li class="breadcrumb-item active">Detail Role</li>
                </ol>
            </div>

        </div>
    </div>
</div>


<div class="profile-foreground position-relative mx-n4 mt-n4">
                        <div class="profile-wid-bg">
                            <img src="assets/images/profile-bg.jpg" alt="" class="profile-wid-img" />
                        </div>
</div>
<div class="pt-4 mb-4 mb-lg-3 pb-lg-4 profile-wrapper">
    <div class="row g-4">
        {{-- <div class="col-auto">
            <div class="avatar-lg">
                <img src="assets/images/users/avatar-1.jpg" alt="user-img" class="img-thumbnail rounded-circle" />
            </div>
        </div> --}}
        <!--end col-->
        <div class="col">
            <div class="p-2">
                <h3 class="text-white mb-1">{{$role->display_name}}</h3>
                <p class="text-white text-opacity-75">{{$role->name}}</p>
            </div>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
</div>

<div class="row">
    <div class="col-lg-12">
        <div>
            <div class="d-flex profile-wrapper">
                <!-- Nav tabs -->
                <ul class="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#menu-web" role="tab">
                            <i class="ri-airplay-fill d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Menu Web</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-14" data-bs-toggle="tab" href="#menu-mobile" role="tab">
                            <i class="ri-list-unordered d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Menu Mobile</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Tab panes -->
            <div class="tab-content pt-4 text-muted">
                <div class="tab-pane active" id="menu-web" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Menu WEB</h5>
                            <div class="overlay-wrapper">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th style="text-align:center" width="10">#</th>
                                            <th width="250">Nama Menu</th>
                                            <th width="50" style="text-align:center">Akses</th>
                                            <th width="10" style="text-align:center">Redirect</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                        $no = 1;
                                        @endphp
                                        @foreach($rolemenus as $rolemenu)
                                        <tr>
                                            <td style="text-align:center">{{$no++}}</td>
                                            <td>
                                                @if($rolemenu->parent_id)
                                                &nbsp;&nbsp;&nbsp;&nbsp;{{$rolemenu->menu_name}} <span style="color:red;">{{$rolemenu->menu_description?"(".$rolemenu->menu_description.")":""}}</span>
                                                @else
                                                <b>{{$rolemenu->menu_name}}</b> <span style="color:red;">{{$rolemenu->menu_description?"(".$rolemenu->menu_description.")":""}}</span>
                                                @endif
                                            </td>
                                            <td style="text-align:center">
                                                <div class="form-check-primary">
                                                    <input type="checkbox" value="{{$rolemenu->id}}"
                                                    class="form-check-input updatemenu" @if($rolemenu->role_access == 1) checked @endif
                                                    autocomplete="off"/>
                                                </div>
                                            </td>
                                            <td style="text-align:center">
                                                <input value="{{$rolemenu->id}}" type="radio" @if($rolemenu->redirect_to == 1) checked @endif class="form-check-input redirect_to" name="checkradio"/>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="overlay d-none">
                                    <i class="fa fa-2x fa-sync-alt fa-spin"></i>
                                </div>
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
                <!--end tab-pane-->
                <div class="tab-pane " id="menu-mobile" role="tabpanel">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title mb-3">Menu Mobile</h5>
                            <div class="overlay-wrapper">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th style="text-align:center" width="10">#</th>
                                            <th width="250">Nama Menu</th>
                                            <th width="50" style="text-align:center">Akses</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                        $no = 1;
                                        @endphp
                                        @foreach($rolemenumobiles as $rolemenumobile)
                                        <tr>
                                            <td style="text-align:center">{{$no++}}</td>
                                            <td>
                                                <b>{{$rolemenumobile->menu_alias}}</b> <br>
                                                <small>{{$rolemenumobile->menu_type}}</small>
                                            </td>
                                            <td style="text-align:center">
                                                <div class="form-check-primary">
                                                    <input type="checkbox" value="{{$rolemenumobile->id}}"
                                                    class="form-check-input updatemenumobile" @if($rolemenumobile->role_access == 1) checked @endif
                                                    autocomplete="off"/>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="overlay d-none">
                                    <i class="fa fa-2x fa-sync-alt fa-spin"></i>
                                </div>
                            </div>
                        </div>
                        <!--end card-body-->
                    </div>
                    <!--end card-->
                </div>
                <!--end tab-pane-->
            </div>
            <!--end tab-content-->
        </div>
    </div>
                        <!--end col-->
</div>
<!--end row-->



@endsection

@push('scripts')
<script src="{{asset('creative/component/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('creative/component/bootstrap-fileinput/js/fileinput.min.js')}}"></script>
<script src="{{asset('creative/component/bootstrap-fileinput/themes/explorer-fas/theme.min.js')}}"></script>

<script>
    $(document).ready(function () {
        $('.updatemenu').on('change', function () {
            $.ajax({
                url: "{{url($site->slug.'/rolemenu/update')}}",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: this.value,
                    role_access: this.checked ? 1 : 0
                },
                type: 'POST',
                dataType: 'json',
                beforeSend: function () {
                    $('#menuweb .overlay').removeClass('d-none');
                }
            }).done(function (response) {
                $('#menuweb .overlay').addClass('d-none');
                if (response.status) {
                    Swal.fire({ title: "Success!", text: response.message, icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", showConfirmButton: false, timer: 1000, buttonsStyling: !1 })
                } else {
                    Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                }
                return;

            }).fail(function (response) {
                var response = response.responseJSON;
                $('#menuweb  .overlay').addClass('hidden');
                Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
            })
        });

        $('.redirect_to').on('change', function () {
            // alert('oke');
            $.ajax({
                url: "{{url($site->slug.'/rolemenu/updateredirect')}}",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: this.value,
                    // role_access: this.checked ? 1 : 0
                },
                type: 'POST',
                dataType: 'json',
                beforeSend: function () {
                    $('#menuweb .overlay').removeClass('d-none');
                }
            }).done(function (response) {
                $('#menuweb .overlay').addClass('d-none');
                if (response.status) {
                    Swal.fire({ title: "Success!", text: response.message, icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", showConfirmButton: false, timer: 1000, buttonsStyling: !1 })
                } else {
                    Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                }
                return;

            }).fail(function (response) {
                var response = response.responseJSON;
                $('#menuweb  .overlay').addClass('hidden');
                Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
            })
        });


        $('.updatemenumobile').on('change', function () {
            $.ajax({
                url: "{{url($site->slug.'/rolemenumobile/update')}}",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: this.value,
                    role_access: this.checked ? 1 : 0
                },
                type: 'POST',
                dataType: 'json',
                beforeSend: function () {
                    $('#menuweb .overlay').removeClass('d-none');
                }
            }).done(function (response) {
                $('#menuweb .overlay').addClass('d-none');
                if (response.status) {
                    Swal.fire({ title: "Success!", text: response.message, icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", showConfirmButton: false, timer: 1000, buttonsStyling: !1 })
                } else {
                    Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                }
                return;

            }).fail(function (response) {
                var response = response.responseJSON;
                $('#menuweb  .overlay').addClass('hidden');
                Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
            })
        });
    });

</script>
@endpush