@extends('frontend.main')
@section('content')
    <style>
        #content {
            padding-left: 0px !important;
        }
        .hosting-section{
            padding-top: 35px !important;
        }
    </style>

    <section class="page-title-light breadcrumb_section parallax_bg overlay_bg_50" style="background: url({{asset('img/img16.jpg')}})">
        <div class="page-title-light2">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-sm-6">
                        <div class="heading-title">
                            <h1>{{$service->name}}</h1>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <nav aria-label="breadcrumb">
                          <ol class="breadcrumb justify-content-sm-end">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{$service->name}}</li>
                          </ol>
                        </nav>
                    </div>
                </div>
            </div>  
        </div>
    </section>

    <!--Hosting Section-->
    <section class="hosting-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>{{$service->name}}</h2>
            </div>
            <div class="row clearfix">

            <!--Image Column-->
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="image wow slideInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <img src="{{asset('frontend/images/resource/hosting.jpg')}}" alt="" />
                    </div>
                </div>

            <!--Content Column-->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        {!! $service->description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Hosting Section-->

    <!--Info Listing Section-->
    <section class="info-listing-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2 style="color: white;">AWT {{$service->name}}</h2>
            </div>
            <div class="cloud-one"></div>
            <div class="cloud-two"></div>
            <div class="row clearfix">

                <!--Hosting Info Block-->
                <div class="hosting-info-block col-lg-12 col-md-12 col-sm-12">
                    <div class="inner-block">
                        {!! $service->short_description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Info Listing Section-->

    <!--Contact Form Section-->
    <section class="contact-form-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>Virtual Private Server</h2>
                <div class="text"> Create an instance and launch your VPS in minutes. We provide you with improved
                    efficiency, reduced costs and streamlined support.
                </div>
            </div>
            <div class="row clearfix">

                <!--App Block-->
                <div class="app-block col-lg-9 col-md-12 col-sm-12">
                    <div class="inner-box">
                        <div class="content">
                            <h3>Customize your VPS</h3>
                            <!-- VPS Form -->
                            <div class="contact-form wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1500ms">
                                <!--Comment Form-->
                                <form id="cloudVpsForm" method="post" name="cloudForm" action="{{route('send_vps_quote')}}">
                                    {{ csrf_field() }}
                                    <div class="row clearfix" id="step1">

                                        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                            <select name="osi" id="osi" class="default-select">
                                                <option value="Select an OS">Select an OS</option>
                                                <option value="windows_server_2012_r2">Windows Server 2012 R2</option>
                                                <option value="centos_release_6.7">CentOS Release 6.7</option>
                                                <option value="ubuntu_14.04_ipsconfig">Ubuntu 14.04 ISPConfig</option>
                                                <option value="suse_linux">SUSE Linux</option>
                                                <option value="windows_server_2008">Windows Server 2008</option>
                                                <option value="ubuntu_14.04_lts">Ubuntu 14.04 LTS</option>
                                                <option value="centos_6.5">Centos 6.5</option>
                                                <option value="centos_6.8">Centos 6.8</option>
                                                <option value="ubunt_16.04_lts">Ubuntu 16.04 LTS</option>
                                                <option value="windows_10_desktop_version">Windows 10 Desktop Version
                                                </option>
                                                <option value="centos_7">Centos 7</option>
                                                <option value="centos_7_cpanel">Centos 7 CPanel</option>
                                                <option value="windows_server_2016">Windows Server 2016</option>
                                            </select>
                                            <p>
                                                Select your required OS. You can always customize later.
                                            </p>
                                        </div>

                                        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                            {{--<label class="text-default-light">Choose the number of CORE</label>--}}
                                            <select name="cpui" id="cpui" class="default-select" disabled="">
                                                <option value="">Choose the number of CORE</option>
                                                <option value="1">1 core</option>
                                                <option value="2">2 core</option>
                                                <option value="3">3 core</option>
                                                <option value="4">4 core</option>
                                                <option value="5">5 core</option>
                                                <option value="6">6 core</option>
                                                <option value="7">7 core</option>
                                                <option value="8">8 core</option>
                                            </select>
                                            <p>
                                                We recommend you start with 2 cores. You can always customize later.
                                            </p>
                                        </div>

                                        <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                            <select name="rami" id="rami" class="default-select" disabled="disabled">
                                                <option value="">Choose the size of a RAM from 1GB to 16GB.</option>
                                                <option value="1">1 GB</option>
                                                <option value="2">2 GB</option>
                                                <option value="3">3 GB</option>
                                                <option value="4">4 GB</option>
                                                <option value="5">5 GB</option>
                                                <option value="6">6 GB</option>
                                                <option value="7">7 GB</option>
                                                <option value="8">8 GB</option>
                                                <option value="9">9 GB</option>
                                                <option value="10">10 GB</option>
                                                <option value="11">11 GB</option>
                                                <option value="12">12 GB</option>
                                                <option value="13">13 GB</option>
                                                <option value="14">14 GB</option>
                                                <option value="15">15 GB</option>
                                                <option value="16">16 GB</option>
                                            </select>
                                            <p>
                                                Choose your required size of RAM.
                                            </p>
                                        </div>

                                        <div class="form-group col-lg-6 col-md-6 col-sm-12">
                                            <input class="form-control" name="disk_spacei" id="disk_spacei"
                                                   type="number" min="20"
                                                   max="1000" placeholder="Scale up to choose the size of Storage"
                                                   id="disk" disabled="disabled">
                                            <p>
                                                We recommend you start with 20GB of disk storage for linux OS and 40GB for Windows OS. You can always customize later.
                                            </p>
                                        </div>



                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                            <input type="checkbox" id="managed-add-checkbox" name="managed"
                                                   value="managed"/>
                                            <span class="checkbox-styled"></span>
                                            <span class="cloud-spec-label-right">Select if you want us to manage your sever</span>
                                        </div>

                                        <div class="col-lg-12 col-md-12 col-sm-12 form-group" id="quoteBtn">
                                            <a href="#" id="nextBtn" class="theme-btn btn-style-two" >
                                                Next
                                            </a>
                                        </div>

                                    </div>
                                    <div class="row clearfix" id="step2">
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="usr">First Name  <span class="red">*</span></label>
                                                    <input class="form-control" data-old-name="first_name" data-name="FirstName" data-is-mapped="1" required="required" type="text" name="FirstName" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
                                                </div>
                                                <div class="form-group">
                                                    <label for="pwd">Email Address <span class="red">*</span> </label>
                                                    <input class="form-control" data-old-name="email" data-name="EmailAddress" data-is-mapped="1" required="required" type="email" name="EmailAddress">
                                                </div>
                                                <div class="form-group">
                                                    <label for="pwd">Company <span class="red">*</span></label>
                                                    <input class="form-control" data-old-name="company" data-name="Company" data-is-mapped="1" required="required" type="text" name="Company">
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6">
                                                <div class="form-group">
                                                    <label for="usr">Last Name <span class="red">*</span></label>
                                                    <input class="form-control" data-old-name="last_name" data-name="LastName" data-is-mapped="1" required="required" type="text" name="LastName">
                                                </div>
                                                <div class="form-group">
                                                    <label for="pwd">Phone Number <span class="red">*</span></label>
                                                    <input class="form-control" data-old-name="phone" data-name="Phone" data-is-mapped="1" required="required" type="tel" name="Phone">
                                                </div>
                                                <div class="form-group">
                                                    <label for="pwd">City </label>
                                                    <input class="form-control" data-old-name="city" data-name="mx_City" data-is-mapped="1" type="text" name="mx_City">
                                                </div>
                                            </div>

                                            <div class="clearfix"></div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="pwd">Business Requirement </label>
                                                    <textarea class="form-control" data-old-name="business_requirement" data-name="mx_Business_Intelligence" data-is-mapped="1" name="mx_Business_Intelligence"></textarea>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div> <br>
                                            <div class="col-md-3 col-sm-3">
                                                <input type="submit" class="theme-btn btn-style-two" id="mainSubmit" value="Submit">
                                            </div>
                                        <div class="col-md-9 col-sm-9">
                                            <p>Your request will be sent to a Accessworld service manager and will be answered within 24 hours.</p>
                                        </div>
                                        </div>
                                </form>

                            </div>
                            <!--End VPS Form -->

                        </div>
                    </div>
                </div>

                <!--App Block-->
                <div class="price-block app-block col-lg-3 col-md-12 col-sm-12">
                    <div class="inner-box">
                        <div class="content" id="content">
                            <h3>Your Configuration</h3>
                            <ul class="instant-price-specs" id="config">
                                <li class="instant-price-spec">
                                    CPU Cores
                                    <span class="instant-price instant-price-small">
                                                <span id="cpuo" style="float:right;">1</span>
                                            </span>
                                </li>

                                <li class="instant-price-spec">
                                    Total RAM (GB)
                                    <span class="instant-price instant-price-small">
                                                <span id="ramo" style="float:right;">1</span>
                                            </span>
                                </li>

                                <li class="instant-price-spec">
                                    Disk (GB)
                                    <span class="instant-price instant-price-small">
                                                <span id="disk_spaceo" style="float:right;">20</span>
                                            </span>
                                </li>

                                <li class="instant-price-spec">
                                    OS
                                    <span class="instant-price instant-price-small">
                                                <span id="oso" style="float:right;">Select an OS</span>
                                            </span>
                                </li>

                                <li class="instant-price-spec powerpack-item">
                                    Traffic
                                    <span class="instant-price instant-price-small">
                                                 <span style="float:right;"><span id="pp-price">200 GB</span></span>
                                            </span>
                                </li>
                            </ul>
                            <div class="upper-box" id="configTotal">
                                <div class="price">
                                    <label id="totalo"></label><sub>/month</sub>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Contact Form Section-->
    {{--<!--End Contact Form Section-->--}}
    @push('scripts')
        <script>
            $(function () {
                var configTotal = $('#configTotal');
                configTotal.hide();
                var quoteBtn    = $('#quoteBtn');
                quoteBtn.hide();
                var step1       = $('#step1');
                var step2       = $('#step2');
                step2.hide();
                var cpui        = $('#cpui');
                var cpuo        = $('#cpuo');
                var rami        = $('#rami');
                var ramo        = $('#ramo');
                var diski       = $('#disk_spacei');
                var disko       = $('#disk_spaceo');
                var oso         = $('#oso');
                var totalo      = $('#totalo');
                var cpuv        = 1;
                var ramv        = 1;
                var diskv       = 20;
                var osv         = '';
                var managev     = '';
                var val         = '';

                $('#osi').on('change', function () {
                    val     = $(this).find("option:selected").text();
                    oso.empty().append(val);
                    calculate('os', val);
                        if(!val.indexOf("Windows"))
                        {
                            $("#rami option[value='1']").hide();
                            $('#rami option:eq(2)').prop('selected', true);
                            ramo.empty().append('2');
                            diski.attr('min',40);
                            diski.val('40');
                            disko.empty().append('40');
                        }else{
                            $("#rami option[value='1']").show();
                            diski.attr('min',20);
                        }
                    cpui.prop('disabled',false);
                    rami.prop('disabled',false);
                    diski.prop('disabled',false);

                });

                $('#cpui').on('change', function () {
                    val = $(this).val();
                    cpuo.empty().append(val);
                    calculate('cpu', val);
                });

                $('#rami').on('change', function () {
                    val = $(this).val();
                    ramo.empty().append(val);
                    calculate('ram', val);
                });

                $('#disk_spacei').on('change', function () {
                    val = $(this).val();
                    disko.empty().append(val);
                    calculate('disk', val);
                });

                $('#managed-add-checkbox').on('change',function(){
                   if(this.checked){
                       val = 'yes';
                   }else{
                       val ='no';
                   }

                   calculate('manage',val);
                });
                function calculate(item, val) {
                    switch (item) {
                        case 'cpu':
                            cpuv = val;
                            break;

                        case 'ram':
                            ramv = val;
                            break;

                        case 'disk':
                            diskv = val;
                            break;

                        case 'os':
                            osv = val;
                            break;

                        case 'manage':
                            managev = val;
                            break;
                    }

                    $.ajax({
                        method: 'GET',
                        url: '{{ route('get.vpsTotal') }}',
                        data: {
                            '_token': '{{ csrf_token() }}',
                            cpu     : cpuv,
                            ram     : ramv,
                            disk    : diskv,
                            os      : osv,
                            manage  : managev,
                        },
                        success: function (response) {
                            configTotal.show();
                            quoteBtn.show();
                            totalo.empty().append(response);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log(errorThrown)
                        }
                    });
                }

                $('#nextBtn').on('click',function(e){
                    e.preventDefault();
                    step1.hide("fade", { direction: "left" }, 500);
                    step2.show("fade", { direction: "right" }, 1000);
                });
            });
        </script>
    @endpush
@endsection