@extends('layouts.guest-home')
@section('content')

    <div id="createMeetingComponent">

        <div class="d-flex">
            <h1 class="font-weight-bold">Consult your doctor from the comfort of your home!</h1>
        </div>

        <div class="d-flex mt-4 mt-sm-5">
            <div class="form-container">
                <div class="form">
                    <h3 class="border-bottom border-success text-center font-weight-bold py-3 m-0">Start Meeting</h3>
                    <p class="px-4 text-dark m-0 py-3">Please enter your name and date of birth to start a meeting.</p>
                    <div class="px-4 mb-4" autofocus="true">
                        <input type="text" class="form-control py-3" :class="nameError ? 'has-error' : ''" v-model="name" placeholder="Your name">
                        <div class="field-error text-danger" v-if="nameError">Your name is required</div>
                    </div>
                    <div class="px-4 mb-4">
                        <input type="date" class="form-control py-3" :class="dobError ? 'has-error' : ''" v-model="dob" placeholder="Your date of birth">
                        <div class="field-error text-danger" v-if="dobError">Your date of birth is required</div>
                    </div>
                    <div class="px-4 pb-4">
                        <button class="btn btn-success font-weight-bold w-100"
                                :disabled="process"
                                v-on:click.prevent="doStart()">
                            <span v-if="!process">Start Meeting</span>
                            <span v-if="process">@{{ process }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#createMeetingComponent',
            delimiters: ['@{{', '}}'],
            data: {
                name: 'Vj',
                dob: '1990-02-01',
                // name: '',
                // dob: '',
                process: false,
                nameError: false,
                dobError: false,
            },
            methods: {
                validate: function () {
                    this.nameError = false;
                    this.dobError = false;
                    if (!$.trim(this.name)) {
                        this.nameError = true;
                    }
                    if (!$.trim(this.dob)) {
                        this.dobError = true;
                    }
                    return !(this.nameError || this.dobError);
                },
                doStart: function () {
                    var self = this;
                    if(!this.validate()) return;
                    this.process = 'Creating ...';
                    $.post('/api/meeting/create-via-api', {
                        name: this.name,
                        dob: this.dob,
                    }, function (_data) {
                        if(_data.data && _data.data.meetingUid && _data.data.meetingParticipantUid) {
                            self.process = 'Redirecting ...';
                            window.location.href = '/meeting/'
                                + _data.data.meetingUid + '/'
                                + _data.data.meetingParticipantUid
                                + '?start=1';
                        }
                        else {
                            self.process = false;
                        }
                    }, 'json');
                }
            },
            mounted: function() {
            }
        });
    </script>

@endsection