@layout('admin/master')
@section('content')
  @section('stylesheets')
    <link rel="stylesheet" href="/admin/assets/lib/datatables/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/admin/assets/lib/datatables/responsive.bootstrap.min.css">
  @endsection 
  <div class="container-fluid g-0">
	<div class="row">
		<div class="col-12 col-md-6 col-lg-4">
			<div class="input-group mb-3">
				<input type="text" class="form-control search-input" placeholder="Search here"
					aria-label="Search here" aria-describedby="basic-addon1" />
				<img src="/admin/assets/img/search-img.png" alt="" class="search-img" />
			</div>
		</div>
		<div class="col-12 col-12 col-md-6 col-lg-8">
			<div class="text-end mt-2">
				<button class="defaul-btn btn-black" type="button" data-toggle="modal"
					data-target="#exampleModal">
					+ Add
				</button>
			</div>
		</div>
	</div>
	<div class="row mt-5">
		<div class="col-12 col-sm-6 col-md-4">
			<a href="{{route('admin.survey.index')}}">
				<div class="subject-box">
					<p class="text-end">Tags</p>
					<div class="d-flex align-items-center justify-content-between">
						<div class="bg-f4f4">
							<h4>Science</h4>
						</div>
						<div>
							<h4>1,062</h4>
						</div>
					</div>
					<p class="mt-2">
						Phasellus finibus enim nulla, quis ornare odio facilisis
						eu. Suspendisse ornare ante sit amet arcu semper, vel
						eleifend tortor egestas. Aenean luctus, lorem in hendrerit
						interdum, leo orci egestas diam, ac euismod massa est et
						turpis. Etiam auctor lectus
					</p>
				</div>
			</a>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Tags</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Travel</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Business</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Science</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Tags</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Health</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Tags</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Tech</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">History</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Science</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Tags</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Political Science</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Tags</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Geography</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">History</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Philosophy</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Tags</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Biology</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">Tags</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Sociology</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
		<div class="col-12 col-sm-6 col-md-4">
			<div class="subject-box">
				<p class="text-end">History</p>
				<div class="d-flex align-items-center justify-content-between">
					<div class="bg-f4f4">
						<h4>Humanities</h4>
					</div>
					<div>
						<h4>1,062</h4>
					</div>
				</div>
				<p class="mt-2">
					Phasellus finibus enim nulla, quis ornare odio facilisis eu.
					Suspendisse ornare ante sit amet arcu semper, vel eleifend
					tortor egestas. Aenean luctus, lorem in hendrerit interdum,
					leo orci egestas diam, ac euismod massa est et turpis. Etiam
					auctor lectus
				</p>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<nav aria-label="..." class="text-end">
				<ul class="pagination">
					<li class="page-item disabled">
						<a class="page-link">Previous</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">1</a>
					</li>
					<li class="page-item active" aria-current="page">
						<a class="page-link" href="#">2</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">3</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">4</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">5</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">6</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#">Next</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
	<!-- <<< Modal >>> -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
		aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered custom-modal" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Add Study</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<img src="/admin/assets/img/cross-icon.png" alt="" />
					</button>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<input type="text" class="form-control defaul-input mb-4" id="exampleFormControlInput1"
								placeholder="Study Name" />
						</div>
						<div class="form-group">
							<textarea class="form-control defaul-text-area" id="exampleFormControlTextarea1" rows="3"
								placeholder="Description"></textarea>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn-black defaul-btn" data-dismiss="modal" aria-label="Close">
						Save
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
    @include('admin.footer')
  @section('scripts')
    <script>
      let ajax_listing_url = "{{ route('admin.user.ajaxlsiting') }}";
    </script>
    <script src="/admin/assets/lib/datatables/jquery.dataTables.min.js"></script>
    <script src="/admin/assets/lib/datatables/dataTables.responsive.min.js"></script>
    <script src="/admin/assets/js/ajax-datatable.js"></script>
  @endsection
@endsection