@extends("layoutfrontend")

@section('title', 'Booking | Konfirmasi Booking')

@section("css")
    <style>
        body {
            background-color: #f5f5f5 !important;
        }

        .centered {
            max-width: 50%;
            margin: 10% auto;
        }

        .bank-info {
            font-size: 1.4em;
        }

		@media only screen and (max-width: 960px) {
			.centered {
				max-width: 90%;
				margin: 10% auto;
			}
		}
    </style>
@endsection

@section("content")
    <div class="container">
        <div class="centered">
            <div class="card align-items-center p-5">
                <h2 class="font-weight-bold">Payment by Bank Transfer</h2>
                <img class="my-2" src="{{ URL::asset("global_assets/images/bca-logo.png") }}" width="150px" />
                <div class="bank-info">45783728123 an. Noer Tjahja Prajitno</div>
                <div class="text-muted">Please transfer according invoice total amount to the bank account listed</div>
                <div class="mt-4 w-100">
                    <form class="form-validate-jquery" method="post" action="{{ route("hotel.confirm.store", ["prefix" => $hotel->sub_url]) }}"  enctype="multipart/form-data">
                        @csrf
                        @method("PUT")
                        <div class="form-group">
                            <label>Booking Code</label>
                            <input name="kode_booking" type="text" class="form-control @error('kode_booking') is-invalid @enderror" placeholder="KD23312XXXX" value="{{ $kode_booking ?? "" }}" required>
                        </div>
                        <div class="form-group">
                            <label>Upload Payment Receipt</label>
                            <input name="gambar" type="file" class="form-control-uniform @error('gambar') is-invalid @enderror" data-fouc="" required>
                        </div>
                        <button type="submit" class="btn btn-success btn-block text-uppercase">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("js")
    <script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
    <script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>

    <script type="text/javascript">
        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>
@endsection