@extends('layouts.master', ['title' => 'Assign -  License - Pages'])

@section('workspace')

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

    <div class="grid lg:grid-cols-2 gap-5">
        <div class="flex flex-col gap-y-5">
            <div class="card p-5">
                <div class="body">


                    <div class="">
                        <div class="custom-select">
                            <label class="label block mb-2" for="license_type">License Type</label>
                            <select id="license_type" v-model="selectedLicenseType" class="form-control">
                                <option disabled value="">Please select one</option>
                                <option v-for="license in licenseTypes" :key="license" :value="license.value">@{{
                                    license.description }}
                                </option>
                            </select>

                            <div class="custom-select-icon la la-caret-down"></div>
                        </div>
                    </div>


                    {{--App Id--}}
                    <div class="mt-5">
                        <label class="label block mb-2" for="input">App Id</label>
                        <input id="input" class="form-control" placeholder="EZYPOS-XXXXXXXX-XXXXXX">
                    </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 {
                    licenseTypes: [
                        {
                            value: 'standalone',
                            description: 'Standalone',
                        },
                        {
                            value: 'local',
                            description: 'Local',
                        },
                    ],

                    selectedLicenseType: 'standalone',

                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: '',
                }
            },
            methods: {
                clearForm() {
                    this.oldPassword = '';

                },
                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('sub-dealer.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