@extends('layouts.cmsApp')

@section('content')
<div class="nk-block-head nk-block-head-sm">
	<div class="nk-block-between">
		<div class="nk-block-head-content">
			<h3 class="nk-block-title page-title">
				<a href="javascript:history.back()" class="pt-3"><em class="icon ni ni-chevron-left back-icon"></em> </a>
				Create Draft Complaint
			</h3>
		</div><!-- .nk-block-head-content -->
	</div><!-- .nk-block-between -->
</div><!-- .nk-block-head -->
<form action="{{ url('cms/draft-complaint/store') }}" method="post" enctype="multipart/form-data" id="complaintForm">
	@csrf
	<div class="nk-block">
		<div class="alert alert-danger alert-dismissible fade alertBox hide" role="alert" style="margin-top: 5px;">
			<span id="alertMessage"></span>
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true"></span>
			</button>
        </div>

		<div class="row mb-3">
			<div class="col-md-12">
				<div class="card card-bordered">
					<div class="card-body">
						<div class="row gx-5 gy-3">
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="organization">Customer Name <span class="text-danger">*</span></label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="Enter" required />
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="vehicle_no">Registration No.</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<input type="text" class="form-control w-100" data-selector="vehicle_no" name="vehicle_no" placeholder="Enter" />	
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="chassis_no">Chassis No.</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<input type="text" class="form-control w-100 fetchData" data-selector="chassis_no" name="chassis_no" placeholder="Enter" />
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="complaint_category">Complaint Category</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<select class="form-select form-control" data-selector="complaint_category" id="complaint_category" name="complaint_category" data-placeholder="Select" data-search="on">
											<option value=""></option>
											@forelse ($complaintCategories as $key => $category)
												<option value="{{ $category->id }}">{{ $category->category }}</option>
											@empty
												
											@endforelse
										</select>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="complaint_sub_category">Complaint Sub-Category</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<select class="form-select form-control" data-selector="complaint_sub_category" id="complaint_sub_category" name="complaint_sub_category" data-placeholder="Select" data-search="on">
											<option value=""></option>
										</select>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="mode_of_complaint">Mode of Complaint</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<select class="form-select form-control" data-selector="mode_of_complaint" id="mode_of_complaint" name="mode_of_complaint" data-placeholder="Select" data-search="on">
											<option value=""></option>
											@forelse ($modes as $key => $mode)
												<option value="{{ $mode->id }}">{{ $mode->mode }}</option>
											@empty
												
											@endforelse
										</select>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="product">Product</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
	
										<select class="form-select form-control" data-selector="product" id="product" name="product" data-placeholder="Select" data-search="on">
											<option value=""></option>
											@forelse ($products as $key => $product)
												<option value="{{ $product->id }}">{{ $product->product_name }}</option>
											@empty
												
											@endforelse
										</select>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="application">Product Segment</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<select class="form-select form-control" data-selector="application" id="application" name="application" data-placeholder="Select" data-search="on">
											<option value=""></option>
											@forelse ($applications as $key => $application)
												<option value="{{ $application->id }}">{{ $application->application_name }}</option>
											@empty
												
											@endforelse
										</select>
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="region">Region</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<select class="form-select form-control" data-selector="region" id="region" name="region" data-placeholder="Select" data-search="on">
											<option value=""></option>
											@forelse ($regions as $key => $region)
												<option value="{{ $region->id }}">{{ $region->region_name }}</option>
											@empty
												
											@endforelse
										</select>
									</div>
								</div>
							</div>

							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="dealer">Dealer</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<select class="form-select form-control" data-selector="dealer" id="dealer" name="dealer" data-placeholder="Select" data-search="on">
											<option value=""></option>
											@forelse ($dealers as $key => $dealer)
												<option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
											@empty
												
											@endforelse
										</select>
									</div>
								</div>
							</div>							
							<div class="col-md-4">
								<div class="flex-nowrap gx-3">
									<div>
										<label class="form-label" for="vehicle_models">Vehicle Model</label>
									</div>
									<div class="form-control-wrap form-control-required-wrap flex-fill">
										<select class="form-select form-control" data-selector="vehicle_models" id="vehicle_models" name="vehicle_models" data-placeholder="Select" data-search="on">
											<option value=""></option>
											@forelse ($models as $key => $model)
												<option value="{{ $model->id }}">{{ $model->name }}</option>
											@empty
												
											@endforelse
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row mb-3">
			<div class="col-md-12">
				<div class="form-control-wrap">
					<textarea class="form-control" name="description_text" value="" id="description_text" placeholder="Enter Complaint Description here"></textarea>
				</div>
			</div>
		</div>
		<div class="row mb-3">
			<div class="col-md-12">
				<div class="row g-2">
					<div class="col-lg-6">
						<div class="form-inline gx-3">
							<div class="form-group">
								<label class="form-label" for="contact_1st">Attachment</label>
							</div>
							<div class="form-control-wrap">
								<div class="custom-file">
									<input type="file" class="custom-file-input" name="attachment[]" id="attachment" multiple>
									<span class="custom-file-label" for="attachment">Choose file</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>

	<div class="nk-block mb-3">
		<div class="row">
			<div class="col-md-12">
				<div class="sp-plan-info pt-0 pb-0 card-inner">  
					<div class="row">
						<div class="col-lg-7 text-right offset-lg-5">
							<div class="form-group">
								<a href="javascript:history.back()" class="btn btn-outline-light">Cancel</a>
								<input type="submit" name="submit" value="Create" class="btn btn-primary" />
								<!-- <input type="button" name="discard" value="Discard" class="btn btn-danger" /> -->
							</div>
						</div>
					</div>
				</div><!-- .sp-plan-info -->
			</div><!-- .col -->
		</div><!-- .row -->
	</div>
</form>
@endsection
@push('footerScripts')
<script type="text/javascript">

	function onInvalidTag(e){
		console.log("invalid", e.detail)
	}
	// End: Tagify code
	jQuery(document).ready(function($){
		
		$(document).on("change", "#complaint_category", function(e){
			var root_url = "