@extends('layouts.default')
@section('title', 'User Details')
@push('head')
<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="/assets/plugins/select2/dist/js/select2.min.js" defer></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
<script src="/assets/plugins/sweetalert/dist/sweetalert2@11.js" defer></script>

<style>
    /*Custom CSS*/
span {
  transition: color 0.5s ease-in;
}

label:focus-within span {
  color: blue;
}

input {
  display: block;
  width: 100%;
}

label,
select { 
  
  display: block;
  width: 100%;
  max-width: 100%;
}
/*Profile Pic Start*/
.picture-container{
    position: relative;
    cursor: pointer;
    text-align: center;
}
.picture{
    width: 106px;
    height: 106px;
    background-color: #999999;
    border: 4px solid #CCCCCC;
    color: #FFFFFF;
    border-radius: 50%;
    margin: 0px auto;
    overflow: hidden;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}
.picture:hover{
    border-color: #2ca8ff;
}
.picture input[type="file"] {
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
}

.picture-src{
    width: 100%;

}
/*Profile Pic End*/
.form-control:focus, .form-select:focus, .form-check-input:focus, .select2:focus-within{
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
    </style>
@endpush
@php
use App\Http\Controllers\Admin\UserDataTableController;
$ml1=UserDataTableController::getMenuLevel1()->toArray();
@endphp
@section('content')
@php
$rdata=[];
@endphp
@if(!empty($userRoles))
@if(count($userRoles)>0)
@foreach($userRoles as $item_user_roles)
@php
$rdata[]=$item_user_roles->id;
@endphp
@endforeach
@endif
@endif

@php
$pdata=[];
@endphp
@if(!empty($userMenuPermission))
@if(count($userMenuPermission)>0)
@foreach($userMenuPermission as $item_user_menus)
@php
$pdata[]=$item_user_menus->menu_level_1_id.'_'.$item_user_menus->menu_level_2_id.'_'.$item_user_menus->menu_level_3_id;
@endphp
@endforeach
@endif
@endif

@if(!empty($userData))
@if(count($userData)>0)
@foreach($userData as $item_user)
<section class="mb-4 bg-white">
<h3 class="h3-responsive font-weight-bold text-center p-3">USER DETAILS</h3>
<div class="row">
<div class="col-md-12 mb-5">
<div class="panel panel-inverse">
  <div class="panel-heading">
    <h4 class="panel-title">User Details</h4>
  </div>
  <div class="panel-body">
<div class="row">
                <div class="col-md-12">
                <div class="row">
                    <!--Grid column-->
                    <div class="col-md-1 mb-2">
                        <div class="md-form"> 
                        <label for="userId" class=""><span>User ID</span>
                            </label>
</div>
</div>
<div class="col-md-2 mb-2">
<strong>
{{$item_user->id}}
</strong>
</div>
                    <div class="col-md-1 mb-2">
                        <div class="md-form"> 
                        <label for="userName" class=""><span>Name</span>
                            </label>
</div>
</div>
<div class="col-md-2 mb-2">
<strong>
{{$item_user->name}}
</strong>
</div>
                    <div class="col-md-1 mb-2">
                        <div class="md-form"> 
                        <label for="userEmail" class=""><span>E-Mail</span>
                            </label>
</div>
</div>
<div class="col-md-2 mb-2">
<strong>
{{$item_user->email}}
</strong>
</div>
                    <div class="col-md-1 mb-2">
                        <div class="md-form"> 
                        <label for="userEmail" class=""><span>Created On</span>
                            </label>
</div> 
</div>
<div class="col-md-2 mb-2">
<strong>
{{date('d/m/Y H:i:s',strtotime($item_user->created_at))}}
</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<form method="POST" action="#" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="userid" id="userid" value='{{$item_user->id}}'/>
<div class="panel panel-inverse">
  <div class="panel-heading">
    <h4 class="panel-title">Roles</h4>
  </div>
  <div class="panel-body">
  <div class="row">
  <div class="col-md-10 mb-2">
  <div class="row">
@if(!empty($roles))
@if(count($roles)>0)
@foreach($roles as $item_roles)
<div class="form-check col-md-3 mb-2">
  <input class="form-check-input" type="checkbox" id="checkbox{{$item_roles->id}}" {{ in_array((int)($item_roles->id) , $rdata) ? 'checked' : '' }} value="{{$item_roles->id}}"/>
  <label class="form-check-label" for="checkbox{{$item_roles->id}}">{{$item_roles->name}}</label>
</div>
@endforeach
</div>
</div>
<div class="col-md-2 mb-2">
<input type="button" class="btn btn-primary addroles" id="addroles" value="Add / Update Role"/>
</div>
@endif
@endif
</div>
</div>
</div>
</form>
<form method="POST" action="#" method="POST" enctype="multipart/form-data">
    @csrf
<div class="panel panel-inverse">
  <div class="panel-heading">
    <h4 class="panel-title">Menu Permissions</h4>
  </div>
  <div class="panel-body">
  <div class="row m-2 p-2">
<div class="col-md-4 mb-2">
<strong>Menu (Level 1)</strong>
</div>
<div class="col-md-4 mb-2">
<strong>Menu (Level 2)</strong>
</div>
<div class="col-md-4 mb-2">
<strong>Menu (Level 3)</strong>
</div>
</div>
@if(!empty($ml1))
@if(count($ml1)>0)
@foreach($ml1 as $item_ml1)
<div class="row {{  ($loop->index % 2)==0 ? 'bg-light' : '' }} m-2 p-2">
<div class="form-check col-md-4 mb-2 ">
  <input class="form-check-input menu_level1" type="checkbox" id="m_1_{{$item_ml1->menu_level_1_id}}"  value="{{$item_ml1->menu_level_1_id}}_0_0" {{ in_array(($item_ml1->menu_level_1_id.'_0_0') , $pdata) ? 'checked' : '' }}/>
  <label class="form-check-label" for="m_1_{{$item_ml1->menu_level_1_id}}">{{$item_ml1->menu_name}}</label>
</div>
@php
$ml2=UserDataTableController::getMenuLevel2($item_ml1->menu_level_1_id)->toArray();
@endphp
<div class="col-md-8">
@if(!empty($ml2))
@if(count($ml2)>0)
@foreach($ml2 as $item_ml2)
<div class="row">
<div class="form-check col-md-6 mb-2">
  <input class="form-check-input menu_level2" type="checkbox" id="m_2_{{$item_ml1->menu_level_1_id}}_{{$item_ml2->menu_level_2_id}}"  value="{{$item_ml1->menu_level_1_id}}_{{$item_ml2->menu_level_2_id}}_0" {{ in_array(($item_ml1->menu_level_1_id.'_'.$item_ml2->menu_level_2_id.'_0'), $pdata) || in_array(($item_ml1->menu_level_1_id.'_0_0') , $pdata) ? 'checked' : '' }}/>
  <label class="form-check-label" for="m_2_{{$item_ml1->menu_level_1_id}}_{{$item_ml2->menu_level_2_id}}">{{$item_ml2->menu_name}}</label>
</div>
@php
$ml3=UserDataTableController::getMenuLevel3($item_ml2->menu_level_1_id,$item_ml2->menu_level_2_id)->toArray();
@endphp
<div class="col-md-6">
@if(!empty($ml3))
@if(count($ml3)>0)
@foreach($ml3 as $item_ml3)
<div class="row">
<div class="form-check mb-2">
  <input class="form-check-input menu_level3" type="checkbox" id="m_3_{{$item_ml1->menu_level_1_id}}_{{$item_ml2->menu_level_2_id}}_{{$item_ml3->menu_level_3_id}}"  value="{{$item_ml1->menu_level_1_id}}_{{$item_ml2->menu_level_2_id}}_{{$item_ml3->menu_level_3_id}}" {{ in_array(($item_ml1->menu_level_1_id.'_'.$item_ml2->menu_level_2_id.'_'.$item_ml3->menu_level_3_id) , $pdata) || in_array(($item_ml1->menu_level_1_id.'_'.$item_ml2->menu_level_2_id.'_0') , $pdata) || in_array(($item_ml1->menu_level_1_id.'_0_0') , $pdata) ? 'checked' : '' }}/>
  <label class="form-check-label" for="m_3_{{$item_ml1->menu_level_1_id}}_{{$item_ml2->menu_level_2_id}}_{{$item_ml3->menu_level_3_id}}">{{$item_ml3->menu_name}}</label>
</div>
</div>
@endforeach
@endif
@endif
</div>
</div>
@endforeach
@endif
@endif
</div>
</div>
@endforeach
@endif
@endif
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 mb-2 text-center">
<input type="button" class="btn btn-primary addmenus" id="addmenus" value="Add / Update Menu Permission"/>
</div>
<div class="col-md-4"></div>
</div>

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

</section>
@endforeach

@endif
@endif

@endsection
@push('scripts')
<script>
$(document).ready(function(){
    $(document).on("click", '.menu_level1', function() {
    var this_id = $(this).attr('id');
var split_id=this_id.split('_');
    if($(this).is(":checked")) {
        $("input:checkbox[id^=m_2_"+split_id[2]+"_]").each(function(){
            $(this).prop('checked',true);
    });
        $("input:checkbox[id^=m_3_"+split_id[2]+"_]").each(function(){
            $(this).prop('checked',true);
    });
}
else{
    $("input:checkbox[id^=m_2_"+split_id[2]+"_]").each(function(){
            $(this).prop('checked',false);
    });  
    $("input:checkbox[id^=m_3_"+split_id[2]+"_]").each(function(){
            $(this).prop('checked',false);
    });  
}
    });
    $(document).on("click", '.menu_level2', function() {
    var this_id = $(this).attr('id');
    var isunchecked=false;
var split_id=this_id.split('_');
    if($(this).is(":checked")) {
        $("input:checkbox[id^=m_3_"+split_id[2]+"_"+split_id[3]+"_]").each(function(){
            $(this).prop('checked',true);
    });
}
else{
  
    $("input:checkbox[id^=m_3_"+split_id[2]+"_"+split_id[3]+"_]").each(function(){
            $(this).prop('checked',false);
    });  
}

$("input:checkbox[id^=m_2_"+split_id[2]+"_]").each(function(){
if(!($(this).is(":checked"))) {
    isunchecked=true;
}
});

if(!(isunchecked)){
    $("input:checkbox[id^=m_1_"+split_id[2]+"]").each(function(){
            $(this).prop('checked',true);
    });   
}
else{
    $("input:checkbox[id^=m_1_"+split_id[2]+"]").each(function(){
            $(this).prop('checked',false);
    });    
}
    });
    $(document).on("click", '.menu_level3', function() {
    var this_id = $(this).attr('id');
    var isunchecked2=false;
    var isunchecked1=false;
var split_id=this_id.split('_');
$("input:checkbox[id^=m_3_"+split_id[2]+"_"+split_id[3]+"]").each(function(){
if(!($(this).is(":checked"))) {
    isunchecked2=true;
}
});

if(!(isunchecked2)){
    $("input:checkbox[id^=m_2_"+split_id[2]+"_"+split_id[3]+"]").each(function(){
            $(this).prop('checked',true);
    });   
}
else{
    $("input:checkbox[id^=m_2_"+split_id[2]+"_"+split_id[3]+"]").each(function(){
            $(this).prop('checked',false);
    });    
}
$("input:checkbox[id^=m_2_"+split_id[2]+"]").each(function(){
if(!($(this).is(":checked"))) {
    isunchecked1=true;
}
});
if(!(isunchecked1)){
    $("input:checkbox[id^=m_1_"+split_id[2]+"]").each(function(){
            $(this).prop('checked',true);
    });   
}
else{
    $("input:checkbox[id^=m_1_"+split_id[2]+"]").each(function(){
            $(this).prop('checked',false);
    });    
}
    });
$(document).on("click", '.addroles', function() {
  var roles= [];
$("input:checkbox[id^=checkbox]:checked").each(function(){
    roles.push($(this).val());
});
            var saveUrl = "{{ url('userRoles')}}";
            $.post(saveUrl,
            {data: roles, "_token": "{{ csrf_token() }}", "user_id": "{{ $item_user->id }}"},
                    function (data) {
                      if(data.errors)
                      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: data.errors['data'],
        // footer: '<a href="javascript:;">Responderemos assim que possível.</a>',
        timer: 3000,
        timerProgressBar: true
      })
      else{ 
      Swal.fire({
        icon: 'success',
        title: 'success',
        text: data.message,
        // footer: '<a href="javascript:;">Responderemos assim que possível.</a>',
        timer: 3000,
        timerProgressBar: true
      });
     // getRaiseDefects();
    }               
                    });
        });
$(document).on("click", '.addmenus', function() {
  var menus= [];
$("input:checkbox[id^=m_1_]:checked").each(function(){
    menus.push($(this).val());
});

$("input:checkbox[id^=m_2_]:checked").each(function(){
var data = $(this).val();
var checkArray=false;
var splitstr=data.split('_');
var search = splitstr[0]+'_0';
$.each(menus, function(index, value){
        if(value.indexOf(search) === 0)
        checkArray=true;
});
if(!checkArray)
menus.push(data);
});

$("input:checkbox[id^=m_3_]:checked").each(function(){
  var checkArray=false;

  var data = $(this).val();
var splitstr=data.split('_');
var search1 = splitstr[0]+'_0';
var search2 = splitstr[0]+'_'+splitstr[1]+'_0';

$.each(menus, function(index, value){
        if ((value.indexOf(search1) === 0) || (value.indexOf(search2) === 0))
        checkArray=true;
});
if(!checkArray)
menus.push(data);
});

            var saveUrl = "{{ url('userMenus')}}";
            $.post(saveUrl,
            {data: menus, "_token": "{{ csrf_token() }}", "user_id": "{{ $item_user->id }}"},
                    function (data) {
                      if(data.errors)
                      Swal.fire({
        icon: 'error',
        title: 'Error',
        text: data.errors['data'],
        // footer: '<a href="javascript:;">Responderemos assim que possível.</a>',
        timer: 3000,
        timerProgressBar: true
      })
      else{ 
      Swal.fire({
        icon: 'success',
        title: 'success',
        text: data.message,
        // footer: '<a href="javascript:;">Responderemos assim que possível.</a>',
        timer: 3000,
        timerProgressBar: true
      });
     // getRaiseDefects();
    }               
                    });
        });
        });


</script>
@endpush