@extends('layouts.master', ['title' => 'Add - Payment Method - Pages'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb">
        <h1>Add Payment Method</h1>
        <ul>
            <li><a href="#no-link">Pages</a></li>
            <li class="divider la la-arrow-right"></li>
            <li><a href="#no-link">Payment Method</a></li>
            <li class="divider la la-arrow-right"></li>
            <li>Add</li>
        </ul>
    </section>

    <div class="grid lg:grid-cols-4 gap-5">

        <!-- Content -->
        <div class="lg:col-span-2 xl:col-span-3">

            <form>
                <div class="card p-5">

                    {{--Payment Code--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="payment_code">Payment Code</label>
                        <input id="payment_code" v-model.trim="paymentCode" type="text" class="form-control" required>
                    </div>

                    {{--Description--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="description">Description</label>
                        <input id="description" v-model.trim="description" type="text" class="form-control" required>
                    </div>


                    {{--Payment Type--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="state">Payment Type</label>
                        <div class="custom-select">
                            <select name="state" class="form-control" v-model="paymentType">
                                <option v-for="paymentMethod in paymentMethods" :key="paymentMethod">@{{ paymentMethod
                                    }}
                                </option>
                            </select>
                            <div class="custom-select-icon la la-caret-down"></div>
                        </div>
                    </div>

                    {{--Open Drawer--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="custom-checkbox">
                            <input type="checkbox" v-model="isOpenDrawer">
                            <span></span>
                            <span>Open Drawer</span>
                        </label>
                    </div>

                    {{--Require Fill Reference--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="custom-checkbox">
                            <input type="checkbox" v-model="isRequiredFillRef" :disabled="isDisableRequiredFillRef">
                            <span></span>
                            <span>Require Fill Reference</span>
                        </label>
                    </div>

                    {{--Base Color--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="base_color">Base Color</label>
                        <input id="base_color" v-model.trim="baseColor" type="color" class="h-10 w-10 rounded" required>
                    </div>

                    {{--Text Color--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="text_color">Text Color</label>
                        <input id="text_color" v-model.trim="textColor" type="color" class="h-10 w-10 rounded" required>
                    </div>

                    {{--Button Icon--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="text_color">Button Icon</label>
                        <label class="input-group font-normal">
                            <div
                                class="file-name input-addon input-addon-prepend input-group-item w-full overflow-x-hidden">
                                No Icon chosen
                            </div>
                            <input type="file" id="photo" @change="uploadImage"  class="hidden" accept="image/*"  >
                            <div class="input-group-item btn btn_primary uppercase">Choose Icon</div>
                        </label>
                    </div>




                </div>


                <div class="card mt-5 p-5" v-if="paymentType === 'REVENUE MONSTER'">

                    {{--Store ID--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="payment_code">Store ID</label>
                        <input id="payment_code" v-model.trim="storeId" type="text" class="form-control" required>
                    </div>

                    {{--Refund PIN--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="description">Refund PIN</label>
                        <input id="description" v-model.trim="refundPIN" type="text" class="form-control" required :disabled="isDisableTerminal">
                    </div>

                    {{--Terminal List--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="state">Terminal List</label>
                        <div class="custom-select">
                            <select name="state" class="form-control" v-model="selectedTerminal">
                                @if($terminals->count() > 0)
                                    @foreach($terminals as $terminal)
                                        <option value="{{$terminal->id}}">{{$terminal->terminal_id}}</option>
                                    @endforeach

                                @endif
                            </select>
                            <div class="custom-select-icon la la-caret-down"></div>
                            <label class="custom-checkbox">
                                <input type="checkbox" v-model="isEnableTerminal">
                                <span></span>
                                <span>Enable</span>
                            </label>
                        </div>
                    </div>

                    {{--Client ID--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="payment_code">Client ID</label>
                        <input id="payment_code" v-model.trim="clientId" type="text" class="form-control" required>
                    </div>

                    {{--Client Secret--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="description">Client Secret</label>
                        <input id="description" v-model.trim="clientSecret" type="text" class="form-control" required>
                    </div>

                    {{--Private Key--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="remark">Private Key</label>
                        <textarea id="remark" v-model="privateKey" class="form-control" rows="5"></textarea>
                    </div>

                    {{--Public Key--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="label block mb-2" for="remark">Public Key</label>
                        <textarea id="remark" v-model="publicKey" class="form-control" rows="5"></textarea>
                    </div>

                    {{--Card--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="custom-checkbox">
                            <input type="checkbox" v-model="useCard">
                            <span></span>
                            <span>Credit Card</span>
                        </label>
                    </div>


                    {{--Ewallet--}}
                    <div class="mb-5 xl:w-1/2">
                        <label class="custom-checkbox">
                            <input type="checkbox" v-model="useEwallet">
                            <span></span>
                            <span>E-Wallet</span>
                        </label>
                    </div>

                </div>



                <div class="card mt-5 p-5">
                    <div class="flex flex-wrap gap-2">
                        <button class="btn btn_outlined btn_secondary uppercase"
                                onclick="window.location.href='{{route('trial-accounts.payments.index')}}';">Cancel
                        </button>
                        <button type="button" @click="submitPayment()" class="btn btn_primary uppercase">Create</button>

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


        </div>


    </div>

@endsection


@section('scripts')
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        const {createApp} = Vue

        createApp({

            data() {
                return {
                    isDisableRequiredFillRef: false,
                    paymentMethods: [
                        'CASH',
                        'QR PAYMENT',
                        'PAYMENT TERMINAL',
                        // 'REVENUE MONSTER',
                        'OTHERS'
                    ],

                    paymentCode: '',
                    description: '',
                    paymentType: 'CASH',
                    isOpenDrawer: false,
                    isRequiredFillRef: false,
                    textColor: '#ffffff',
                    baseColor: '#4E6D9C',
                    icon: '',

                    file: '',

                    isEnableTerminal: '',
                    selectedTerminal: '',
                    storeId: '',
                    refundPIN: '',
                    clientId: '',
                    clientSecret: '',
                    privateKey: '',
                    publicKey: '',
                    useCard: false,
                    useEwallet: false,
                }
            },
            methods: {
                uploadImage() {
                    const file = document.querySelector('input[type=file]').files[0];
                    const reader = new FileReader();

                    reader.onloadend = () => {
                        const img = new Image();
                        img.src = reader.result;

                        img.onload = () => {
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');
                            const maxSize = 512; // 目标大小为 512px

                            let width = img.width;
                            let height = img.height;

                            // 如果宽度或高度超过最大大小，则按比例缩小图像
                            if (width > maxSize || height > maxSize) {
                                if (width > height) {
                                    height *= maxSize / width;
                                    width = maxSize;
                                } else {
                                    width *= maxSize / height;
                                    height = maxSize;
                                }
                            }

                            canvas.width = width;
                            canvas.height = height;

                            ctx.drawImage(img, 0, 0, width, height);

                            // 压缩图像质量
                             // 0.7 是压缩质量，可以调整为您需要的值
                            this.icon = canvas.toDataURL('image/jpeg', 0.6);
                            // console.log(this.icon);
                        };
                    };

                    reader.readAsDataURL(file);
                },
                // uploadImage() {
                //     let rawImg;
                //     const file = document.querySelector('input[type=file]').files[0];
                //     const reader = new FileReader();
                //
                //     reader.onloadend = () => {
                //         rawImg = reader.result;
                //         this.icon = rawImg;
                //         console.log(this.icon);
                //     }
                //     reader.readAsDataURL(file);
                // },
                updateColor(event) {
                    this.textColor = event.target.value;
                },
                clearForm() {
                    this.oldPassword = '';
                    this.newPassword = '';
                    this.confirmPassword = '';
                },

                submitPayment() {

                    let formData = new FormData();
                    formData.append('_token', '{{csrf_token()}}');
                    formData.append('icon', this.icon);
                    formData.append('payment_code', this.paymentCode);
                    formData.append('description', this.description);
                    formData.append('payment_type', this.paymentType);
                    formData.append('open_drawer', this.isOpenDrawer);
                    formData.append('fill_reference', this.isRequiredFillRef);
                    formData.append('text_color', this.textColor);
                    formData.append('base_color', this.baseColor);




                    axios.post('{{route('paid-accounts.payments.store')}}',
                        formData,
                        {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        })
                        .then(function (response) {
                            console.log(response);
                            if (response.status === 200) {
                                alert(response.data.message);
                                // window.location.reload();
                                // //redirect to dashboard
                                window.location.href = '{{route('paid-accounts.payments.index')}}';

                            } else {
                                alert(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                }
            },
            watch: {
                paymentType(newValue) {
                    this.isRequiredFillRef = newValue !== 'CASH';
                    this.isDisableRequiredFillRef = newValue !== 'CASH';
                }
            }

        }).mount('#app')
    </script>

@endsection