{% extends '@App/base.html.twig' %}
{% block title %}
    New Job
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                {{ form_start(ro_form) }}
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="" data-toggle="tooltip" data-placement="top"
                                  data-original-title="Your Repair Order ID">
                                {{ form_label(ro_form.number) }}
                                {{ form_widget(ro_form.number) }}
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="" data-toggle="tooltip" data-placement="top"
                                  data-original-title="Customer's Full Name">
                                {{ form_label(ro_form.name) }}
                                {{ form_widget(ro_form.name) }}
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="" data-toggle="tooltip" data-placement="top"
                                  data-original-title="Customer's Mobile Phone Number (format:8475551234)">
                                {{ form_label(ro_form.phone) }}
                                {{ form_widget(ro_form.phone) }}
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <span class="" data-toggle="tooltip" data-placement="top" title=""
                                  data-original-title="The value of the repair the customer came in for">
                                {{ form_label(ro_form.value) }}
                                {{ form_widget(ro_form.value) }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-block btn-primary" type="button" data-toggle="collapse" id="MoreOptionsToggle"
                                data-target="#moreOptions" aria-expanded="false" aria-controls="moreOptions">
                            More Options
                        </button>
                        <div class="collapse" id="moreOptions">
                            <div class="well">
                                <div class="row">
                                    <div class="col-md-4">
                                        <span class="bmd-form-group">
                                            {{ form_label(ro_form.waiter) }}
                                            {{ form_widget(ro_form.waiter) }}
                                        </span>
                                        <div class="form-group hidden" id="pickup_date_div">
                                            {{ form_label(ro_form.pickupDate) }}
                                            {{ form_widget(ro_form.pickupDate) }}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            {{ form_label(ro_form.note) }}
                                            {{ form_widget(ro_form.note) }}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            {{ form_label(ro_form.email) }}
                                            {{ form_widget(ro_form.email) }}
                                        </div>
                                        <div class="form-group">
                                            {{ form_label(ro_form.advisor) }}
                                            {{ form_widget(ro_form.advisor) }}
                                        </div>
                                        <div class="form-group">
                                            {{ form_label(ro_form.technician) }}
                                            {{ form_widget(ro_form.technician) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{ form_widget(ro_form.followUp) }}
                {{ form_widget(ro_form.submit) }}
                {{ form_end(ro_form) }}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        if({{ follow_up_repair_order_id }} > 0){
            $('#repair_order_followUp').val({{ follow_up_repair_order_id }});
        }
        $('#moreOptions').on('shown.bs.collapse', function (e) {
            $('#MoreOptionsToggle').html('LESS OPTIONS');
        }).on('hidden.bs.collapse', function (e) {
            $('#MoreOptionsToggle').html('MORE OPTIONS');
        })

        $('body').on('change', '#repair_order_waiter', function () {
            if ($(this).is(':checked')) {
                $('#pickup_date_div').addClass('hidden');
                $('#repair_order_pickupDate').attr({'required': false});
                return;
            }

            $('#pickup_date_div').removeClass('hidden');
            $('#ro_form_pickupTime').attr({'required': true});
        });

        $('#repair_order_pickupDate').bootstrapMaterialDatePicker({
                                                                      time       : true,
                                                                      clearButton: true,
                                                                      minDate    : new Date(),
                                                                      shortTime  : true,
                                                                      format     : 'MM/DD/YYYY hh:mm A'
                                                                  }).on('change', function (e, date) {
            console.log('selected', e, date);
        });
    </script>
{% endblock %}