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

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb">
        <h1>Change Password</h1>
        <ul>
            <li><a href="#no-link">Account</a></li>
            <li class="divider la la-arrow-right"></li>
            <li>Change Password</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 Password--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="old_password">Old Password</label>
                        <label class="form-control-addon-within">
                            <input id="old_password" name="password" type="password" class="form-control border-none" placeholder="Enter old password here" v-model.trim="oldPassword" value="">
                            <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 Password--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="new_password">New Password</label>
                        <label class="form-control-addon-within">
                            <input id="new_password" name="password" type="password" class="form-control border-none" placeholder="Enter new password here" v-model.trim="newPassword" value="">
                            <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 Password--}}
                    <div class="mb-5">
                        <label class="label block mb-2" for="confirm_password">Confirm Password</label>
                        <label class="form-control-addon-within">
                            <input id="confirm_password" name="password" type="password" class="form-control border-none" placeholder="Enter confirm password here" v-model.trim="confirmPassword" value="">
                            <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 {
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: '',
                }
            },
            methods: {
                clearForm() {
                    this.oldPassword = '';
                    this.newPassword = '';
                    this.confirmPassword = '';
                },
                submitChangePassword() {
                    if (this.oldPassword === '') {
                        alert('Old password is required');
                        return;
                    }

                    if (this.newPassword === '') {
                        alert('New password is required');
                        return;
                    }
                    if (this.confirmPassword === '') {
                        alert('Confirm password is required');
                        return;
                    }

                    if (this.oldPassword.length < 8 || this.newPassword.length < 8 || this.confirmPassword.length < 8) {
                        alert('Password must be at least 8 characters');
                        return;
                    }

                    if (this.newPassword !== this.confirmPassword) {
                        alert('New password and confirm password does not match');
                        return;
                    }

                    axios.post('{{route('trial-accounts.change-password.store')}}', {
                        _token: '{{csrf_token()}}',
                        old_password: this.oldPassword,
                        new_password: this.newPassword,
                        confirm_password: this.confirmPassword,
                    })
                        .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