<!doctype html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

    <title>Shahin Resort</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>

<link href="<?php echo e(asset('assets/css/style.css')); ?>" rel="stylesheet">
<link rel="icon" type="image/png" href="<?php echo e(asset('assets/images/fav-icon.png')); ?>">



<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">

<body dir="rtl">

<section>
    <div class="container-fluid">
        
<!-- MultiStep Form -->
<div class="row">
    <div class="col-12 d-flex justify-content-center align-items-middle mt-3">

    <img src="<?php echo e(asset('assets/images/logo.png')); ?>" loading="lazy" width="150" alt="shahinresort">

    </div>
    <div class="col-12">


        <form id="msform" method="post" action="<?php echo e(route('send-cv')); ?>">
			<?php echo csrf_field(); ?>
            <!-- progressbar -->
            <!-- <ul id="progressbar">
                <li class="active">Personal Details</li>
                <li>Social Profiles</li>
                <li>Account Setup</li>
            </ul> -->
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title mb-3">البيانات الشخصية</h2>
                <!-- <h3 class="fs-subtitle">Tell us something more about you</h3> -->

				<div class="row" style="padding:0px !important;">

					<div class="col-md-6 col-12">
						<label class="mt-3" for="fullname">الاسم الثلاثي</label>
						<input type="text" id="fullname" name="name" class="form-control" required/>
					</div>

					<div class="col-md-6 col-12">
						<label class="mt-3" for="mothername">اسم الأم</label>
						<input type="text" id="mothername" name="mother_name" class="form-control" required />
					</div>

					<div class="col-md-6 col-12">
						<label class="mt-3" for="b_date">تاريخ الميلاد</label>
						<input type="date" id="b_date" name="b_date" class="form-control" required/>
					</div>
					<div class="col-md-6 col-12">
						<label class="mt-3" for="b_place">مكان الولادة</label>
						<input type="text" id="b_place" name="b_place" class="form-control" required />
					</div>
					<div class="col-md-6 col-12">
						<label class="mt-3" for="address">العنوان</label>
						<input type="text" id="address" name="address" class="form-control" required/>
					</div>

					<div class="col-md-6 col-12">
						<label class="mt-3" for="telephone">رقم الأرضي</label>
						<input type="tel" id="telephone" name="telephone" class="form-control" required />
					</div>

					<div class="col-md-6 col-12">
						<label class="mt-3" for="mobile">رقم الموبايل</label>
						<input type="tel" id="mobile" name="mobile" class="form-control" required />
					</div>

					<div class="col-md-6 col-12">
						<label class="mt-3" for="email">الإيميل</label>
						<input type="email" id="email" name="email" class="form-control" required/>
					</div>

					<div class="col-md-6 col-12 border-bottom">
						<label class="mt-3" for="family">الوضع العائلي</label>

							<div class="d-flex justify-content-center">

								<!-- <div style="max-width:500px;"> -->
									<label for="married"  class="d-flex" style="margin:20px;"> متزوج
										<input type="radio" name="family" id="married" value="متزوج">
									</label>

									<label for="single" class="d-flex" style="margin:20px;"> عازب
										<input type="radio" name="family" id="single" value="عازب">
									</label>
								<!-- </div> -->
							</div>

					</div>


					<div class="col-md-6 col-12 border-bottom">
						<label class="mt-3" for="family">الجنس</label>

							<div class="d-flex justify-content-center">

								<!-- <div style="max-width:500px;"> -->
									<label for="male"  class="d-flex" style="margin:20px;"> ذكر
										<input type="radio" name="gender" id="male" value="ذكر">
									</label>

									<label for="female" class="d-flex" style="margin:20px;"> أنثى
										<input type="radio" name="gender" id="female" value="أنثى">
									</label>
								<!-- </div> -->

							</div>

					</div>
					
					
				</div>




                <input type="button" name="next" class="next action-button" value="التالي"/>
            </fieldset>
            <fieldset>
                <h2 class="fs-title">التعليم و العمل</h2>
                <!-- <h3 class="fs-subtitle">Your presence on the social network</h3> -->
			<div class="row border-bottom">

				<div class="col-md-6 col-12">
					<label class="mt-3" for="certificate">الشهادة</label>
					<input type="text" id="certificate" name="certificate" class="form-control" />
				</div>

				<div class="col-md-6 col-12">
					<label class="mt-3" for="avg">المعدل</label>
					<input type="text" id="avg" name="avg" class="form-control" />
				</div>

			</div>

			<div class="row border-bottom">

