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

@section('title', 'User | Add 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> Add 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 id="submituser" class="form-validate-jquery" action="{{ route('users.store')}}" method="post">
					@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') }}">
							</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 autocomplete="off" value="{{ old('email') }}">
							</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') }}">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Password <span class="text-danger">*</span> </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 ..." required autocomplete="off" value="{{ old('password') }}">
                                    <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<span class="text-danger">*</span> </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 ..." required autocomplete="off" value="{{ old('password_confirmation') }}">
                                    <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>
                                    @foreach(config('custom.role') as $key => $value)
                                        @if (Auth::user()->role == 1)
                                            <option value="{{$key}}">{{$value}}</option>
                                        @else
                                            @if (\Auth::user()->role == 6)
                                                @if (!in_array($key, [1,2,5,11,12]))
                                                    <option value="{{$key}}">{{$value}}</option>
                                                @endif
                                            @else
                                                @if (!in_array($key, [1]))
                                                    <option value="{{$key}}">{{$value}}</option>
                                                @endif
                                            @endif
                                        @endif
									@endforeach
                                </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)" 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)">
                                <input type="hidden" name="approve_flag" value=""/>
							</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)">
                                <input type="hidden" name="permission_change_reserv" value=""/>
							</div>
                        </div>

						@if(Auth::user()->role==1 || old('role') > 1 )
							{{-- Select SA Group --}}
							<div class="form-group row" id="form_sa_group" style="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->nama}}</option>
										@endforeach
									</select>
								</div>
							</div>

							{{-- Select Hotel Group --}}
							<div class="form-group row" id="form_hotel_group" style="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"
									>
										<option value="">-- Select Hotel Group --</option>
									</select>
								</div>
							</div>
                        @else
                            <input type="hidden" name="sa_group_id" value="">
                            <input type="hidden" name="hotel_group_id" value="">
                        @endif

							{{-- Select Hotel --}}
							{{-- <div class="form-group row" id="formhotel" 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">
										<option value="">-- Select Hotel --</option>
									</select>
								</div>
							</div> --}}

                            {{-- Select Shop --}}

                            <div class="form-group row" id="formshop" 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="">-- All Shop --</option>
                                        @foreach ($shops as $shop)
                                            <option value="{{$shop->id}}">{{$shop->nama}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row" id="formverif" style="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)">
                                    <input type="hidden" name="opsi_delete_without_verif" value=""/>
                                </div>
                            </div>
						{{-- @else --}}
							{{-- id hotel --}}
							{{-- <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">Submit <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()
		// 		// }
		// 		let input = $('#submituser').find(':input[required]:visible').not(':input[type=submit],:hidden')
		// 		console.log(input.length)
		// 		var jumlah_input_req = input.length;
		// 		var input_keisi = 0;

		// 		input.each(function() {
		// 			if(this.value == "") {
		// 				// alert("You must fill in all items on the form");
		// 				new PNotify({
		// 					title: 'Error',
		// 					text: 'Data is incomplete, please check all field first before submitting.',
		// 					icon: 'icon-blocked',
		// 					type: 'error'
		// 				});
		// 				return false;
		// 				e.preventDefault()
		// 			} else {
		// 				input_keisi += 1;
		// 			}
		// 		})
		// 		console.log(input_keisi)
		// 		if (jumlah_input_req == input_keisi) {
		// 			$(".submitBtn").attr("disabled", true);
		// 			$('#submituser').submit()
		// 		}
		// 	})
		// });

        $('#submituser').on('submit', function(){
            $('.submitBtn').attr('disabled', true)
        })

		function showHiddenForm(){
			let role = $('#role').find('option:selected').val();
			//hotel form
			console.log(role)
			if(role > 1){
				// //Input SA group
				// $('#form_sa_group').show();

				// //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 {
				// 		//Input Hotel
				// 		$('#formhotel').hide();

				// 	}
				// } 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()
                }

                if (role == 40) {
                    $('#formshop').show();
                    $('#formverif').show();
                }else{
                    $('#formshop').hide();
                    $('#shop_id').val("").change();
                    $('#formverif').hide();
                    $('#opsi_delete_without_verif').prop("checked", false).change();
                }

				$('#hotel_id').prop('required',true);
			} else {

				//Input SA group
				$('#form_sa_group').hide();
				//Input Hotel Group
				$('#form_hotel_group').hide();
				//Input Hotel
				$('#formhotel').hide();
                //Input Shop
                $('#formshop').hide();
                $('#shop_id').val("").change();
                $('#formverif').hide();
                $('#opsi_delete_without_verif').prop("checked", false).change();
				$('#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[val], 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