@extends('admin.layout.page-app')
@section('page_title', __('label.edit_sub_in_charge'))
@section('tab_title', __('label.edit_sub_in_charge'))

@section('content')
	@include('admin.layout.sidebar')

    <!-- Select2 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />

	<div class="right-content">
		@include('admin.layout.header')

		<div class="body-content">
			<!-- mobile title -->
			<h1 class="page-title-sm">{{__('label.edit_sub_in_charge')}}</h1>

			<div class="border-bottom row">
				<div class="col-sm-10">
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{__('label.dashboard')}}</a></li>
						<li class="breadcrumb-item"><a href="{{ route('sub_incharge.index') }}">{{__('label.sub_in_charge')}}</a></li>
						<li class="breadcrumb-item active" aria-current="page">{{__('label.edit_sub_in_charge')}}</li>
					</ol>
				</div>
				<div class="col-sm-2 d-flex align-items-center justify-content-end">
					<a href="{{ route('sub_incharge.index') }}" class="btn btn-default mw-120" style="margin-top:-14px">{{__('label.sub_in_charge')}}</a>
				</div>
			</div>

			<div class="card custom-border-card mt-3">
				<form id="update_sub_incharge" enctype="multipart/form-data">
					<input type="hidden" name="id" value="{{ $result->id }}">
					<div class="form-row">
						<div class="col-md-9">
							<div class="form-row">
								<div class="col-6">
									<div class="form-group">
										<label>{{__('label.department')}}<span class="text-danger">*</span></label>
										<select class="form-control" name="department_id" id="department_id">
											<option value="">{{__('label.select_department')}}</option>
                                            @foreach ($department as $key => $value)
												<option value="{{$value->id}}" {{ $result->department_id == $value->id  ? 'selected' : ''}}>
													{{ $value->name }}
												</option>
                                            @endforeach
										</select>
									</div>
								</div>
								<div class="col-6">
									<div class="form-group">
										<label>{{__('label.service')}}</label>
										<select class="form-control" name="service_id[]" multiple id="service_id">
											<option value="">{{__('label.select_service')}}</option>
											@foreach ($service as $key => $value)
												<option value="{{$value->id}}" {{ in_array($value->id , $service_id) ? 'selected' : ''}}>
													{{ $value->name }}
												</option>
                                            @endforeach
										</select>
									</div>
								</div>
							</div>
							<div class="form-row">
								<div class="col-6">
									<div class="form-group">
										<label>{{__('label.full_name')}}<span class="text-danger">*</span></label>
										<input name="full_name" type="text" value="{{$result->full_name}}" class="form-control" placeholder="{{__('label.full_name_here')}}">
									</div>
								</div>
								<div class="col-6">
									<div class="form-group">
										<label>{{__('label.user_name')}}<span class="text-danger">*</span></label>
										<input name="user_name" type="text" value="{{$result->user_name}}" class="form-control" placeholder="{{__('label.user_name_here')}}">
									</div>
								</div>
							</div>
							<div class="form-row">
								<div class="col-6">
									<div class="form-group">
										<label>{{__('label.new_password')}}</label>
										<input name="password" type="password" class="form-control" placeholder="{{__('label.password_here')}}">
									</div>
								</div>
								<div class="col-6">
									<div class="form-group">
										<label>{{__('label.email')}}<span class="text-danger">*</span></label>
										<input name="email" type="email" value="{{$result->email}}" class="form-control" placeholder="{{__('label.email_here')}}">
									</div>
								</div>
							</div>
							<div class="form-row">
								<div class="col-md-2">
									<div class="form-group">
										<label>{{__('label.country_code')}}<span class="text-danger">*</span></label>
										<input name="country_code" type="text" value="{{$result->country_code}}" class="form-control" placeholder="{{__('label.+91')}}">
									</div>
								</div>
								<div class="col-4">
									<div class="form-group">
										<label>{{__('label.mobile_number')}}<span class="text-danger">*</span></label>
										<input name="mobile_number" type="text" value="{{$result->mobile_number}}" class="form-control" placeholder="{{__('label.mobile_number_here')}}">
									</div>
								</div>
								<div class="col-6">
									<div class="form-group">
										<label>{{__('label.bio')}}</label>
										<textarea name="bio" rows="1" class="form-control" placeholder="{{__('label.bio_here')}}">{{$result->bio}}</textarea>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-2">
							<div class="form-group ml-4">
								<label>{{__('label.image')}}</label>
								<div class="avatar-upload">
									<div class="avatar-edit">
										<input type='file' name="image" id="imageUpload" accept=".png, .jpg, .jpeg" />
										<label for="imageUpload" title="{{__('label.upload_file')}}"></label>
									</div>
									<div class="avatar-preview">
										<img src="{{$result->image}}" id="imagePreview">
									</div>
								</div>
								<input type="hidden" name="old_image" value="{{$result->image}}">
								<label class="mt-3 text-gray">{{__('label.max_size_5mb')}}</label>
							</div>
						</div>
					</div>
					<div class="border-top pt-3 text-right">
						<button type="button" class="btn btn-default mw-120" onclick="update_sub_incharge()">{{__('label.save')}}</button>
						<a href="{{route('sub_incharge.index')}}" class="btn btn-cancel mw-120 ml-2">{{__('label.cancel')}}</a>
						<input type="hidden" name="_method" value="PATCH">
					</div>
				</form>
			</div>
		</div>
	</div>
@endsection

@section('pagescript')
    <!-- Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

	<script>
		// Sidebar Scroll Down
		sidebar_down('600px');
		$("#department_id").select2();
		$("#service_id").select2({
			placeholder: "{{__('label.select_service')}}",
		});

		function update_sub_incharge(){

			var Demo_Mode = '<?php echo Demo_Mode(); ?>';
            if(Demo_Mode == 1){

				$("#dvloader").show();
				var formData = new FormData($("#update_sub_incharge")[0]);
				$.ajax({
					type:'POST',
					headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
					url:'{{ route("sub_incharge.update", [$result->id]) }}',
					data:formData,
					cache:false,
					contentType: false,
					processData: false,
					success:function(resp){
						$("#dvloader").hide();
						get_responce_message(resp, 'update_sub_incharge', '{{ route("sub_incharge.index") }}');
					},
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $("#dvloader").hide();
                        toastr.error(errorThrown, textStatus);
                    }
				});
			} else {
                showError();
            }
		}

		// get service
		$('#department_id').change(function() {
            var department_id = $(this).val();
            $.ajax({
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '{{ route("all_service") }}',
                data: {
                    departmentId: department_id
                },
                success: function(response) {
                    $('#service_id').empty();
                    $('#service_id').append('<option value="">Select Service</option>');
                    response.forEach(function(item) {

                        $('#service_id').append(`<option value="${item.id}">${item.name}</option>`);
                    });
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    toastr.error(errorThrown, textStatus);
                }
            });
        });
	</script>
@endsection