@extends('layout')

@section('title', 'Custom VPS')

@section('content')

    @include('commons.banner', [ 'banners' => $service->banner ] )

    <section>
        <div class="container">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
                    {{ Form::open([ 'route' => ['service.custom.store', $service->slug], 'class' => 'form form-validate', 'novalidate' , 'id' => 'form-custom-plan']) }}
                    <div class="card" id="custom-vps">
                        <div class="card-head">
                            <header class="custom-title">Make a VPS Custom Plan</header>
                        </div>
                        @include('service.vps.custom-form')
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </section>

@stop

@push('styles')
<link rel="stylesheet" href="{{ asset('css/libs/ion.rangeSlider/css/ion.rangeSlider.css') }}">
<link rel="stylesheet" href="{{ asset('css/libs/ion.rangeSlider/css/ion.rangeSlider.skinFlat.css') }}">
<link rel="stylesheet" href="{{ asset('css/libs/ion.rangeSlider/css/normalize.css') }}">
@endpush

@push('scripts')
<script type="text/javascript" src="{{ asset('js/libs/ion.rangeSlider/ion.rangeSlider.min.js') }}"></script>
<script src="{{ asset('js/vue.js') }}"></script>
<script>
    var vm = new Vue({
        el: '#custom-vps',
        data: {
            sliders: {
                vps_cpu: {
                    min: 1,
                    max: 8,
                    step: 1,
                    postfix: " core",
                    grid_snap: true,
                    grid: true
                },
                vps_ram: {
                    min: 1,
                    max: 16,
                    grid_snap: true,
                    postfix: " GB",
                    grid: true
                },
                vps_disk: {
                    min: 20,
                    max: 1000,
                    step: 5,
                    grid_snap: true,
                    postfix: " GB",
                    grid: true
                },
                vps_traffic: {
                    min: 200,
                    max: 1000,
                    step: 100,
                    grid_snap: true,
                    postfix: " GB",
                    grid: true
                },

                web_domain: {
                    min: 1,
                    max: 8,
                    step: 1,
                    postfix: "",
                    grid_snap: true,
                    grid: true
                },
                web_disk: {
                    min: 10,
                    max: 100,
                    step: 5,
                    grid_snap: true,
                    postfix: " GB",
                    grid: true
                },
                web_traffic: {
                    min: 1,
                    max: 200,
                    step: 10,
                    grid_snap: true,
                    postfix: " GB",
                    grid: true
                },
                email_domain: {
                    min: 1,
                    max: 8,
                    step: 1,
                    postfix: "",
                    grid_snap: true,
                    grid: true
                },
                email_disk: {
                    min: 10,
                    max: 1000,
                    step: 10,
                    grid_snap: true,
                    postfix: " GB",
                    grid: true
                },
                email_traffic: {
                    min: 0,
                    max: 1000,
                    step: 10,
                    grid_snap: true,
                    postfix: " GB",
                    grid: true
                }
            },
            options: {
                cpu: '{!! empty(old('options.cpu')) ? 1: old('options.cpu') !!}',
                ram: '{!! empty(old('options.ram')) ? 1: old('options.ram') !!}',
                disk: '{!! empty(old('options.disk')) ? 20: old('options.disk') !!}',
                traffic: '{!! empty(old('options.traffic')) ? 200: old('options.traffic') !!}',
                options: {
                    is_managed: '{!! empty(old('options.is_managed')) ? 0: old('options.is_managed') !!}',
                    data_center_id: '{!! empty(old('options.data_center_id')) ? 1: old('options.data_center_id') !!}',
                    operating_system_id: '{!! empty(old('options.operating_system_id')) ? 1 : old('options.operating_system_id') !!}'
                }
            },
            term: '{!! config('awt.terms.default') !!}',
            name: '',
            base_price: 0,
            prefix: '{!! get_local_currency_prefix() !!}',
            request_queue: false
        },
        computed: {
            formattedPrice: function () {
                return this.prefix + " " + parseFloat(this.price).toFixed(2);
            },
            priceValid: function () {
                return this.price == parseFloat(this.price) && this.name != '';
            },
            price: function () {
                return this.base_price * this.term;
            }
        },
        ready: function () {

            this.initSliders();
            this.getPrice();

        },
        watch: {
            'options.cpu': 'getPrice',
            'options.ram': 'getPrice',
            'options.disk': 'getPrice',
            'options.traffic': 'getPrice',
            'options.options.is_managed': 'getPrice',
            'options.options.data_center_id': 'getPrice',
            'options.options.operating_system_id': 'getPrice'
        },
        methods: {

            initSliders: function () {
                for (slider in this.sliders) {
                    $("." + slider + "-slider").ionRangeSlider(this.sliders[slider]);
                }
            },
            getPrice: function () {
                var p = this;

                if (this.request_queue)
                    clearTimeout(this.request_queue);

                this.request_queue = setTimeout(function () {
                    $.ajax({
                        type: 'GET',
                        data: p.options,
                        url: '{{ route('service.price', $service->slug) }}',
                        success: function (response) {
                            p.base_price = response;
                        }
                    });
                }, 200);
            }
        }
    });
</script>
@endpush