@extends('frontend.main')
@section('content')
    <style>
        .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-->

    <!--Pricing Section-->
    <section class="pricing-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>{{$service->name}} Plans</h2>
                <div class="text"> Nepal’s fastest, secure and flexible Web Hosting.</div>
            </div>
            <div class="outer-container pricing-tabs tabs-box">
                <div class="clearfix">
                    <!--Title Column-->
                    <div class="title-column">
                        <div class="inner-column">

                            <!--Tab Btns-->
                            <ul class="tab-buttons clearfix">
                                {{--<li data-tab="#prod-monthly" class="tab-btn active-btn">Monthly Plans</li>--}}
                                <li data-tab="#prod-yearly" class="tab-btn active-btn">Annual Plans</li>
                            </ul>

                        </div>
                    </div>
                    <!--Price Column-->
                    <div class="price-column">
                        <div class="inner-column">
                            <!--Tabs Container-->
                            <div class="tabs-content">
                                <!--Tab-->
                                <div class="tab active-tab" id="prod-yearly">
                                    <div class="content">
                                        <div class="row clearfix">
                                            @foreach($webpackages as $webpackage)
                                            <!--Price Block-->
                                                <div class="price-block col-lg-4 col-md-12 col-sm-12">
                                                    <div class="inner-box wow fadeInUp" data-wow-delay="0ms"
                                                         data-wow-duration="1500ms">
                                                        <div class="title">{{$webpackage->name}}</div>
                                                        <div class="upper-box">
                                                            <div class="icon-box">
                                                                <span class="icon"><img
                                                                            src="{{asset('frontend/images/icons/icon-1.png')}}"
                                                                            alt=""/></span>
                                                            </div>
                                                            <div class="price">{{ get_local_currency_prefix() }} {{ get_local_currency($webpackage->price) }}
                                                                <sub>/yr</sub></div>
                                                        </div>
                                                        <div class="lower-box">
                                                            <ul>
                                                                <li>Disk Space: {{$webpackage->disk}} GB</li>
                                                                <li>Traffic: {{$webpackage->traffic}} GB</li>
                                                                {{--<li>Domain(s): {{$webpackage->domain}}</li>--}}
                                                            </ul>
                                                            <a href="#" class="theme-btn subscribe-btn"
                                                               data-toggle="modal"
                                                               data-target="#webModal{{$webpackage->id}}">ORDER NOW
                                                                <span class="arrow fa fa-angle-right"></span></a>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="webModal{{$webpackage->id}}" 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>{{$webpackage->name}} Package</h3>
                                                                {{-- {{dd($webpackage->name)}} --}}
                                                                <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="texti" style="padding-bottom: 10px;">
                                                                    Please enter a domain name before you purchase a
                                                                    hosting service. if you don't have a domain
                                                                    click <a href="{{route('home')}}" target="_blank">here</a>
                                                                    to purchase a domain first.
                                                                </div>

                                                                <div class="contact-form">
                                                                    <form method="POST" action="{{route('set.websession')}}" accept-charset="UTF-8" class="form" id="webHostForm" novalidate><input name="_token" type="hidden" value="{{ csrf_token() }}">
                                                                        <div class="form-group">
                                                                            <label for="domain-name">Domain Name*</label>
                                                                            <input class="form-control" id="domain" required placeholder="example.com" name="domain_name" type="text">
                                                                            <input name="web_name" type="hidden" value="{{$web_name->slug}}">
                                                                            <input name="web_package" type="hidden" value="{{$webpackage->slug}}">
                                                                        </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>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Pricing Section-->

    @push('scripts')
        <script>
            $(function () {
                $('form').each(function () {  // attach to all form elements on page
                    $(this).validate({       // initialize plugin on each form
// global options for plugin
                    })
                })
            });
        </script>
    @endpush
@endsection