@extends('layouts.app')

@section('content')

{{--<div class="container mb-1 p-0">
	<div class="row">
		<div class="col-12">
			<div class="input-group search-box-cntr">
				<input type="text" class="form-control" placeholder="Search..." aria-label="Search" aria-describedby="search_box" id="quote_req_serach">
				<div class="input-group-append" id="quote_req_search_btn">
					<span class="input-group-text" id="search_box" style="background-color:#fcbb6a;"><i class="fas fa-search"></i></span>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container mb-2 p-0">
	<div class="row">
		<div class="col-10" id="sp_quote_request_list_result"></div>
		<div class="col-2" style="border-left: 1px solid black;cursor:pointer;">
			<span class="float-right" data-toggle="popover" data-placement="bottom" id="sp_quote_request_list_table_filter">
				<strong>Filter</strong>
				<span id="filter_counter" class="d-none" style="color:#f14310;"></span>
			</span>
			<style type="text/css">
				.popover-header {
					margin-top: 0;
				}
				.popover-body {
					padding: 0;
				}
				.autocomplete {
					/*the container must be positioned relative:*/
					position: relative;
					display: inline-block;
				}
				.autocomplete-items {
					position: absolute;
					border: 1px solid #d4d4d4;
					border-bottom: none;
					border-top: none;
					z-index: 99;
					/*position the autocomplete items to be the same width as the container:*/
					top: 100%;
					left: 0;
					right: 0;
				}
				.autocomplete-items div {
					padding: 10px;
					cursor: pointer;
					background-color: #fff;
					border-bottom: 1px solid #d4d4d4;
				}
				.autocomplete-items div:hover {
					/*when hovering an item:*/
					background-color: #e9e9e9;
				}
				.autocomplete-active {
					/*when navigating through the items using the arrow keys:*/
					background-color: DodgerBlue !important;
					color: #ffffff;
				}
				#rcorner {
					border-radius: 25px;
					border: 2px solid #73AD21;
					padding: 20px; 	
				}
			</style>
		</div>
	</div>
</div>--}}



{{--<div class="container">
  	<div class="card">
    	<div class="card-header">
	    	<div class="container">
				<form  method="GET" action="{{ route('hospital.profile.filter') }}"  id="hospital-profile-filter" class="col-lg-12 col-sm-12 ">
				{{ csrf_field() }}
					<div class="row justify-content-center">
						<div class="col-sm-6">
							
								<div class="row mt-1">
									<div class="col-sm-6">
										Select Country
									</div>
									<div class="col-sm-6">
										<select class="form-control" id="add_h_country" name="countryId">
											<option></option>
											@foreach(\App\Http\Controllers\PassportAPI\QuoteController::getCountries() as $country)
											<option value="{{$country['name']}}">{{$country['name']}}</option>
											@endforeach
										</select>
									</div>
								</div>
							
							
								<div class="row mt-1">
									<div class="col-sm-6">
										Select Specilization
									</div>
									<div class="col-sm-6">
										<select class="form-control" id="n_q_r_category" name="categoryId">
											<option></option>
											@foreach(\App\Http\Controllers\PassportAPI\QuoteController::getCategories() as $category)
											<option value="{{$category['name']}}">{{$category['name']}}</option>
											@endforeach
										</select>
									</div>
								</div>
							
							
								<div class="row mt-1">
									<div class="col-sm-6">
										Select city
									</div>
									<div class="col-sm-6">
										<select class="form-control" id="n_q_r_category" name="cityId">
											<option></option>
											@foreach(\App\Http\Controllers\PassportAPI\QuoteController::getCategories() as $category)
											<option value="{{$category['name']}}">{{$category['name']}}</option>
											@endforeach
										</select>
									</div>					
								</div>
							
								<div class="row mt-1">
									<div class="col-sm-6">
										Accreditation
									</div>
									<div class="col-sm-6">
										<select class="form-control" id="add_h_accreditation" name="accreditationId">
											<option></option>
											@foreach(\App\Http\Controllers\PassportAPI\QuoteController::getAccredition() as $accreditation)
											<option value="{{$accreditation['name']}}">{{$accreditation['name']}}</option>
											@endforeach
										</select>
									</div>
								</div>                    
							
						</div>
						<div class="col-sm-6">
						
							<div class="row mt-1">
								<div class="col-sm-6">
									Keyword Search:
								</div>
								<div class="col-sm-6">
									<input type="text" class="form-control" id="inputSearch" name="Keyword" 
									aria-describedby="emailHelp" placeholder="Search">
								</div>
							</div>
						
						
							<div class="row mt-1">
								<div class="col-sm-6">
									<button type="button" class="btn btn-primary" id = "hospital-profile-filter-submit">Search</button>
								</div>
								<div class="col-sm-6">
									<button type="button" class="btn btn-primary">Reset</button>
								</div>
							</div>                    							        
						</div>
					</div>
				</form>
			</div>
	    </div>
	    
	    <div class="card-body">
	    	<div class="container">
			  	<table class="table table-striped">
				    <thead>
				      <tr>
				        <th>Hospital</th>
				        <th>Country</th>
				        <th>Email</th>
				        <th>Specialization</th>
				        <th>Accreditation</th>
				        <th>Address1</th>
				        <th>Address2</th>
				        <th>Phone</th>
				        <th>Beds</th>
				        <th>Doctors</th>
				        <th>Equipments</th>
				      </tr>
				    </thead>
			    	<tbody id="profile-table" name="profile">			     
			    	</tbody>
			  	</table>
			</div>
	    </div> 
	   </div>
	    </div>
	    <div class="card-footer">Footer</div>--}}
	    

  	





