@extends('frontend.main')
@section('content')
    
    <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-->
    <!--App Section-->
    <section class="app-section">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="app-block col-lg-12 col-md-12 col-sm-12">
                    <div class="inner-box">
                        <div class="content">
                            <h3>
                                {{$license->first()->name}}: {{ get_local_currency_prefix() }} {{ get_local_currency($license->first()->price) }}
                                for {{$license->first()->term}} {{$license->first()->term_type}}
                                <a href="#" class="theme-btn btn-style-two float-sm-right float-xs-right"
                                   data-toggle="modal"
                                   data-target="#licenseModal">
                                    ORDER NOW
                                </a>
                            </h3>
                            <span> Switch to monthly payment plan</span>
                        </div>
                        <div id="licenseModal" class="modal fade" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-md">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h3>Test Package</h3>
                                        <button type="button" class="close pull-right"
                                                data-dismiss="modal"
                                                aria-label="Close"><span
                                                    aria-hidden="true">×</span>

                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="text" style="padding-bottom: 10px;">
                                            Please enter your IP address before you purchase our
                                            license service.
                                        </div>

                                        <div class="contact-form">
                                            {{Form::open(['class'=> 'form','id'=>"webHostForm",'route'=>'set.licenseSession','method'=>'post','novalidate'])}}
                                            <div class="form-group">
                                                <label for="ip-address">IP Address</label>
                                                {{ Form::text('ip_address', old('ip_address'), ['class' => 'form-control','id'=>'ip_address','required']) }}
                                                {{Form::hidden('license_name', $license->first()->name)}}
                                            </div>
                                            <div class="form-group">
                                                <button class="theme-btn btn-style-two"
                                                        id="webSub" type="submit">SUBMIT <span
                                                            class="arrow fa fa-angle-right"></span>
                                                </button>
                                            </div>
                                            {{Form::close()}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('scripts')
        <script>
            $(document).ready(function() {
                $('#webHostForm')
                    .bootstrapValidator({
                        feedbackIcons: {
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                        },
                        fields: {
                            ip_address: {
                                validators: {
                                    ip: {
                                        message: 'The IP address is not valid'
                                    }
                                }
                            }
                        }
                    })
                    .find('[name="ip_address"]').mask('099.099.099.099');
            });
        </script>
    @endpush
@endsection