@extends('frontend.layouts.contentLayoutMaster')

@section('title', '折價券')
@section('active', 'vouchers')

@section('vendor-styles')
@endsection

@section('page-styles')
<style>

</style>
@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height ">
        <div class="col-md-10 col-12">
            @if ($vouchers->isNotEmpty())
                @foreach ($vouchers as $voucher)
                    <div class="voucher mt-1" data-clickthrough="link">
                        <a href="{{ Route('frontend.vouchers.show', $voucher->code)}}">
                            <div class="voucher_label">
                                <div class="bd-border_solid"></div>
                                <div class="bd-border_dotted"></div>
                            </div>
                            <div class="voucher_content">
                                <p class="secondary">{{ $voucher->code }}</p>
                                <h4>{{ $voucher->metadata['name'] ?? '' }}</h4>
                                <ul>
                                    <span>　</span>
                                    <li>
                                        {{ $voucher->metadata['caption'] ?? '' }}
                                    </li>    
                                </ul>

                                @if (!empty($voucher->expires_at))
                                    <span class="expires_at">
                                        至 {{ $voucher->expires_at->format('Y.m.d') }}
                                    </span>    
                                @endif
                                
                                <span class="amount">
                                    $ {{ number_format($voucher->amount) }}
                                </span>
                                
                            </div>
                        </a>
                    </div>
                @endforeach
            @else
                <div class="card">
                    <div class="card-body text-center">
                    <img src="{{ asset('images/icon/voucher.png') }}" class="logo w-25 pb-50 mb-50" alt="">
                        <h4>您目前沒有折價券</h4>
                        <div class="font-small-3">取得折價券後，即可在此查看折價券資訊</div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')

@endsection

@section('page-scripts') 

@endsection