@extends('layouts.master')
@section('title', $title)
@section('content')
<link href="{{ asset('css/AddContact.css') }}" rel="stylesheet">
<section class="content">
    <div class="container-fluid">
		<div class="col-12">
			<form>
				<div class="box">
					<div class="first-box">
					<img src="{{ asset('images/office.png') }}" />
						<div class="Present">
							<p>Contacts: Add Contact</p>
						</div>
					</div>
				</div>
			</form>
			<div class="h2_event">
				<div class="h2">
					<h1>Basic Information</h1>
				</div>
				<div class="h2">
					<h1>Contact Information</h1>
				</div>
			</div>

			<!-- /.card-header -->
			@if ($error = Session::get('error'))
			<div class="alert alert-danger">
				<p>{{ $error }}</p>
			</div>
			@endif
			@if ($message = Session::get('message'))
			<div class="alert alert-success">
				<p>{{ $message }}</p>
			</div>
			@endif
			@if (count($errors) > 0)
				<div class="alert alert-danger">
					<strong>Whoops!</strong> There were some problems with your input.<br><br>
					<ul>
						@foreach ($errors->all() as $error)
						<li>{{ $error }}</li>
						@endforeach
					</ul>
				</div>
			@endif
			<form action="{{ route('contact.store') }}" method="POST" enctype='multipart/form-data'  id="letter-form">
				@csrf
				<div class="maine_container">
					<div class="mycontait">
						<div class="left_upper">
							<div class="d-flex">
								<div class="vancy">
									<label for="inputFirstName">First Name*:</label>
									<div>
									<input type="text" name="first_name" class="vancy1" id="inputFirstName" value="{{ old('first_name') }}">
									</div>
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputLastName">Last Name*:</label>
									<div>
									<input type="text" name="last_name" class="vancy1" id="inputLastName" value="{{ old('last_name') }}">
									</div>
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputContactCompany">Company*:</label>
										<select name="company_id" id="inputContactCompany" class="vancy1">
											@if($companies)
											<option selected>Choose a Company:</option>
											@foreach($companies as $id => $name)
											<option value="{{ $id }}" {{ old('company_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
											@endforeach
											@endif
										</select>
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputTitle">Title*:</label>
									<input type="text" name="title" class="vancy1" id="inputTitle" value="{{ old('title') }}">
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputContactDepartment">Department:</label>
									<select name="company_department_id" id="inputContactDepartment" class="vancy1">
										<option selected>None</option>
									
									</select>
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputReportsTo">Reports to:</label>
										<select name="reports_to" id="inputReportsTo" class="vancy1">
										<option selected>None</option>
										
									</select>
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputCheckbox">Is Consultant:</label>
									<input type="checkbox" name="is_consultant" class="checkbox90" id="inputCheckbox" {{ old('is_consultant') ? 'checked' : '' }}>
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputState">State:</label>
									<input type="text" name="state" class="vancy1" id="inputState" value="{{ old('state') }}">
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputPostalCode">Postal Code:</label>
									<input type="text" name="pincode" class="vancy1" id="inputPostalCode" value="{{ old('pincode') }}">
								</div>
							</div>
						</div>
					</div>
					<div class="my_container">
						<div class="left_upper1">
							<div class="d-flex">
							<div class="vancy">
								<label for="inputEmail1">Email 1:</label>
								<div><input type="email" name="email1" class="vancy1 getIDByEmailPan" id="inputEmail1" value="{{ old('email1') }}"></div>
							</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputEmail2">Email 2:</label>
									<input type="email" name="email2" class="vancy1 getIDByEmailPan" id="inputEmail2" value="{{ old('email2') }}">
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputBestTimeCall">Work Phone:</label>
									<input type="number" name="phone_work" class="vancy1" id="inputBestTimeCall" value="{{ old('phone_work') }}">
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputDateAvailable">Other Phone:</label>
									<input type="number" name="phone_other" class="vancy1" id="inputDateAvailable" value="{{ old('phone_other') }}">
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputCellPhone">Cell Phone:</label>
									<input type="number" name="phone_cell" class="vancy1" id="inputCellPhone" value="{{ old('phone_cell') }}">
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputAddress">Address:</label>
									
										<textarea row="5" name="address" class="vancy1" id="inputAddress" value="{{ old('address') }}"></textarea>
								</div>
							</div>
							<div class="d-flex">
								<div class="vancy">
									<label for="inputCity">City:</label>
									<input type="text" name="city" class="vancy1" id="inputCity" value="{{ old('city') }}">
								</div>
							</div>
							
						</div>
					</div>											
				</div>
				<div class="h2">
					<h1>Others</h1>
				</div>
				<div class="air_Container">
					<div class="left_upper1">
						<div class="d-flex">
							<div class="air_vancy">
								<label>Notes</label>
								<div> <textarea row="5" name="notes" class="vancy2" id="inputNotes" value="{{ old('notes') }}" style="height:200px;"></textarea></div>
							</div>
						</div>
						@if(!empty($extraFields) && count($extraFields))
							@foreach($extraFields as $field)
								<div class="d-flex">
									<div class="air_vancy">
										<label for="{{ $field['field_name'] }}">{{ ucfirst($field['field_name']) }}:</label>
										{!! $field['addHTML'] !!}
									</div>
								</div>
							@endforeach
						@endif
					</div>
				</div>	
				<div class="alignmentOfButton">				
					<button class="btn" type="submit" id ="for-sub" style="width:110px;">Submit</button>
					<a class="btn1" style="color:white;!important" href="{{ route('contact.index') }}">Back</a>
				</div>
			</form>
		</div>
	</div>
</section>
@endsection
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script>
    $(function() { 
	  $('.form-select').addClass('vancy1');
    })
	
	$(document).on("click","#for-sub",function() {
		$('#loader').show();
		$(this).attr("disabled", 'disabled'); 
		$("#letter-form").submit();
    });
	
 
</script>
<style>
.alignmentOfButton {display:flex;align-items:center!important;}
.btn1 {width:108px!importnat;padding:5px 31px!important;}

</style>