<div class="col-12">
	<label class="mt-3" for="certificate">التعامل مع الحاسوب</label><br>
	<small class="text-primary">في حال اجادة التعامل مع الحاسوب او يوجد أي شهادة أو خبرة, أن يتم ذكرها</small>
	<textarea name="computer" id="" class="form-control" cols="30" rows="4"></textarea>
</div>

<div class="col-12">
	<label class="mt-3" for="certificate">اللغات</label><br>
	<small class="text-primary">اللغات التي تجيدها</small>
	<textarea name="lang" id="" class="form-control" cols="30" rows="4"></textarea>
</div>

<div class="col-12">
	<label class="mt-3" for="certificate">شهادات الخبرة</label><br>
	<small class="text-primary">شهادات الخبرة الحاصل عليها</small>
	<textarea name="exper" id="" class="form-control" cols="30" rows="4"></textarea>
</div>

</div>

			<div class="row justify-content-center">
				<div class="col-lg-auto mt-3" style="width:500px;">
					<label for="" class="mb-3"> قسم العمل المطلوب </label>
					<select class="form-select" name="job_id" id="job_id">
						<?php $__currentLoopData = $jobs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $job): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
						<option value="<?php echo e($job->id); ?>"><?php echo e($job->job_title); ?></option>
						<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
					</select>
				</div>

			</div>

			<div class="row justify-content-center" id="sub_id">

			</div>

			<div class="row justify-content-center">
				<div class="col-lg-auto mt-3" style="width:500px;">
					<label for="" class="mb-3"> الراتب المتوقع</label>
					<input type="text" name="salary" class="form-control" required>
				</div>

			</div>
				
                <input type="button" name="previous" class="previous action-button-previous" value="السابق"/>
                <input type="button" name="next" class="next action-button" value="التالي"/>
            </fieldset>
            <fieldset>
                <h2 class="fs-title">الخبرات السابقة</h2>
                <h3 class="fs-subtitle">الشركات و المنشآت التي عملت بها</h3>
                <div class="row">
					<div class="col-12">
					<div id="experience_container"></div>

					<div class="text-center mt-3">
						<button type="button" id="add_experience" class="btn btn-primary">
							+ إضافة خبرة
						</button>
					</div>
					</div>
				</div>
				
                <input type="button" name="previous" class="previous action-button-previous" value="السابق"/>
                <input type="submit" name="submit" class="submit action-button" value="إرسال"/>
            </fieldset>
        </form>
       
    </div>
</div>
<!-- /.MultiStep Form -->

    </div>
</section>


</body>
</html>

<script>
    let expIndex = 0;

// إضافة خبرة
$("#add_experience").click(function () {

    let html = `
    <div class="experience-item border p-3 mt-3 rounded position-relative">

        <button type="button" class="btn btn-danger btn-sm remove-experience" 
                style="position:absolute; left:10px; top:10px;">
            حذف
        </button>

        <div class="row">
            <div class="col-md-4 col-12">
                <label class="mt-2">مكان العمل</label>
                <input type="text" name="experiences[${expIndex}][company]" class="form-control" required>
            </div>

			
            <div class="col-md-4 col-12">
                <label class="mt-2">الوصف</label>
                <input type="text" name="experiences[${expIndex}][description]" class="form-control" placeholder="المهام الوظيفية" required>
            </div>

            <div class="col-md-4 col-12">
                <label class="mt-2">المدة</label>
                <input type="text" name="experiences[${expIndex}][duration]" class="form-control" placeholder="مثلاً: 2023 - 2026" required>
            </div>
        </div>

    </div>
    `;

    $("#experience_container").append(html);
    expIndex++;
});

// حذف خبرة
$(document).on("click", ".remove-experience", function () {
    $(this).closest(".experience-item").remove();
});

	$('#job_id').change(function() {
		$job_id=$(this).val();
    console.log($(this).val());

	$.ajax({
  url: "<?php echo e(url('sub_job')); ?>",
  type: "GET",
  data:{'id':$job_id},
//   dataType: "json",
  success: function(data) { 
    // console.log(data);
	
	$('#sub_id').html(data);

   }
});

});


//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

// $(".submit").click(function(){
// 	return false;
// })
</script><?php /**PATH C:\Users\Akeel\Desktop\work\shahin\HR\shahin_hr\resources\views\home.blade.php ENDPATH**/ ?>