{% extends '@App/base.html.twig' %}
{% block stylesheets %}
    <style>
        .search-table {
            table-layout: fixed;
            margin: 40px auto 0px auto;
        }

        .search-table, td, th {
            border-collapse: collapse;
            border: 1px solid #777;
        }

        th {
            padding: 20px 7px;
            font-size: 15px;
            color: #444;
            background: #66C2E0;
        }

        td {
            padding: 5px 10px;
            height: 35px;
        }

        .search-table-outter {
            overflow-x: scroll;
        }

        th, td {
            min-width: 200px;
        }

        .checkbox label .checkbox-decorator, label.checkbox-inline .checkbox-decorator {
            top: auto !important;
        }

        .radio label, .is-focused .radio label, .radio-inline, .is-focused .radio-inline, .checkbox label,
        .is-focused .checkbox label, .checkbox-inline, .is-focused .checkbox-inline, .switch label,
        .is-focused .switch label {
            color: #000 !important;
        }
    </style>
{% endblock %}
{% block title %}
    UPGRADE
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">DEMO</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group bmd-form-group is-filled">
                                <label class="control-label required bmd-label-static" for="name">Name</label>
                                <input type="text" id="name" name="" required="required" class="form-control form-control" value="">
                            </div>
                            <div class="form-group bmd-form-group is-filled">
                                <label class="control-label required bmd-label-static" for="phone">Phone</label>
                                <input type="phone" id="phone" name="" required="required" class="form-control form-control" value="">
                            </div>
                            <div class="form-group bmd-form-group is-filled">
                                <label class="control-label required bmd-label-static" for="vehicle">Vehicle</label>
                                <select id="vehicle" name="" required="required" class="form-control form-control">
                                    <option value="honda">Honda</option>
                                    <option value="chrysler">Chrysler</option>
                                    <option value="lexus">Lexus</option>
                                    <option value="toyota">Toyota</option>
                                    <option value="nissan">Nissan</option>
                                </select>
                            </div>
                            <div class="form-group bmd-form-group is-filled">
                                <button id="begin_demo" class="btn btn-block btn-success">Begin Demo</button>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('body').on('click', '#begin_demo', function () {
                $.post('/api/upgrade/begin-demo', {
                    name: $('#name').val(),
                    phone: $('#phone').val(),
                    option: $('#vehicle').val()
                }, function (resp) {
                    alert('Message Sent');
                    console.log(resp);
                }).error(function (e) {
                    console.log(e);
                    alert(e);
                });
            });
        });
    </script>
{% endblock %}