{% 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 %}
    iSERVICE Settings
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                {{ form_start(form) }}
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">Phase Settings</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group">
                                {{ form_label(form.phase1) }}
                                {{ form_widget(form.phase1) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.phase2) }}
                                {{ form_widget(form.phase2) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.phase3) }}
                                {{ form_widget(form.phase3) }}
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">Technican App Settings</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group">
                                {{ form_label(form.appUsername) }}
                                {{ form_widget(form.appUsername) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.appPassword) }}
                                {{ form_widget(form.appPassword) }}
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">Customer App Settings</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group">
                                {{ form_label(form.appraiseMyCarButtonText) }}
                                {{ form_widget(form.appraiseMyCarButtonText) }}
                            </div>
                            <br/>
                            <div class="form-group">
                                {{ form_label(form.appraiseMyCarVideoFile) }}
                                {{ form_widget(form.appraiseMyCarVideoFile) }}
                                {% if settings.appraiseMyCarVideo %}
                                    <div id="appraisal_video">
                                        <video controls style="max-width: 400px;" id="appraisal_video">
                                            <source src="{{ asset('uploads/appraisal_videos/') ~ settings.appraiseMyCarVideo }}"
                                                    type="video/mp4"/>
                                        </video>
                                        <br/>
                                        <a href="javascript:" class="btn btn-danger btn-sm" id="remove_video">
                                            Remove Video
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.financeRepairUrl) }}
                                {{ form_widget(form.financeRepairUrl) }}
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">Text Settings</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group">
                                {{ form_label(form.introText) }}
                                {{ form_widget(form.introText) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.videoText) }}
                                {{ form_widget(form.videoText) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.videoResendText) }}
                                {{ form_widget(form.videoResendText) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.quoteText) }}
                                {{ form_widget(form.quoteText) }}
                            </div>
                            {% if ipay %}
                                <div class="form-group">
                                    {{ form_label(form.paymentText) }}
                                    {{ form_widget(form.paymentText) }}
                                </div>
                            {% else %}
                                <div class="form-group" style="display: none">
                                    {{ form_label(form.paymentText) }}
                                    {{ form_widget(form.paymentText) }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </fieldset>
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">Pricing Settings</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group">
                                {{ form_label(form.laborRate) }}
                                {{ form_widget(form.laborRate) }}
                            </div>
                                <div class="form-group">
                                    {{ form_widget(form.useMatrix) }}
                                    {{ form_label(form.useMatrix) }}
                                </div>
                                <a href="javascript:" class="btn btn-raised btn-primary btn-outline"
                                   data-toggle="modal" id="launch_pricing_matrix" data-target="#modal-matrix">
                                    View/Edit Matrix
                                </a>
                            <div class="form-group">
                                {{ form_label(form.laborTax) }}
                                {{ form_widget(form.laborTax) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.partsSuppliesTax) }}
                                {{ form_widget(form.partsSuppliesTax) }}
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">Waiver Settings</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group">
                                {{ form_label(form.estimateWaiverText) }}
                                {{ form_widget(form.estimateWaiverText) }}
                            </div>
                            <div class="form-group">
                                {{ form_widget(form.authorizationMessage) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.authorizationMessageText) }}
                                {{ form_widget(form.authorizationMessageText) }}
                            </div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="form-group">
                    <div class="row">
                        <legend class="col-xs-12 col-sm-2">Other Settings</legend>
                        <div class="col-xs-12 col-sm-10">
                            <div class="form-group">
                                {{ form_label(form.advisorUsageReportMailingList) }}
                                {{ form_widget(form.advisorUsageReportMailingList) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.offHoursIntegration) }}
                                {{ form_widget(form.offHoursIntegration) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.mpiPrintHeader) }}
                                {{ form_widget(form.mpiPrintHeader) }}
                            </div>
                        </div>
                    </div>
                </fieldset>
                {% if preview %}
                    <fieldset class="form-group">
                        <div class="row">
                            <div class="col-xs-12 col-sm-10">
                                <legend class="col-xs-12 col-sm-2">Preview Settings</legend>
                                <div class="form-group">
                                    {{ form_label(form.previewVideoText) }}
                                    {{ form_widget(form.previewVideoText) }}
                                </div>
                            </div>
                        </div>
                    </fieldset>
                {% endif %}
                {% if upgrade %}
                    <fieldset class="form-group">
                        <div class="row">
                            <legend class="col-xs-12 col-sm-2">Upgrade Settings</legend>
                            <div class="col-xs-12 col-sm-10">
                                <div class="form-group">
                                    {{ form_label(form.taxRate) }}
                                    {{ form_widget(form.taxRate) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.taxLimit) }}
                                    {{ form_widget(form.taxLimit) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.durationOfOffer) }}
                                    {{ form_widget(form.durationOfOffer) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.upgradeTriggerInterval) }}
                                    {{ form_widget(form.upgradeTriggerInterval) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.instantCashOfferUrl) }}
                                    {{ form_widget(form.instantCashOfferUrl) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.upgradeEstimateText) }}
                                    {{ form_widget(form.upgradeEstimateText) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.upgradeOfferText) }}
                                    {{ form_widget(form.upgradeOfferText) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.upgradeCashOfferCopy) }}
                                    {{ form_widget(form.upgradeCashOfferCopy) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.upgradeDisclaimer) }}
                                    {{ form_widget(form.upgradeDisclaimer) }}
                                </div>
                            </div>
                        </div>
                    </fieldset>
                {% endif %}
                {% if myLoan == true %}
                    <fieldset class="form-group">
                        <div class="row">
                            <legend class="col-xs-12 col-sm-2">MyLoan Settings</legend>
                            <div class="col-xs-12 col-sm-10">
                                <div class="form-group">
                                    {{ form_label(form.myLoanSms) }}
                                    {{ form_widget(form.myLoanSms) }}
                                </div>
                                <div class="form-group">
                                    {{ form_label(form.myloanEmail) }}
                                    {{ form_widget(form.myloanEmail) }}
                                </div>
                            </div>
                        </div>
                    </fieldset>
                {% endif %}
            </div>
        </div>
        {{ form_end(form) }}
    </div>
    <script type="text/javascript">
        $(function () {
            $('#settings_estimateWaiverText').trumbowyg();
        });
    </script>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(function () {
            $('#settings_advisorUsageReportMailingList').tagsinput();
            $('#settings_upgradeCashOfferCopy').tagsinput();
            $('#settings_upgradeDisclaimer').tagsinput();
        });

        $('body').on('click', '#remove_video', function () {
            if (confirm('Are you sure you want to remove this video from the customer app?')) {
                $.get('/api/iservice/settings/remove-appraisal-video', function (resp) {
                    $('#appraisal_video').remove();
                    alert('Video Deleted');
                });
            }
        });
    </script>
{% endblock %}
{% block modal %}
    <div class="modal modal-primary fade scale" id="modal-matrix" tabindex="-1" role="dialog"
         aria-labelledby="modal-matrix" aria-hidden="true">
        <input type="hidden" id="modal_followup_ro_id" value=""/>
        <div class="modal-dialog modal-lg" role="document">
            <div class="scrollable-modal modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modal-default-primary-label">Create A Quote Pricing Matrix</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <table style="margin-bottom: 0 !important;" id="matrix_table"
                                   class="table table-hover table-striped table-bordered text-center dataTable search-table inner">
                                <thead>
                                <tr>
                                    <td style="width: 100px;">HRS</td>
                                    <td style="width: 100px;">0.0</td>
                                    <td style="width: 100px;">0.1</td>
                                    <td style="width: 100px;">0.2</td>
                                    <td style="width: 100px;">0.3</td>
                                    <td style="width: 100px;">0.4</td>
                                    <td style="width: 100px;">0.5</td>
                                    <td style="width: 100px;">0.6</td>
                                    <td style="width: 100px;">0.7</td>
                                    <td style="width: 100px;">0.8</td>
                                    <td style="width: 100px;">0.9</td>
                                    <td style="width: 100px;"></td>
                                </tr>
                                </thead>
                                <tbody>
                                {% if price_matrix|length > 0 %}
                                    {% for key, hours in price_matrix %}
                                        <tr>
                                            <td>{{ key }}</td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.0"
                                                        style="width:80px;" value="{{ hours[0].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.1"
                                                        style="width:80px;" value="{{ hours[1].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.2"
                                                        style="width:80px;" value="{{ hours[2].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.3"
                                                        style="width:80px;" value="{{ hours[3].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.4"
                                                        style="width:80px;" value="{{ hours[4].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.5"
                                                        style="width:80px;" value="{{ hours[5].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.6"
                                                        style="width:80px;" value="{{ hours[6].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.7"
                                                        style="width:80px;" value="{{ hours[7].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.8"
                                                        style="width:80px;" value="{{ hours[8].price }}"></td>
                                            <td>$<input type="number" step="0.01" name="price_row" id="{{ key }}.9"
                                                        style="width:80px;" value="{{ hours[9].price }}"></td>
                                            <td>
                                                <a href="javascript:" class="remove_matrix_row" title="Delete Row"><i
                                                            class="fa fa-trash"></i></a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td>0</td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.0"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.1"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.2"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.3"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.4"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.5"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.6"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.7"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.8"
                                                    style="width:80px;"></td>
                                        <td>$<input type="number" step="0.01" name="price_row" id="0.9"
                                                    style="width:80px;"></td>
                                        <td>
                                            <a href="javascript:" title="Delete Row" class="remove_matrix_row"><i
                                                        class="fa fa-trash"></i></a>
                                        </td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <a href="javascript:" id="new_price_row" class="btn btn-primary">New Row</a>
                            <button id="submitMatrix" class="btn btn-success float-right">Submit Matrix Values
                            </button>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $("#launch_pricing_matrix").click(function () {
                            $.get('/api/price-matrix/list', function (resp) {
                                $.each(resp, function (k, v) {
                                    console.log(v);
                                });
                            });
                        });

                        $("#new_price_row").click(function () {
                            var row_hour = parseInt($('#matrix_table tr:last td:first').html());
                            var new_hour = row_hour + 1;
                            var new_row  = '<tr><td>' + new_hour + '</td>';
                            new_hour     = parseFloat(new_hour);
                            var x        = 0;
                            while (x < 10) {
                                new_row += '<td>$<input type="number" step="0.01" name="price_row" id="' + new_hour.toFixed(1) + '" style="width:80px;"></td>';
                                new_hour = new_hour + .1;
                                x += 1;
                            }
                            new_row += '<td>\
                                             <a href="javascript:" title="Delete Row" class="remove_matrix_row"><i class="fa fa-trash"></i></a>\
                                        </td></tr>';
                            $('#matrix_table tr:last').after(new_row);
                        });

                        $("#submitMatrix").click(function () {
                            var matrix_map = {};
                            $("input[name=price_row]").each(function () {
                                var id         = parseFloat(this.id).toFixed(1);
                                var value      = parseFloat(this.value).toFixed(2);
                                matrix_map[id] = (
                                                     matrix_map[id]
                                                 ) ? value + "[]" : value;
                            });
                            console.log(matrix_map);

                            var request = $.post('/api/price-matrix/update', {
                                matrix: matrix_map
                            }, function (resp) {
                                console.log(resp);
                                alert('Update Submitted');
                            }).error(function (e) {
                                console.log(e);
                            });
                        });

                        $('body').on('click', '.remove_matrix_row', function () {
                            $(this).closest('tr').remove();
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
{% endblock %}