@extends('frontend.layouts.contentLayoutMaster')

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

@section('vendor-styles')
@endsection

@section('page-styles')
<style>
.back {
    display: block;
    padding: 0.567rem 1.33rem;
    background: white;
    border-radius: 5px;
    text-align: center;
}

.codes {
    display: block;
    background: white;

}

.qrcode > div:first-child {
    margin: 0 auto;
}
</style>
@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height ">
        <div class="col-md-10 col-12">
            <a class="back" href="{{ Route('frontend.vouchers.index') }}">
                <div class="fonticon-wrap">
                    <i class="bx bx-arrow-back"></i>
                </div>
                <label class="fonticon-classname">返回</label>
            </a>
        </div>
        <div class="col-md-10 col-12">

            <div class="voucher mt-1" data-clickthrough="link">
                <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>
            </div>
        </div>

        <div class="col-md-10 col-12 mt-1">
            <div class="codes">
                <div class="text-center" style="flex:1 1 auto;padding: 1.2rem">
                    <div class="form-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-xl-5 col-12">
                                {!! $barcode !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center" style="flex:1 1 auto;padding: 1.2rem 2rem;">
                    <div class="form-body">
                        <div class="row d-flex justify-content-center">
                            <div class="col-xl-5 col-12 qrcode">
                                {!! $qrcode !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-1 pb-1 pl-1 pr-1">
                    {!! $voucher->metadata['description'] ?? '' !!}
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')

@endsection

@section('page-scripts') 

@endsection