@extends('front.layout.master')
@push('css')
    <style>
.wallet-container {
	/* background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjOvSperRYjHH9-EHlKZJBfwvXy4rJpyerzHQsnp8DuuycYU5_); */
		width: 100%;
        background: #FBC201;
		color: #fff;
		font-size: 15px;
		padding: 20px 20px 0;
		/* top: 55%;
		left: 50%;
		transform: translate(-50%,-50%);
		position: absolute; */


}

.page-title {
	text-align: left;
}

.fa-user {
	float: right;
}

.fa-align-left {
	margin-right: 15px;
}

.amount-box img {
	width: 50px;
}

.amount {
	font-size: 35px;
}

.amount-box p {
	margin-top: 10px;
	margin-bottom: -10px;
}

.btn-group {
	margin: 20px 0;
}

.btn-group .btn {
	margin: 8px;
	border-radius: 20px !important;
	font-size: 12px;
}

.txn-history {
	text-align: left;
}

.txn-list {
	background-color: #fff;
	padding: 12px 10px;
	color: #777;
	font-size: 14px;
	margin: 7px 0;
}

.debit-amount {
	color: red;
	float: right;
}

.credit-amount {
	color: green;
	float: right;

}

.footer-menu {
	margin: 20px -20px 0;
	bottom: 0;
	border-top: 1px solid #ccc;
	padding: 10px 10px 0;
}

.footer-menu p {
	font-size: 12px;
}
/*
@media screen and (max-width: 800px){
  .wallet-container {
    height: 115%;
    bottom: 20px;
    /* margin-top: 100px; */
  }

} */
        </style>
@endpush
@section('content')

    <div class="breadcrumb-area gray-bg">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li><a href="{{route('main')}}">@lang('front.wallet')</a></li>
                    <li class="active"> @lang('front.wallet')</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="empty-cart pb-50">
        <div class="container">
            <div class="row">

                <div class="col-md-6 col-xs-12 text-empty">
                    {{-- <h4>@lang('front.account')</h4> --}}
                	<div class="wallet-container text-center">
                        <p class="page-title"><i class="fa fa-align-left"></i>@lang('front.wallet')<i class="fa fa-user"></i></p>

                        <div class="amount-box text-center">
                            <img src="https://lh3.googleusercontent.com/ohLHGNvMvQjOcmRpL4rjS3YQlcpO0D_80jJpJ-QA7-fQln9p3n7BAnqu3mxQ6kI4Sw" alt="wallet">
                            <p style="color: white">@lang('front.total')</p>
                            <p class="amount" style="color: white"> {{ $walletaccount ? number_format($walletaccount->price,3) : number_format(0,3) }} @lang('front.KD')</p>
                        </div>

                        <div class="btn-group text-center">
                            <button type="button" class="btn btn-outline-light">Add Money</button>
                            {{-- <button type="button" class="btn btn-outline-light">Widthdraw</button> --}}
                            </div>

                            <div class="txn-history">
                                <p style="    text-align: center;
                                color: black;
                            "><b>@lang('front.process')</b></p>
                                    <div style="height:200px;overflow-y:scroll;">

                                        @if($wallet->count() > 0)
                                        @foreach($wallet as $key => $value)
                                        <p class="txn-list">{{ trans('front.'.$value->type)   .' ' . \Carbon\Carbon::parse($value->created_at)->diffForHumans()
                                        }}<span class="{{  $value->type == "increase" ? "credit-amount": "debit-amount" }}">{{  $value->type == "increase" ? "+": "-" }}{{ number_format($value->price , 3) }} @lang('admin.KD')</span></p>

                                        @endforeach
                                    @else

                                <p class="txn-list" style="    text-align: center;
                                font-size: larger;
                                font-style: oblique;">@lang('front.sorry')</p>

                                    @endif

                                    </div>



                                {{-- <p class="txn-list">Payment t abc shop<span class="debit-amount">-$150</span></p>

                                <p class="txn-list">Credit From abc ltd<span class="credit-amount">+$300</span></p>

                                <p class="txn-list">Transfer From John Doe<span class="credit-amount">+$100</span></p> --}}
                            </div>

                            <div class="footer-menu">
                                <div class="row text-center">

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



            </div>
            <div class="col-md-6 col-xs-12 text-empty">
                <img src="{{asset('wallet.png')}}" class="w-60 imgEmptyCart">
            </div>

        </div>
    </div>



@endsection