@extends('admin.layouts.contentLayoutMaster')

@section('title','手動派發折價券')

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

@section('page-styles')

@endsection

@section('content')
    <section id="create_app">
        <div class="row match-height justify-content-center">
            <div class="col-md-10 col-12">
                <form class="form form-horizontal" action="{{ Route('admin.vouchers.store') }}" method="POST">
                    @csrf
                    <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-1 offset-md-3">
                                            <label>會員電話</label>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <input class="form-control" id="mobile" name="mobile" placeholder="會員電話" type="text" maxlength="10" value="{{ old('mobile', app('request')->keyword) }}">
                                            @if ($errors->has('mobile'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('mobile') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1 offset-md-3">
                                            <label>折價券分類</label>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <select class="form-control" id="voucher_event" name="voucher_event_code" v-model="voucherEvent" @change="settingColumns()">
                                                <option> </option>
                                                @foreach($voucherEvents ?? '' as $voucherEvent)
                                                <option value="{{ $voucherEvent->code }}">{{ $voucherEvent->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-1 offset-md-3" v-show="isShowName">
                                            <label>名稱</label>
                                        </div>
                                        <div class="col-md-6 form-group" v-show="isShowName">
                                            <input class="form-control" id="name" name="name" placeholder="名稱" type="text" value="{{ old('name') }}">
                                            @if ($errors->has('name'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('name') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1 offset-md-3" v-show="isShowExpires">
                                            <label>有效日</label>
                                        </div>
                                        <div class="col-md-6 form-group" v-show="isShowExpires">
                                            <input class="form-control flatpickr1" id="flatpickr666" name="expires" placeholder="有效日" type="text" value="{{ old('expires') }}">
                                            @if ($errors->has('expires'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('expires') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1 offset-md-3" v-show="isShowMinimumAmount">
                                            <label>低消</label>
                                        </div>
                                        <div class="col-md-6 form-group" v-show="isShowMinimumAmount">
                                            <input class="form-control" id="minimum_amount" name="minimum_amount" placeholder="低消" type="text" value="{{ old('minimum_amount') }}">
                                            @if ($errors->has('minimum_amount'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('minimum_amount') ])
                                            @endif
                                        </div>

                                        <div class="col-md-1 offset-md-3" v-show="isShowAmount">
                                            <label>面額</label>
                                        </div>
                                        <div class="col-md-6 form-group" v-show="isShowAmount">
                                            <input class="form-control" id="amount" name="amount" placeholder="額度" type="text" value="{{ old('amount') }}">
                                            @if ($errors->has('amount'))
                                                @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('amount') ])
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="card-footer">
                                    <div class="row">
                                        <div class="col-lg-8 ml-lg-auto">
                                            <button class="btn btn-primary mr-1 mb-1" type="submit">Submit</button>
                                            <button class="btn btn-light glow mr-1 mb-1" type="reset" data-force="1">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@section('vendor-scripts')
    <script src="{{ asset('plugins/vue/vue.js') }}"></script>
@endsection

@section('page-scripts')
    <script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
    <script>
        let app = new Vue({
            el: '#create_app',
            data: {
                // ---------------
                // 是否顯示填寫欄位
                // ---------------
                isShowName: true, // 名稱
                isShowExpires: true, // 有效日
                isShowAmount: true, // 額度
                isShowMinimumAmount: true, //低消

                // 分類預設補發券
                voucherEvent: "JUNE1-REI",
                voucherEvents: {!! $voucherColumns ?? '' !!},
            },
            mounted() {
                flatpickr(".flatpickr1", {
                    enableTime: true,
                    dateFormat: "Y-m-d H:i",
                });
            },
            methods: {
                settingColumns() {
                    // 全部設定為false
                    this.isShowName = false
                    this.isShowExpires = false
                    this.isShowAmount = false
                    this.isShowMinimumAmount = false

                    if (this.voucherEvents[this.voucherEvent]['name']) {
                        console.log(this.voucherEven)
                        this.isShowName = true
                    }
                    if (this.voucherEvents[this.voucherEvent]['expires']) {
                        this.isShowExpires = true
                        flatpickr(".flatpickr1", {
                            enableTime: true,
                            dateFormat: "Y-m-d",
                        });
                    }
                    if (this.voucherEvents[this.voucherEvent]['amount']) {
                        this.isShowAmount = true
                    }
                    if (this.voucherEvents[this.voucherEvent]['minimumAmount']) {
                        this.isShowMinimumAmount = true
                    }
                },
            },
        });
    </script>
@endsection