@extends('layout')

@section('title', "$service->name Service")

@section('meta:title', 'AccessWorld: '.$service->name)
@section('meta:description', $service->short_description)

@section('content')

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

    <section>
        <div class="container">
            <div class="row" id="domain-app">
                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="animated fadeInUp text-center">
                        <h1 class="text-light">{{ ucwords($service->name) }}</h1>
                        <div class="section-title-line"></div>
                        <p class="text-lg">
                            {{ $service->short_description }}.
                        </p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="card">
                        <div class="card-body">
                            <article>
                                <p class="text-justify">{!! $service->description !!}</p>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="card">
                        <form class="form form-validate-domain form-lg" @submit.prevent="onSubmit" novalidate>
                            <div class="card-body">
                                <div class="form-group">
                                    <div class="input-group">
                                        <span class="input-group-addon">www.</span>
                                        <div class="input-group-content">
                                            <input type="text" class="form-control" id="domainToCheck" name="domain" :value="domain" v-model="domain" placeholder="Search for a domain" minlength="3" required autofocus>
                                            <label for="domainToCheck"></label>
                                        </div>
                                        <div class="input-group-btn">
                                            <button class="btn btn-lg ink-reaction btn-default btn-loading-state" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Searching..." type="submit">
                                                <i class="fa fa-search"></i>
                                                Search Domain
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="card" v-show="lookUp.domain">
                        <div class="card-body no-padding">
                            <div class="col-md-12">
                                <ul class="list divider-full-bleed">
                                    <li class="tile">
                                        <a class="tile-content">
                                            <div class="tile-text">
                                                <h3 class="text-xxl">@{{ lookUp.domain }}</h3>
                                                <h4 class="text-xl text-capitalize">Status: @{{ lookUp.status }}</h4>
                                            </div>
                                        </a>
                                        {{--<a class="btn btn-flat btn-default">--}}
                                            {{--<span class="text-xl" v-if="lookUp.price">--}}
                                                {{--{{ get_local_currency_prefix() }} @{{ lookUp.price }} per year--}}
                                            {{--</span>--}}
                                            {{--<span class="text-xl" v-else>--}}
                                                {{--Taken--}}
                                            {{--</span>--}}
                                        {{--</a>--}}
                                        {{--<span class="btn" v-if="lookUp.price">--}}
                                            {{--<form method="POST" action="{{ route('service.domain.order', $service->slug) }}">--}}
                                                {{--{{ csrf_field() }}--}}
                                                {{--<input type="hidden" name="domain" :value="domain">--}}
                                                {{--<button class="btn btn-raised btn-lg ink-reaction btn-success" type="submit">--}}
                                                    {{--<i class="fa fa-shopping-cart"></i>--}}
                                                    {{--add to cart--}}
                                                {{--</button>--}}
                                            {{--</form>--}}
                                        {{--</span>--}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                    <div class="alert alert-callout alert-info shadow-bottom-light" role="alert">
                        <div class="row">
                            <div class="col-xs-12 col-sm-9">
                                <h4>Didn’t find the specs you were looking for?</h4>
                                <strong>No problem! </strong> Send an inquiry
                            </div>
                            <div class="col-xs-12 text-center col-sm-3">
                                <a href="{{ route('inquiry').'?service='. $service->name }}" class="btn btn-default ink-reaction" style="margin-top: 0.6em;">
                                    <i class="fa fa-envelope-o"></i>
                                    Send Inquiry
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
        </div>
    </section>
@stop

@push('scripts')
<script type="text/javascript" src="{{ asset('js/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/libs/jquery-validation/dist/additional-methods.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/pages/domain_validation.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script>
    var domain = "{{ request()->input('domain') ?: old('domain') }}";
    var vm = new Vue({
        el: "#domain-app",
        data: {
            domain: domain,
            lookUp: {}
        },
        ready: function() {
            if(domain) this.onSubmit();
        },
        methods: {
            onSubmit: function () {
                var p = this;
                if (!$('.form-validate-domain').valid()) return false;
                var $btn = $(".btn-loading-state").button('loading');
                $.ajax({
                    type: "POST",
                    url: "{{ route('service.domain.checkAvailability', $service->slug) }}",
                    data: {domain: p.domain}
                }).success(function(data){
                    p.lookUp = data;
                    $btn.button('reset')
                }).error(function (xhr) {
                    $btn.button('reset');
                    alert(JSON.parse(xhr.responseText).error);
                });
            }
        },
        components: {
            'look-up': {
                template: '#look-up-template',
                data: function () {
                    return {}
                },
                props: ['lookUp']
            }
        }
    });
</script>
@endpush