@extends('layouts.userlayout')

@section('content')

<div class="container mt-3 ">
	<div class="row mb-1 pb-2">
		<div class="col">
			<h3 class="mt-5 pb-2">Welcome Back! {{ Auth::user()->name }}</h3>
		</div>
	</div>
</div>
<div class="container mb-5 pb-3">
	<div class="row">
		<div class="col-md-4 offset-md-4">
			@foreach($sliders as $img)
			<img class="mySlides" src="{{ url('/img') }}/{{ $img->image}}" style="width: 100%;">
			@endforeach
		</div>
	</div>
{{-- 	<div class="row mt-5">
		<div class="col-12 mb-3">
			<h2 class="sub-title">Department Issues</h2>
		</div>
		<div class="col-6 ">
			<div class="sub_tabs">
				<h3>{{ $issue->open_issues }}</h3>
				<h6>My Reported Issues</h6>
			</div>
		</div>	
		<div class="col-6">
			<div class="sub_tabs">
				<h3>{{ $issue->open_issues }}</h3>
				<h6>Issues Open</h6>
			</div>
		</div>	
		<div class="col-6 my-4">
			<div class="sub_tabs">
				<h3>{{ $issue->open_issues }}</h3>
				<h6>Risk Assessment Request</h6>
			</div>
		</div>	
		<div class="col-6 my-4">
			<div class="sub_tabs">
				<h3>{{ $issue->open_issues }}</h3>
				<h6>Closer Request</h6>
			</div>
		</div>
		<div class="col-6 my-4">
			<div class="sub_tabs">
				<h3>{{ $issue->closed_issues }}</h3>
				<h6>Issues Closed</h6>
			</div>
		</div>	
	</div> --}}
</div>
<script>
	var myIndex = 0;
	carousel();

	function carousel() {
	    var i;
	    var x = document.getElementsByClassName("mySlides");
	    for (i = 0; i < x.length; i++) {
	       x[i].style.display = "none";  
	    }
	    myIndex++;
	    if (myIndex > x.length) {myIndex = 1}    
	    x[myIndex-1].style.display = "block";  
	    setTimeout(carousel, 4000); // Change image every 2 seconds
	}
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "header") {
            x.className += " responsive";
        } else {
            x.className = "header";
        }
    }
</script>
<br><br><br>
@endsection

<br><br><br>