@extends('admin.layouts.contentLayoutMaster')

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

@section('vendor-styles')

@endsection

@section('page-styles')

@endsection

@section('content')
{{-- search bar --}}
<section>
    <form action="">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">搜尋</h4>
                        <a class="heading-elements-toggle"><i class="bx bx-dots-vertical font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li>
                                    <a data-action="collapse"><i class="bx bx-chevron-down"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <fieldset class="form-group">
                                        <label for="mobile">會員電話</label>
                                        <input class="form-control" id="mobile" name="mobile" placeholder="電話" type="text" value="{{  app('request')->input('mobile') }}">
                                    </fieldset>
                                </div>

                                <div class="col-md-6">
                                    <fieldset class="form-group">
                                        <label for="name">會員姓名</label>
                                        <input class="form-control" id="name" name="name" placeholder="姓名" type="text" value="{{  app('request')->input('name') }}">
                                    </fieldset>
                                </div>
                                <div class="col-md-6">
                                    <fieldset class="form-group">
                                        <label for="voucher_code">折價券</label>
                                        <input class="form-control" id="voucher_code" name="voucher_code" placeholder="編碼" type="text" value="{{  app('request')->input('voucher_code') }}">
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-footer">
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-primary glow mr-1 mb-1" type="submit">搜尋</button>
                                <button class="btn btn-light glow mr-1 mb-1" type="reset" data-force="1">清空</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>

<section id="app">
    <div class="row" id="table-hover-row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">列表</h4>
                </div>
                <div class="d-flex justify-content-end">
                    @can('會員管理-折價券列表-編輯')
                        <a href="{{ Route('admin.vouchers.create') . '?keyword=' . app('request')->input('keyword') }}">
                            <button type="button" class="btn btn-primary glow mr-1 mb-1 ">新增</button>
                        </a>
                    @endcan
                </div>
                <div class="card-content">

                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center">券名/編碼</th>
                                    <th class="text-left">姓名</th>
                                    <th class="text-center">手機</th>
                                    <th class="text-center">派券時間</th>
                                    <th class="text-center">有效日期</th>
                                    <th class="text-center">使用狀態</th>
                                    <th class="text-center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($vouchers->isNotEmpty())
                                    @foreach ($vouchers as $voucher)
                                        <tr>
                                            <td class="text-center">
                                                {!! $voucher->metadata['name'] !!} / {{ $voucher->code }}
                                            </td>
                                            <td class="text-left">
                                                {{ optional(optional($voucher->owner)->user)->name }}
                                            </td>

                                            <td class="text-center">
                                                {{ optional(optional($voucher->owner)->user)->mobile }}
                                            </td>
                                            <td class="text-center">
                                                {{ $voucher->created_at->format('Y-m-d H:i') }}
                                            </td>
                                            <td class="text-center">
                                                {{ $voucher->expires_at->format('Y-m-d H:i') }}
                                            </td>
                                            <td class="text-center">
                                                @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
                                            </td>
                                            <td class="text-center">
                                                <form class="delete-form" action="{{ Route('admin.vouchers.destroy', $voucher->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')

                                                    <a href="{{ Route('admin.vouchers.show', $voucher->id) }}">
                                                        <i class="badge-circle badge-circle-light-secondary bx bx-detail font-medium-1"></i>
                                                    </a>

                                                    @if ($voucher->isRedeemable() == true)
                                                        @can('會員管理-折價券列表-刪除')
                                                            <a href="javascript:;" class="redeem-button">
                                                                <i class="badge-circle badge-circle-light-secondary bx bx-trash font-medium-1"></i>
                                                            </a>
                                                        @endcan
                                                    @endif
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    @include('admin.panels.list-no-data')
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card-footer">
                    {{ $vouchers->withQueryString()->links('admin.panels.pagination') }}
                </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