@extends('layouts.app')

@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">

			<!-- start page title -->
			<div class="row mt-3 mb-3">
				<div class="col-8 col-sm-8 col-md-8 col-lg-8">
					<div class="page-title-box">
						
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="{{ route('dashboard') }}">Dashboard</a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{ route('timeSlotsList') }}">Time Slot</a>
							</li>
							<li class="breadcrumb-item active">
								Create New
							</li>
						</ol>
					</div>
				</div>
				
			</div>
			<div class="row">
				<div class="col-12">

					<form class="form-horizontal" action="{{ route('saveTimeSlot') }}" method="post" enctype="multipart/form-data" id="adminUserForm">
						@csrf
						<div class="card">
							<div class="card-header bg-dark ">
								<div class="row">
									<div class="col-6 col-sm-8 col-md-8 col-lg-8">
										<h4 class="text-white m-0 p-0"><i class="fa fa-user"></i> Create New Time Slot</h4>
									</div>
									<div class="col-6 col-sm-4 col-md-4 col-lg-4 text-right">
										<button type="submit" class="btn btn-success btn-sm waves-effect waves-light">
											<i class="mdi mdi-content-save"></i> Save
										</button>
										<a href="{{ route('timeSlotsList') }}">
											<button type="button" class="btn btn-danger btn-sm waves-effect waves-light">
												<i class="fa fa-user-friends"></i> View All
											</button>
										</a>
									</div>
								</div>
							</div>
							<div class="card-body">
								<div class="row">
									<div class="col-7">
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>Price</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="text" class="form-control @error('price') is-invalid @enderror" min="0.1" value="{{old('price')}}" name="price" id="main_price" required placeholder="Price">
												@if ($errors->has('price'))
                                                      <span class="text-danger">{{ $errors->first('price') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right">Is Any Time</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="checkbox"  class="form-control is_any_time" name="is_any_time" onchange="isAnyTime()">
											</div>
										</div>
										<div class="form-group row mb-3 startTime">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>Start Time</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<input type="time" id="preloading-timepicker" name="start_time"  value="{{$address->start_time ?? ''}}" name="start_time" class="form-control" required placeholder="Start Time">
												@if ($errors->has('start_time'))
                                                      <span class="text-danger">{{ $errors->first('start_time') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3 endTime">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right"><span class="text-danger">*</span>End Time</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												 <input type="time" id="preloading-timepicker-out" name="end_time" class="form-control" value="{{$address->end_time ?? ''}}" name="end_time" id="" required placeholder="End Time">
												@if ($errors->has('end_time'))
                                                      <span class="text-danger">{{ $errors->first('end_time') }}</span>
                                                @endif
											</div>
										</div>
										<div class="form-group row mb-3">
											<label for="inputEmail3" class="col-4 col-sm-2 col-md-2 col-lg-2 col-form-label text-right">Enabled</label>
											<div class="col-8 col-sm-10 col-md-10 col-lg-10">
												<select class="form-control" name="enabled" id="example-select">
													<option {{old('enabled')=='Yes'?'selected':''}} value="Yes">Yes</option>
													<option {{old('enabled')=='No'?'selected':''}} value="No">No</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-5">
										<div class="card-body ">
											<a href="#" class="btn btn-info showDayPrice">Add price for each day</a>
											<div class="dayPrice">
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label">Days</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label">Price</label>
                									</div>
                								</div>
                							</div>
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label text-right">Monday</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                									<div class="">
                											<input type="text" class="form-control" name="day[monday]" min="0.1" id="monday" placeholder="Price">
                										</div>
                									</div>
                								</div>
                							</div>
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label text-right">Tuesday</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                										<div class="">
                											<input type="text" class="form-control" name="day[tuesday]" min="0.1" id="tuesday" placeholder="Price">
                										</div>
                									</div>
                								</div>
                							</div>
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label text-right">Wednesday</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                										<div class="">
                											<input type="text" class="form-control" name="day[wednesday]" min="0.1" id="wednesday" placeholder="Price">
                										</div>
                									</div>
                								</div>
                							</div>
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label text-right">Thursday</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                										<div class="">
                											<input type="text" class="form-control" name="day[thursday]" min="0.1" id="thursday" placeholder="Price">
                										</div>
                									</div>
                								</div>
                							</div>
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label text-right">Friday</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                										<div class="">
                											<input type="text" class="form-control" name="day[friday]" min="0.1" id="friday" placeholder="Price">
                										</div>
                									</div>
                								</div>
                							</div>
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label text-right">Saturday</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                										<div class="">
                											<input type="text" class="form-control" name="day[saturday]" min="0.1" id="saturday" placeholder="Price">
                										</div>
                									</div>
                								</div>
                							</div>
                							<div class="row">
                								<div class="col-3">
                									<div class="form-group row mb-3">
                										<label for="inputEmail3" class="col-form-label text-right">Sunday</label>
                									</div>
                								</div>
                								<div class="col-9">
                									<div class="form-group row mb-3">
                										<div class="">
                											<input type="text" class="form-control" name="day[sunday]" min="0.1" id="sunday" placeholder="Price">
                										</div>
                									</div>
                								</div>
                							</div>
                							</div>
                						</div>
									</div>
								</div>
							</div>
						</div>
					</form>
					</div>
						<!-- end card-->
						

				</div>
				<!-- end col -->
			</div>
			<!-- end row -->

		</div>
		<!-- container -->

	</div>
	<!-- content -->

<script>
	$('.dayPrice').hide();
	
	$('.showDayPrice').click( function (){
		var mainPrice = $('#main_price').val();
		if(mainPrice == ""){
			mainPrice = "0.99";
			$('#main_price').val(mainPrice);
		}
		
		$('#sunday').val(mainPrice);
		$('#saturday').val(mainPrice);
		$('#friday').val(mainPrice);
		$('#thursday').val(mainPrice);
		$('#wednesday').val(mainPrice);
		$('#tuesday').val(mainPrice);
		$('#monday').val(mainPrice);
		
		$('.dayPrice').show();
	});
	
	$(function() {
		buildValidation();
	});

	function buildValidation() {
		var bootstrapValidat = $('#adminUserForm').data('bootstrapValidator');

		if (bootstrapValidat != undefined) {
			bootstrapValidat.destroy();
		}

		$('#adminUserForm').bootstrapValidator({
			// Only disabled elements are excluded
			// The invisible elements belonging to inactive tabs must be validated
			excluded : [':disabled'],
			//container: '#valMessages',
			feedbackIcons : {
				valid : 'fa fa-check',
				invalid : 'fa fa-times',
				validating : 'fa fa-refresh'
			},
			fields : {
				name : {
					validators : {
						notEmpty : {
							message : 'User Display name is required'
						}
					}
				},
				role : {
					validators : {
						notEmpty : {
							message : 'User Role is required'
						}
					}
				},
				
				enabled : {
					validators : {
						notEmpty : {
							message : 'Enabled Status is required'
						}
					}
				},
				country_code : {
					validators : {
						integer : {
							message : 'Only numeric country codes are allowed'
						}
					}
				},
				phone : {
					validators : {
						numeric : {
							message : 'Only Numbers are allowed'
						}
					}
				},
				email : {
					validators : {
						notEmpty : {
							message : 'Email is required'
						},
						emailAddress: {
	                        message : 'Invalid Email Address'
	                    }
					}
				},
				password : {
					validators : {
						notEmpty : {
							message : 'Password is required'
						},
						regexp: {
	                        regexp: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})',
	                        message: 'Password must contain 1 Small, 1 Upper case letter, 1 number and 1 special character with minimum length of 8'
	                    }
					}
				},
				photo : {
					validators : {
						file : {
							extension : 'jpeg,png,svg,jpg,gif',
							//type: 'image/jpeg,image/png',
							//maxSize: 2048 * 1024,
							message : 'Only JPEG, PNG, SVG, GIF or JPG are allowed for Featured Image'
						}
					}
				},
			}
		});
		
	}
	
	 function isAnyTime()
    {
        if($('.is_any_time').is(":checked")) 
        {  
            $(".startTime").hide();
            $(".endTime").hide();
             $(".startTime").hide().find('.form-control').prop('disabled',true);
            $(".endTime").hide().find('.form-control').prop('disabled',true);
         }
        else
        {
            $(".startTime").show();
            $(".endTime").show();
             $(".startTime").show().find('.form-control').prop('disabled',false);
            $(".endTime").show().find('.form-control').prop('disabled',false);
        }
    }
</script>
@endsection