@extends('layouts.admin')
@section('header_style')
    <link href="{{asset('assets/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css')}}" rel="stylesheet"      type="text/css"/>
    <link href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet"      type="text/css"/>
    <style type="text/css">
        td { 
            font-size: 14px !important; 
        }
        .d-none{
        	display: none;
        }
        .nav-item.active{
        	background-color: #67AAB3;
        }
        .nav-link.active{
        	background-color: #A0C6CF;
        }
    </style>
@endsection
@section('content')
<div style="min-height: 75vh; max-height: 75vh; height: 75vh; overflow: auto;">
	<form method="POST" enctype="multipart/form-data" action="{{route('wholesaler.store.details')}}">
		@csrf
		<div class="top-baar">
		        <nav class="navbar navbar-expand-lg navbar-light bg-light">
		            <div class="collapse navbar-collapse" id="navbarSupportedContent">
			            <ul class="nav nav-tabs">
			                <li class="nav-item" id="detail_tab">
			                    <a class="nav-link active" id="detail_link" onclick="ChangeForm('wholesaler_detail','detail_tab','detail_link');"><b>Details</b></a>
			                </li>
			                <li class="nav-item" id="contact_tab">
			                    <a class="nav-link" id="contact_link" onclick="ChangeForm('wholesaler_contact','contact_tab','contact_link');"><b>Contacts</b></a>
			                </li>
			                <li class="nav-item" id="hotel_tab">
			                    <a class="nav-link" id="hotel_link" onclick="ChangeForm('wholesaler_hotel','hotel_tab','hotel_link');"><b>Hotels</b></a>
			                </li>
			                <div class="Discard"><a href="{{ route('wholeSaler.index') }}" class="btn btn-danger px-4 py-1" style="float: right;margin-right: 10px;">DISCARD</a></div>
			            </ul>
			            <!-- <div class="collapse navbar-collapse" id="navbarSupportedContent">
			            	<div class="Save"><button type="submit" class="btn btn-success" style="float: right;padding-right: 20px;padding-left: 20px;margin-right: 10px;">SAVE</button></div>
			            	
			            </div> -->
		            </div> 
		        </nav>   
		</div>
		<div id="wholesaler_detail" class="card mt-1 mx-2" style="padding-left:20px;">
			<div class="col-2 ml-8 pl-8">
				<div class="form-group row my-0 pt-5">
					<label class="col-sm-2 form-label pt-1 text-left">Name :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input autocomplete="off" type="text" name="name" id="name" class="form-control" value="{{$wholesalers[0]->name}}" readonly>
					</div>
					<div class="mx-3">	
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Email :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input autocomplete="off" readonly type="text" name="email" id="email" class="form-control" value="{{$wholesalers[0]->email}}">
					</div>
				</div>
				<div class="form-group row my-0">
					<label class="col-sm-2 form-label pt-1 text-left">Website :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input autocomplete="off" type="text" name="website" id="website" class="form-control" value="{{$wholesalers[0]->website}}" readonly>
					</div>
					<div class="mx-3">	
					</div>
				</div>
				<div class="form-group row my-0">
					<label class="col-sm-2 form-label pt-1 text-left">Country :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<select readonly id="group" class="form-control" name="country">
							<option value="" selected disabled="">Select Country</option>
							@foreach ($countries as $key => $value)
								@if($wholesalers[0]->country_id == $value->id)
									<option value="{{$value->id}}" selected>{{$value->name}}</option>
								@else
									<option value="{{$value->id}}">{{$value->name}}</option>
								@endif
							@endforeach		
						</select>
					</div>
					<div class="mx-3">	
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">City :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<select readonly id="group" class="form-control" name="cities">
							@foreach ($cities as $ct => $values)
								@if($wholesalers[0]->city_id == $values->id)
									<option value="{{$values->id}}" selected>{{$values->name}}</option>
								@else
									<option value="{{$values->id}}">{{$values->name}}</option>
								@endif
							@endforeach			
						</select>
					</div>
				</div>
				<div class="form-group row my-0">
					<label class="col-sm-2 form-label pt-1 text-left">Address :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<textarea rows="3" autocomplete="off" name="address1" id="address1" class="form-control" readonly>{{$wholesalers[0]->address}}</textarea> 
						<input autocomplete="off" type="hidden" name="w_id" id="w_id" class="form-control" value="{{$id}}">
					</div>
					<div class="mx-3">	
					</div>
					
				</div>
				<div class="form-group row my-0">
					<label class="col-sm-2 form-label pt-1 text-left">Postcode :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input autocomplete="off" type="text" name="postcode" id="postcode" class="form-control" value="{{$wholesalers[0]->postcode}}" readonly>
					</div>
				</div>
			</div>
			<hr>
			<div class="col-2 ml-8 pl-8" style="padding-top : 10px;">
				<div class="form-group row my-0 pt-5">
					<label class="col-sm-2 form-label pt-1 text-left">Credit Limit (RM):</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input autocomplete="off" type="text" name="credit_limit" id="credit_limit" class="form-control" value="{{$wholesalers[0]->credit_limit}}" readonly>
					</div>
					<div class="mx-3">	
					</div>
				</div>
				<div class="form-group row my-0">
					<label class="col-sm-2 form-label pt-1 text-left">Remarks :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<textarea rows="3" autocomplete="off" type="text" name="remarks" id="remarks" class="form-control" readonly>{{$wholesalers[0]->remark}}</textarea> 
					</div>
					<div class="mx-3">	
					</div>
				</div>
			</div>
		</div>
		<div id="wholesaler_contact" class="card mt-1 mx-2 d-none" style="padding-left :30px;">
			<div class="col-2 ml-8 pl-8">
				<h3><u>Contact Person 1</u></h3 style="">
				<div class="form-group row my-0 pt-5">
					<label class="col-sm-2  pt-1 text-left">Salutation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="salutation_1" id="salutation_1" class="form-control" value="{{$wholesalers[0]->salutation1}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="mobile1_1" id="mobile1_1" class="form-control" value="{{$wholesalers[0]->mobile1}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="firstname_1" id="firstname_1" class="form-control" value="{{$wholesalers[0]->first_name1}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="telno1_1" id="telno1_1" class="form-control" value="{{$wholesalers[0]->tel1}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<!-- <label class="col-sm-2  pt-1 text-left">L.Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="lastname_1" id="lastname_1" class="form-control" value="{{$wholesalers[0]->last_name1}}" readonly>
					</div> -->
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="fax1_1" id="fax1_1" class="form-control" value="{{$wholesalers[0]->fax1}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Designation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="designation_1" id="designation_1" class="form-control" value="{{$wholesalers[0]->designation1}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Email :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="email1_1" id="email1_1" class="form-control" value="{{$wholesalers[0]->email1}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
			</div>
			<hr>
			<div class="col-2 ml-8 pl-8">
				<h3><u>Contact Person 2</u></h3 style="">
				<div class="form-group row my-0 pt-5">
					<label class="col-sm-2  pt-1 text-left">Salutation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="salutation_2" id="salutation_2" class="form-control" value="{{$wholesalers[0]->salutation2}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="mobile1_2" id="mobile1_2" class="form-control" value="{{$wholesalers[0]->mobile2}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="firstname_2" id="firstname_2" class="form-control" value="{{$wholesalers[0]->first_name2}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="telno1_2" id="telno1_2" class="form-control" value="{{$wholesalers[0]->tel2}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<!-- <label class="col-sm-2  pt-1 text-left">L.Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="lastname_2" id="lastname_2" class="form-control" value="{{$wholesalers[0]->last_name2}}" readonly>
					</div> -->
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="fax1_2" id="fax1_2" class="form-control" value="{{$wholesalers[0]->fax2}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Designation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="designation_2" id="designation_2" class="form-control" value="{{$wholesalers[0]->designation2}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Email :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="email1_2" id="email1_2" class="form-control" value="{{$wholesalers[0]->email2}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
			</div>
			<div class="col-2 ml-8 pl-8">
				<h3><u>Contact Person 3</u></h3 style="">
				<div class="form-group row my-0 pt-5">
					<label class="col-sm-2  pt-1 text-left">Salutation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="salutation_3" id="salutation_3" class="form-control" value="{{$wholesalers[0]->salutation3}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="mobile1_3" id="mobile1_3" class="form-control" value="{{$wholesalers[0]->mobile3}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="firstname_3" id="firstname_3" class="form-control" value="{{$wholesalers[0]->first_name3}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="telno1_3" id="telno1_3" class="form-control" value="{{$wholesalers[0]->tel3}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<!-- <label class="col-sm-2  pt-1 text-left">L.Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="lastname_3" id="lastname_3" class="form-control" value="{{$wholesalers[0]->last_name3}}" readonly>
					</div> -->
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="fax1_3" id="fax1_3" class="form-control" value="{{$wholesalers[0]->fax3}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Designation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="designation_3" id="designation_3" class="form-control" value="{{$wholesalers[0]->designation3}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Email :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="email1_3" id="email1_3" class="form-control" value="{{$wholesalers[0]->email3}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
			</div>
			<div class="col-2 ml-8 pl-8">
				<h3><u>Contact Person 4</u></h3 style="">
				<div class="form-group row my-0 pt-5">
					<label class="col-sm-2  pt-1 text-left">Salutation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="salutation_4" id="salutation_4" class="form-control" value="{{$wholesalers[0]->salutation4}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Mobile :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="mobile1_4" id="mobile1_4" class="form-control" value="{{$wholesalers[0]->mobile4}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="firstname_4" id="firstname_4" class="form-control" value="{{$wholesalers[0]->first_name4}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Tel :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="telno1_4" id="telno1_4" class="form-control" value="{{$wholesalers[0]->tel4}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<!-- <label class="col-sm-2  pt-1 text-left">L.Name :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="lastname_4" id="lastname_4" class="form-control" value="{{$wholesalers[0]->last_name4}}" readonly>
					</div> -->
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Fax :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="fax1_4" id="fax1_4" class="form-control" value="{{$wholesalers[0]->fax4}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
				<div class="form-group row my-0 ">
					<label class="col-sm-2  pt-1 text-left">Designation :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="designation_4" id="designation_4" class="form-control" value="{{$wholesalers[0]->designation4}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Email :</label>
					<div class="col-sm-2 mb-3 mr-5">
						<input autocomplete="off" type="text" name="email1_4" id="email1_4" class="form-control" value="{{$wholesalers[0]->email14}}" readonly>
					</div>
					<div class="mx-3">  
					</div>
				</div>
			</div>
		</div>
		<div id="wholesaler_hotel" class="page-content-body-wrapper no-padding d-none">
		    <div class="page-content-body no-padding"> 
		        <div class="portlet light">
		            <div class="portlet-body no-padding"> 
		                <div class="tabbable-custom tabbable-parallel"> 
		                    <div class ="tab-content no-padding"> 
		                    	<div class="tab-pane active" id="wholesale_h"> 
		                        	<div class="table-container"> 
		                            	@empty($hotel[0]->wholesaler_id)
		                        			No Hotel under this wholesaler
		                        		@else
		                        			<table class="table table-striped table-hover" id ="datatable-people-wholesale_h" data-url="{{ route('getWholesaleH', ['id' => request('id')]) }}"> 
			                                	<thead> 
			                                    	<tr role="row" class="heading"> 
				                                        <th class="text-center"> No</th> 
				                                        <th class="text-center"> Hotel Name</th> 
				                                        <th class="text-center"> Address</th> 
				                                        <th class="text-center"> Contact</th> 
				                                        <!-- <th class="text-center"> City</th>  -->
				                                        <th class="text-center">Status</th> 
				                                        <!-- <th class="text-center">Action</th>  -->
			                                    	</tr> 
				                                    <tr role="row" class="filter"> 
				                                        <td></td> 
				                                        <td> 
				                                            <input type="text" class="form-control form-filter filter-search input-sm filter-hotel_name" name="hotel_name" placeholder="Hotel Name"> 
				                                        </td> 
				                                        <td> 
				                                            <input type="text" class="form-control form-filter filter-search input-sm filter-address" name="address" placeholder="Address"> 
				                                        </td> 
				                                        <td> 
				                                            <input type="text" class="form-control form-filter filter-search input-sm filter-contact" name="contact" placeholder="Contact"> 
				                                        </td> 
				                                        <!-- <td> 
				                                            <input type="text" class="form-control form-filter filter-search input-sm filter-city" name="city" placeholder="City"> 
				                                        </td>  -->
				                                        <td> 
				                                            <input type="text" class="form-control form-filter filter-search input-sm filter-status" name="action" placeholder="status"> 
				                                        </td>
				                                        <!-- <td class="text-center"> 
				                                        </td> -->
				                                    </tr>
			                                	</thead>
			                                	<tbody>
			                                	</tbody> 
			                            	</table>
		                        		@endempty       
		                        </div>
		                    </div> 
		                </div>
		            </div>
		        </div> 
		    </div> 
		</div> 
	</form>
</div>  
	
@endsection
@section('footer_script')
    <script src="{{asset('assets/scripts/datatable.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/datatables.min.js' )}}" type="text/javascript"></script>
    <script src="{{asset('assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js' )}}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/jquery.validate.min.js') }}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/jquery-validation/js/additional-methods.min.js') }}"
            type="text/javascript"></script>
    <script src="{{asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' )}}"
            type="text/javascript"></script>
    <script src="{{asset('assets/scripts/pages/people/wholesaler.js') }}" type="text/javascript"></script> 

    <script type="text/javascript">
    	function ChangeForm(a,b,c){

			document.getElementById("detail_link").classList.remove('active');
			document.getElementById("contact_link").classList.remove('active');
			document.getElementById("hotel_link").classList.remove('active');
			document.getElementById(c).classList.add('active');


			document.getElementById("wholesaler_contact").classList.add('d-none');
			document.getElementById("wholesaler_detail").classList.add('d-none');
			document.getElementById("wholesaler_hotel").classList.add('d-none');
			document.getElementById(a).classList.remove('d-none');
    	}
    </script>

@endsection