@extends('layouts.default')

@section('content')
<div class="container-fluid">
	<!-- Add Order -->
	<div class="modal fade" id="addOrderModalside">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Create Project</h5>
					<button type="button" class="close" data-bs-dismiss="modal"><span>&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form>
						@csrf
						<div class="form-group">
							<label class="text-black font-w500">Project Name</label>
							<input type="text" class="form-control">
						</div>
						<div class="form-group">
							<label class="text-black font-w500">Deadline</label>
							<input type="date" class="form-control">
						</div>
						<div class="form-group">
							<label class="text-black font-w500">Client Name</label>
							<input type="text" class="form-control">
						</div>
						<div class="form-group">
							<button type="button" class="btn btn-primary">CREATE</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="page-titles">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="javascript:void(0)">Form</a></li>
			<li class="breadcrumb-item active"><a href="javascript:void(0)">Pickers</a></li>
		</ol>
	</div>
	<!-- row -->
	<div class="row">
		<div class="col-xl-9">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Date Picker</h4>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-xl-4 mb-3">
							<div class="example">
								<p class="mb-1">Date Range Pick</p>
								<input class="form-control input-daterange-datepicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015">
							</div>
						</div>
						<div class="col-xl-4 mb-3">
							<div class="example">
								<p class="mb-1">Date Range With Time</p>
								<input type="text" class="form-control input-daterange-timepicker" name="daterange" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM">
							</div>
						</div>
						<div class="col-xl-4">
							<div class="example">
								<p class="mb-1">Limit Selectable Dates</p>
								<input class="form-control input-limit-datepicker" type="text" name="daterange" value="06/01/2015 - 06/07/2015">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3">
			<!-- Card -->
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Pick-Date picker</h4>
				</div>
				<div class="card-body">
					<p class="mb-1">Default picker</p>
					<input name="datepicker" class="datepicker-default form-control" id="datepicker">
				</div>
			</div>
			<!-- Card -->
		</div>
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Date picker</h4>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6 col-xl-3 col-xxl-6 mb-3">
							<label>Default Clock Picker</label>
							<div class="input-group clockpicker">
								<input type="text" class="form-control" value="09:30"> <span class="input-group-append"><span class="input-group-text"><i
											class="fa fa-clock-o"></i></span></span>
							</div>
						</div>
						<div class="col-md-6 col-xl-3 col-xxl-6 mb-3">
							<label>Auto close Clock Picker</label>
							<div class="input-group clockpicker" data-placement="bottom" data-align="top" data-autoclose="true">
								<input type="text" class="form-control" value="13:14"> <span class="input-group-append"><span class="input-group-text"><i
											class="fa fa-clock-o"></i></span></span>
							</div>
						</div>
						<div class="col-md-6 col-xl-3 col-xxl-6 mb-3">
							<label>Now time</label>
							<div class="input-group">
								<input class="form-control" id="single-input" value="" placeholder="Now">
								<span class="input-group-btn overflow-hidden b-radius">
									<button type="button" id="check-minutes" class="btn waves-effect rounded-0 h-100 waves-light btn-ft btn-success">Check the minutes</button>
								</span>
							</div>
						</div>
						<div class="col-md-6 col-xl-3 col-xxl-6">
							<label>Left Placement</label>
							<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
								<input type="text" class="form-control" value="13:14"> 
								<span class="input-group-append">
									<span class="input-group-text"><i class="fa fa-clock-o"></i></span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Material Date picker</h4>
				</div>
				<div class="card-body">
					<div class="row form-material">
						<div class="col-xl-3 col-xxl-6 col-md-6 mb-3">
							<label>Default Material Date Picker</label>
							<input type="text" class="form-control" placeholder="2017-06-04" id="mdate">
						</div>
						<div class="col-xl-3 col-xxl-6 col-md-6 mb-3">
							<label>Default Material Date Timepicker</label>
							<input type="text" id="date-format" class="form-control" placeholder="Saturday 24 June 2017 - 21:44">
						</div>
						<div class="col-xl-3 col-xxl-6 col-md-6 mb-3">
							<label>Time Picker</label>
							<input class="form-control" id="timepicker" placeholder="Check time">
						</div>
						<div class="col-xl-3 col-xxl-6 col-md-6">
							<label>Min Date set</label>
							<input type="text" class="form-control" placeholder="set min date" id="min-date">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Color Picker</h4>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-xl-4 col-lg-6 mb-3">
							<div class="example">
								<p class="mb-1">Simple mode</p>
								<input type="text" class="as_colorpicker form-control" value="#7ab2fa">
							</div>
						</div>
						<div class="col-xl-4 col-lg-6 mb-3">
							<div class="example">
								<p class="mb-1">Complex mode</p>
								<input type="text" class="complex-colorpicker form-control" value="#fa7a7a">
							</div>
						</div>
						<div class="col-xl-4 col-lg-6 mb-3">
							<div class="example">
								<p class="mb-1">Gradiant mode</p>
								<input type="text" class="gradient-colorpicker form-control" value="#bee0ab">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection