@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">
                <div class="col-xs-12">
                    <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>
            <div class="row">
                <div class="col-sm-8 col-xs-12">
                    <div class="card">
                        <div class="card-body">
                            {!! $service->description !!}
                        </div>
                    </div>
                    <div class="card" id="ssl-app">
                        {{ Form::open(['route' => 'inquiry','method' => 'GET']) }}
                        <div class="card-head">
                            <header>Choose SSL Certificate Type</header>
                            <div class="tools">
                                <input type="hidden" name="subject" :value="products[product]">
                                <input type="hidden" name="service" value="{{ $service->name }}">
                                <button type="submit" class="btn btn-primary btn-raised margin-top-0-5 ink-reaction">
                                    <i class="fa fa-envelope-o"></i>
                                    Send Inquiry
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <select class="form-control" id="providerList" v-model="provider">
                                                <option v-for="(id,name) in providers" :value="id">
                                                    @{{ name }}
                                                </option>
                                            </select>
                                            <label for="providerList">Select a supplier</label>
                                        </div>
                                    </div>
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <select class="form-control" id="productTypeList" v-model="product" :disabled="products.length">
                                                <option v-for="(id,name) in products" :value="id">
                                                    @{{ name }}
                                                </option>
                                            </select>
                                            <label for="productTypeList">Select a service</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <table class="table table-banded">
                                            <tbody>
                                            <tr v-for="(label,spec) in specifications">
                                                <td>@{{ label }}</td>
                                                <td>@{{ spec }}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-actionbar">
                            <div class="card-actionbar-row">
                                <button type="submit" class="btn btn-primary btn-raised ink-reaction">
                                    <i class="fa fa-envelope-o"></i>
                                    Send Inquiry
                                </button>
                            </div>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
                <div class="col-sm-4 col-xs-12">
                    <div class="row">
                        @foreach(ssl_providers() as $provider)
                            <div class="col-sm-6 col-xs-6">
                                <img src="{{ asset('img/logos/'.$provider->slug.'_logo.png') }}" class="img-responsive" style="margin-left:60px;width: 150px;">
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@push('scripts')
<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script>

var vm = new Vue({
        el: "#ssl-app",
        data: {
            provider: {},
            product: {},
            providers: {},
            products: {},
            specifications: {}
        },
        ready: function () {
            this.getProviders();
        },
        watch: {
            provider: 'getProducts',
            product: 'getSpecifications'
        },
        methods: {
            getProviders: function () {
                var p = this;
                $.ajax({
                    type: "get",
                    url: "{{ route('api.ssl.providers') }}",
                    success: function (data) {
                        p.providers = data;
                        p.provider = p.first(data);
                    }
                });
            },
            getProducts: function () {
                var p = this;
                p.products = [];
                materialadmin.AppCard.addCardLoader($("#ssl-app"));
                $.ajax({
                    type: "get",
                    url: "{{ route('api.ssl.products') }}",
                    data: {provider_id: p.provider},
                    success: function (data) {
                        p.products = data;
                        p.product = p.first(data);
                        materialadmin.AppCard.removeCardLoader($("#ssl-app"));
                    }
                });
            },
            getSpecifications: function () {
                var p = this;

                if (!p.product.length) return;

                p.specifications = [];
                $.ajax({
                    type: "get",
                    url: "{{ route('api.ssl.product.detail') }}",
                    data: {product: p.product},
                    success: function (data) {
                        p.specifications = data;
                    }
                })
            },
            first: function (obj) {
                for (var a in obj) {
                    return a;
                }
            }
        }
    });
</script>
@endpush