@extends("layoutfrontend")

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

@section("css")
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .title {
            font-size: 2em;
            font-weight: 600;
            line-height: 1;
        }
        
        .subtitle {
            font-size: 1.2em;
            font-weight: 300;
            line-height: 1;
        }

        .form-readonly {
            padding: 0;
            border: none;
            background-color: transparent !important;
            cursor: unset;
            height: auto;
            font-size: 1.4em;
            font-weight: 600;
        }

        .grand-total {
            font-size: 1.5em;
        }

        .down-payment {
            font-size: 1.7em;
            line-height: 1;
        }
    </style>
@endsection

@section("content")
    <div class="container">
        <form id="form" class="form-validate-jquery" action="{{ route("hotel.payment.store", ["prefix" => $hotel->sub_url]) }}" method="post">
            @csrf
            <div class="row mb-5">
                <div class="col-md-7 mb-3">
                    <div class="title mb-3">Orders</div>
                    @php
                        $grandtotal = 0
                    @endphp
                    @if (count($orders) > 0)
                        @foreach ($orders as $order)
                            @php
                                $grandtotal += @$order->subtotal
                            @endphp
                            <div class="row border-bottom mr-md-3 mb-4">
                                <div class="col-md-5 mb-1 mb-md-0">
                                    <img class="rounded" width="100%" height="90%" style="object-fit: cover" src="{{ URL::asset(@$order->jns_kamar_gambar) }}" />
                                </div>
                                <div class="col-md-7">
                                    <div class="form-group">
                                        <label class="text-muted mb-0" for="jns_kamar">Room Type</label>
                                        <input class="form-control form-readonly" id="jns_kamar" value="{{ @$order->jns_kamar_nama }}" readonly />
                                        <input type="hidden" name="jns_kamar[]" value="{{ @$order->jns_kamar_nama }}" />
                                    </div>
                                    {{-- <div class="row">
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label class="text-muted mb-0" for="start_date">Start Date</label>
                                                <input class="form-control form-readonly" value="{{ @$order->start_date }}" readonly />
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label class="text-muted mb-0" for="end_date">End Date</label>
                                                <input class="form-control form-readonly" value="{{ @$order->end_date }}" readonly />
                                            </div>
                                        </div>
                                    </div> --}}
                                    <input type="hidden" id="start_date" name="start_date" value="{{ @$order->start_date }}" readonly />
                                    <input type="hidden" id="end_date" name="end_date" value="{{ @$order->end_date }}" readonly />
                                    <input type="hidden" id="jml_malam" name="jml_malam" value="{{ @$order->jml_malam }}" readonly />
                                    <div class="row">
                                        <div class="col-4">
                                            <div class="form-group row align-items-center">
                                                <label class="text-muted col-form-label col-6" for="jml_dewasa">Adult: </label>
                                                <div class="col-6">
                                                    <input class="form-control form-readonly" id="jml_dewasa" name="jml_dewasa" value="{{ @$order->jml_dewasa }}" readonly />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group row align-items-center">
                                                <label class="text-muted col-form-label col-6" for="jml_anak">Child: </label>
                                                <div class="col-6">
                                                    <input class="form-control form-readonly" id="jml_anak" name="jml_anak" value="{{ @$order->jml_anak }}" readonly />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group row align-items-center">
                                                <label class="text-muted col-form-label col-6" for="jml_kamar">Room: </label>
                                                <div class="col-6">
                                                    <input class="form-control form-readonly" id="jml_kamar" name="jml_kamar" value="{{ @$order->jml_kamar }}" readonly />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row align-items-center">
                                        <label class="text-muted  col-form-label col-3" for="subtotal">Subtotal: </label>
                                        <div class="col-7">
                                            <input class="form-control form-readonly" id="subtotal" value="Rp {{ ribuan(@$order->subtotal) }}" readonly />
                                            <input type="hidden" name="per_item[]" value="{{ @$order->subtotal }}" />
                                        </div>
                                        <div class="col-2">
                                            <a href="{{ route("hotel.room.delete", ["prefix" => $hotel->sub_url, "id" => $loop->index]) }}" class="btn btn-sm btn-icon btn-outline-danger"><i class="fas fa-trash-alt"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-muted subtitle">You don't have any order right now.</div>
                    @endif
                </div>

                {{-- Checkout Section --}}
                <div class="col-md-5">
                    <div class="mb-3">
                        <div class="title mb-2">Checkout</div>
                        <div class="text-muted subtitle">Please fill all required fields to make the payment.</div>
                    </div>
                    <div class="form-group">
                        <label>Check In - Check Out</label>
                        <input type="text" class="form-control" placeholder="Check In - Check Out" name="datetimes" disabled />
                    </div>
                    <div class="form-group">
                        <label for="nama">Guest Name</label>
                        <input type="text" class="form-control @error('nama') is-invalid @enderror" name="nama" id="nama" required value="{{@Auth::guard("guests")->check() ? @Auth::guard("guests")->user()->name : ""}}" placeholder="John Doe">
                    </div>
                    <div class="form-group">
                        <label for="jns_kelamin">Gender</label>
                        <select name="jns_kelamin" id="jns_kelamin" name="jns_kelamin" class="form-control form-control-select2" required>
                            <option value="Laki-laki">Male</option>a
                            <option value="Perempuan">Female</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" id="email" required value="{{@Auth::guard("guests")->check() ? @Auth::guard("guests")->user()->email : ""}}" placeholder="youremail@mail.com">
                    </div>
                    <div class="form-group">
                        <label for="telp">Phone Number</label>
                        <input type="tel" class="form-control @error('telp') is-invalid @enderror" name="telp" id="telp" required value="" placeholder="62825XXXXXXX">
                    </div>
                    <div class="form-group">
                        <label for="alamat">Address</label>
                        <textarea class="form-control @error('username') is-invalid @enderror" name="alamat" id="alamat" rows="3" placeholder="Detail address" required></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="kewarganegaraan">Nationality</label>
                                <select name="kewarganegaraan" id="kewarganegaraan" name="kewarganegaraan" class="form-control form-control-select2" required>
                                    <option value="WNI">WNI</option>
                                    <option value="WNA">WNA</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="jns_identitas">ID Type</label>
                                <select name="jns_identitas" id="jns_identitas" name="jns_identitas" class="form-control form-control-select2" required>
                                    @foreach(config('custom.jenis_identitas') as $key => $val)
                                        <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="no_identitas">ID Number</label>
                                <input type="text" class="form-control @error('no_identitas') is-invalid @enderror" id="no_identitas" name="no_identitas" required placeholder="Your personal ID number">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="negara">Country</label>
                        <input type="text" class="form-control @error('negara') is-invalid @enderror" id="negara" name="negara" required placeholder="Indonesia">
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="propinsi">Province/State</label>
                                <input type="text" class="form-control @error('propinsi') is-invalid @enderror" id="propinsi" name="propinsi" required placeholder="Jawa Tengah">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="kota">City</label>
                                <input type="text" class="form-control @error('kota') is-invalid @enderror" id="kota" name="kota" required placeholder="Semarang">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="kode_pos">Postcode</label>
                                <input type="number" class="form-control @error('kota') is-invalid @enderror" id="kode_pos" name="kode_pos" required placeholder="50272">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="grand-total down-payment text-success mb-1">Grand total: <strong>Rp {{ribuan($grandtotal)}}</strong></div>
                        <input type="hidden" name="total_biaya" value={{ $grandtotal }} />
                        {{-- <div class="down-payment text-success">Down Payment: <strong>Rp {{ ribuan($grandtotal / 2) }}</strong></div> --}}
                        {{-- <medium class="text-muted">Required deposit is 50%. Balance payment upon arrival</medium> --}}
                    </div>
                    <button type="submit" class="btn btn-primary px-5 mt-4 text-uppercase" id="submit-button">Submit</button>
                </div>
            </div>
        </form>
    </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/selects/select2.min.js')}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            var $select = $('.form-control-select2').select2({
				minimumResultsForSearch: Infinity
			});

            const $startDate = $("input[name=start_date]").val()
            const $endDate = $("input[name=end_date]").val()
            $('input[name="datetimes"]').daterangepicker({
                startDate: moment($startDate),
                endDate: moment($endDate),
                locale: {
                    format: 'D MMMM YYYY'
                }
            });

            let submitButton = $("#submit-button")
            let cart = getCartSession('{{ $hotel->id }}')

            console.log(cart.length)

            if(cart.length < 1){
                submitButton.attr("disabled", true)
            } else {
                submitButton.attr("disabled", false)
            }
        })
    </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