@extends('layouts.app')

@section('contents')
    <section id="basic-input">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">กำหนดเงื่อนไขโปร "{{ $promotion->name }}"</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                {{ MyNotify::get() }}
                                <table class="table">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ยอดฝาก</th>
                                            <th>โบนัส</th>
                                            <th>รวม</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <template>
                                            <tr v-for="v, i in formAmounts" :key="i">
                                                <td>@{{ v.amount }}</td>
                                                <td>@{{ v.bonus }}</td>
                                                <td>@{{ v.amount + v.bonus }}</td>
                                                <td>
                                                    <button @click="deleteMoreAmountAndBonus(v.amount)" type="button"
                                                        class="btn btn-sm btn-outline-danger waves-effect">
                                                        ลบ
                                                    </button>
                                                </td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-12 mt-5">
                                <div class="mb-1 row">
                                    <div class="col-12">
                                        <div class="mx-auto">
                                            <input type="text" class="form-control mx-auto" placeholder="ยอดฝาก"
                                                v-model="formCondition.amount">
                                        </div>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div class="input-group input-group-merge">
                                            <input type="text" class="form-control" placeholder="โบนัส"
                                                v-model="formCondition.bonus">
                                        </div>
                                    </div>
                                    <div class="d-grid col-6 mt-2">
                                        <button type="button" class="btn btn-success waves-effect"
                                            @click="addMoreAmountAndBonus">
                                            เพิ่ม
                                        </button>
                                    </div>
                                    <div class="d-grid col-6 mt-2">
                                        <form
                                            action="{{ route('setting.promotion.condition.storeCondition', $promotion->id) }}"
                                            method="POST">
                                            @csrf
                                            <input type="hidden" name="amountForCondition"
                                                :value="JSON.stringify(formAmounts)">
                                            <button type="submit" class="btn btn-primary waves-effect" style="width: 100%"
                                                onclick="return confirm('แน่ใจหรือไม่?')">
                                                บันทึก
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('page.js')
    <script>
        new Vue({
            el: '#app',
            data: {
                formAmounts: [],
                formCondition: {
                    amount: '',
                    bonus: ''
                },
            },
            mounted() {
                const data = {!! json_encode($promotion->amountForCondition) !!};
                this.formAmounts = JSON.parse(data);

            },
            methods: {
                addMoreAmountAndBonus() {
                    const data = []
                    this.formAmounts.forEach((element) => {
                        data.push({
                            amount: element.amount,
                            bonus: element.bonus
                        })
                    })
                    data.push({
                        amount: parseInt(this.formCondition.amount),
                        bonus: parseInt(this.formCondition.bonus)
                    })

                    // use slice() to copy the array and not just make a reference
                    const byAmount = data.slice(0)

                    byAmount.sort((a, b) => {
                        return a.amount - b.amount
                    })

                    this.formAmounts = byAmount

                    this.formCondition = {
                        amount: '',
                        bonus: ''
                    }
                },
                deleteMoreAmountAndBonus(indexAmount) {
                    const data = []

                    this.formAmounts.forEach((element) => {
                        data.push({
                            amount: element.amount,
                            bonus: element.bonus
                        })
                    })

                    const index = data.findIndex((object) => {
                        return object.amount === parseInt(indexAmount)
                    })

                    data.splice(index, 1)

                    const byAmount = data.slice(0)

                    byAmount.sort((a, b) => {
                        return a.amount - b.amount
                    })

                    this.formAmounts = byAmount
                },
            },
        });
    </script>
@endsection