@extends('layouts.user')
@section('title',__('Services'))
@section('content')
<div class="app-main__inner">
    <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>
                    {{ __('Services') }}
                </div>
            </div>
            <div class="page-title-actions">
                 <button type="button" data-toggle="tooltip" title="Level 2 User" data-placement="bottom"
                    class="btn-shadow mr-3 btn btn-warning text-white">
                    <i class="fa fa-star"></i><i class="fa fa-star"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="">


        {{-- 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"></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"></i> {{ __('Viva Wallet Recharge') }}</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"></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-3">
                            <span><i class="fas fa-sim-card fa-2x"></i> {{ __('Sim Activation') }}</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.digital_recharge_service_card')
                    @include('user.services.tabpages.sim_active_service_card')


                </div>
            </div>
        </div>

        {{-- end of tab layout --}}





    </div>
</div>
@endsection