@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-->

    <!--Pricing Section-->
    <section class="pricing-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>{{$service->name}} Plans</h2>
                <div class="text"> Secure email service for all your staff. Unlimited mailboxes, flexible storage, encrypted transmission and great support. </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">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-monthly">
                                    <div class="content">
                                        <div class="row clearfix">
                                        @foreach($email_packages as $email_package)
                                        <!--Price Block-->
                                            <div class="price-block col-lg-3 col-md-6 col-sm-12">
                                                <div class="inner-box wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                                                    <div class="title">{{$email_package->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($email_package->price) }}<sub>/mo</sub></div>
                                                    </div>
                                                    <div class="lower-box">
                                                        <ul>
                                                            <li>Disk Space: {{$email_package->disk}} GB</li>
                                                            <li>No. of Mailbox: {{$email_package->traffic}}</li>
                                                            {{--<li>Domain(s): {{$email_package->domain}}</li>--}}
                                                        </ul>
                                                        <a href="#" class="theme-btn subscribe-btn" data-toggle="modal" data-target="#emailModal{{$email_package->id}}" data-service="{{$service->name.'-'.$email_package->name}}">ORDER NOW<span class="arrow fa fa-angle-right"></span></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="emailModal{{$email_package->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>{{$email_package->name}} 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 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::open(['class'=> 'form','id'=>"webHostForm",'route'=>'set.emailsession','method'=>'post','novalidate'])}}
                                                                <div class="form-group">
                                                                    <label for="domain-name">Domain Name*</label>
                                                                    {{ Form::text('domain_name', old('name'), ['class' => 'form-control','id'=>'domain','required', 'placeholder' =>'example.com']) }}

                                                                    {{ Form::hidden('email_name',$email_name->slug)}}

                                                                    {{ Form::hidden('email_package',$email_package->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::close()}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                        </div>
                                    </div>
                                </div>
                                <!--Tab-->
                                {{--<div class="tab" id="prod-yearly">--}}
                                    {{--<div class="content">--}}
                                        {{--<div class="row clearfix">--}}

                                            {{--here--}}

                                        {{--</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