@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 class="flex flex-wrap gap-2 mt-5">
                        <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',
                        'OTHERS'
                    ],


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


                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: '',
                }
            },
            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);
                },
                handlePhotoChange(event) {
                    this.photo = event.target.files[0];
                },
                updateColor(event) {
                    this.textColor = event.target.value;
                },
                clearForm() {
                    this.oldPassword = '';
                    this.newPassword = '';
                    this.confirmPassword = '';
                },

                submitForm() {
                    const formData = new FormData();
                    formData.append('name', this.name);
                    formData.append('photo', this.photo);

                    // 发送 formData 到服务器，执行文件上传和其他信息的处理
                    // 可以使用 axios 或其他适合的库发送请求

                    // 清空表单数据
                    this.name = '';
                    this.photo = null;
                    this.$refs.photoInput.value = '';
                },

                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('trial-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('trial-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