@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;
        }
		div.success-message {
			background-color: #d4edda; 
			color: #155724;
			border: 1px solid #c3e6cb; 
			padding: 10px 15px; 
			margin-bottom: 20px; 
			border-radius: 5px; 
		}
    </style>
@endsection
@section('content')
<div style="min-height: 75vh; max-height: 75vh; height: 75vh; overflow: auto;">

	@php
		if((Session::get('success'))){
	@endphp
			<div class="success-message">
				{{Session::get('success')}}
			</div>
	@php
		Session::forget('success');
		}
	
	@endphp
	<form method="POST" enctype="multipart/form-data" action="{{route('staff.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" ><font style="font-size:15px;"><b>Details</b></font></a>
			                </li>
			            	<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 class="Discard"><a href="{{ route('staff.index') }}" class="btn btn-danger px-4 py-1" style="float: right;margin-right: 10px;">DISCARD</a></div>
			            </ul>
		            </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">Salutation :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input autocomplete="off" type="text" name="salutation" id="salutation" class="form-control" value="" >
					</div>
					<div class="mx-3">	
					</div>
					<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="first_name" id="first_name" class="form-control" value="" required>
					</div>
				</div>
				<div class="form-group row my-0">
					<label class="col-sm-2 form-label pt-1 text-left">Contact :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input type="text" name="tel_phone" id="tel_phone" class="form-control">
					</div>
					<div class="mx-3">	
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Mobile Phone :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input type="text" name="mobile_phone" id="mobile_phone" class="form-control">
					</div>
				</div>
				<div class="form-group row my-0">
					
					
					<div class="mx-3">	
					</div>
					<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="address" id="address" class="form-control" ></textarea> 
					</div>
					
				</div>
				<!-- <div class="form-group row my-0">
					<div class="mx-3">	
					</div> -->
					<!-- <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="" >
					</div> -->
				<!-- </div> -->
			</div>
			<hr>
			
			<div class="col-2 ml-8 pl-8" style="padding-top : 10px;">
				<div class="form-group row my-0">
					<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" required type="text" name="email" id="email" class="form-control" value="">
					</div>
					<div class="mx-3">	
					</div>
					<label class="col-sm-2 form-label pt-1 text-left">Roles* :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<select required id="group" class="form-control" name="roles">
							<option value="" selected disabled="">Select Roles</option>
							@foreach ($role as $ur => $values)
								@if ($values->id == 16) <!-- Only include role with ID 16 -->
									<option value="{{$values->id}}">{{$values->name}}</option>
								@endif
							@endforeach
						</select>						 
					</div>
				</div>
				<div class="mx-3">	
				</div>
			
				<!-- <div class="form-group row my-0">
					<label class="col-sm-2 form-label pt-1 text-left">Username* :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<input autocomplete="off" required type="text" name="username" id="username" class="form-control" value="" required>
					</div>
					<div class="mx-3">	
					</div>
				</div> -->

				<!-- <div class="form-group row my-0 pt-5">
					<label class="col-sm-2 form-label pt-1 text-left">User Group* :</label>
					<div class="col-sm-3 mb-3 mr-5">
						<select  id="group" class="form-control" name="user_group" required>
							<option value="" selected disabled="">Select User Group</option>
							@foreach ($user_group as $ug => $values)
							<option value="{{$values->id}}">{{$values->name}}</option>
							@endforeach		
						</select> 
					</div>
				</div> -->
				<div class="form-group row my-0 pt-5">
					<label class="col-sm-2 form-label pt-1 text-left">Password* :</label>
	                <div class="col-sm-3 mb-3 mr-5">
	                    <input autocomplete="off" required type="password" name="pw" id="pw" class="form-control" value="">
	                    <input type="checkbox" class="form-control" onClick="myFunction();">Show Password
	                </div>
					<div class="mx-3">	
					</div>
					<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"></textarea> 
					</div>
				</div>
				<div class="form-group row my-0">
					
					
				</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/booking/new.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
		$(document).ready(function(){
		$('div.success-message').fadeIn();

		setTimeout(function(){
			$('div.success-message').fadeOut();
		}, 2000); 
	});
    	function myFunction() {
          var x = document.getElementById("pw");
          if (x.type === "password") {
            x.type = "text";
          } else {
            x.type = "password";
          }
        }
    </script>

@endsection