@extends('backend.layouts.app')
@section('content')
<style type="text/css">
a.btn{
	min-width: 100px;
}
</style>
<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h1 class="main-title float-left">Manage Holiday</h1>
		<ol class="breadcrumb float-right">
			<li class="breadcrumb-item">Home </li>
			<li class="breadcrumb-item active">Holiday</li>
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container fullbody">
	<div class="col-md-6">
		<div class="card">
			<div class="card-header">
				<h5>{{@$editData ? 'Update Holiday' :'Add Holiday'}}</h5>
			</div>
			<form method="post" action="{{@$editData ? route('settings.holiday.update') : route('settings.holiday.store')}}" id="myForm">
				{{csrf_field()}}
				<input type="hidden" name="holiday_id" id="holiday_id" value="{{@$editData['id']}}">
				<div class="card-body">
					<div class="form-row">
						<div class="form-group col-sm-12">
							<label class="control-label">Holiday Name</label>
							<select name="holiday_name_id" id="holiday_name_id" class="form-control form-control-sm select2">
								<option value="">Select Holiday Name</option>
								@foreach($holiday_names as $holiday_name)
								<option {{@$editData['id']==$holiday_name->id ? 'selected':''}} value="{{$holiday_name->id}}">{{$holiday_name->holiday_name}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="form-row">
						<div class="form-group col-sm-6">
							<label class="control-label">Start Date</label>
							<div class="input-group input-group-sm">
								<input type="text" class="form-control form-control-sm singledatepicker" name="start_date" id="start_date" placeholder="Pick Start Date" value="{{@$editData['start_date']}}" autocomplete="off">
								<div class="input-group-append">
									<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar"></i></span>
								</div>
							</div>

						</div>
						<div class="form-group col-sm-6">
							<label class="control-label">End Date</label>
							<div class="input-group input-group-sm">
								<input type="text" class="form-control form-control-sm singledatepicker" name="end_date" id="end_date" placeholder="Pick End Date" value="{{@$editData['end_date']}}" autocomplete="off">
								<div class="input-group-append">
									<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar"></i></span>
								</div>
							</div>
							{{-- <input type="text" class="form-control form-control-sm singledatepicker" name="end_date" id="end_date" placeholder="Pick End Date" value="{{@$editData->holiday_name}}"> --}}

						</div>
					</div>
					<div class="form-group col-md-10">
						<label class="control-label">Status</label>
						<label class="control-label">
							<input type="radio" id="radio" name="status" class="minimal" value="1" checked="" {{@$editData->status==1 ? 'checked' :''}}>
							Active
						</label>
						<label class="control-label">
							<input type="radio" id="radio" name="status" class="minimal" value="0" {{@$editData->status=="0" ? 'checked' :''}}>
							Inactive
						</label>
					</div>

					<button type="submit" class="btn btn-success btn-sm" id="storeButton">{{@$editData ? 'Update' :'Save'}}</button>
					<a href="{{ url()->previous() }}" class="btn btn-instagram btn-sm">Back</a>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection
@section('page_script')
<script type="text/javascript">
	$(function(){
		$('#start_date').on('apply.daterangepicker', function(ev, picker) {
			$(this).val(picker.startDate.format('YYYY-MM-DD'));
			var end_date= $(this).val();
			$('#end_date').val(end_date);
			// $('#end_date').daterangepicker({
			// 	singleDatePicker:true,
			// 	locale: {
			// 		format: 'YYYY-MM-DD',
			// 	}
			// });
			$('#end_date').data('daterangepicker').setStartDate(end_date);

// $('#element').daterangepicker({
//   isInvalidDate: function(date) {
//     //return true if date should be disabled
//   }
// }, function(start, end, label) {
//   //callback
// });


		});
	});
</script>
{{-- Form Validation --}}
<script>
	$(function(){
		$('#myForm').validate({
			errorPlacement: function(error, element){
				if (element.attr("name") == "start_date"){ error.insertAfter(element.closest('.input-group')); }
				else if (element.attr("name") == "end_date"){ error.insertAfter(element.closest('.input-group')); }
				else if (element.attr("name") == "holiday_name_id" ){ error.insertAfter(element.next()); }
				else{error.insertAfter(element);}
			},
			rules:{
				holiday_name_id:{
					required: true
				},
				start_date:{
					required: true
				},
				end_date:{
					required: true
				}
			},
			messages:{
				holiday_name_id:{
					required: "Please select holiday name."
				},
				start_date:{
					required: "Please select start date."
				},
				end_date:{
					required: "Please select end date"
				}
			}
		});
	});
</script>
@endsection