<div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      	<div class="col-sm-12">
      		<div class="card">
      			<div class="card-body" id="profile-filter" name="profile">
			    	<div class="container thumbnail checkout-thumbnail">	      	
						<form  method="GET" action="{{ route('hospital.profile.filter') }}"  id="hospital-profile-filter" class="col-lg-12 col-sm-12 ">
						{{ csrf_field() }}
							<div class="row justify-content-center">
								<div class="col-sm-6">
									
										<div class="row mt-1">
											<div class="col-sm-6">
												<label>Select Country</label>
												<select class="form-control  countries" id="country" name="country_id">
											        <option value="">Select Country</option>
											    </select>
											    <label>Select State</label>
											    <select class="form-control states" id="state" name="state_id">
											       	<option value=""></option>
											    </select>
											    <label>Select City</label>
											    <select class="form-control cities" id="city" name="city_id">
											       	<option value=""></option>
											    </select>
											</div>
											<div class="col-sm-6">
												<label>Select Specilization</label>
											    <select class="form-control category" id="n_q_r_category" name="categoryId">
												<option value="">Select Category</option>
												</select>
												
												<label>Select Accreditation</label>
												<select class="form-control accredition" id="n_q_r_accridation" name="accreditationId">
													<option value="">Select Accredition</option>

												</select>
											</div>
										</div>                 
								</div>
								<div class="col-sm-6">
								
									<div class="row mt-1">
										<div class="col-sm-6">
											Keyword Search:
										</div>
										<div class="col-sm-6">
											<input type="text" class="form-control" id="inputSearch" name="Keyword" 
											aria-describedby="emailHelp" placeholder="Search">
										</div>
									</div>
								
								
									<div class="row mt-1">
										<div class="col-sm-6">
											<button type="button" class="btn btn-primary" id = "hospital-profile-filter-submit">Search</button>
										</div>
										<div class="col-sm-6">
											<button type="button" class="btn btn-primary">Reset</button>
										</div>
									</div>                    							        
								</div>
							</div>
						</form>
						</div>
					</div>
				</div>
	    	</div>
  		</div>
  		<br>
  		<style>
		  .border {
		    display: inline-block;
		    width: 70px;
		    height: 70px;
		    margin: 6px;
		  }
		</style>

      	<div class="col-sm-12">
      		<div class="card">	      	
		      	<div class="card-body" id="profile-table" name="profile">
		      	@component('components.hospital-profile-list')
				@endcomponent
			  		
		      	</div>
		      	
	    	</div>
      	</div>      	
    </div>    
</div>


  <style>
  	.thumbnail.checkout-thumbnail {
  background: #eee;
  border:none;
  border: 1px solid #fff;
  background-color: #fff;
  box-shadow: 0 1px 2px 1px hsla(0,0%,42.7%,.14);
}
.
.caption.checkout-caption {
  margin-top: 2px;
}
.btn.btn-checkout {
  border-radius: 0;
  border: none;
  background: none;
  margin-top: 30px;
}
.btn.btn-orange {
  border: 2px solid orange;
}
.btn.btn-teal {
  border: 2px solid teal;
}
.btn.btn-red {
  border: 2px solid red;
}
a {
    text-decoration: none;
    outline: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.u-title-font {
    font-size: 18px;
}
.u-c-pointer {
    cursor: pointer;
}
.u-color--primary {
    color: #14bef0;
}
 h2 {
    margin: 0;
    font-weight: 400;

    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
  </style>

<script src="{{ asset('js/blade-components/hospital_profile_filter.js') }}"></script>
<script src="{{ asset('js/blade-components/country_state_city.js') }}"></script>
@endsection