@extends('layout')

@section('title','Dashboard')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/customer-panel.css') }}">
@endpush

@section('content')
    <section id="customer-panel-app" class="no-banner">
        <div class="container">
            <div class="section-body">
                @include('commons.alerts')
                <div class="card tabs-left style-default" v-cloak>
                    <ul class="card-head nav nav-tabs text-center">
                        <li :class="{'active':current_tab == tab}" v-for="tab in tabs">
                            <a :href="'#' + tab.slug" @click="current_tab = tab">
                            <i :class="tab.icon"></i>
                            <br>
                            <h4 class="hidden-xs hidden-sm">@{{ tab.name }}<br>
                            </h4></a>
                        </li>
                    </ul>

                    <div class="card-body tab-content style-default-bright no-padding">
                        <div class="card tabs-left sub-card">
                            <ul v-if="current_tab.sub_tabs"
                                class="card-head nav nav-tabs text-center style-default-light" data-toggle="tabs">
                                <li v-for="sub_tab in current_tab.sub_tabs"
                                    :class="{ 'active' : current_sub_tab == sub_tab }">
                                    <a data-toggle="tab" @click="current_sub_tab = sub_tab">
                                    <span class="hidden-xs">@{{ sub_tab.name }}</span>
                                    <span
                                        class="visible-xs"></span>
                                    </a>
                                </li>
                            </ul>
                            <div class="card-body tab-content style-default-bright">
                                <tab-content :tab="current_tab" :subtab="current_sub_tab"></tab-content>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <template id="tab-content-template">
            <div v-if="tab.slug == 'services'">
                <div v-if="subtab.slug == 'vps'">
                    @include('customer.services.vps')
                </div>
                <div v-if="subtab.slug == 'website'">
                    @include('customer.services.web')
                </div>
                <div v-if="subtab.slug == 'domain'">
                    @include('customer.services.domain')
                </div>
                <div v-if="subtab.slug == 'email'">
                    @include('customer.services.email')
                </div>
                <div v-if="subtab.slug == 'ssl-certificate'">
                    @include('customer.services.sslcertificate')
                </div>
            </div>
            <div v-if="tab.slug == 'orderinprogress'">
                <div v-if="subtab.slug == 'vps'">
                    @include('customer.orderinprogress.vps')
                </div>
                <div v-if="subtab.slug == 'email'">
                    @include('customer.orderinprogress.email')
                </div>
                <div v-if="subtab.slug == 'website'">
                    @include('customer.orderinprogress.website')
                </div>
            </div>
            <div v-if="tab.slug == 'serviceorders'">
                @include('customer.serviceorders')
            </div>
            <div v-if="tab.slug == 'myrefers' && subtab">
                <div v-if="subtab.slug == 'make-referral'">
                    @include('customer.myrefers.index')
                </div>
                <div v-if="subtab.slug == 'my-referrals'">
                    @include('customer.myrefers.referredlist')
                </div>
                <div v-if="subtab.slug == 'redeem'">
                    @include('customer.myrefers.redeem')
                </div>
            </div>
            <div v-if="tab.slug == 'myaccount'">
                @include('customer.myaccount')
            </div>
        </template>
        <template id="loader-template">
            <div class="cssload-preloader cssload-loading">
                <span class="cssload-slice"></span>
                <span class="cssload-slice"></span>
                <span class="cssload-slice"></span>
                <span class="cssload-slice"></span>
                <span class="cssload-slice"></span>
                <span class="cssload-slice"></span>
            </div>
        </template>
        <template id="image-input-template">
            <div class="text-center">
                <label>
                    <div class="preview-wrapper">
                        <i v-show="! imageSrc" class="icon fa fa-picture-o"></i>
                        <img v-show="imageSrc" class="preview img-responsive img-avatar" :src="imageSrc">
                    </div>

                    <div class="preview-selector">
                        Click to change
                        <input @change="previewThumbnail" name="image" type="file" class="hidden">
                    </div>
                </label>
            </div>
        </template>
    </section>

@stop

@push('scripts')
<script>
    var referral_threshold = {{ setting('referral_threshold') }},
        customer_api_vps = '{{ route('customer.api.vps') }}',
        customer_api_vps_status = '{{ route('customer.api.vps.status') }}',
        customer_api_web = '{{ route('customer.api.web') }}',
        customer_api_email = '{{ route('customer.api.email') }}',
        customer_api_domain = '{{ route('customer.api.domain') }}',
        customer_api_ssl = '{{ route('customer.api.ssl') }}',
        customer_api_vps_progress = '{{ route('customer.api.vps.progress') }}',
        customer_api_email_progress = '{{ route('customer.api.email.progress') }}',
        customer_api_web_progress = '{{ route('customer.api.web.progress') }}',
        customer_api_service_order = '{{ route('customer.api.service.order') }}',
        customer_api_referral = '{{ route('customer.referral.api') }}',
        customer_api_account = '{{ route('customer.api.account') }}';
</script>
<script src="{{ asset('js/pages/customer_panel.min.js') }}"></script>
@endpush