@extends('layouts/layout')
@section('title', 'Users')
@push('style')
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css"> -->
<style>
div.pagination-container {
    height: 50px;
    width: 450px;
}
#deleteProducts {
    margin-right: 50 !important;
}
#roles {position: absolute; width: 94.5%;}
@media screen and (max-width: 480px) {
    #roles {position: relative; width: 100%;}
}

#datatable-fixed-header_filter {
    display: none;
}

.dataTables_paginate {
    display: none;  /* DataTables default paginat hide */
}

.table-container {
    position: relative;
    padding: 20px;
}

.custom-search-container {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 5px; /* Adjust spacing as needed */
    z-index: 10; /* Ensure it's above other elements */
}

.custom-search-container input[type="text"] {
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background-color: white; /* Ensure background color is appropriate */
    margin-right: 12px;
    width: 150px;
}

.pagination-container {
    display: flex;
    justify-content: flex-end; /* Aligns content to the right */
    margin-left: 613px;
    margin-top: -27px;
}
</style>
@endpush

@section('content')
@if ($message = Session::get('Success'))
@include('sweetalert::alert')
@endif
    <!-- page content -->
			<div class="" role="main">
				<div class="">
					<div class="row">
						<div class="col-md-12 col-sm-12 mt-2">
							<div class="x_panel">
								<div class="x_title">
									<h2>Users</h2>									
									<div class="clearfix"></div>
								</div>
								<div class="x_content mt-0 p-0">
                                    <form action="{{url('users')}}" method="post" class="mb-3">
                                        <div class="row">
                                            @csrf
                                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                <div class="form-group">
                                                    <label class="mb-1">Name</label>
                                                    <input type="text" id="name" name="name" class="form-control noSpace" placeholder="Enter Name" autocomplete="off" maxlength="50" onkeyup="allowAlphabetsSpace(this)"/>
                                                    <span id="name_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                <div class="form-group">
                                                    <label class="mb-1">Email</label>
                                                    <input type="text" id="email" name="email" class="form-control" placeholder="Enter Email" autocomplete="off"/>
                                                    <span id="email_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                <div class="form-group">
                                                    <label class="mb-1">Password</label>
                                                    <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" autocomplete="off" maxlength="20"/>
                                                    <span id="password_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                <div class="form-group">
                                                    <label class="mb-1">Confirm Password</label>
                                                    <input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Enter Confirm Password" autocomplete="off" maxlength="20"/>
                                                    <span id="confirm_password_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                <div class="form-group">
                                                    <label class="mb-1">Mobile No</label>
                                                    <input type="text" id="mobile_no" name="mobile_no" class="form-control" placeholder="Enter Mobile No" autocomplete="off" maxlength="10" minlength="10" 
                                                    onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" >
                                                    <span id="mobile_no_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
                                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                <div class="form-group">
                                                    <label class="mb-1">Role</label>
                                                    <select class="select2 form-control wrapper" name="roles" id="roles" data-toggle="select2"  onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
                                                        <option value="" selected>Select Role</option>
                                                            @foreach($roles as $role)
                                                            <option value="{{$role->id}}">{{$role->display_name}}</option>
                                                            @endforeach
                                                    </select>
                                                    <span id="roles_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                <div class="form-group">
                                                    <label class="mb-1">Status</label>
                                                    <select class="select2 form-control" name="status" id="status" data-toggle="select2">
                                                        <option value="" selected>Select Status</option>
                                                        <option value="1">Active</option>
                                                        <option value="0">Inactive</option>
                                                    </select>
                                                    <span id="status_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
											<div class="col-12 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                <div class="form-group">
                                                    <label class="mb-1">Select Units</label>
                                                    <select class="form-control select2" name="unitmultiple[]" id="unitmultiple" data-placeholder="Select Units" multiple="multiple" data-toggle="select2">
                                                    @foreach($units as $unit)
                                                            <option value="{{$unit->unit_id}}"                                                                >{{$unit->unit_name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <span id="unitmultiple_error" class="text-danger d-inline-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 col-sm-6 offset-md-5">
                                                <div class="form-group">
                                                    <input type="submit" class="btn btn-success btn-round btn-primary" name="create_user" id="create_user" value="Create User" />
                                                    <!-- <button type="submit" class="btn btn-round btn-primary">Submit</button> -->
                                                </div>
                                            </div>
                                        </div>
										
									</form>
                                    <div class="col-md-12 col-sm-12 ">
                                        <div class="">
                                            <div class="">
												<!-- <div class="search-container">
													<div align="left">
														<form action="{{url('/search')}}" method="post" role="search" >
														@csrf
														  <input type="text" placeholder="Search User.." name="search" class="form-control">
														  <button type="submit" class="btn btn-primary mt-3">Search User</button>
														</form>
													</div>
												</div> -->
                                                <div class="custom-search-container">
                                                    <label for="customSearchBox" class="mt-2">Search:</label>
                                                    <input type="text" id="customSearchBox" value="{{ request('search') }}">
                                                </div>
												<table id="datatable-fixed-header" class="table table-striped table-bordered text-center" style="width:100%">
													<thead>
														<tr>
															<th>User ID</th>
															<th>Name</th>
															<th>Email</th>
															<th>Mobile No</th>
															<th>Role</th>
															<th>EMP Code</th>
															<th>Status</th>
															<th>Action</th>
														</tr>
													</thead>
													<tbody>
														@foreach($users as $user)
															@php
																$i = "Active"
															@endphp
															@php
																$j = "Inactive"
															@endphp 
															<tr>
																<td>{{$user->id}}</td>
																<td>{{$user->name}}</td>
																<td>{{$user->email}}</td>
																<td>{{$user->mobile_no}}</td>
																<td>{{$user->role}}</td>
																<td>{{$user->empcode}}</td>
																<td>
																	@php
																		$var = $user->status==1
																	@endphp
																	@if($var==1)                          
																		<label class="badge  bg-success">{{$i}}</label>
																	@else
																		<label class="badge bg-warning">{{ $j }}</label>
																	@endif
																</td>
																<td>
																	<a class="btn btn-primary btn-sm" href="{{ route('users.edit' , $user->id)}}">
																		<i class="fa fa-edit text-white"></i>
																	</a>
																	<a class="btn btn-info btn-sm" href="{{ route('change_password' , $user->id)}}">
																		<i class="fa fa-unlock text-white"></i>
																	</a>
																	<button class="btn btn-danger btn-sm deleteProduct" id="deleteProducts"
																			data-id="{{ $user->id }}" data-token="{{ csrf_token() }}">
																		<i class="fa fa-trash"></i>
																	</button>
																</td>
															</tr>
														@endforeach
													</tbody>
												</table>

												<div class="pagination-container">
                                                    <div class="pagination-links">
                                                        {{ $users->render('vendor.pagination.custom-pagination') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /page content -->
    @endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
    $(document).ready(function(){
        $('.select2').select2();
    });
</script>
<script>
    $(document).ready(function(){
        $("#create_user").on('click', function() {
            var error_msg = "";
            if($("#name").val() == "") {
                $("#name_error").text("Please enter user name.");
                error_msg = "Error";
            } else {
                $("#name_error").text("");
            }

            if($("#email").val() != "") {
                $("#email_error").text("");
                var regexname = "^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@" + "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";
                if ($("#email").val().match(regexname)) {
                  $("#email_error").text("");
                }
                else {
                  $("#email_error").text("Please enter user's valid email.");
                  error_msg = "Error";
                }
            } else {
                $("#email_error").text("Please enter user's email.");
                error_msg = "Error";
            }

            if($("#password").val() == "") {
                $("#password_error").text("Please enter password for the user.");
                error_msg = "Error";
            } else {
                $("#password_error").text("");
            }

            if($("#confirm_password").val() == "") {
                $("#confirm_password_error").text("Enter password again to confirm.");
                error_msg = "Error";
            } else {
                $("#confirm_password_error").text("");
            }

            if($("#mobile_no").val() == "") {
                $("#mobile_no_error").text("Please enter mobile number.");
                error_msg = "Error";
            }else {
                $("#mobile_no_error").text("");
            }

            if($("#roles").val() == "") {
                $("#roles_error").text("Please select role for the user.");
                error_msg = "Error";
            } else {
                $("#roles_error").text("");
            }

            if($("#status").val() == "") {
                $("#status_error").text("Please select user status.");
                error_msg = "Error";
            } else {
                $("#status_error").text("");
            }          

           if(error_msg) {
                return false;
            }
        }); 
        
        $('#email').on('keyup',function(){
            var Email = $('#email').val();

            $.ajax({
                type:'GET',
                url: 'userEmailExist/'+ Email,
                // data:$("#exce").serialize(),
                success:function(data){
                    if(data == 0) {
                      $("#email_error").text("");
                      $('#email').val();
                    } else {
                      //alert(data);
                      $("#email_error").text(Email + " already exists in the table.");
                      $('#email').val("");
                      $('#email').focus();
                    }
                }
            });
        });
    });
</script>
<script>
    // Allow Only Letters and Alphabets for Name Field
    function allowAlphabetsSpace(thisInput) {
      thisInput.value = thisInput.value.split(/[^a-zA-Z ]/).join('');
    }

    $('.noSpace').keyup(function() {
    this.value = this.value.replace(/ \s/g,'');
    });
</script>
<script>
$(document).ready(function() {

    $(".deleteProduct").click(function() {
        var id = $(this).data("id");
        console.log(id);
        var token = $(this).data("token");
        $.ajax({
            url: "logintoken/" + id,
            type: 'GET',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function() {
                swal({
                        title: "Success!",
                        text: "User has been logout",
                        type: "success"
                    },
                    function() {
                        location.reload();
                    });
            }
        });
    });
});
</script>
<script>
    $(document).ready(function() {
    var delayTimer;

        $('#customSearchBox').on('keyup', function() {
            clearTimeout(delayTimer);
            var search = $(this).val();

            delayTimer = setTimeout(function() {
                $.ajax({
                    url: "{{ route('users.index') }}",
                    type: 'GET',
                    data: {
                        search: search
                    },
                    success: function(data) {
                        $('tbody').html($(data).find('tbody').html());
                        $('.pagination').html($(data).find('.pagination').html());
                    },
                    error: function(xhr) {
                        console.log("Something went wrong");
                    }
                });
            }, 300); // 300ms delay for user input
        });
    });
</script>
@endpush