@extends('backend.layout')
@section('title', $title)
@section('headerStyles')

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>

 .slider {
	 display: flex;
	 height: 350px;
	 max-height: auto;
	 overflow-y: hidden;
	 overflow-x: scroll !important;
	 padding: 16px;
	 transform: scroll(calc(var(--i,0)/var(--n)*-100%));
	 scroll-behavior: smooth;
}
 .slider::-webkit-scrollbar {
	 height: 5px;
	 width: 150px;
	 display: none;
}
 .slider::-webkit-scrollbar-track {
	 background: transparent;
}
 .slider::-webkit-scrollbar-thumb {
	 background: #888;
}
 .slider::-webkit-scrollbar-thumb:hover {
	 background: #555;
}
 .slider img:hover {
	 transform: scale(1.05);
	 box-shadow: 10px 10px 10px rgba(0,0,0,0.15);
}
 .slide {

	 position: relative;
}
.slide img {
    height: 41%;
    width: 100%;
    margin: 0 10px;
    object-fit: cover;
    border-radius: 15px;
    cursor: pointer;
    transition: .25s ease-in-out;
}
 .control-prev-btn {
	 position: absolute;
	 top: 15%;
	 left: 0;
	 background-color: #ffffff8c;
	 height: 100px;
	 line-height: 100px;
	 width: 45px;
	 text-align: center;
	 user-select: none;
	 color: #444;
	 cursor: pointer;
}
 .control-next-btn {
	 position: absolute;
	 top: 15%;
	 right: 0;
	 background-color: #ffffff8c;
	 height: 100px;
	 line-height: 100px;
	 width: 45px;
	 text-align: center;
	 user-select: none;
	 color: #444;
	 cursor: pointer;
}
.slide img.zoomed{
	  width: 500px;
    height: 600px;
    position: fixed;
    left: 25%;
    top: 0%;
    z-index: 1000;
		transform: scale(1) translatey(0) !important; 
	
}
/*.overlay{
		position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.45);
    top: 0;
		display: none;
}
.overlay.active{
	display: block;
}*/
 @media only screen and (max-width: 420px) {
	 .slider {
		 padding: 0;
	}
	 .slide {
		 padding: 16px 10px;
	}
	 .slide img {
		 margin: 0;
	}
	 .control-prev-btn {
		 top: 37%;
	}
	 .control-next-btn {
		 top: 37%;
	}
}
 


.i_tab {
    margin-top: 35px;
    width: 58px;
    margin-left: 12px;
}
.l_tab {
    width: 8%;
    float: left;
}
.l_tum {
    width: 90%;
    float: left;
    height: 204px !important;
}
.fu_srl {
    /*box-shadow: 0 1px 1px 0 rgb(0 0 0 / 5%), 0 1px 2px 0 rgb(0 0 0 / 10%), 0 2px 20px 0 rgb(0 0 0 / 20%);*/
    width: 100%;
    height: 173px;
    padding: 8px;
    margin: auto;
}
.h3_p {
    font-size: 24px;
    padding: 8px;
    color: #a4bd0b;
}
.li_t {
    width: 50%;
    line-height: 24px;
    font-size: 14px;
    float: left;
    list-style: none;
}
.bo_dq {
    margin-top: -16px;
}
.l_arrw {
    width: 26px;
}

@media screen and (min-width:320px) and (max-width:767px) {
  .i_tab {
    margin-top: 62px;
    width: 23px;
}	
}

/*-------------------- select boc css --------------*/

/*Styling Selectbox*/
.dropdown {
  width: 200px;
  display: inline-block;
  border-radius: 2px;
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left
}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 10px
}
.dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 20px
}
.dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8
}
.dropdown.active .select > i {
    transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}
.le_sel {
    clear: both;
    position: absolute;
    right: 38px;
    top: 154px;
    background: #fff;
	width:220px;
}
.vi_p {
    width: 100%;
    height: 350px;
}
.modal-header{border-bottom:none;}
.close {
    opacity: 1;
    color: #adabab;
}
</style>
@endsection



@section('content')
{!! getBreadcrumbs(
              array(
              'dashboard'=>'Home',
              ''=>'Completed Users Details'
              ),'Completed Users Details'
           ) !!}
