@extends('admin.layouts.contentLayoutMaster')

@section('title','Sample-Form')

@section('vendor-styles')

@endsection

@section('page-styles')

@endsection

@section('content')
    <section id="app">
        <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="row">
                                <div class="col-md-6">
                                    <example-component/>
                                </div>

                                <div class="col-md-6">
                                    <keen-image id="image_path" name="image_path"/>
                                </div>
                                <div class="col-md-6">
                                    <date-flatpickr
                                            id="try_out_at"
                                            name="try_out_at"
                                            value="2023-01-10 00:00:00">
                                </div>

                                <div class="col-md-6">
                                    <input-number-spinner

                                            name="bonus_percent"
                                            placeholder="利潤％數"
                                            :max="100"
                                            required
                                    >
                                    </input-number-spinner>
                                </div>

                                <div class="col-md-6 mt-2">
                                    @{{ result2 }}

                                    <select2
                                        name="custom_select2"
                                        v-model="result2"
                                        :options="options2"></select2>

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

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

@section('vendor-scripts')

@endsection

@section('page-scripts')
    <script>
        const app = new Vue({
            el: '#app',
            data: function () {
                return {
                    result2: '',
                    options2: [{
                        text: "name1",
                        value: "value1"
                    }, {
                        text: "name2",
                        value: "value2"
                    }, {
                        text: "name3",
                        value: "value3"
                    }],
                }
            },
            methods: {},
            mounted() {

            }

        });
    </script>
@endsection