@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'User | Edit User')

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4> Edit User</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">
			<div class="card-header header-elements-inline">
			</div>
			<div class="card-body">
				<form class="form-validate-jquery" id="submituser" action="{{ route('users.update', $user->id)}}" method="post">
					@method('PATCH')
					@csrf
					<fieldset class="mb-3">
						<legend class="text-uppercase font-size-sm font-weight-bold">User Data</legend>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Name <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="text" name="nama" class="form-control border-teal border-1 @error('nama') is-invalid @enderror" placeholder="Name" required autofocus autocomplete="off" value="{{ ( old('nama') ) ? old('nama') : $user->nama }}">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Email <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="email" name="email" class="form-control border-teal border-1 @error('email') is-invalid @enderror" placeholder="Email" required value="{{ ( old('email') ) ? old('email') : $user->email }}" autocomplete="off">
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Username <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="text" name="username" class="form-control border-teal border-1 @error('username') is-invalid @enderror" placeholder="Username" required autocomplete="off" value="{{ ( old('username') ) ? old('username') : $user->username }}">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Password</label>
							<div class="col-lg-10">
                                <div class="input-group mb-3">
                                    <input type="password" name="password" id="password" minlength="8" class="form-control border-teal border-1 @error('password') is-invalid @enderror" placeholder="minimum 8 character ..." autocomplete="off" value="">
                                    <div class="input-group-prepend">
                                        <button type="button" class="input-group-text btn" onclick="tooglePassword('password','icon-show-password')"><i id="icon-show-password" class="fas fa-eye"></i></button>
                                    </div>
                                </div>
                                <span class="text-danger">*Minimum 8 character, number, lowercase, uppercase, and special character (!$#%@&()^).</span>
                            </div>
						</div>
                        <div class="form-group row">
							<label class="col-form-label col-lg-2">Confirm password </label>
							<div class="col-lg-10">
                                <div class="input-group mb-3">
                                    <input type="password" name="password_confirmation" id="password_confirmation" minlength="8" class="form-control border-teal border-1 @error('password_confirmation') is-invalid @enderror" placeholder="minimum 8 character ..." autocomplete="off" value="">
                                    <div class="input-group-prepend">
                                        <button type="button" class="input-group-text btn" onclick="tooglePassword('password_confirmation','icon-show-password-confirmation')"><i id="icon-show-password-confirmation" class="fas fa-eye"></i></button>
                                    </div>
                                </div>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Role <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<select name="role" id="role" onchange="showHiddenForm()" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
                                    @if (Auth::user()->role == 1)
                                        @foreach(config('custom.role') as $key => $value)
                                            <option value="{{$key}}" {{ $user->role == $key ? 'selected' : '' }}>{{$value}}</option>
                                        @endforeach
                                    @else
                                        @if (\Auth::user()->role == 6)
                                            @foreach(config('custom.role') as $key => $value)
                                                @if (!in_array($key, [1,2,5,11,12]))
                                                    <option value="{{$key}}" {{ $user->role == $key ? 'selected' : '' }}>{{$value}}</option>
                                                @endif
                                            @endforeach
                                        @else
                                            @foreach(config('custom.role') as $key => $value)
                                                @if (!in_array($key, [1]))
                                                    <option value="{{$key}}" {{ $user->role == $key ? 'selected' : '' }}>{{$value}}</option>
                                                @endif
                                            @endforeach
                                        @endif
                                    @endif
                                </select>
							</div>
						</div>
						{{-- <div class="form-group row">
							<label class="col-form-label col-lg-2">User Level</label>
							<div class="col-lg-10">
								<input type="number" name="user_level" id="user_level" class="form-control border-teal border-1 @error('user_level') is-invalid @enderror" placeholder="User Level (1-4)" value="{{ $user->user_level }}" required />
							</div>
                        </div> --}}

                        <div class="form-group row">
							<label class="col-form-label col-lg-2">Purchase Request Approver</label>
							<div class="col-lg-3 mt-2 ml-1">
                                <input class="mr-2" type="checkbox" name="approve_flag" id="approve_flag" class=" @error('approve_flag') is-invalid @enderror" style="transform: scale(1.5)"  {{ $user->approve_flag ? 'checked' : '' }}>
                                <input type="hidden" name="approve_flag" value="{{$user->approve_flag}}"/>
							</div>
                        </div>

                        <div class="form-group row">
							<label class="col-form-label col-lg-2">Not Permitted to change Reservation Detail and Cancel Reservation</label>
							<div class="col-lg-3 mt-2 ml-1">
                                <input class="mr-2" type="checkbox" name="permission_change_reserv" id="permission_change_reserv" class=" @error('permission_change_reserv') is-invalid @enderror" style="transform: scale(1.5)"  {{ $user->permission_change_reserv == 1 ? 'checked' : '' }}>
                                <input type="hidden" name="permission_change_reserv" value="{{$user->permission_change_reserv}}"/>
							</div>
                        </div>

                        <div class="form-group row" id="formshop" style="{{$user->role == 40 ? '' : 'display:none'}}">
                            <label class="col-form-label col-lg-2">Shop</label>
                            <div class="col-lg-10">
                                <select name="shop_id" id="shop_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal">
                                    <option value="">-- All Shop --</option>
                                    @foreach ($shops as $shop)
                                        <option value="{{$shop->id}}" {{$user->shop_id == $shop->id ? 'selected' : ''}}>{{$shop->nama}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group row" id="formverif" style="{{$user->role == 40 ? '' : 'display:none'}}">
                            <label class="col-form-label col-lg-2">Permitted to Delete Order without Verification</label>
                            <div class="col-lg-3 mt-2 ml-1">
                                <input class="mr-2" type="checkbox" name="opsi_delete_without_verif" id="opsi_delete_without_verif" class=" @error('opsi_delete_without_verif') is-invalid @enderror" style="transform: scale(1.5)" {{ $user->opsi_delete_without_verif == 1 ? 'checked' : '' }}>
                                <input type="hidden" name="opsi_delete_without_verif" value="{{$user->opsi_delete_without_verif}}"/>
                            </div>
                        </div>

						@if(Auth::user()->role==1 || old('role') > 1  || $user->hotel_id > 0)
						{{-- Select SA Group --}}
						<div class="form-group row" id="form_sa_group" style="{{in_array($user->role, [11,12]) ? '' : 'display:none'}}">
							<label class="col-form-label col-lg-2">SA Group</label>
							<div class="col-lg-10">
								<select id="sa_group_id" class="form-control form-control-select2"
										name="sa_group_id"
										data-container-css-class="border-teal"
										data-dropdown-css-class="border-teal"
								>
									<option value="">-- Select SA Group --</option>
									@foreach($sa_groups as $sa_group)
									<option value="{{$sa_group->id}}" {{$sa_group->id == $sa_group_id ? 'selected' : ''}}>{{$sa_group->nama}}</option>
									@endforeach
								</select>
							</div>
						</div>

						{{-- Select Hotel Group --}}
						<div class="form-group row" id="form_hotel_group" style="{{in_array($user->role, [11,12]) ? '' : 'display:none'}}">
							<label class="col-form-label col-lg-2">Hotel Group</label>
							<div class="col-lg-10">
								<select id="hotel_group_id" class="form-control form-control-select2"
										name="hotel_group_id"
										data-container-css-class="border-teal" data-dropdown-css-class="border-teal"
                                        {!! !in_array($user->role, [11,12]) ? '' : 'required' !!}
								>
									<option value="">-- Select Hotel Group --</option>
									{{-- @if($user->role != 11) --}}
										@if(array_key_exists($sa_group_id, $hotel_groups))
											@foreach($hotel_groups[$sa_group_id] as $hotel_group)
											<option value="{{$hotel_group->id}}" {{$hotel_group->id == $hotel_group_id ? 'selected' : ''}}>{{$hotel_group->nama}}</option>
											@endforeach
										@endif
									{{-- @endif --}}
								</select>
							</div>
						</div>

                        @else
                            <input type="hidden" name="sa_group_id" value="{{$sa_group_id}}">
                            <input type="hidden" name="hotel_group_id" value="{{$hotel_group_id}}">
                        @endif

						{{-- Select Hotel --}}
						{{-- <div class="form-group row" id="formhotel" {!! in_array($user->role, [1,11,5]) ? 'style="display:none"' : '' !!}>
							<label class="col-form-label col-lg-2">Hotel</label>
							<div class="col-lg-10">
								<select name="hotel_id" id="hotel_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" {!! in_array($user->role, [1,11,5]) ? '' : 'required' !!}>
									<option value="">-- Select Hotel --</option>
									@if($user->role != 11)
										@if(array_key_exists($hotel_group_id, $hotels))
											@foreach($hotels[$hotel_group_id] as $hotel)
											<option value="{{$hotel->id}}" {{$hotel->id == $user->hotel_id ? 'selected' : ''}}>{{$hotel->nama}}</option>
											@endforeach
										@endif
									@endif
								</select>
							</div>
						</div> --}}

                        {{-- Select Shop --}}
							{{-- <div class="form-group row" id="formshop"  {!! in_array($user->role, [40]) ? '' : 'style="display:none"' !!}>
								<label class="col-form-label col-lg-2">Shop</label>
								<div class="col-lg-10">
									<select name="shop_id" id="shop_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal">
										<option value="">-- Pilih Shop --</option>
                                        @if($user->role != 11)

                                                @foreach($shops as $shop)
                                                    <option value="{{$shop->id}}" {{ $user->shop_id == $shop->id ? 'selected' : '' }}>{{$shop->nama}}</option>
                                                @endforeach

									    @endif
									</select>
								</div>
							</div> --}}

						{{-- @else --}}
							{{-- <input type="hidden" name="hotel_id" value="{{Auth::user()->hotel_id}}"> --}}
						{{-- @endif --}}

					</fieldset>
					<div class="text-right">
						<a href="{{ url('/users')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
						<button type="submit" class="btn btn-primary submitBtn">Update <i class="icon-paperplane ml-2"></i></button>
					</div>
				</form>
			</div>

		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->
@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
	{{-- <script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script> --}}
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
	<script type="text/javascript">

	//SA Group
	var hotel_groups = {!! json_encode($hotel_groups) !!};
	var hotels = {!! json_encode($hotels) !!};
	var shops = {!! json_encode($shops) !!};

	$(document).ready(function () {
		// $('.submitBtn').click(function(){
		// 	let input = $('#submituser').find(':input').not(':input[type=submit],:hidden')
		// 	console.log(input)
		// 	if(input.val()){
		// 		$(".submitBtn").attr("disabled", true);
		// 		$('#submituser').submit()
		// 	}
		// })
	});

    $('#submituser').on('submit', function(e){
        $('.submitBtn').attr('disabled', true)
        var empty = false;
        $('#submituser').find('[required]').each(function() {
            if ($(this).val() == '') {
                console.log($(this).attr('id'))
                empty = true;
            }
        });

        console.log(empty)
        if (empty) {
            e.preventDefault();
            $(".submitBtn").attr("disabled", false);
            return false;
        } else {
            return true;
        }
    })

	function showHiddenForm(){
		let role = $('#role').find('option:selected').val();
		//hotel form
		// if(role > 1){
		// 	if(role == 11){
		// 		$('#form_sa_group').show();
		// 		$('#form_hotel_group').hide();
		// 		$('#formhotel').hide();

		// 	}
		// 	else if (role == 5) {
		// 		$('#form_sa_group').show();
		// 		$('#form_hotel_group').show();
		// 		$('#formhotel').hide();
		// 	}
		// 	else{
		// 		$('#form_sa_group').show();
		// 		$('#form_hotel_group').show();
		// 		$('#formhotel').show();
		// 		$('#hotel_id').prop('required',true);
		// 	}
		// }
		// else{
		// 	//Input SA group
		// 	$('#form_sa_group').hide();
		// 	//Input Hotel Group
		// 	$('#form_hotel_group').hide();
		// 	//Input Hotel
		// 	$('#formhotel').hide();
		// 	$('#hotel_id').prop('required',false);
		// }

		if(role > 1){
			//Input SA group
			// $('#form_sa_group').show();
			$('#hotel_id').prop('required',true);

			//Jika role bukan sa group
			// if(role != 11){
			// 	//Input Hotel Group
			// 	$('#form_hotel_group').show();


			// 	// Jika Role bukan super manager
			// 	if(role != 5){
			// 		//Input Hotel
			// 		$('#formhotel').show();

			// 			if (role == 40) {
			// 				$('#formshop').show();
			// 			}else{
			// 				$('#formshop').hide();
			// 			}
			// 	} else {
            //         console.log(role);
			// 		//Input Hotel
			// 		$('#formhotel').hide();
            //         $('#hotel_id').prop('required',false);
			// 	}

			// } else {
			// 	//Input Hotel Group
			// 	$('#form_hotel_group').hide();

			// 	//Input Hotel
			// 	$('#formhotel').hide();
			// }

            if (role==11||role==12) {
                $('#form_sa_group').show()
                $('#form_hotel_group').show()
            }else{
                $('#form_sa_group').hide()
                $('#form_hotel_group').hide()
            }

		} else {
			//Input SA group
			$('#form_sa_group').hide();
			//Input Hotel Group
			$('#form_hotel_group').hide();
			//Input Hotel
			$('#formhotel').hide();
			//Input Shop
			$('#formshop').hide();
            $('#formverif').hide();
			$('#hotel_id').prop('required',false);
		}

		$("#hotel_id").val('').trigger('change');
	}

    function tooglePassword(id_pass, id_icon) {
        var x = document.getElementById(id_pass);
        if (x.type === "password") {
            x.type = "text";
            $('#'+id_icon).removeClass('fas fa-eye')
            $('#'+id_icon).addClass('fas fa-eye-slash')
        } else {
            x.type = "password";
            $('#'+id_icon).removeClass('fas fa-eye-slash')
            $('#'+id_icon).addClass('fas fa-eye')
        }
    }

    $("#approve_flag").change(function() {
            const field = $("input[name='approve_flag']")
            const isChecked = $(this).is(":checked")
            if(isChecked){
                field.val(1)
            } else {
                field.val(0)
            }
    })

    $("#permission_change_reserv").change(function() {
            const field = $("input[name='permission_change_reserv']")
            const isChecked = $(this).is(":checked")
            if(isChecked){
                field.val(1)
            } else {
                field.val(0)
            }
    })

    $("#opsi_delete_without_verif").change(function() {
        const field = $("input[name='opsi_delete_without_verif']")
        const isChecked = $(this).is(":checked")
        if(isChecked){
            field.val(1)
        } else {
            field.val(0)
        }
    })

	//Ketika SA Group Diganti
	$('#sa_group_id').on('change', function(){
		let val = $(this).val();
		let html = '<option value="">-- Pilih Hotel Group --</option>';

		console.log(hotel_groups[val]);
		$.each(hotel_groups[val], function(index, value){
			html += `<option value="${value.id}">${value.nama}</option>`;
		});

		$('#hotel_group_id').html(html);
	});

	//Ketika Hotel Group Diganti
	$('#hotel_group_id').on('change', function(){
		let val = $(this).val();
		let html = '<option value="">-- Pilih Hotel --</option>';

		console.log(hotels[val]);
		$.each(hotels[val], function(index, value){
			html += `<option value="${value.id}">${value.nama}</option>`;
		});

		$('#hotel_id').html(html);
	});

    //Ketika Hotel Group Diganti
		$('#hotel_id').on('change', function(){
			let val = $(this).val();
			let html = '<option value="">-- Pilih Shop --</option>';

			console.log(shops[val]);
			$.each(shops, function(index, value){
				html += `<option value="${value.id}">${value.nama}</option>`;
			});

			$('#shop_id').html(html);
		});

        // Accessibility labels
        $('.pickadate-accessibility').pickadate({
            labelMonthNext: 'Go to the next month',
            labelMonthPrev: 'Go to the previous month',
            labelMonthSelect: 'Pick a month from the dropdown',
            labelYearSelect: 'Pick a year from the dropdown',
            selectMonths: true,
            selectYears: true,
            format: 'yyyy-mm-dd',
        });

		var FormValidation = function() {

		    // Validation config
		    var _componentValidation = function() {
		        if (!$().validate) {
		            console.warn('Warning - validate.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        var validator = $('.form-validate-jquery').validate({
		            ignore: 'input[type=hidden], .select2-search__field, :hidden', // ignore hidden fields
		            errorClass: 'validation-invalid-label',
		            //successClass: 'validation-valid-label',
		            validClass: 'validation-valid-label',
		            highlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
		            },
		            unhighlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
		            },
		            // success: function(label) {
		            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
		            //},

		            // Different components require proper error label placement
		            errorPlacement: function(error, element) {

		                // Unstyled checkboxes, radios
		                if (element.parents().hasClass('form-check')) {
		                    error.appendTo( element.parents('.form-check').parent() );
		                }

		                // Input with icons and Select2
		                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
		                    error.appendTo( element.parent() );
		                }

		                // Input group, styled file input
		                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
		                    error.appendTo( element.parent().parent() );
		                }

		                // Other elements
		                else {
		                    error.insertAfter(element);
		                }
		            },
		            messages: {
		                nama: {
		                    required: 'Data Required.'
		                },
		                email: {
		                    required: 'Data Required.'
		                },
		                telp: {
		                    required: 'Data Required.'
		                },
		                username: {
		                    required: 'Data Required.'
		                },
		                // password: {
		                //     required: 'Data Required.'
		                // },
		                role: {
		                    required: 'Data Required.'
		                },
		            },
		        });

		        // Reset form
		        $('#reset').on('click', function() {
		            validator.resetForm();
		        });
		    };

		    // Return objects assigned to module
		    return {
		        init: function() {
		            _componentValidation();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    FormValidation.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {

			var $select = $('.form-control-select2').select2();

	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif
            @if ($errors->any())
				@foreach ($errors->all() as $error)
					new PNotify({
						title: 'Error',
						text: '{{ $error }}.',
						icon: 'icon-blocked',
						type: 'error'
					});
				@endforeach
			@endif

		});
	</script>

@endsection