@extends('admin.layouts.contentLayoutMaster')

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

@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/country-select-js/css/countrySelect.min.css') }}">
@endsection

@section('page-styles')

@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-10 col-12">

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title"></h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="form-body">
                            <div class="row">

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>編碼</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $voucher->code }}
                                </div>
                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>姓名</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $voucher->owner->user->name }}
                                </div>
                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>電話</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $voucher->owner->user->mobile }}
                                </div>

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>面額</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    $ {{ number_format($voucher->amount) }}
                                </div>

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>低消</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    $ {{ number_format($voucher->metadata['minimum_amount'] ?? 0) }}
                                </div>

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>派券時間</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $voucher->created_at }}
                                </div>

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>有效日</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $voucher->expires_at }}
                                </div>

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>介紹</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {{ $voucher->metadata['caption'] ?? '' }}
                                </div>

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>描述</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    {!!  $voucher->metadata['description'] ?? ''  !!}
                                </div>

                                <div class="col-md-2 offset-md-2 col-lg-1 offset-lg-3">
                                    <label>使用狀態</label>
                                </div>
                                <div class="col-md-6 form-group">
                                    @if ($voucher->isRedeemable() == true)
                                        <span class="badge badge-light-success">可使用</span>
                                    @elseif ($voucher->isRedeemed() == true)
                                        <span class="badge badge-light-secondary">已使用，於 {{ $voucher->redeemed_at }}</span>
                                    @elseif ($voucher->isStarted() != true)
                                        <span class="badge badge-light-secondary">未啟用</span>
                                    @elseif ($voucher->isExpired() == true)
                                        <span class="badge badge-light-secondary">已過期</span>
                                    @else
                                        <span class="badge badge-light-secondary">無效</span>
                                    @endif
                                </div>

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

                    <div class="card-footer">
                        <div class="row">
                            <div class="col-lg-8 ml-lg-auto offset-md-4">

                                <form class="delete-form" action="{{ Route('admin.vouchers.destroy', $voucher->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')

                                    <a href="{{ Route('admin.vouchers.index') }}">
                                        <button type="button" class="btn btn-light glow mr-1 mb-1" >返回</button>
                                    </a>

                                    @if ($voucher->isRedeemable() == true)
                                        @can('會員管理-折價券列表-刪除')
                                            <a href="javascript:;" class="redeem-button">
                                                <button type="button" class="btn btn-danger glow mr-1 mb-1" >註銷</button>
                                            </a>
                                        @endcan
                                    @endif
                                </form>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')

@endsection

@section('page-scripts')
<script>
    // 列表記錄刪除
    $('.redeem-button').on('click', function() {
        let form = $(this).closest('.delete-form');

        Swal.fire({
            title: '確定要註銷嗎？',
            type: 'question',
            showCloseButton: true,
            showCancelButton: true,
            confirmButtonText: 'YES',
            cancelButtonText: 'NO',
            confirmButtonClass: 'btn btn-primary',
            cancelButtonClass: 'btn btn-light',
        }).then(function(response) {
            if (response.value === true) {
                form.trigger('submit');
            }
        });
    });

</script>
@endsection