@extends('layouts.portal.app')
	@section('content')
		<script type="text/javascript" src="{{ url('custom/js/jquery-3.3.1.js') }}"></script>
		<link rel="stylesheet" type="text/css" href="{{ url('custom/smart-search/jquery-ui.min.css') }}">

		<div class="content-wrapper">
			<div class="container-xxl flex-grow-1 container-p-y">
				<div class="card">
					<h4 class="breadcrumb ml-3"> <span class="text-muted fw-light breadcrumb-link"> Home /</span> Banks - {{ number_format($banks->total()) }} records fetched </h4>

					@if(Session::has('errorResponse')) 
						<h6 class="row"> 
							<div class="col-md-12 temporary-alert">
								<div class="alert alert-danger alert-dismissible" role="alert"> <i class="fa fa-info-circle"></i> {!! Session::has('errorResponse') ? Session::get("errorResponse") : '' !!} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button> </div>
							</div>
						</h6>
					@endif
					
					<div class="card-header d-flex border-top rounded-0 flex-wrap py-2">
						<label> 
							<input type="text" class="keyword form-control" placeholder="Search Customer"> 
							<input type="hidden" name="bank_id" class="bank-id">
						</label>

						<div class="ms-auto d-flex justify-content-start justify-content-md-end align-items-baseline pull-right">
							<a href="javascript:;" class="btn btn-outline-primary ms-2 ms-sm-0 waves-effect waves-light create-bank disabled-btn" tabindex="0" aria-controls="DataTables_Table_0" type="button"><span><i class="ti ti-plus me-0 me-sm-1 ti-xs"></i> <span class="d-none d-sm-inline-block"> Add </span> Bank </span></a> 
						</div>
					</div>

					<div class="card-datatable table-responsive text-nowrap">
						<table class="table">
							<thead class="border-top">
								<tr>
									<th> # </th>
									<th> Name </th>
									<th> Paybill </th>
									<th> Status </th>
									<th> Actions </th>
								</tr>
							</thead>

							<tbody>
								@foreach($banks as $bank)
									<tr>
										<td> {{ $loop->iteration }} </td>

										<td> {{ $bank->name }} </td>

										<td> {{ $bank->paybill }} </td>

										<td> @if($bank->status == 1) <span class="text-success"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg> active </span> @else <span class="text-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-circle-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M10 10l4 4m0 -4l-4 4" /></svg> inactive </span> @endif </td>

										<td> 
											<a href="{{ $bank->id }}" name="{{ $bank->name }}" paybill="{{ $bank->paybill }}" class="edit-bank text-success disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Edit bank"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-edit"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg> </a>

											@if($bank->status == 0)
												<a href="{{ $bank->id }}" class="activate-bank text-primary disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Activate bank"> <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg> </a>
											@else
												<a href="{{ $bank->id }}" class="deactivate-bank text-warning disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Deactivate bank"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-cancel"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M18.364 5.636l-12.728 12.728" /></svg> </a>
											@endif

											<a href="{{ $bank->id }}" class="delete-bank text-danger disabled-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Delete bank"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg> </a>
										</td>
									</tr>
								@endforeach
							</tbody>
						</table>

						{{ $banks->render() }}
					</div>
				</div>
			</div>
		</div>

		@include('portal.banks.create')
		<script type="text/javascript" src="{{ url('custom/banks/create.js') }}"></script>

		@include('portal.banks.edit')
		<script type="text/javascript" src="{{ url('custom/banks/edit.js') }}"></script>

		@include('portal.banks.activate')
		<script type="text/javascript" src="{{ url('custom/banks/activate.js') }}"></script>

		@include('portal.banks.deactivate')
		<script type="text/javascript" src="{{ url('custom/banks/deactivate.js') }}"></script>

		@include('portal.banks.delete')
		<script type="text/javascript" src="{{ url('custom/banks/delete.js') }}"></script>

		<script src="{{ url('custom/smart-search/jquery-ui.min.js') }}" type="text/javascript"></script>

		<script type="text/javascript">
			(function($) 
		    {
		        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		        
		        $( ".keyword" ).autocomplete({
		            source: function(request, response) 
		            {
		                $.ajax({
		                    url:"{{ url('smartly-search-banks') }}",
		                    type: 'post',
		                    dataType: "json",
		                    data: {
		                       _token: CSRF_TOKEN,
		                       keyword: request.term
		                    },

		                    success: function(data) 
		                    {
		                        response(data);
		                    }
		                });
		            },

		            select: function (event, ui) 
		            {
		                var app_url = $('#app_url').val();

		                window.location.href = ""+app_url+"found-banks/"+ui.item.bank_id+"";
		            }
		        });
		    })(jQuery);
		</script>
	@endsection