@extends('layouts.join')
@section('content')
    <form action=""
          method="post"
          enctype="multipart/form-data"
          onsubmit="return joinMeeting(this)">
        @csrf

        <p class="login-box-msg">Welcome! Please check in.</p>

        @if (session('message'))
            <div class="alert alert-danger">{{ session('message') }}</div>
        @endif

        <div class="form-group mb-3">
            <input type="text" name="nameFirst" class="form-control" placeholder="First Name" required>
        </div>
        <div class="form-group mb-3">
            <input type="text" name="nameLast" class="form-control" placeholder="Last Name" required>
        </div>
        <div class="form-group mb-3">
            <input type="date" name="dob" class="form-control" placeholder="Date of Birth" required>
        </div>
        <div class="form-group mb-3">
            <input type="text" name="medicareNumber" class="form-control" placeholder="Medicare Number" required>
        </div>
        <div class="form-group mb-3">
            <input type="text" name="ssn" class="form-control" placeholder="SSN" required>
        </div>

        <button type="submit" class="btn btn-primary btn-block mx-auto w-50 mt-4 mb-2">Check In</button>
    </form>
    <script>
        function joinMeeting(_form) {
            $.ajax({
                type: 'post',
                url: '/api/client/createAsGuest',
                data: $(_form).serialize(),
                dataType: 'json'
            })
            .done(function (_data) {
                console.log(_data);
                if(_data.success) {
                    localStorage.clientFirstName = $('[name="nameFirst"]').val();
                    localStorage.clientLastName = $('[name="nameLast"]').val();
                    localStorage.clientUid = _data.data.clientUid;
                    localStorage.sessionKey = _data.data.sessionKey;
                    window.location = '/meet';
                }
                else {
                    alert(_data.message);
                }
            })
            .fail(function (_data) {
                console.log(_data);
                alert(_data.message);
            });
            return false;
        }
    </script>
@endsection