@extends('templates.'. $template_name .'.layouts.default')

@section('title', trans('message.my_card'))

@section('content')

<!-- crumb-area-start -->
<div class="crumb-area">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="crumb">
                    <ul class="crumb-list">
                        <li><a href="{!! url('/')!!}">{{trans('message.home')}}</a></li>
                        <li class="active"><a href="#">{{trans('message.my_card')}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- crumb-area-end -->

<!-- wishlist-table-area-start -->
<!--
<div class="wishlist-table-area">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="wishlist-table-head">
                    <h4>{{trans('message.my_card')}}</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="shopping-cart-table table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th class="wishlist-img-title">{{trans('message.card_photo')}}</th>
                                <th class="wishlist-pro-name">{{trans('message.card_title')}}</th>
                                <th class="wishlist-pro-name">{{trans('message.balance')}}</th>
                                <th class="wishlist-pro-price">{{trans('message.member_since')}}</th>
                                <th class="wishlist-pro-availabillity">{{trans('message.valid_until')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($my_card as $k => $v)
                                <tr>
                                    <td class="cart_product_image_value">
                                        <div class="wishlist_img">
                                            <img src="{{$v['thumb']}}" width="100" />
                                        </div>
                                    </td>
                                    <td>
                                        <span>{{$v['card_title']}}</span>
                                    </td>
                                    <td>
                                        <span>{{$v['card_balance']}}</span>
                                    </td>
                                    <td>
                                        <span>{{$v['member_since']}}</span>
                                    </td>
                                    <td>
                                        <span>{{$v['valid_until']}}</span>
                                    </td>
                                </tr>
                            @endforeach
                                
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
 -->
<!-- wishlist-table-area-end -->

<!-- blog-area-start -->
<div class="blog-area">
    <div class="container">
        <div class="row mar-bot-30">
            <div class="col-xs-12">
                <div class="wishlist-table-head">
                    <h4>{{trans('message.my_card')}}</h4>
                </div>
            </div>
        </div>
        @if(count($my_card))
            @foreach($my_card as $k => $v)
                                <div class="row card-container">
                    <div class="col-md-2 col-sm-12 col-xs-12">
                        <img src="{{$v['thumb']}}" >
                    </div>
                    <div class="col-md-10 col-sm-12 col-xs-12 card-details">
                        <ul>
                            <li>
                                <span class="card-details-items">{{trans('message.validity_period')}}:</span>
                                {{$v['member_since'] . " ~ " . $v['valid_until'] }}
                            </li>
                            <li>
                                <span class="card-details-items">{{trans('message.card_number')}}:</span>
                                {{$v['mcard_number_format']}}
                            </li>
                            <li>
                                <span class="card-details-items">{{trans('message.card_title')}}:</span>
                                {{$v['card_title']}}
                            </li>
                            <li>
                                <span class="card-details-items">{{trans('message.card_status')}}:</span>
                                <span class="{{$str_status}}">{{$v['card_status']}}</span>
                            </li>
                            <li>
                                <span class="card-details-items">{{trans('message.balance')}}:</span>
                                {{$v['card_balance']}}
                            </li>
                        </ul>
                    </div>
                </div>
            @endforeach
        @else
            <center>
                <p class="no-card">{{trans('message.you_have_no_card')}}</p>
            </center>
        @endif
    </div>
</div>
<!-- blog-area-end -->

<style type="text/css">
.no-card { font-size: 18px; }
.blog-area { padding: 50px 0 20px; }
.card-container { background-color: #eee; margin-bottom: 40px; padding: 10px; }
.card-valid-status { color: #4CAF50; font-weight: bold; }
.card-details ul { list-style-type: none; }
.card-details ul li { border: none; padding: 1px 0 0 0; line-height: 2; }
.card-details { color: #333; }
.card-details-items { color: #999; display: inline-block; width: 135px; text-align: right; margin-right: 5px; }
</style>

@endsection