@extends('frontend3')

@section('styles')

    <link rel="stylesheet" href="/frontend3/medi.css">

@endsection
@section('content')
    <div id="siteContent" class="site-content">
        <div class="container" style="margin-top: 24px">


            <div class="row">
                <!-- You can make it whatever width you want. I'm making it full width
                     on <= small devices and 4/12 page width on >= medium devices -->
                <div class="col-xs-12 col-md-8">


                    <!-- CREDIT CARD FORM STARTS HERE -->
                    <div class="panel panel-default credit-card-box">
                        <div class="panel-heading display-table">
                            <div class="row display-tr">
                                <h3 class="panel-title display-td">Thông tin thanh toán</h3>
                            </div>
                        </div>
                        <div class="panel-body">
                            <form role="form" id="payment-form" method="POST" action="javascript:void(0);">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group">
                                            <label>Chọn gói cước</label>
                                            <select class="form-control" name="package_id" id="package_id">
                                                @foreach($packages as $package)
                                                    <option  data-number-rooms="{{ $package->number_rooms }}"
                                                            @if($currentPackage) @if($currentPackage->package_id == $package->id)

                                                            @endif @endif value="{{ $package->id }}">{{ $package->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group">
                                            <label>Số tháng</label>
                                            <input name="month" type="number" min="1"
                                                   class="form-control touchspin-form-control" value="1" id="month">
                                        </div>

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="form-group">
                                            <label>Số phòng</label>
                                            <input name="room" type="text" min="10" onkeydown="return false"
                                                   class="form-control touchspin-form-control-10" value="{{ $minRoom }}"
                                                   id="room">
                                        </div>

                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Hình thức thanh toán</label>
                                    <div class="radio"><label><input type="radio" name="payment_type" value="0"
                                                                     checked="">Chuyển khoản ngân hàng</label></div>
                                    <div class="panel panel-default" id="payment-bank">
                                        <div class="panel-heading">Thông tin chuyển khoản</div>
                                        <div class="panel-body">
                                            + Số tài khoản: 0011004295197<br>
                                            + Chủ tài khoản: NGUYEN NAM PHONG <br>
                                            + Ngân hàng: TMCP Ngoại thương Việt Nam - Vietcombank<br>
                                            + Chi nhánh: Vietcombank chi nhánh Thanh Xuân<br>

                                        </div>
                                    </div>
{{--                                    <div class="radio"><label><input type="radio" name="payment_type" value="1">Thanh--}}
{{--                                            toán trực tuyến qua VNPay</label></div>--}}
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <button class="btn ht-btn-primary btn-block" type="button" id="payment-save">
                                            Thanh toán
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- CREDIT CARD FORM ENDS HERE -->


                </div>

                <div class="col-xs-12 col-md-4" style="line-height: 2em;">

                    <form class="register-form outer-top-xs" role="form" method="post" id="thanhtoan-form">

                    </form>

                </div>

            </div>

        </div>
    </div>
@endsection

@push('scripts')

<script>
    $(document).on('change', '#package_id', function (e) {

        var number_rooms = $('option:selected', this).attr('data-number-rooms');
        $(".touchspin-form-control-10").val(number_rooms);

        $(".touchspin-form-control-10").trigger("touchspin.updatesettings", {min: number_rooms});

        get_payment_info();

    });

    $(document).on('change', 'input[type=radio][name=payment_type]', function (e) {
        if ($(this).val() == 1) {
            $('#payment-bank').hide();
        } else {
            $('#payment-bank').show();
        }
    });

    $(document).on('change', '#month', function () {
        get_payment_info();

    });

    $(document).on('change', '#room', function () {
        get_payment_info();

    });

    window.onload = function () {
        $(".touchspin-form-control-10").trigger("touchspin.updatesettings", {min: {{ $minRoom }} });
        init();
    }

    $(document).ready(function () {

        get_payment_info();


    });

    function get_voucher_info() {
        var code = $('[name="coupon_code"]').val();
        if (code.trim() !== '') {
            $.ajax({
                url: '{{ url('get-payment-info-voucher') }}',
                data: {
                    package_id: $('#package_id').val(),
                    month: $('#month').val(),
                    coupon_code: $('[name="coupon_code"]').val(),
                    room: $('#room').val()
                },
                type: 'get',
                dataType: 'json',
                beforeSend: function()
                {
                    $('#thanhtoan-form').addClass('ht-on-loading');
                },
                success: function (response) {
                    if (response.status == 1) {
                        $('#thanhtoan-form').removeClass('ht-on-loading');
                        $('#voucher_info').removeClass('ht-on-loading').html(response.data);
                        $('#sum').html(response.sum);
                        //$('#thanhtoan-form').html(response.payment_info);
                    } else {
                        swal('Thông báo', response.message, 'info');
                    }

                }
            });
        }
    }
    function get_payment_info() {
        //var data_payment = $('#payment-form').serialize();
        $.ajax({
            url: '{{ url('get-payment-info') }}',
            data: {
                package_id: $('#package_id').val(),
                month: $('#month').val(),
                coupon_code: $('[name="coupon_code"]').val(),
                room: $('#room').val()
            },
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('#thanhtoan-form').html(response.data);
                get_voucher_info();
            }
        });
    }

    $(document).on('click', '#voucher_button', function (e) {
        e.preventDefault();
        $.ajax({
            url: '{{ url('get-payment-info-voucher') }}',
            data: {
                package_id: $('#package_id').val(),
                month: $('#month').val(),
                coupon_code: $('[name="coupon_code"]').val(),
                room: $('#room').val()
            },
            type: 'get',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    $('#voucher_info').html(response.data);
                    $('#sum').html(response.sum);
                    //$('#thanhtoan-form').html(response.payment_info);
                } else {
                    swal('Thông báo', response.message, 'info');
                }

            }
        });
    });

    $(document).on('click', '#payment-save', function (e) {
        $.ajax({
            url: '{{ url('process-order') }}',
            data: {
                package_id: $('#package_id').val(),
                month: $('#month').val(),
                coupon_code: $('#coupon_code').val(),
                payment_type: $('input[type=radio][name=payment_type]:checked').val(),
                room: $('#room').val()
            },
            type: 'post',
            dataType: 'json',
            success: function (response) {
                if (response.status == 1) {
                    if (response.url != '') {
                        window.location.href = response.url;
                    } else {
                        swal('Thành công', 'Đơn hàng của bạn đã được lưu lại và chờ xử lý. Cám ơn bạn đã sử dụng dịch vụ của iTro.vn', 'success');
                        setTimeout(function () {
                            location.reload();
                        }, 3500);
                    }
                } else {
                    swal('Thông báo', response.message, 'info');
                }

            }
        });
    });
</script>


@endpush