@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('css')
<style>
    .rooms-section{
        box-shadow: none;
        margin-bottom: 10px;
    }
    .rooms-section .card-header{
        border: 1px solid #ccc;
        padding: 5px 10px;
        background-image: linear-gradient(#EEE, #FFF, #EEE);
    }
    .rooms-section .card-header button{
        color: #555;
        margin-top: -13px
    }
    .profile-edit{
        background: #00000063;
        position: relative;
        top: 30px;
        right: 30px;
        border: 1px solid #AAA;
        border-radius: 50%;
        padding: 3px 4px 2px 6px;
    }
    .profile-edit:hover{
        background: #00000090;
        border: 1px solid #000;
    }
    .profile-edit i{
        font-size: 12px;
        color: #FFF;
    }
    .card-header>.card-tools {
        margin-right: -.625rem;
    }
</style>
@endsection

@section('page-content')
<div class="page-content">
    <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="card data-table">
                    <div class="card-header" style="padding: 0.625rem  0rem !important">
                        <label class="card-title"><i class="fa fa-info-circle"></i> {{ __('user.view') }}</label>
                        @if(auth()->user()->hasPermissionTo('Role - Add New Role'))
                            <button type="button" class="btn btn-primary btn-sm pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}" style="margin-{{ app()->getLocale() == 'en' ? 'left' : 'right' }}: 1em;" id="addNewRoleBtn"><i class="fa fa-plus"></i> {{  __('user.add_role')}}</button>
                        @endif
                        <a href="{{ route('AllUser') }}" class="btn btn-primary btn-sm pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}">
                            <i class="fa fa-arrow-circle-left"></i> {{ __('global.back') }}
                        </a>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table class="table" style="margin-bottom: 10px; border-bottom: 3px ridge #EEE; border-top: 3px ridge #EEE;">
                            <tr>
                                <td style="width: 10%">
                                    <label class="custom-label">{{ __('user.name') }}</label>
                                </td>
                                <td style="width: 70%">
                                    {{ $user->name }}
                                </td>
                                <td rowspan="4" class="text-center">
                                    <img id="profile-pic" src="{{ $user->photo != '' ? asset('storage/attachment/employee/photo/'. $user->photo) : asset('assets/img/default-img.png') }}" style="width: 120px; height: 120px; border: 3px double #929292; border-radius: 50%;">
                                    <!-- Update profile icon -->
                                    <label class="btn btn-default btn-sm profile-edit" title="{{ __('user.edit_profile_pic') }}" for="profile-edit" id="select-pic-icon">
                                        <i class="fas fa-camera"></i>
                                    </label>
                                    <label class="btn btn-default btn-sm profile-edit" title="{{ __('user.edit_profile_pic') }}" id="update-pic-icon" style="display: none" onclick="updateProfile()">
                                        <i class="fas fa-check"></i>
                                    </label>
                                    <input type="file" id="profile-edit" name="profile-edit" onchange="showImages(event, 'profile-edit', 'profile-pic'); changeActionButton(this.value);" style="display: none">
                                    <input type="hidden" id="userPicID" value="{{ encryption($user->id) }}">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label class="custom-label">{{ __('user.email') }}</label>
                                </td>
                                <td>
                                    {{ $user->email }}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label class="custom-label">{{ __('user.type') }}</label>
                                </td>
                                <td>
                                    {{ $user->type }}
                                </td>
                            </tr>
                        </table>
                        <div class="row mt-2">
                            <div class="col-12">
                                <input type="hidden" id="userid" value="{{ encryption($user->id) }}">
                                @foreach($user->roles as $role)
                                    <div class="card rooms-section" id="role-{{ $role->name }}">
                                        <div class="card-header pt-3">
                                            <h3 class="card-title pull-{{ app()->getLocale() == 'en' ? 'left' : 'right' }}">
                                                <i class="fa fa-user-shield"></i> {{ __('user.role_name') }}: <span style="border: 1px solid #a1a1a1; background: #fff; padding: 2px 5px; border-radius: 5px;">{{ $role->name }}</span>
                                            </h3>
                                            <div class="card-tools pull-{{ app()->getLocale() == 'en' ? 'right' : 'left' }}">
                                                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                                <button type="button" class="btn btn-tool" title="{{ __('global.delete_role') }}" onclick="confirmModal('{{ $role->name }}')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body p-2" style="border: 1px solid #CCC">
                                            <div class="pb-2">
                                                <ul class="numbered-list" style="padding:revert !important;">
                                                    @foreach($role->permissions as $permission)
                                                        <li>{{ $permission->name }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
</div>

{{-- add new role to user modal --}}
<div class="modal fade custom-modal" id="add-role-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="RoleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 400px">
        <div class="modal-content">
            <div class="modal-body">
                <form id="add-role-form" action="{{ route('user.storeRole') }}" method="POST">
                    @csrf
                    <input type="hidden" name="userid" value="{{ encryption( $user->id )}}">
                    {{-- <div class="card card-dark mb-1"> --}}
                        
                        <div class="modal-header" style="padding: 12px 5px 8px 5px">
                            {{-- <h3 class="modal-title pull-{{ app()->getLocale() == 'en' ? 'left' : 'right' }}"><i class="fa fa-user-shield"></i> {{ __('user.add_role') }}</h3> --}}
                            
                            
                            <h5 class="modal-title" id="confirm-role-modalLabel">
                                <i class="fa fa-user-shield" style="margin-top: -1px"></i> {{ __('user.add_role') }}
                            </h5>
                            <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body p-2">
                            <label class="custom-label">{{ __('user.role') }}</label>
                            <select name="role" id="role" class="form-control">
                                <option value="0">{{ __('global.select') }}</option>
                                @foreach ($availableRoles as $role)
                                    <option value="{{ $role->name }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn btn-primary btn-sm change-status-btn mt-1" onclick="addRole();">
                                <i class="fa fa-check"></i> {{ __('global.confirm') }}
                            </button>
                            <button type="button" class="btn btn-danger btn-sm cancel-btn mt-1" data-bs-dismiss="modal" aria-label="Close">
                                <i class="fa fa-times"></i> {{ __('global.cancel') }}
                            </button>
                        </div>
                    {{-- </div> --}}
                </form>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

{{-- delete role confirm modal --}}
<div class="modal fade custom-modal" id="confirm-role-modal" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="confirm-role-modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 400px">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirm-role-modalLabel">
                    <i class="fa fa-check" style="margin-top: -1px"></i> {{ __('global.confirmTitle'); }}
                </h5>
                <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div style="padding: 10px 20px 5px 20px; font-size: 16px">
                    {{ __('user.delete_role') }}
                </div>
                <div style="padding: 0px 10px 5px 18px;">
                    <button class="btn btn-primary btn-sm change-status-btn" onclick="removeRole();">
                        {{ __('global.confirm') }}
                    </button>
                    <button class="btn btn-danger btn-sm cancel-btn" data-bs-dismiss="modal" aria-label="Close">
                        {{ __('global.cancel') }}
                    </button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
{{-- delete role confirm modal --}}
@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>

    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">
        var roleName = "";
        // add role function
        function addRole()
        {
            var role = $("#role").val();
            if(role == 0){
                $("#role").css("border", "1px solid #F00");
                return;
            }
            $("#add-role-form").submit();
        }
        // open confirm modal
        function confirmModal(role)
        {
            roleName = role;
            $("#role-"+roleName+" .card-header").addClass("custom-danger");
            $('#confirm-role-modal').modal('show');
        }
        function removeRole()
        {
            var userid = $("#userid").val();
            $.ajax({
                url: '{{ route("user.removeRole") }}',
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "roleName": roleName,
                    "userid": userid
                },
                success: function(response) {
                    $("#role-"+roleName).remove();
                    $('.cancel-btn').click();
                    toastr.success(response.success);
                },
                error: function(xhr, status, error) {
                    // Check if the error response contains the 'errors' object
                    if (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.user) {
                        // Display the error message in the Blade view
                        var errorMessage = xhr.responseJSON.errors.user;
                        toastr.error(errorMessage);
                    } else {
                        toastr.error('An error occurred. Please try again later.');
                    }
                }
            });
        }
        $(".cancel-btn").click(function (){
            $("#role-"+roleName+" .card-header").removeClass("custom-danger");
        });

        // change button for update profile
        function changeActionButton(value)
        {
            if(value != ''){
                $("#update-pic-icon").show();
                $("#select-pic-icon").hide();
            }else{
                $("#update-pic-icon").hide();
                $("#select-pic-icon").show();
            }
        }

        // update profile function
        function updateProfile()
        {
            var photoFile = $('#profile-edit')[0].files[0];
            if (photoFile == "") {
                $('#profile-pic').css("border", "2px solid #F00");
                return;
            } else {
                $('#profile-pic').css("border", "");
            }
            var formData = new FormData();
            formData.append('photo', photoFile);
            formData.append('userid', $('#userPicID').val());

            $.ajax({
                url: '{{ route("user.updatepic") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                },
                success: function(response) {
                    $('#profile-edit').val('');
                    $("#update-pic-icon").hide();
                    $("#select-pic-icon").show();
                    toastr.success(response.success);
                },
                error: function(xhr, status, error) {
                    $('#profile-edit').val('');
                    $("#update-pic-icon").hide();
                    $("#select-pic-icon").show();
                    toastr.error('The photo must be a file of type:<br> jpeg, png, jpg, gif.');
                }
            });
        }
        $(document).ready(function(){
            $(document).on("click", "#addNewRoleBtn", function(){
                $('#add-role-modal').modal('show');
            });
        });
    </script>
@endsection