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

@section('title', 'Guest Data | Create Guest Data')

@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> Create Guest Data</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="submitguest" class="form-validate-jquery" action="{{ route('guestprofile.store')}}" method="post">
					@csrf
					<fieldset class="mb-3">
						<legend class="text-uppercase font-size-sm font-weight-bold">Data Guest</legend>


                        <div class="row">
                            <div class="col">


                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Hotel Group</label>
                            <div class="col-lg-6">
                                <select id="group_hotel_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" disabled>
                                    <option value="">-- Select Hotel Group --</option>
                                    @foreach($hotelgroups as $hotelgroup)
                                        <option value="{{$hotelgroup->id}}" {{ $hotelgroup->id == $hotel_id->group_id ? 'selected':''}}>{{$hotelgroup->nama}}</option>
                                    @endforeach
                                    <input type="hidden" id="group_hotel_id_hidden" name="group_hotel_id" value="{{ $hotel_id->group_id }}">
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-form-label col-lg-2">Hotel</label>
                            <div class="col-lg-6">
                                <select id="hotel_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" disabled>
                                    <option value="">-- Select Hotel --</option>
                                    @foreach($hotels as $hotel)
                                        <option value="{{$hotel->id}}" {{ $hotel->id == hotelID() ? 'selected' : ''}}>{{$hotel->nama}}</option>
                                    @endforeach
                                </select>
                                <input type="hidden" id="hotel_id_hidden" name="hotel_id" value="{{ hotelID()}}">
                            </div>
                        </div>

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



						{{-- <div class="form-group row">
							<label class="col-form-label col-lg-2">Password</label>
							<div class="col-lg-4">
								<input type="password" id="password" name="password" class="form-control mb-1 border-teal border-1 @error('password') is-invalid @enderror" placeholder="Password" autocomplete="off" value="{{ old('password') }}">
								<span>Show Password ? <input id="showpass" type="checkbox" style="vertical-align: middle"></span>

							</div>

						</div> --}}

                        <hr>

                        <div class="row">

                            {{-- KOLOM 1 --}}
                            <div class="col">

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Name<span class="text-danger">*</span></label>
                                    <div class="col-lg-6">
                                        <input type="text" name="name" class="form-control border-teal border-1 @error('name') is-invalid @enderror" placeholder="Name" required autofocus autocomplete="off" value="{{ old('nama') }}">
                                    </div>
                                    <label class="col-form-label col-lg-2">Title<span class="text-danger">*</span></label>
                                    <div class="col-lg-2">
                                        {{-- <input type="text" name="title" class="form-control border-teal border-1" placeholder="Title" required autofocus autocomplete="off"> --}}
                                        <select name="title" id="title" class="form-control border-teal border-1" required placeholder="Title" autocomplete="off">
											<option value="">** Title **</option>
											@foreach(config('custom.titles') as $title)
											<option value="{{$title}}">{{$title}}</option>
											@endforeach
										</select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">First Name</label>
                                    <div class="col-lg-10">
                                        <input type="text" name="first_name" class="form-control border-teal border-1" placeholder="First Name" autocomplete="off">
                                    </div>
                                </div>

								<hr>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Address</label>
                                    <div class="col-lg-10">
                                        <textarea class="form-control border-teal border-1" name="address" cols="30" rows="5"></textarea>
                                    </div>
                                </div>

                                <div class="form-group row">

                                    <label class="col-form-label col-lg-2">City</label>
                                    <div class="col-lg-6">
                                        <input type="text" name="city" class="form-control border-teal border-1" placeholder="City" autocomplete="off">
                                    </div>

                                    <label class="col-form-label col-lg-2">Zip</label>
                                    <div class="col-lg-2">
                                        <input type="text" name="zip" class="form-control border-teal border-1" placeholder="Zip" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Province</label>
                                    <div class="col-lg-10">
                                        <input type="text" name="province" class="form-control border-teal border-1" placeholder="Province" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Country</label>
                                    <div class="col-lg-10">
                                        <input type="text" id="country" name="country" class="form-control border-teal border-1" placeholder="Country" autocomplete="off">
                                    </div>
                                </div>
                                {{-- <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Nation<span class="text-danger">*</span></label>
                                    <div class="col-lg-10">
                                        <input type="text" id="nation" name="nation" class="form-control border-teal border-1" placeholder="Nation" required autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Region<span class="text-danger">*</span></label>
                                    <div class="col-lg-10">
                                        <input type="text" id="region" name="region" class="form-control border-teal border-1" placeholder="Region" required autocomplete="off">
                                    </div>
                                </div> --}}

                            </div>

                            {{-- KOLOM 2 --}}
                            <div class="col">

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Phone</label>
                                    <div class="col-lg-10">
                                        <input type="number" name="phone" class="form-control border-teal border-1" placeholder="Phone" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Mobile</label>
                                    <div class="col-lg-10">
                                        <input type="number" name="mobile" class="form-control border-teal border-1" placeholder="Mobile" autocomplete="off">
                                    </div>
                                </div>

								<hr>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Telefax</label>
                                    <div class="col-lg-10">
                                        <input type="text" name="telefax" class="form-control border-teal border-1" placeholder="Telefax" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Email</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" autocomplete="off" value="{{ old('email') }}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Occupation</label>
                                    <div class="col-lg-10">
                                        <input type="text" name="occupation" class="form-control border-teal border-1" placeholder="Occupation" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">License Plate</label>
                                    <div class="col-lg-10">
                                        <input type="text" name="plat_nomor" class="form-control border-teal border-1" placeholder="License Plate" autocomplete="off">
                                    </div>
                                </div>

								<hr>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">ID CardType</label>
                                    <div class="col-lg-10">
										{{--
											<input type="text" name="id_cardtype" class="form-control border-teal border-1" placeholder="ID Cardtype" required autocomplete="off">
										--}}
										<select name="id_cardtype" id="id_cardtype" class="form-control form-control-select2">
											<option value="">-- Select ID CardType --</option>
											@foreach(config('custom.jenis_identitas') as $key => $val)
											<option value="{{$key}}">{{$val}}</option>
											@endforeach
										</select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">ID Cardno</label>
                                    <div class="col-lg-10">
                                        <input type="text" name="id_cardno" class="form-control border-teal border-1" placeholder="ID Cardno" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group row">
									<label for="" class="col-form-label col-lg-2"></label>
									<div class="col-lg-10">
										<div class="form-check form-check-inline">
											<label class="form-check-label">
												<input type="radio"
                                                       name="exp_status"
													   class="form-check-input-styled exp_class"
													   style="border-color: red"
                                                       value="lifetime"
													   data-fouc
                                                       checked
												>
                                                Lifetime
											</label>
										</div>

										<div class="form-check form-check-inline">
											<label class="form-check-label">
												<input type="radio"
                                                       name="exp_status"
													   class="form-check-input-styled exp_class"
													   style="border-color: red"
                                                       value="expired_date"
													   data-fouc
												>
												Expired Date
											</label>
										</div>
									</div>
								</div>

                                <div class="form-group row" id="expired_date" style="display: none;">
                                    <label class="col-form-label col-lg-2">Expired Date</label>
                                    <div class="col-lg-10">
                                        <input type="date" name="expired_date" id="exp_date_value" class="form-control border-teal border-1" autocomplete="off" disabled>
                                    </div>
                                </div>

                            </div>
                        </div>

						<hr>

                        <div class="row">
                            <div class="col">

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Birth Date</label>
                                    <div class="col-lg-6">
                                        <input type="text" name="birth_date" class="form-control border-teal border-1 daterange-single" autocomplete="off">
                                    </div>

                                    <label class="col-form-label col-lg-1">Sex</label>
                                    <div class="col-lg-3">
                                        <select class="form-control border-teal border-1" name="sex" id="sex">
                                            <option value="1">Male</option>
                                            <option value="2">Female</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Credit Limit</label>
                                    <div class="col-lg-4">
                                        <input type="text" value="0" name="credit_limit" class="form-control border-teal border-1 ribuan" placeholder="Credit Limit" autocomplete="off" oninput="formatMask()">
                                    </div>
                                    <label class="col-form-label col-lg-2">Payment</label>
                                    <div class="col-lg-4">
                                        <input type="text" value="0" name="payment" class="form-control border-teal border-1 ribuan" placeholder="Payment" autocomplete="off" oninput="formatMask()">
                                    </div>

                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">MasterComp</label>
                                    <div class="col-lg-10">
                                        <input type="text" name="mastercomp" class="form-control border-teal border-1" placeholder="Master Comp" autocomplete="off">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Guest Remark</label>
                                    <div class="col-lg-10">
                                        <textarea class="form-control border-teal border-1" name="codes" id="codes" cols="30" rows="4"></textarea>
                                    </div>

                                    {{-- <label class="col-form-label col-lg-2">
                                        MainSegment
                                    </label>
                                    <div class="col-lg-4">
                                        <input type="text" name="mainsegment" class="form-control border-teal border-1" placeholder="Main Segment" autocomplete="off">
                                        <select name="mainsegment"
                                                id="mainsegment"
                                                class="form-control form-control-select2 border-teal border-1"
                                        >
                                            <option value="">-- Select Segment --</option>
                                            @foreach(config('custom.segment_ratecodes') as $key_segmentasi => $val)
                                            <option value="{{$key_segmentasi}}">{{$val}}</option>
                                            @endforeach
                                        </select>
                                    </div> --}}


                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Comments</label>
                                    <div class="col-lg-10">
                                        <textarea class="form-control border-teal border-1" name="comments" id="comments" cols="30" rows="5"></textarea>
                                    </div>
                                </div>

                            </div>
                            <div class="col">
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Birth Place</label>
                                    <div class="col-lg-6">
                                        <input type="text" name="birth_place" class="form-control border-teal border-1" placeholder="Birth Place" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    {{-- @if(\Auth::user()->role != 10) --}}
                                    <label class="col-form-label col-lg-2">Individual Ledger</label>
                                    <div class="col-lg-6">
                                        <select class="form-control border-teal border-1" name="individual_ledger" id="individual_ledger" onchange="individualLedger(this.value)">
                                            <option value="0">No</option>
                                            <option value="1">Yes</option>
                                        </select>
                                    </div>
                                    {{-- @endif --}}
                                </div>
                                <div class="form-group row">
                                    <!-- Status Ledger -->
                                      <label class="col-form-label col-lg-2 wrap-status-ledger" style="display: none">Status Ledger</label>

                                      <div class="col-lg-6 wrap-status-ledger" style="display: none">
                                          <select name="status_ledger" id="status_ledger" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal">
                                              @foreach(config('custom.status_ledger') as $key => $val)
                                              <option value="{{$key}}">{{$val}}</option>
                                              @endforeach
                                          </select>
                                      </div>
                                  <!-- Status Ledger -->
                                </div>
                                <div class="form-group row" id="coa_ledger" style="display: none">
                                    <label class="col-form-label col-lg-2">COA Individual Ledger</label>
                                    <div class="col-lg-6">
                                        <select name="coa_id" id="coa_id" class="form-control form-control-select2 border-teal border-1">
                                            <option value="">-- Select COA --</option>
                                            @foreach ($coas as $coa)
                                                <option value="{{$coa->id}}">({{$coa->account_no}}) {{$coa->description}}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger">If null will be fill with default value COA: {{@$coa_def->coaIndividualLedger->account_no}} - {{@$coa_def->coaIndividualLedger->description}}</span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <!-- Keterangan Ledger -->
                                       <label class="col-form-label col-lg-2 wrap-keterangan-ledger" style="display: none">Description Ledger</label>

                                       <div class="col-lg-6 wrap-keterangan-ledger" style="display: none">
                                           <textarea name="keterangan_ledger" id="keterangan_ledger" class="form-control border-teal border-1"></textarea>
                                       </div>
                                   <!-- Keterangan Ledger -->
                                </div>
                            </div>
                        </div>




						{{-- <div class="form-group row">
							<label class="col-form-label col-lg-2">Codes</label>
							<div class="col-lg-4">
								<textarea class="form-control border-teal border-1" name="codes" id="codes" cols="30" rows="4"></textarea>
							</div>
						</div> --}}



					</fieldset>
					<div class="text-right">
						<a href="{{ url('/guestprofile')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
						<button type="submit" class="btn btn-primary submitBtn">Save <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/ui/moment/moment.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/picker_date.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 src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>

	<script type="text/javascript">

        // Function format Mask
            function formatMask() {
                $('.ribuan').mask("#,##0", {reverse: true});//set separator number
            }
        // Function format Mask

        // function when individual ledger onchange
            function individualLedger(value) {
                if (value == 1) {
                    $('.wrap-status-ledger').show()
                    $('.wrap-keterangan-ledger').show()
                    $('#coa_ledger').show()
                }else{
                    $('.wrap-status-ledger').hide()
                    $('.wrap-keterangan-ledger').hide()
                    $('#coa_ledger').hide()
                }
            }
        // function when individual ledger onchange

        //Expired Date
        $('.exp_class').on('change', function() {
            console.log(this.value)
            if (this.value == 'lifetime') {
                $('#expired_date').hide()
                $('#exp_date_value').attr('disabled', true)
            }else if(this.value == 'expired_date'){
                $('#expired_date').show()
                $('#exp_date_value').attr('disabled', false)
            }
        })
        //Expired Date

		$(document).ready(function () {

			$('#showpass').click(function(){
				if($(this).is(':checked')){
					$('#password').attr('type','text');
				}else{
					$('#password').attr('type','password');
				}
			});

			$(document).on('submit', '#submitguest', function(e) {

					$(".submitBtn").attr("disabled", true);
					$('#submitguest').submit()

			})

            // call date Single picker
            $('.daterange-single').daterangepicker({
                singleDatePicker: true,
				startDate: "{{date('d-m-Y', strtotime(getSystemDate()))}}",
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

		});


        // 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', // 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);
		                }
		            },

		        });

		        // 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