@extends('layouts.admin')
@section('title',__('Dashboard'))
@section('content')
<div class="">
    {{-- <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-box2 icon-gradient bg-plum-plate">
                    </i>
                </div>
                <div>
                    {{ __('Dashboard') }}
                </div>
            </div>
            <div class="page-title-actions">
                <button type="button" data-toggle="tooltip" title="Admin Panel" data-placement="bottom"
                    class="btn-shadow mr-3 btn btn-dark">
                    <i class="fa fa-star"></i>
                </button>

            </div>
        </div>
    </div> --}}


    {{-- show $popupsNewsFeed --}}
    {{-- a closable popup modal containing images as sliders. click on image redirect to it's url --}}

    {{-- start of modals --}}
    @include('widgets.modal_widgets')
    {{-- end of modals --}}

    {{-- show $popupsNewsFeed --}}



    {{-- start of wallets --}}
    @include('widgets.wallet_widgets')
    {{-- end of wallets --}}


    {{-- start of tab layout --}}
    <div class="card">
        <div class="card-header">
            <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
                <li class="nav-item">
                    <a role="tab" class="nav-link active" id="tab-0" data-toggle="tab" href="#tab-content">
                        <span><i class="fas fa-mobile-alt fa-2x" style="color: orange;"></i> {{ __('Mobile Recharge')
                            }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-1" data-toggle="tab" href="#tab-content-1">
                        <span><i class="fas fa-credit-card fa-2x" style="color: blue;"></i> {{ __('Viva Wallet
                            Recharge') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-3" data-toggle="tab" href="#tab-content-3">
                        <span><i class="fas fa-sim-card fa-2x" style="color: purple;"></i> {{ __('Viva eSim')
                            }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-2" data-toggle="tab" href="#tab-content-2">
                        <span><i class="fas fa-gift fa-2x" style="color: green;"></i>
                            {{ __('Gifts & Vouchers') }}</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-3" data-toggle="tab" href="#tab-content-4">
                        <span><i class="fas fa-wallet fa-2x" style="color: black;"></i> {{ __('Mobile Money') }}</span>
                    </a>
                </li>
            </ul>

        </div>
        <div class="card-body">
            <div class="tab-content">

                @include('user.services.tabpages.mobile_recharge_service_card')
                @include('user.services.tabpages.vivape_recharge_service_card')
                @include('user.services.tabpages.sim_active_service_card')
                @include('user.services.tabpages.digital_recharge_service_card')
                @include('user.services.tabpages.money_transfer_service_card')

            </div>
        </div>



        {{-- @include('widgets.dashboard_counter_widget') --}}


    {{-- start of dashboard message --}}
    @include('widgets.dashboard_message_card')
    {{-- end of dashboard message --}}




    </div>
    {{-- end of tab layout --}}

    {{-- start of dashboard message --}}
    {{-- @include('widgets.dashboard_message_card') --}}
    {{-- end of dashboard message --}}
        {{-- start of wallets --}}
        {{-- @include('widgets.wallet_widgets') --}}
        {{-- end of wallets --}}
    <br>

    {{-- start of newsfeed --}}
    @include('widgets.newsfeed_grid_widget')
    {{-- end of newsfeed --}}

    {{-- <div class="row">
        <div class="col-md-12">
            @include('user.plots.chart_widget')
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-6">
            @include('user.plots.top_products_pie_chart')
        </div>
        <div class="col-md-6">
            @include('user.plots.top_operators_bar_chart')
        </div>
    </div> --}}



</div>
@endsection