<div class="container-fluid">
	<div class="cl_mq">
		<h3 class="h3_p">Anil Kumar</h3>
        
        <div class="col-md-2 le_sel">
           <div class="dropdown">
            <div class="select">
              <span>Select Option</span>
              <i class="fa fa-chevron-left"></i>
            </div>
            <input type="hidden" name="gender">
            <ul class="dropdown-menu">
              <li id="male">Shortlist</li>
              <li id="female">Reject</li>
              <li id="Other">Hold</li>
            </ul>
          </div>
        </div>
        
		<div class="col-md-12 fu_srl">
			<div class="col-md-1 l_tab" style="padding:0px;">
				<img src="{{ asset('backend/images/table-icon.png') }}" class="i_tab" data-toggle="modal" data-target="#myModal">
			</div>
			<div class="col-md-11 l_tum" style="padding:0px;">
				<div id="slider-container" class="slider">
					<div class="slide" data-toggle="modal" data-target="#myM">
						<img src="https://images.unsplash.com/photo-1574482620811-1aa16ffe3c82?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=20" alt="">
					</div>
					<div class="slide" data-toggle="modal" data-target="#myM">
						<img src="https://images.unsplash.com/photo-1574451311232-cb647e9d71f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=20" alt="">
					</div>
					<div class="slide" data-toggle="modal" data-target="#myM">
						<img src="https://images.unsplash.com/photo-1574449423472-4bc6a3d2473d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=20" alt="">
					</div>
					<div class="slide" data-toggle="modal" data-target="#myM">
						<img src="https://images.unsplash.com/photo-1574459472673-09bbda49102a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=928&q=20" alt="">
					</div>
					<div class="slide" data-toggle="modal" data-target="#myM">
						<img src="https://images.unsplash.com/photo-1479981280584-037818c1297d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=20" alt="">
					</div>
					<div class="slide" data-toggle="modal" data-target="#myM">
						<img src="https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=20" alt="">
					</div>
					<div class="slide" data-toggle="modal" data-target="#myM">
						<img src="https://images.unsplash.com/photo-1560259324-12a044e67c34?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=20" alt="">
					</div>
					
					<div onclick="prev()" class="control-prev-btn">
						<!--<i class="fa fa-arrow-left"></i>-->
						<img src="{{ asset('backend/images/left.png') }}" class="l_arrw">
					</div>
					<div onclick="next()" class="control-next-btn">
						<!--<i class="fa fa-arrow-right"></i>-->
						<img src="{{ asset('backend/images/right.png') }}" class="l_arrw">
					</div>
				</div>
				<div class="overlay"></div>
			</div>
		</div>
        
        </div>
        
        
        
		<!-- The Modal -->
		<div class="modal" id="myModal">
			<div class="modal-dialog modal-lg">
				<div class="modal-content con_q">
					<!-- Modal Header -->
					<div class="modal-header he_q">
						<h4 class="modal-title tx_t">Completed User Info</h4>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<!-- Modal body -->
					<div class="modal-body bo_dq">
						<div class="t_bdy">
							<ul class="u_li">
								<li class="li_t">Name</li>
								<li class="li_t">Pavan Kumar</li>
								<li class="li_t">Email</li>
								<li class="li_t">vendorlive5@gmail.com</li>
								<li class="li_t">Mobile</li>
								<li class="li_t">+91-8106052798</li>
								<li class="li_t">Role</li>
								<li class="li_t">Senior Recruiter</li>
								<li class="li_t">Have you Read Job Specification</li>
								<li class="li_t">Yes</li>
								<li class="li_t">When you Passed Out your highest Qualification?</li>
								<li class="li_t">2020</li>
								<li class="li_t">Have you done your Primary Education in</li>
								<li class="li_t">Hyderabad</li>
								<li class="li_t">Is your Aadhar Town / City Address one in the list</li>
								<li class="li_t">Hyderabad</li>
								<li class="li_t">Is your education qualification is</li>
								<li class="li_t">Bachelor of Education</li>
								<li class="li_t">Is your Medium of education is</li>
								<li class="li_t">English</li>
								<li class="li_t">What is your mobile number?</li>
								<li class="li_t">91+8106052798</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
 
	<!-- The Modal -->
		<div class="modal" id="myM">
			<div class="modal-dialog modal-md">
				<div class="modal-content con_q">
					<!-- Modal Header -->
					<div class="modal-header he_q">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<!-- Modal body -->
					<div class="modal-body bo_dq">
						<div class="t_bdy">
							<iframe class="vi_p" src="https://www.youtube.com/embed/OUKGsb8CpF8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('footerScripts')
<script>
 $("#male").on('click',function(){
	 window.location.href="{{ route('admin.shortlist', ['id'=>$id]) }}";
 });
 $("#female").on('click',function(){
	 window.location.href="{{ route('admin.reject', ['id'=>$id]) }}";
 });
 $("#Other").on('click',function(){
	 window.location.href="{{ route('admin.hold', ['id'=>$id]) }}";
 });
function prev(){
		document.getElementById('slider-container').scrollLeft -= 270;
}

function next()
{
		document.getElementById('slider-container').scrollLeft += 270;
}


$(".slide img").on("click" , function(){
	$(this).toggleClass('');
	$(".overlay").toggleClass('active');
})

</script> 
<script>
  /*Dropdown Menu*/
$('.dropdown').click(function () {
        $(this).attr('tabindex', 1).focus();
        $(this).toggleClass('active');
        $(this).find('.dropdown-menu').slideToggle(300);
    });
    $('.dropdown').focusout(function () {
        $(this).removeClass('active');
        $(this).find('.dropdown-menu').slideUp(300);
    });
    $('.dropdown .dropdown-menu li').click(function () {
        $(this).parents('.dropdown').find('span').text($(this).text());
        $(this).parents('.dropdown').find('input').attr('value', $(this).attr('id'));
    });
/*End Dropdown Menu*/


$('.dropdown-menu li').click(function () {
  var input = '<strong>' + $(this).parents('.dropdown').find('input').val() + '</strong>',
      msg = '<span class="msg">Hidden input value: ';
  $('.msg').html(msg + input + '</span>');
}); 
</script>

@endsection
   
    
    
    
    
 

