@extends('layouts.master', ['title' => 'Change PIN'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb">
        <h1>Change PIN</h1>
        <ul>
            <li><a href="#no-link">Account</a></li>
            <li class="divider la la-arrow-right"></li>
            <li>Change PIN</li>
        </ul>
    </section>

    <div class="grid lg:grid-cols-3 gap-5">
        <div class="flex flex-col gap-y-5">
            <div class="card p-5">
                <div class="body">
                    {{--Old PIN--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="old_pin">Old PIN</label>
                        <label class="form-control-addon-within">
                            <input id="old_pin" name="password" type="password" class="form-control border-none" placeholder="Enter old PIN here" v-model.trim="oldPIN" value="" @input="handleInput( $event,'oldPIN')">
                            <span class="flex items-center ltr:pr-4 rtl:pl-4">
                            <button type="button"
                                    class="text-gray-300 dark:text-gray-700 la la-eye text-xl leading-none"
                                    data-toggle="password-visibility"></button>
                        </span>
                        </label>
                    </div>

                    {{--New PIN--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="new_pin">New PIN</label>
                        <label class="form-control-addon-within">
                            <input id="new_pin" name="password" type="password" class="form-control border-none" placeholder="Enter new PIN here" v-model.trim="newPIN" value="" @input="handleInput( $event,'newPIN')">
                            <span class="flex items-center ltr:pr-4 rtl:pl-4">
                            <button type="button"
                                    class="text-gray-300 dark:text-gray-700 la la-eye text-xl leading-none"
                                    data-toggle="password-visibility"></button>
                        </span>
                        </label>
                    </div>

                    {{--Confirm PIN--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="confirm_pin">Confirm PIN</label>
                        <label class="form-control-addon-within">
                            <input id="confirm_pin" name="password" type="password" class="form-control border-none" placeholder="Enter confirm PIN here" v-model.trim="confirmPIN" value="" @input="handleInput( $event,'confirmPIN')">
                            <span class="flex items-center ltr:pr-4 rtl:pl-4">
                            <button type="button"
                                    class="text-gray-300 dark:text-gray-700 la la-eye text-xl leading-none"
                                    data-toggle="password-visibility"></button>
                        </span>
                        </label>
                    </div>
                </div>
                <div class="actions">
                    <div class="flex ltr:ml-auto rtl:mr-auto mt-5">
                        <button class="btn btn_secondary uppercase" @click="clearForm">Clear</button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" @click="submitChangePassword">Save
                            Changes
                        </button>
                    </div>
                </div>


            </div>

        </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 {
                    oldPIN: '',
                    newPIN: '',
                    confirmPIN: '',
                }
            },
            methods: {
                clearForm() {
                    this.oldPIN = '';
                    this.newPIN = '';
                    this.confirmPIN = '';
                },
                handleInput(event,target) {
                    // 从输入框的值中提取只包含0到9的数字
                    let filteredValue = event.target.value.replace(/[^0-9]/g, '');
                    if (filteredValue.length > 6) {
                        filteredValue = filteredValue.slice(0, 6);
                    }
                    switch (target){
                        case 'oldPIN':
                            this.oldPIN = filteredValue;
                            break;
                        case 'newPIN':
                            this.newPIN = filteredValue;
                            break;
                        case 'confirmPIN':
                            this.confirmPIN = filteredValue;
                            break;
                    }
                },
                submitChangePassword() {
                    if (this.oldPIN === '') {
                        alert('Old PIN is required');
                        return;
                    }

                    if (this.newPIN === '') {
                        alert('New PIN is required');
                        return;
                    }
                    if (this.confirmPIN === '') {
                        alert('Confirm PIN is required');
                        return;
                    }

                    if (this.oldPIN.length !== 6 || this.newPIN.length !== 6 || this.confirmPIN.length !== 6) {
                        alert('PIN must be 6 digits');
                        return;
                    }

                    if (this.newPIN !== this.confirmPIN) {
                        alert('New PIN and confirm PIN does not match');
                        return;
                    }

                    axios.post('{{route('trial-accounts.change-pin.store')}}', {
                        _token: '{{csrf_token()}}',
                        old_pin: this.oldPIN,
                        new_pin: this.newPIN,
                        confirm_pin: this.confirmPIN,
                    })
                        .then(function (response) {
                            console.log(response);
                            if (response.status === 200) {
                                alert(response.data.message);
                                window.location.reload();
                            } else {
                                alert(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                }
            }

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

@endsection