@extends('dashboard/master/master')
@section('title', 'تعديل وظيفة')

@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css-rtl/core/menu/menu-types/vertical-menu.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('app-assets/css-rtl/core/colors/palette-gradient.css')}}">
<style type="text/css">
    .selectize-input{
        min-height: 38px !important
    }
	.img img{
		width:150px;
		height:100px;
		margin-right:20px;
		margin-top:20px;
	}

	#gallery-photo-add {
    display: inline-block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
	}
</style>
@endsection

@section('content')
<div class="card">
    {{-- <div class="card-header">
        <h4 class="card-title">Vertical Form</h4>
    </div> --}}
    <div class="card-content">
        <div class="card-body">
            <form class="form form-vertical" action="{{route('jobs.update',$data->id)}}" method="POST" enctype="multipart/form-data">
                <div class="form-body">
                    <div class="row">
                        @csrf
                        <div class="col-sm-12 data-field-col">
                            <div class="row">
                                <div class="col-sm-4">
                                    <label>الصوره </label> <span
                                    class="text-danger">*</span>
                                    <input type="file" name="image"
                                        accept="image/*" onchange="loadAvatar5(event)"
                                        style="display: none;">
                                    <img src="{{asset('uploads/jobs/'.$data->image)}}"
                                        style="display: block;width: 100%;height: 150px;cursor: pointer;"
                                        onclick="ChooseAvatar5()" id="avatar5">
                                </div>
                                <div class="col-sm-8">
                                    <div class="row">
                                        <div class="col-sm-12 data-field-col">
                                            <label for="data-title_ar">العنوان بالعربية</label>
                                            <input type="text" class="form-control" value="{{$data->getTranslation('title', 'ar')}}" name="title[ar]" id="data-title_ar" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-12 data-field-col">
                                            <label for="data-title_en">العنوان بالإنجليزية</label>
                                            <input type="text" class="form-control" value="{{$data->getTranslation('title', 'en')}}" name="title[en]" id="data-title_en" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-employer_ar">جهة العمل بالعربية</label>
                                            <input type="text" class="form-control" value="{{$data->getTranslation('employer', 'ar')}}"  name="employer[ar]" id="data-employer_ar" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-employer_en">جهة العمل بالإنجليزية</label>
                                            <input type="text" class="form-control" name="employer[en]"   value="{{$data->getTranslation('employer', 'en')}}" id="data-employer_en" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-category_ar">الفئة بالعربية</label>
                                            <input type="text" class="form-control" value="{{$data->getTranslation('category', 'ar')}}"  name="category[ar]" id="data-category_ar" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-category_en">الفئة بالإنجليزية</label>
                                            <input type="text" class="form-control" name="category[en]"  value="{{$data->getTranslation('category', 'en')}}" id="data-category_en" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-kind_ar">نوع الوظيفة بالعربية</label>
                                            <input type="text" class="form-control"  value="{{$data->getTranslation('kind', 'ar')}}" name="kind[ar]" id="data-kind_ar" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-kind_en">نوع الوظيفة بالإنجليزية</label>
                                            <input type="text" class="form-control" name="kind[en]" value="{{$data->getTranslation('kind', 'en')}}" id="data-kind_en" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-address_ar">الموقع بالعربية</label>
                                            <input type="text" class="form-control" name="address[ar]"   value="{{$data->getTranslation('address', 'ar')}}" id="data-address_ar" maxlength="190" required>
                                        </div>
                                        <div class="col-sm-6 data-field-col">
                                            <label for="data-address_en">الموقع بالإنجليزية</label>
                                            <input type="text" class="form-control" name="address[en]"   value="{{$data->getTranslation('address', 'en')}}" id="data-address_en" maxlength="190" required>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-sm-6 data-field-col">
                                    <label for="data-content_ar">المحتوي بالعربية</label>
                                    <textarea name="content[ar]" class="form-control" id="data-content_ar" cols="45" rows="10" required>
                                        {{$data->getTranslation('content', 'ar')}}
                                    </textarea>
                                </div>

                                <div class="col-sm-6 data-field-col">
                                    <label for="data-content_en">المحتوي بالإنجليزية</label>
                                    <textarea name="content[en]" class="form-control" id="data-content_en" cols="45" rows="10" required>
                                        {{$data->getTranslation('content', 'en')}}
                                    </textarea>
                                </div>

                                <div class="col-md-12">
                                    <label class="text-primary"> مهام العمل
                                    </label>
                                    <div class="row mobiles">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="tasks_ar[]" class="form-control"
                                                        placeholder="المهام بالعربي">
                                                </div>
                                                <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="tasks_en[]" class="form-control"
                                                        placeholder="المهام بالإنجليزي">
                                                </div>
                                                <div class="col-sm-1" style="padding: 0 ">
                                                    <button type="button"
                                                        class="btn btn-primary btn-block add_mobiles">
                                                        <i style="margin: 0px -7px "
                                                            class="fa fa-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        @if (count($data->Tasks) !== 0)
                                        @foreach ($data->Tasks as $m)
                                            <div class="col-sm-12 father{{ strtotime(\Carbon\Carbon::now()) . $m->id }}"
                                                style="margin-top:10px">
                                                <div class="row">
                                                    <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="tasks_ar[]" value="{{$m->getTranslation('name', 'ar')}}" class="form-control"
                                                        placeholder="المهام بالعربي">
                                                </div>
                                                <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="tasks_en[]" value="{{$m->getTranslation('name', 'en')}}"  class="form-control"
                                                        placeholder="المهام بالإنجليزي">
                                                </div>
                                                    <div class="col-sm-1" style="padding: 0 ">
                                                        <button type="button"
                                                            class="btn btn-danger btn-block remove_mobiles"
                                                            data-code="{{ strtotime(\Carbon\Carbon::now()) . $m->id }}">
                                                            <i style="margin: 0px -7px "
                                                                class="fa fa-minus-circle"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <label class="text-primary"> المؤهلات
                                    </label>
                                    <div class="row qualifications">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="qualifications_ar[]" class="form-control"
                                                        placeholder="المؤهلات بالعربي">
                                                </div>
                                                <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="qualifications_en[]" class="form-control"
                                                        placeholder="المؤهلات بالإنجليزي">
                                                </div>
                                                <div class="col-sm-1" style="padding: 0 ">
                                                    <button type="button"
                                                        class="btn btn-primary btn-block add_qualifications">
                                                        <i style="margin: 0px -7px "
                                                            class="fa fa-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        @if (count($data->Qualifications) !== 0)
                                        @foreach ($data->Qualifications as $m)
                                            <div class="col-sm-12 father{{ strtotime(\Carbon\Carbon::now()) . $m->id }}"
                                                style="margin-top:10px">
                                                <div class="row">
                                                    <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="qualifications_ar[]" value="{{$m->getTranslation('name', 'ar')}}" class="form-control"
                                                        placeholder="المؤهلات بالعربي">
                                                </div>
                                                <div class="col-sm-5"
                                                    style="padding-left: 5px ">
                                                    <input type="text"
                                                        name="qualifications_en[]" value="{{$m->getTranslation('name', 'en')}}"  class="form-control"
                                                        placeholder="المؤهلات بالإنجليزي">
                                                </div>
                                                    <div class="col-sm-1" style="padding: 0 ">
                                                        <button type="button"
                                                            class="btn btn-danger btn-block remove_mobiles"
                                                            data-code="{{ strtotime(\Carbon\Carbon::now()) . $m->id }}">
                                                            <i style="margin: 0px -7px "
                                                                class="fa fa-minus-circle"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                        @endif
                                    </div>
                                </div>



                                <button class="btn btn-primary store" type="submit" style="margin-right: 20px;margin-top:30px">تعديل وظيفة
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script type="text/javascript">
$(document).on('click', '.add_mobiles', function() {
            $('.mobiles').append(
                `
		<div class="col-sm-12 father${Date.now()}" style="margin-top:10px">
			<div class="row">
                <div class="col-sm-5"
                    style="padding-left: 5px ">
                    <input type="text"
                        name="tasks_ar[]" class="form-control"
                        placeholder="المهام بالعربي">
                </div>
                <div class="col-sm-5"
                    style="padding-left: 5px ">
                    <input type="text"
                        name="tasks_en[]" class="form-control"
                        placeholder="المهام بالإنجليزي">
                </div>
				<div class="col-sm-1" style="padding: 0 ">
					<button type="button" class="btn btn-danger btn-block remove_mobiles" data-code="${Date.now()}">
						<i style="margin: 0px -7px " class="fa fa-minus-circle"></i>
					</button>
				</div>
			</div>
		</div>
		`
            );
        })

        $(document).on('click', '.remove_mobiles', function() {
            var cla = '.father' + $(this).data('code');
            $(cla).remove();
        })
 $(document).on('click', '.add_qualifications', function() {
            $('.qualifications').append(
                `
		<div class="col-sm-12 father${Date.now()}" style="margin-top:10px">
			<div class="row">
                <div class="col-sm-5"
                    style="padding-left: 5px ">
                    <input type="text"
                        name="qualifications_ar[]" class="form-control"
                        placeholder="المؤهلات بالعربي">
                </div>
                <div class="col-sm-5"
                    style="padding-left: 5px ">
                    <input type="text"
                        name="qualifications_en[]" class="form-control"
                        placeholder="المؤهلات بالإنجليزي">
                </div>
				<div class="col-sm-1" style="padding: 0 ">
					<button type="button" class="btn btn-danger btn-block remove_qualifications" data-code="${Date.now()}">
						<i style="margin: 0px -7px " class="fa fa-minus-circle"></i>
					</button>
				</div>
			</div>
		</div>
		`
            );
        })

        $(document).on('click', '.remove_qualifications', function() {
            var cla = '.father' + $(this).data('code');
            $(cla).remove();
        })
function ChooseAvatar5() {
            $("input[name='image']").click()
        }
        var loadAvatar5 = function(event) {
            var output = document.getElementById('avatar5');
            output.src = URL.createObjectURL(event.target.files[0]);
        };
function ChooseAvatar1(){$("input[name='galary[]']").click()}

		$(function() {
			// Multiple images preview in browser
			var imagesPreview = function(input, placeToInsertImagePreview) {

				if (input.files) {
					var filesAmount = input.files.length;

					for (i = 0; i < filesAmount; i++) {
						var reader = new FileReader();

						reader.onload = function(event) {
							$($.parseHTML('<img class="img-fluid mb-2  bounceIn">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
						}

						reader.readAsDataURL(input.files[i]);
					}
				}

			};

			$('#gallery1').on('change', function() {
				imagesPreview(this, 'div.gallery1');
			});
		});


</script>
@endsection