@extends('layouts.search') 
@section('title')
	Trombinosanctions - Recherche massive
@endsection
@section('css')
<style type="text/css">
	button{
		border-radius: 3px;
	}
	textarea{
		max-width: 782px;
	}
</style>
@endsection
@section('surveillance')
<li class=""><a href="{{ route('surveillance') }}" >Listes de Surveillance</a></li>
@endsection
@section('content')
		
		<div class="container" style="padding-top: 25px;">
			<div class="row margin-bottom-100">
				{{-- @include('front.leftside_menu') --}}
				<div class="headline"><h2>Recherche massive</h2></div>
				<p>La recherche massive est une solution de vérification moderne développée pour vous permettre de comparer vos listes clients avec notre base de données.</br>
				
				Ce service de matching  permet aux clients qui souhaitent déterminer si leur clientèle compte des PEP ou des personnes sanctionnées ou recherchées.</p>
				<!-- <div class=" col-md-8 col-md-offset-2">
					<table class="table">
					  <thead class="thead-dark">
					    <tr>
					      <th scope="col">Nom</th>
					      <th scope="col">SANCTION</th>
					      <th scope="col">WANTED</th>
					      <th scope="col">WATCHLIST</th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr>
					      <td ><a href="{{route('select.entity', ['id' => 30353037, 'slug'=> 'omar-awadh-omar'])}}">Omar Awadh OMAR</a></td>
					      <td class="text-center"><i class="fa fa-check-circle" aria-hidden="true"></i></td>
					      <td class="text-center"><i class="fa fa-times-circle" aria-hidden="true"></i></td>
					      <td class="text-center"><i class="fa fa-times-circle" aria-hidden="true"></i></td>
					    </tr>
					    <tr>
					      <td><a href="{{route('select.entity', ['id' => 30403454, 'slug'=> 'khalifa-al-subayi'])}}">Khalifa Al-Subayi</a></td>
					      <td class="text-center"><i class="fa fa-times-circle" aria-hidden="true"></i></td>
					      <td class="text-center"><i class="fa fa-times-circle" aria-hidden="true"></i></td>
					      <td class="text-center"><i class="fa fa-check-circle" aria-hidden="true"></i></td>
					    </tr>
					    <tr>
					      <td><a href="{{route('select.entity', ['id' => 30404721, 'slug'=> 'talal-makhluf'])}}"> Talal Makhluf</a></td>
					      <td class="text-center"><i class="fa fa-times-circle" aria-hidden="true"></td>
					      <td class="text-center"><i class="fa fa-check-circle" aria-hidden="true"></i></td>
					      <td class="text-center"><i class="fa fa-times-circle" aria-hidden="true"></td>
					    </tr>
					  </tbody>
				</table>
				</div> -->
				<h3>Rechercher par liste</h3>
				<div class="col-md-10 col-md-offset-1 mb-5">
					<form action="/search-massive" method="GET">
						<div class="row">
							<div class="col-md-10">
								<div class="form-group">
									<textarea class="form-control" id="exampleFormControlTextarea1" name="list" rows="15"></textarea>
								</div>
							</div>
							<div class="col-md-2">
								<button type="submit" class="btn btn-danger mb-2">Envoyer</button>
							</div>
							
						</div>
				</form>
				</div>
			</div>
			<div class="row margin-bottom-100">
				
			</div>
		</div>
	</div>
@endsection
@section('js')
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			App.init();
			OwlCarousel.initOwlCarousel();
			StyleSwitcher.initStyleSwitcher();
			ParallaxSlider.initParallaxSlider();
			$(".charte").on("click", function() {
			   $('#imagepreview').attr('src', $(this).attr('src'));
			   $('#imagemodal').modal('show');
			});
			$("#imagemodal").click(function(ev){
			    if(ev.target != this) return;
			    $('#imagemodal').modal('hide');
		  	});
		  	$('.marquee').marquee({
			    //speed in milliseconds of the marquee
			    duration: 8000,
			    //gap in pixels between the tickers
			    gap: 50,
			    //time in milliseconds before the marquee will start animating
			    delayBeforeStart: 0,
			    //'left' or 'right'
			    direction: 'up',
			    //true or false - should the marquee be duplicated to show an effect of continues flow
			    duplicated: true
			});
		});
	</script>
	<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog text-center" style="width: 100%;">
	    <div class="">
	      <div class="modal-body">
	        <img src="" id="imagepreview" data-dismiss="modal">
	      </div>
	    </div>
	  </div>
	</div>
@endsection