@extends('layouts.app')
        @section('styles')
        <link href="{{asset('assets/css/custom_style.css')}}" rel="stylesheet" />
        <style>
            #mobile{
                padding-left:90px!important;
            }
        </style>
        @endsection

            @section('content')

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Manage Users</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Manage Users</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            <!-- ROW-1 OPEN -->
                            @canany(['admins-create','admins-edit'])
                            <div class="row" id="add_sec" style="display:none;">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title"><span id="change_stat">Add</span> User</h3>
                                        </div>
                                        <div class="card-body">
                                                <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                    <input id="user_id" name="user_id" type="hidden" value="">
                                                    
                                                    @csrf
                                                <div class="form-row">
                                                    <div class="form-group col-xl-4 mb-3" @if(auth()->user()->hasRole('TPO')) style="display:none;"  @endif>
                                                    <label for="validationTooltip01">Select Roles *</label>
                                               
                                                    <select data-parsley-required-message="Roles required"  required onchange="getfetureselefn()" class="form-control" name="roles[]" id="roles">
                                                            @foreach ($roles as $role)
                                                         @if(auth()->user()->hasRole('TPO'))
                                                         @if($role=='Test Taker')
                                                         <option selected value="{{$role}}">{{$role}}</option>
                                                         @endif
                                                         @elseif(auth()->user()->hasRole('Admin'))
                                                         @if($role=='TPO' || $role=='Test Taker')
                                                         <option value="{{$role}}">{{$role}}</option>
                                                         @endif
                                                         @else
                                                                <option value="{{$role}}">{{$role}}</option>
                                                        @endif
                                                            @endforeach
                                                        </select>
                                                </div>
                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Name *</label>
                                                        <input data-parsley-required-message="Name Required" pattern="^[A-Za-z 0-9]+$" data-parsley-pattern-message="Only Letters, Numbers and Spaces are allowed in the Name Field" type="text" class="form-control" name="name" id="name"
                                                            value="" required>   
                                                    </div>
                                                    
                                                    <div class="col-xl-4 mb-3 dnt_disp">
                                                        <label>Batch </label>
                                                        <select class="form-control" name="batch" id="batch" data-parsley-required-message="Batch Required" >
                                                            <option value="">Select Batch</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xl-4 mb-3 dnt_disp">
                                                        <label>Branch </label>
                                                        <input class="form-control" name="branch" maxlength="30" pattern="^[A-Za-z0-9 -]+$" data-parsley-pattern-message="Only numbers, alphabets and space allowed" id="branch" data-parsley-required-message="Branch Required" >
                                                    </div>
                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Email *</label>
                                                        <input pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" data-parsley-type-message="This value should be a valid email. Capital letters are not allowed" data-parsley-pattern-message="This value should be a valid email. Capital letters are not allowed" type="email" class="form-control" name="email" id="email" value="" required>   
                                                    </div>
                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Mobile *</label><br>
                                                        <input data-parsley-required-message="Mobile Required" data-parsley-length-message="This value length is invalid." type="tel" class="form-control" name="mobile" id="mobile"
                                                            value="" pattern="[0-9]+" minlength="8" maxlength="10" required>   
                                                    </div>
                                                    
                                                    <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip02">Profile Photo (150x150px)</label>
                                                        <input type="file" data-parsley-required-message="" class="form-control custom-input-file" name="image" id="image" value="">
                                                    </div>

                                          


                                                     
                                                
                                                       <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Password * </label>
                                                        <div class="wrap-input100 validate-input input-group" id="Password-toggle">
                                                        <input  type="password" data-parsley-required-message="Password Required" minlength="8" maxlength="15" pattern="^[A-Za-z0-9!@#$%^&*]+$" data-parsley-pattern-message="Only letters, numbers and special characters ! @ # $ % ^ & * are allowed" data-parsley-length-message="The password field should have 8 characters and must be not longer than 15 characters" data-parsley-minlength-message="The password field should have 8 characters and must be not longer than 15 characters" class="input100 form-control" name="password" id="password" value="" data-parsley-errors-container=".passwordError" required> 
                                                        <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                                    <i class="zmdi zmdi-eye-off text-muted" aria-hidden="true"></i>
                                                </a>
                                        </div>
                                        <div class="passwordError"></div>
                                                    </div>
                                                       <div class="col-xl-4 mb-3">
                                                        <label for="validationTooltip01">Confirm Password * </label>
                                                        <div class="wrap-input100 validate-input input-group" id="Password-toggle2">
                                                        <input  type="password" data-parsley-required-message="Confirm Password Required" data-parsley-length-message="The Password contains at least 8 Characters" minlength="8" maxlength="15" pattern="^[A-Za-z0-9!@#$%^&*]+$" data-parsley-pattern-message="Only letters, numbers and special characters ! @ # $ % ^ & * are allowed" data-parsley-length-message="The password field should have 8 characters and must be not longer than 15 characters" data-parsley-minlength-message="The password field should have 8 characters and must be not longer than 15 characters" class="input100 form-control" data-parsley-equalto="#password" data-parsley-equalto-message="Password and Confirm Password do not match." name="confirm_password" id="confirm_password" data-parsley-errors-container=".confpasswordError" value="" required> 
                                                        <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                                    <i class="zmdi zmdi-eye-off text-muted" aria-hidden="true"></i>
                                                </a>  
                                                    </div>
                                                    <div class="confpasswordError"></div>
                                                    </div>
                                                    <div id="show_permisn" style="display:none;" class="col-xl-4 mb-3">
                                                        <label>Login Permission</label>
                                                        <select class="form-control" name="login_permission" id="login_permission">
                                                            <option value="0">Allowed</option>
                                                            <option value="1">Denied</option>
                                                        </select>
                                                    </div>
                                                   
                                                   
                                                </div>
                                                @can('admins-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('/add_user')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('admins-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('{{url('/update_user')}}', 'createForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                                                @endcan 
                                                <a onclick="$('#createForm')[0].reset();window.scrollTo(0, 0);" style="margin-left:10px;" id="clear_btn" class="text-white btn custom-btn-info"><i class="fa fa-ban"></i> Clear</a><a onclick="$('#createForm')[0].reset();$('#add_sec').css('display','none');$('#create_btn').css('display','inline-block');$('#update_btn').css('display','none');$('#change_stat').text('Add');" style="margin-left:10px;" id="cancel_btn" class="text-white btn custom-btn-danger"><i class="fa fa-times"></i> Cancel</a>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endcanany
                            <!-- /ROW-1 CLOSED -->  
                               <!-- Row -->
                        @can('admins-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="row w-100">
                                            <div class="col-lg-4">
                                                <h3 class="card-title">View Users</h3>
                                            </div>
                                            <div class="col-lg-2"></div>
                                            <div class="col-lg-6 position-relative">
                                                        <button style="position: absolute;right: -20px;top: -10px;" type="button" class="btn custom-btn-success pull-right" onclick="$('#add_sec').css('display','flex');$('#clear_btn').css('display','inline-block');window.scrollTo(0, 0);$('#createForm')[0].reset();$('#create_btn').css('display','inline-block');$('#update_btn').css('display','none');$('#change_stat').text('Add');password_user();">Add New User</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        @hasanyrole('Super Admin|Admin')
                                            <div class="w-25 mb-3 d-flex align-items-center position-absolute" style="left: 0;right: 0;margin: auto;margin-top: 12px;z-index: 1;">
                                            <label class="m-0 me-2">Sort By Role:</label>
                                            <select class="form-control w-70" data-parsley-required-message="Category Required" onchange="listuseronrole(this.value)" name="sort_role" id="sort_role" required>
                                                @if(auth()->user()->hasRole('Super Admin'))
                                                <option @if(session()->has('role_user')) @if(Session::get('role_user')==0) {{ 'selected' }} @endif @endif value="0">All Roles</option>
                                                @endif
                                                 @foreach ($roles as $role_new)
                                                         @if(auth()->user()->hasRole('TPO'))
                                                         @if($role_new=='Test Taker')
                                                <option @if(session()->has('role_user')) @if(Session::get('role_user')==$role_new) {{ 'selected' }} @endif @endif value="{{ $role_new }}">{{ $role_new }}</option>
                                                @endif
                                                @elseif(auth()->user()->hasRole('Admin'))
                                                @if($role_new=='TPO' || $role_new=='Test Taker')
                                                         <option @if(session()->has('role_user')) @if(Session::get('role_user')==$role_new) {{ 'selected' }} @endif @endif value="{{$role_new}}">{{$role_new}}</option>
                                                         @endif
                                                @else
                                                <option @if(session()->has('role_user')) @if(Session::get('role_user')==$role_new) {{ 'selected' }} @endif @endif value="{{$role_new}}">{{$role_new}}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        @endhasanyrole
                                        <div class="table-responsive" style="margin-top:15px;">
                                            <table  class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <!--<th class="wd-15p border-bottom-0">User ID</th>-->
                                                        <th class="wd-15p border-bottom-0">Name</th>
                                                        <th class="wd-15p border-bottom-0">Batch</th>
                                                        <th class="wd-15p border-bottom-0">Branch</th>
                                                        <th class="wd-15p border-bottom-0">Email  </th>
                                                        <th class="wd-15p border-bottom-0">Mobile </th>
                                                        <th class="wd-15p border-bottom-0"> Actions </th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan
                        
                        <!-- End Row -->
                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete User</h5>
                                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the user <span id="name_delete"></span> with User ID : <span id="email_delete"></span>... ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">No</button>
                                    </div>
                                </div>
                            </div>
                        </div>
            {{-- ####################delete Model############################# --}}
            {{-- #########################View Modal################################### --}}
            <div class="modal fade" id="scrollingmodal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="view_modal_title"></h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of View Modal############################ --}}
            
            {{-- #########################Info Modal################################### --}}
            <div class="modal fade" id="infomodal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Info</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        <h5>Added By : <span id="added_user_info"></span></h5>
                        <h5>Added Date : <span id="added_date_info"></span></h5>
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of Info Modal############################ --}}

                        
                        

            @endsection

        @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
 
<script>

 var input = document.querySelector("#mobile");
    var iti = window.intlTelInput(input, {
      //allowDropdown: false,
      //autoHideDialCode: false,
      autoPlaceholder: "off",
      // dropdownContainer: document.body,
      // excludeCountries: ["us"],
      // formatOnDisplay: false,
      // geoIpLookup: function(callback) {
      //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      //     var countryCode = (resp && resp.country) ? resp.country : "";
      //     callback(countryCode);
      //   });
      // },
      hiddenInput: "country_code",
      initialCountry: "in",
      // localizedCountries: { 'de': 'Deutschland' },
      // nationalMode: false,
      // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
      // placeholderNumberType: "MOBILE",
      // preferredCountries: ['cn', 'jp'],
      separateDialCode: true,
      utilsScript: "{{ asset('assets/plugins/intl-tel-input-master/utils.js') }}",
    });

function getfetureselefn()
{
    var selectedvalues = $("#roles").val();
    if(selectedvalues.includes('Super Admin') || selectedvalues.includes('Admin') || selectedvalues.includes('TPO'))
    {
        $(".dnt_disp").css('display', 'none');
        $("#batch").attr('required', false);
        $("#branch").attr('required', false);
        $("#institute").attr('required', false);
    }
    else
    {
        $(".dnt_disp").css('display', 'block');
        $("#batch").attr('required', true);
        $("#branch").attr('required', true);
        $("#institute").attr('required', true);
    }
}
</script>

<script type="text/javascript">
    function listuseronrole(listrole){
        $.ajax({
            type: 'POST',
            data: {"_token": token,"listrole": listrole},
            url: '/list_user_role',
            success: function (result) {
                $("#table_datatable").DataTable().ajax.reload(null, false);
            }
        });
    }
</script>

<script type="text/javascript">
    var current_year = {{ date('Y') }};
    var year_back = current_year - 5;
    var batch_option = '<option value="">Select Batch</option>';
    for(var qw=0; qw<=30; qw++){
        var newyear = parseInt(year_back)+qw;
        if(newyear == current_year)
        {
            batch_option = batch_option+'<option selected value="'+newyear+'">'+newyear+'</option>';
        }
        else
        {
            batch_option = batch_option+'<option value="'+newyear+'">'+newyear+'</option>';
        }
    }
    $('#batch').html(batch_option);
</script>


        <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";

    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,1,2,3,4,5],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,2,5,6]},
           {"className": "text-left", "targets": [1,3,4]}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/user_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "id", "name": "id"},
                  /*{"data": "user_unique_id", "name": "user_unique_id"},*/
                  {"data": "name", "name": "name"},
                  {"data": "batch", "name": "batch"},
                  {"data": "branch", "name": "branch"},
                  {"data": "email", "name": "email"},
                  {"data": "mobile", "name": "mobile"},
                  {"data": "id", "name": "id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
            //View action
            var action=action+'&nbsp;<button title="View" onclick=view('+aData.id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';
            //Edit Action
            @can('admins-edit')
            var action=action+'&nbsp;<button title="Edit"  onclick=edit('+aData.id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
            @endcan
            //Delete Action
            @can('admins-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.id+',`'+aData.name+'`,`'+aData.email+'`)" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            $('td:eq(0)', nRow).html(index);
            $('td:eq(5)', nRow).html(aData.c_code+aData.mobile);
            $('td:eq(6)', nRow).html(action);
 }
 });

       // #################### Edit Section ############################
                function edit(id){
                    $("#clear_btn").css('display','none');
                    $('#add_sec').css('display','flex');
                    $('#change_stat').text('Edit');
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/edit_user',
                    success: function (result) {
                        $('#user_id').val(result.user.id);
                        $('#name').val(result.user.name);
                        iti.setNumber(result.user.c_code);
                        $('#mobile').val(result.user.mobile);
                        $('#email').val(result.user.email);
                        $('#seller').val(result.user.seller_id);
                        var roles=result.userRole;
                        console.log=roles;
                        $select = $("#roles");
                        $(function () {
                            var roles_array = [];
                            $.each(roles, function (index, roles) {
                            roles_array.push(roles);
                            $("#roles").val(roles);
                            });
                            if(roles_array.includes("Super Admin") || roles_array.includes("Admin") || roles_array.includes("TPO"))
                            {
                                $('.dnt_disp').css('display','none');
                                $("#batch").attr('required', false);
                                $("#branch").attr('required', false);
                                $("#institute").attr('required', false);
                            }
                            else{
                                $('.dnt_disp').css('display','block');
                                $('#batch').val(result.user.batch);
                                $('#branch').val(result.user.branch);
                                $('#institute').val(result.user.institute);
                                $("#batch").attr('required', true);
                                $("#branch").attr('required', true);
                                $("#institute").attr('required', true);
                            }
                        });
                        $('#show_permisn').css('display','block');
                        $('#login_permission').val(result.user.login_permission);
                        $('#password').attr('required', false).val(''); 
                        $('#confirm_password').attr('required', false).val(''); 
                        $('#create_btn').hide();
                        $('#update_btn').show();
                        $('#back-to-top').click();
                        
                        }
                })
                }
      // #################### End Of Edit Section ####################
     // #################### Delete Section ##########################
                    function delete_modal(id,name,email){
                    $('#user_id').val(id);
                    $("#name_delete").text(name);
                    $("#email_delete").text(email);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#user_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/delete_user',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
     // #################### End Of Delete Section ##################
      // #################### View Section #########################
      function view(id){
           $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/user_view',
                        success: function (result) {
                            $('#view_modal_title').text('User Details');
                            $('#view_modal_body').html(result);
                            $('#scrollingmodal').modal('show');
                        }
                    })
      }
    //    #################### End Of View Section ##################
    
    
    function password_user()
    {
        if ($('#Password-toggle input').attr("type") == "text") {
            $('#Password-toggle input').attr('type', 'password');
            $('#Password-toggle i').addClass("zmdi-eye-off");
            $('#Password-toggle i').removeClass("zmdi-eye");
        }
        
        if ($('#Password-toggle2 input').attr("type") == "text") {
            $('#Password-toggle2 input').attr('type', 'password');
            $('#Password-toggle2 i').addClass("zmdi-eye-off");
            $('#Password-toggle2 i').removeClass("zmdi-eye");
        }
    }
   
 
</script>       
        
        
        
        @endsection