@extends('layouts.employer-main')
@section('content')

				<h2 class="main-title">Post a New Job</h2>

				<div class="bg-white card-box border-20">
                    <h4 class="dash-title-three">Job Details</h4>
                    <form method="POST" action="{{route('add-job')}}">
                        @csrf
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Job Title*</label>
                        <input type="text" value="{{old('job_title')}}" placeholder="Ex: Product Designer" name="job_title" >
                    </div>
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Overview*</label>
                        <textarea class="size-lg" name="overview" placeholder="Write about the job overview in details...">{{old('overview')}}</textarea>
                    </div>
                    <!-- /.dash-input-wrapper -->
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Job Description*</label>
                        <textarea class="size-lg" name="job_description" placeholder="Write about the job in details...">{{old('job_description')}}</textarea>
                    </div>
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Responsibilities*</label>
                        <textarea class="size-lg" name="responsibilities" placeholder="Write about the job responsibilites in details...">{{old('responsibilities')}}</textarea>
                    </div>
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Required Skills*</label>
                        <textarea class="size-lg" name="job_skills" placeholder="Write about the job skills in details...">{{old('job_skills')}}</textarea>
                    </div>
                    <div class="dash-input-wrapper mb-30">
                        <label for="">Benefits*</label>
                        <textarea class="size-lg" name="benefits" placeholder="Write about the job benefits in details...">{{old('benefits')}}</textarea>
                    </div>
                   
                    <!-- /.dash-input-wrapper -->
                    <div class="row align-items-end">
                        <div class="col-md-6">
                            <div class="dash-input-wrapper mb-30">
                                <label for="">Job Category</label>
                                <select class="nice-select" name="job_category">
									<option  value="Desinger" {{ old('job_category') === 'Desinger' ? 'selected' : '' }}>Desinger</option>
									<option value="It & Development" {{ old('job_category') === 'It & Development' ? 'selected' : '' }}>It & Development</option>
									<option value="Web & Mobile Dev" {{ old('job_category') === 'Web & Mobile Dev' ? 'selected' : '' }}>Web & Mobile Dev</option>
									<option value="Writing" {{ old('job_category') === 'Writing' ? 'selected' : '' }}>Writing</option>
								</select>
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                        <div class="col-md-6">
                            <div class="dash-input-wrapper mb-30">
                                <label for="">Job Type</label>
                                <select class="nice-select"name="job_type" >
									<option value="Full time" {{ old('job_type') === 'Full time' ? 'selected' : '' }}>Full time</option>
									<option value="Part time" {{ old('job_type') === 'Part time' ? 'selected' : '' }}>Part time</option>
                                    <option value="Hourly-Contract" {{ old('job_type') === 'Hourly-Contract' ? 'selected' : '' }}>Hourly-Contract </option>
                                    <option value="Fixed-Price" {{ old('job_type') === 'Fixed-Price' ? 'selected' : '' }}>Fixed-Price</option>
								</select>
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                        <div class="col-md-6">
                            <div class="dash-input-wrapper mb-30">
                                <label for="">Salary*</label>
                                <select class="nice-select" name="salary" >
									<option value="Monthly" {{ old('salary') === 'Monthly' ? 'selected' : '' }}>Monthly</option>
									<option value="Weekly" {{ old('salary') === 'Weekly' ? 'selected' : '' }}>Weekly</option>
								</select>
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                        <div class="col-md-3">
                            <div class="dash-input-wrapper mb-30">
                                <input type="text" placeholder="Min" value="{{old('min_salary')}}" name="min_salary">
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                        <div class="col-md-3">
                            <div class="dash-input-wrapper mb-30">
                                <input type="text" placeholder="Max" value="{{old('max_salary')}}" name="max_salary">
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                    </div>

                    <div class="dash-input-wrapper mb-30">
                    <label for="skills">Skills*</label>
                    <input type="text" id="skillsInput" placeholder="Add Skills" name="skills[]" required>
                    <div class="skill-input-data d-flex align-items-center flex-wrap">
                        <button type="button" onclick="addSkill('Design')">Design</button>
                        <button type="button" onclick="addSkill('UI')">UI</button>
                        <button type="button" onclick="addSkill('Digital')">Digital</button>
                        <button type="button" onclick="addSkill('Graphics')">Graphics</button>
                        <button type="button" onclick="addSkill('Developer')">Developer</button>
                        <button type="button" onclick="addSkill('Product')">Product</button>
                        <button type="button" onclick="addSkill('Microsoft')">Microsoft</button>
                        <button type="button" onclick="addSkill('Brand')">Brand</button>
                        <button type="button" onclick="addSkill('Photoshop')">Photoshop</button>
                        <button type="button" onclick="addSkill('Business')">Business</button>
                        <button type="button" onclick="addSkill('IT & Technology')">IT & Technology</button>
                        <button type="button" onclick="addSkill('Marketing')">Marketing</button>
                        <button type="button" onclick="addSkill('Article')">Article</button>
                        <button type="button" onclick="addSkill('Engineer')">Engineer</button>
                        <button type="button" onclick="addSkill('HTML5')">HTML5</button>
                        <button type="button" onclick="addSkill('Figma')">Figma</button>
                        <button type="button" onclick="addSkill('Automobile')">Automobile</button>
                        <button type="button" onclick="addSkill('Account')">Account</button>
                    </div>
                </div>
                    <!-- /.dash-input-wrapper -->
                    <div class="row align-items-end">
                        <div class="col-md-6">
                            <div class="dash-input-wrapper mb-30">
                                <label for="">Experience*</label>
                                <select class="nice-select" name="experience">
									<option value="Intermediate" {{ old('experience') === 'Intermediate' ? 'selected' : '' }}>Intermediate </option>
									<option value="No-Experience" {{ old('experience') === 'No-Experience' ? 'selected' : '' }}>No-Experience </option>
									<option value="Expert" {{ old('experience') === 'Expert' ? 'selected' : '' }}>Expert</option>
								</select>
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                        <div class="col-md-6">
                            <div class="dash-input-wrapper mb-30">
                                <label for="">Location*</label>
                                <select class="nice-select" name="location">
									<option value="Washington DC" {{ old('location') === 'Washington DC' ? 'selected' : '' }}>Washington DC</option>
                                    <option value="California, CA" {{ old('location') === 'California, CA' ? 'selected' : '' }}>California, CA</option>
                                    <option value="New York" {{ old('location') === 'New York' ? 'selected' : '' }}>New York</option>
                                    <option value="Miami" {{ old('location') === 'Miami' ? 'selected' : '' }}>Miami</option>
								</select>
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                        <div class="col-md-6">
                            <div class="dash-input-wrapper mb-30">
                                <label for="">Industry*</label>
                                <select class="nice-select" name="industry">
									<option value="Select Industry 1" {{ old('industry') === 'Select Industry 1' ? 'selected' : '' }}>Select Industry 1</option>
									<option value="Select Industry 2" {{ old('industry') === 'Select Industry 2' ? 'selected' : '' }}>Select Industry 2</option>
								</select>
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                        <div class="col-md-6">
                            <div class="dash-input-wrapper mb-30">
                                <label for="">English Fluency</label>
                                <select class="nice-select" name="english_fluency">
									<option value="Basic" {{ old('english_fluency') === 'Basic' ? 'selected' : '' }}>Basic</option>
                                    <option value="Conversational" {{ old('english_fluency') === 'Conversational' ? 'selected' : '' }}>Conversational</option>
                                    <option value="Fluent" {{ old('english_fluency') === 'Fluent' ? 'selected' : '' }}>Fluent</option>
                                    <option value="Native/Bilingual" {{ old('english_fluency') === 'Native/Bilingual' ? 'selected' : '' }}>Native/Bilingual</option>
								</select>
                            </div>
                            <!-- /.dash-input-wrapper -->
                        </div>
                    </div>
                    <!-- <h4 class="dash-title-three pt-50 lg-pt-30">File Attachment</h4>
                    <div class="dash-input-wrapper mb-20">
                        <label for="">File Attachment*</label>

                        <div class="attached-file d-flex align-items-center justify-content-between mb-15">
                            <span>guidline&requirments.doc</span>
                            <a href="#" class="remove-btn"><i class="bi bi-x"></i></a>
                        </div>
                    </div>
                    <div class="dash-btn-one d-inline-block position-relative me-3">
                        <i class="bi bi-plus"></i>
                        Upload File
                        <input type="file" id="uploadCV" name="uploadCV" placeholder="">
                    </div>
                    <small>Upload file .pdf, .doc, .docx</small>
                    <h4 class="dash-title-three pt-50 lg-pt-30">Address & Location</h4>
					<div class="row">
						<div class="col-12">
							<div class="dash-input-wrapper mb-25">
								<label for="">Address*</label>
								<input type="text" placeholder="Cowrasta, Chandana, Gazipur Sadar">
							</div>
						</div>
						<div class="col-lg-4">
							<div class="dash-input-wrapper mb-25">
								<label for="">Country*</label>
								<select class="nice-select">
									<option>Afghanistan</option>
									<option>Albania</option>
									<option>Algeria</option>
									<option>Andorra</option>
									<option>Angola</option>
									<option>Antigua and Barbuda</option>
									<option>Argentina</option>
									<option>Armenia</option>
									<option>Australia</option>
									<option>Austria</option>
									<option>Azerbaijan</option>
									<option>Bahamas</option>
									<option>Bahrain</option>
									<option>Bangladesh</option>
									<option>Barbados</option>
									<option>Belarus</option>
									<option>Belgium</option>
									<option>Belize</option>
									<option>Benin</option>
									<option>Bhutan</option>
								</select>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="dash-input-wrapper mb-25">
								<label for="">City*</label>
								<select class="nice-select">
									<option>Dhaka</option>
									<option>Tokyo</option>
									<option>Delhi</option>
									<option>Shanghai</option>
									<option>Mumbai</option>
									<option>Bangalore</option>
								</select>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="dash-input-wrapper mb-25">
								<label for="">State*</label>
								<select class="nice-select">
									<option>Dhaka</option>
									<option>Tokyo</option>
									<option>Delhi</option>
									<option>Shanghai</option>
									<option>Mumbai</option>
									<option>Bangalore</option>
								</select>
							</div>
						</div>
						<div class="col-12">
							<div class="dash-input-wrapper mb-25">
								<label for="">Map Location*</label>
								<div class="position-relative">
									<input type="text" placeholder="XC23+6XC, Moiran, N105">
									<button class="location-pin tran3s"><img src="{{ asset('assets/images/lazy.svg ') }}" data-src="images/icon/icon_16.svg" alt="" class="lazy-img m-auto"></button>
								</div>
								<div class="map-frame mt-30">
									<div class="gmap_canvas h-100 w-100">
										<iframe class="gmap_iframe h-100 w-100" src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q=dhaka collage&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
									</div>
								</div>
							</div>
						</div>
					</div> -->
                </div>
				<!-- /.card-box -->

				<div class="button-group d-inline-flex align-items-center mt-30">
					<button type="submit" class="dash-btn-two tran3s me-3">Submit</button>
					<a href="#" class="dash-cancel-btn tran3s">Cancel</a>
				</div>
                </form>
			</div>
		</div>
		<!-- /.dashboard-body -->

        <script>
    function addSkill(skill) {
        const skillsInput = document.getElementById('skillsInput');
        if (skillsInput.value === "") {
            skillsInput.value = skill;
        } else {
            skillsInput.value += `, ${skill}`;
        }
    }
</script>
@endsection