@extends('layouts.dashboard')

@section('title', 'Columbus 17 | Dashboard')

@section('content')
<div class="p-10 w-10/12 m-auto">
    <!--<span class="loading"></span>-->
    <!--<img src={{asset('storage/symbol_loading.gif') }} alt="Computer man" style="width:200px;height:200px;">
    <img src={{asset('storage/logo_loading.gif') }} alt="Computer man" style="width:200px;height:200px;">
    <img src={{asset('storage/text_loading.gif') }} alt="Computer man" style="width:200px;height:200px;">-->
    <div class="flex flex-col space-y-4 text-blue-900">
        <div class="flex flex-col space-y-1">
            <p class="text-3xl font-semibold">Manage your Billing</p>
            <p class="text-sm">Settings and options for your billing</p>
        </div>
        <div class="flex flex-row justify-between text-xs rounded-md bg-white p-4">
            <div class="flex flex-col space-y-1.5 w-1/2">
                <p v-if="this.user_role == 'user'">Your application is currently on the Free plan</p>
                <p v-if="this.user_role == 'user_subscribed_basic'">Your application is currently on the Basic plan</p>
                <p v-if="this.user_role == 'user_subscribed_essential'">Your application is currently on the Essential plan</p>
                <p v-if="this.user_role == 'user_subscribed_growth'">Your application is currently on the Growth plan</p>
                <p>Upgraded plans provide increased access to Columbus 17 tools, offering higher usage limits and enhanced capabilities.</p>
            </div>
            <div class="w-1/2 text-right">
                <el-button>Chat to Us</el-button>
                <!--<el-button type="primary">View Plan</el-button>-->
            </div>
        </div>
        <span class="loading absolute top-1/2 left-1/2" v-if="!loaded"></span>
        <billing :user_role="this.user_role"></billing>
        <invoice :user_role="this.user_role"></invoice>
        <payment-method :user_role="this.user_role"></payment-method>
    </div>
</div>
@endsection