{% extends '@App/base.html.twig' %}
{% block title %}Dashboard
{% endblock %}
{% block stylesheet %}
    <style>
        #advisor_dashboard_list select {
            margin-left: 0.5em;
            display: inline-block;
            width: auto;
            min-width: 120px;
            padding: 5px 10px;
            outline: none !important;
            background: #f5f5f5;
            border-color: #e0e0e0;
            border: 1px solid #e0e0e0;
            margin-right: 10px;
        }
    </style>
{% endblock %}
{% block body %}
    <script>
        function msToTime (duration) {
            var milliseconds = parseInt((
                duration % 1000
            ) / 100);
            var seconds      = parseInt((
                duration / 1000
            ) % 60);
            var minutes      = parseInt((
                duration / (
                    1000 * 60
                )
            ) % 60);
            var hours        = parseInt((
                duration / (
                    1000 * 60 * 60
                )
            ) % 24);
            var days         = parseInt((
                duration / (
                    1000 * 60 * 60 * 24
                )
            ) % 365);

            if (days > 0) {
                return days + " D - " + hours + " H - " + minutes + " M";
            }

            if (hours > 0) {
                return hours + " H -" + minutes + " M";
            } else {
                return minutes + " M";
            }
        }

        function elapsedTime (time, id) {
            var timerElement        = '#timer-' + id;
            var elapsedTimerElement = '#elapsedTimer-' + id;
            var now                 = new Date();
            var creation            = new Date(time);
            var elapsedTime         = (
                now.getTime() - creation.getTime()
            );
            var elapsedTimerTime    = (
                (
                    elapsedTime / 1000
                ) / 60
            );
            elapsedTime             = msToTime(elapsedTime);
            var timer               = '<span id="timer-' + id + '" data-time="' + time + '">' + elapsedTime + '</span>';
            $(timerElement).replaceWith(timer);
            $(elapsedTimerElement).attr('data-elapsed-time', elapsedTimerTime);
            return elapsedTimerTime;
        }

        function dealerTimers (phase) {
            var timeLimit = 0;
            if (phase == 1) {
                timeLimit = {{ settings.phase1 }};
            }
            if (phase == 2) {
                timeLimit = {{ settings.phase2 }};
            }
            if (phase == 3) {
                timeLimit = {{ settings.phase3 }};
            }
            return timeLimit;
        }
    </script>

    {% if advisor_name %}
        <h3 class="m-b-3">
            RO List for {{ advisor_name }}
        </h3>
    {% endif %}
    <table id="dashboard_table" class="table table-hover table-striped table-bordered text-center dataTable"
           role="grid" aria-describedby="datatable-example-2_info">
        <thead>
        <tr role="row">
            <th width="10%" class="text-center sorting" tabindex="0" rowspan="1"
                colspan="1" role="columnheader"
                style="width: 107px;">
                RO NUMBER
            </th>
            <th width="10%" class="text-center sorting" tabindex="0" rowspan="1"
                colspan="1" role="columnheader" aria-label="CUSTOMER: activate to sort column ascending"
                style="width: 107px;">
                CUSTOMER
            </th>
            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                aria-label="PHASE: activate to sort column ascending" style="width: 216px;">
                PHASE
            </th>
            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                aria-label="TIMER: activate to sort column ascending" style="width: 181px;">
                TIMER
            </th>
            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                aria-label="QUOTE: activate to sort column ascending" style="width: 181px;">
                CREATE QUOTE
            </th>
            {% if ipay != false %}
                <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                    aria-label="QUOTE: activate to sort column ascending" style="width: 181px;">
                    PAY NOW
                </th>
            {% endif %}
            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                aria-label="DETAILS: activate to sort column ascending" style="width: 413px;">
                DETAILS
            </th>
            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                aria-label="ADMIN: activate to sort column ascending" style="width: 228px;">
                ADMIN
            </th>
            <th style="display: none;">Advisor</th>
            <th style="display: none;">Technician</th>
        </tr>
        </thead>
        <tfoot class="hidden">
        <tr>
            <th width="10%" class="text-center" rowspan="1" colspan="1">RO NUMBER</th>
            <th width="10%" class="text-center" rowspan="1" colspan="1">CUSTOMER</th>
            <th class="text-center" rowspan="1" colspan="1">PHASE</th>
            <th class="text-center" rowspan="1" colspan="1">TIMER</th>
            <th class="text-center" rowspan="1" colspan="1">CREATE QUOTE</th>
            {% if ipay != false %}
                    <th class="text-center" rowspan="1" colspan="1">PAY NOW</th>
            {% endif %}
            <th class="text-center" rowspan="1" colspan="1">DETAILS</th>
            <th class="text-center" rowspan="1" colspan="1">ADMIN</th>
        </tr>
        </tfoot>
        <tbody>
        {% for repairOrder in repairOrders %}
            <tr role="row"
                style="background: {{ repairOrder.primaryCustomer.phoneValidated == false ? 'red' : '' }};"
                class="odd">
                <td class="p-l-2 p-y-0 p-r-0 text-left">
                <span class="" data-toggle="tooltip" data-placement="top" title=""
                      data-original-title="Advisor: {{ repairOrder.advisor.firstName }}">
                    <span class="" data-toggle="tooltip" data-placement="bottom" title=""
                          data-original-title="Technician: {{ repairOrder.technician.firstName }}">
                        {{ repairOrder.number }}
                    </span>
                {% set waiverApproved = false %}
                    {% set waiverAcknowledged = false %}
                    {% for interaction in repairOrder.clientInteractions %}
                        {% if interaction.type == 'caq_customer_waiver_approved' %}
                            {% set waiverApproved = true %}
                        {% endif %}
                        {% if interaction.type == 'caq_customer_waiver_acknowledged' %}
                            {% set waiverAcknowledged = true %}
                        {% endif %}
                    {% endfor %}
                    {% if waiverApproved == true %}
                        <span class="tag tag-sm tag-rounded tag-success"
                              style="top: -5px; position: relative; height: 10px; width: 10px;"
                              title="CAQ Waiver Approved"> </span>
                        {% elseif waiverAcknowledged == true %}
                        <span class="tag tag-sm tag-rounded tag-warning"
                              style="top: -5px; position: relative; height: 10px; width: 10px;"
                              title="CAQ Waiver Acknowledged"> </span>
                    {% endif %}</span>
                </td>
                <td class="nopad">
                    <span class="" data-toggle="tooltip" data-placement="top" title=""
                          data-original-title="{{ repairOrder.primaryCustomer.phone[0:3] }}-{{ repairOrder.primaryCustomer.phone[3:3] }}-{{ repairOrder.primaryCustomer.phone[6:9] }}">
                    {{ repairOrder.primaryCustomer.name|title }}
                    </span>
                </td>
                <td class="nopad">
                    <h2>
                        {% if mpi and repairOrder.mpi|length > 0 %}
                            <a href="javascript:" data-toggle="modal" data-target="#mpi_details_modal"
                               data-ro_hash="{{ repairOrder.linkHash }}" data-ro_number="{{ repairOrder.number }}"
                               data-customer_name="{{ repairOrder.primaryCustomer.name }}"
                               data-ro_id="{{ repairOrder.id }}">
                                <i class="material-icons color-blue-a700">description</i>
                            </a>
                        {% endif %}
                        <span class="" data-toggle="tooltip" data-placement="top" title=""
                              data-original-title="Status of the Technician recording the video">
                        <i class="material-icons
                        {% if repairOrder.phase == 1 %}
                        color-blue-a700
                        {% elseif repairOrder.phase > 1 %}
                        color-green-a700
                        {% endif %}
                        ">videocam</i>
                    </span>
                        <span class="" data-toggle="tooltip" data-placement="top" title=""
                              data-original-title="Status of the Customer viewing the video">
                        <i class="material-icons
                        {% if repairOrder.phase < 2 %}
                        color-grey-a700
                        {% elseif repairOrder.phase == 2 %}
                        color-blue-a700
                        {% elseif repairOrder.phase > 2 %}
                        color-green-a700
                        {% endif %}
                        ">remove_red_eye</i>
                    </span>
                        <a href="javascript:" data-toggle="modal" data-target="#modal-sms"
                           data-number="{{ repairOrder.primaryCustomer.phone }}"
                           data-name="{{ repairOrder.primaryCustomer.name }}" data-ro-number="{{ repairOrder.number }}">
                            <i class="material-icons
                            {% if repairOrder.phase < 3 %}
                            color-grey-a700
                            {% elseif repairOrder.phase == 3 %}
                            color-blue-a700
                            {% elseif repairOrder.phase > 3 %}
                            color-green-a700
                            {% endif %}
                            ">textsms</i>
                        </a>
                    </h2>
                </td>
                <td class="nopad " id="timerBox-{{ repairOrder.id }}">
                    <span id="elapsedTimer-{{ repairOrder.id }}" data-elapsed-time=""></span>
                    {% if repairOrder.phase < 4 %}
                        {% set repairDate = repairOrder.date|date("m/d/Y H:i:s") %}
                        {% if repairOrder.phase == 2 %}
                            {% set break = false %}
                            {% for phase in repairOrder.repairOrderPhases if not break %}
                                {% if phase.phase == 1 %}
                                    {% set repairDate = phase.date|date("m/d/Y H:i:s") %}
                                    {% set break = true %}
                                {% endif %}
                            {% endfor %}
                        {% elseif repairOrder.phase == 3 %}
                            {% set break = false %}
                            {% for phase in repairOrder.repairOrderPhases if not break %}
                                {% if phase.phase == 2 %}
                                    {% set repairDate = phase.date|date("m/d/Y H:i:s") %}
                                    {% set break = true %}
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                        <h5 style="font-weight: bold;">
                            <span id="timer-{{ repairOrder.id }}"
                                  data-time="{{ repairDate }}"></span>
                            <script>
                                $(document).ready(function () {
                                    var repairDate = '{{ repairDate }}';
                                    setInterval(function () {
                                        var timePassed  = elapsedTime(repairDate, {{ repairOrder.id }});
                                        var classColor  = '#timerBox-{{ repairOrder.id }}';
                                        var dealerLimit = dealerTimers({{ repairOrder.phase }});
                                        if (timePassed > dealerLimit) {
                                            $(classColor).addClass('bg-red-a700');
                                        }
                                    }, 1000);
                                });
                            </script>
                        </h5>
                    {% endif %}
                </td>
                <td>
                    {% if repairOrder.repairOrderQuote|length > 0 %}
                        {% set firstItem = repairOrder.repairOrderQuote[0] %}
                        {% set customerCompleted = false %}
                        {% set completedClass = 'btn-warning' %}
                        {% set customerViewed = false %}
                        {% set advisorSent = false %}

                        {% if firstItem.sent %}
                            {% set advisorSent = true %}
                        {% endif %}

                        {% for interaction in repairOrder.clientInteractions %}
                            {% if interaction.type == 'quote_view' %}
                                {% set customerViewed = true %}
                            {% endif %}

                            {% if interaction.type == 'update_quote' %}
                                {% set customerCompleted = true %}
                            {% endif %}
                        {% endfor %}

                        {% if firstItem.completedViewed %}
                            {% set completedClass = 'btn-success' %}
                        {% endif %}

                        {% if customerCompleted %}
                            <button class="btn {{ completedClass }} btn-raised btn-block"
                                    data-id="{{ repairOrder.id }}"
                                    data-number="{{ repairOrder.number }}" data-toggle="modal"
                                    data-target="#quote_progress_modal">
                                COMPLETE
                            </button>
                        {% elseif customerViewed %}
                            <button class="btn btn-success btn-raised btn-block" data-id="{{ repairOrder.id }}"
                                    data-number="{{ repairOrder.number }}" data-toggle="modal"
                                    data-target="#quote_progress_modal"
                                    style="background: linear-gradient(90deg, #71c370 66.6%, #FFF 66.6%); color: #000; width: 100%; border: 2px solid #71C370;">
                                VIEWED
                            </button>
                        {% elseif advisorSent %}
                            <button class="btn btn-success btn-raised btn-block" data-id="{{ repairOrder.id }}"
                                    data-number="{{ repairOrder.number }}" data-toggle="modal"
                                    data-target="#quote_progress_modal"
                                    style="background: linear-gradient(90deg, #71c370 33.3%, #FFF 33.3%); color: #000; width: 100%; border: 2px solid #71C370;">
                                SENT
                            </button>
                        {% else %}
                            {# shouldn't get here, but show something just in case #}
                            <a href="javascript:" data-id="{{ repairOrder.id }}" data-number="{{ repairOrder.number }}"
                               class="btn btn-raised btn-primary btn-outline"
                               data-toggle="modal" data-target="#modal-create-quote">
                                <i class="material-icons">note_add</i>
                            </a>
                        {% endif %}
                    {% else %}
                        <a href="javascript:" data-id="{{ repairOrder.id }}" data-number="{{ repairOrder.number }}"
                           class="btn btn-raised btn-primary btn-outline"
                           data-toggle="modal" data-target="#modal-create-quote">
                            <i class="material-icons">note_add</i>
                        </a>
                    {% endif %}
                </td>
                {% if ipay != false %}
                    <td>
                        {% if repairOrder.paymentStatus.status == null %}
                            <a href="javascript:"
                               data-id="{{ repairOrder.id }}"
                               data-number="{{ repairOrder.number }}"
                               class="btn btn-success btn-outline"
                               data-toggle="modal"
                               data-target="#modal-create-pmt">
                                <i class="material-icons">attach_money</i>
                            </a>
                        {% elseif repairOrder.paymentStatus.status in ['Sent', 'Viewed'] %}
                            <a href="javascript:"
                               class="text-uppercase btn btn-success btn-raised btn-block"
                               data-id="{{ repairOrder.id }}"
                               data-number="{{ repairOrder.number }}"
                               data-status="{{ repairOrder.paymentStatus.status }}"
                               data-total_payments="{{ repairOrder.repairOrderPayments | length }}"
                               data-timestamp="{{ repairOrder.paymentStatus.at }}"
                               data-payment_id="{{ repairOrder.paymentStatus.payment_id }}"
                               data-amount="{{ repairOrder.paymentStatus.amount }}"
                               data-toggle="modal"
                               data-target="#modal-pmt-progress"
                               style="background: linear-gradient(90deg, #71c370 {{ repairOrder.paymentStatus.status == 'Sent'? '33.3' : '66.6' }}%, #FFF {{ repairOrder.paymentStatus.status == 'Sent'? '33.3' : '66.6' }}%);
                                       color: #000;
                                       width: 100%;
                                       border: 2px solid #71C370;">
                                {{ repairOrder.paymentStatus.status }}
                            </a>
                        {% elseif repairOrder.paymentStatus.status == 'Paid Viewed' %}
                            <a href="javascript:"
                               class="text-uppercase btn btn-success btn-raised btn-block"
                               data-id="{{ repairOrder.id }}"
                               data-number="{{ repairOrder.number }}"
                               data-status="{{ repairOrder.paymentStatus.status }}"
                               data-timestamp="{{ repairOrder.paymentStatus.at }}"
                               data-payment_id="{{ repairOrder.paymentStatus.payment_id }}"
                               data-toggle="modal"
                               data-target="#modal-paid-pmt"
                               style="background: linear-gradient(90deg, #71c370 100%, #FFF 100%);
                                   color: #000;
                                   width: 100%;
                                   border: 2px solid #71C370;">
                                Paid
                            </a>
                        {% elseif repairOrder.paymentStatus.status == 'Paid' %}
                            <a href="javascript:"
                               class="text-uppercase btn btn-warning btn-raised btn-block"
                               data-id="{{ repairOrder.id }}"
                               data-number="{{ repairOrder.number }}"
                               data-status="{{ repairOrder.paymentStatus.status }}"
                               data-timestamp="{{ repairOrder.paymentStatus.at }}"
                               data-payment_id="{{ repairOrder.paymentStatus.payment_id }}"
                               data-toggle="modal"
                               data-target="#modal-paid-pmt">
                                Paid
                            </a>
                        {% endif %}
                    </td>
                {% endif %}
                <td class="nopad">
                    <div class="dropdown">
                        {% if repairOrder.primaryCustomer.phoneValidated == false %}
                            <p><strong style="color:white">NO VALID PHONE NUMBER</strong></p>
                        {% endif %}
                        <button class="btn btn-primary btn-raised dropdown-toggle" type="button" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            DETAILS
                            <div class="ripple-container"></div>
                        </button>
                        <div class="dropdown-menu">
                            <a href="javascript:" class="dropdown-item" data-toggle="modal" data-target="#modal-sms"
                               data-number="{{ repairOrder.primaryCustomer.phone }}"
                               data-name="{{ repairOrder.primaryCustomer.name }}"
                               data-ro-number="{{ repairOrder.number }}">
                                Text Messaging
                            </a>
                            <a href="javascript:" data-id="{{ repairOrder.id }}" class="dropdown-item"
                               data-toggle="modal"
                               data-target="#modal-roDetails">
                                RO Details
                                <div class="ripple-container"></div>
                            </a>
                            <a href="javascript:" data-id="{{ repairOrder.id }}" class="dropdown-item"
                               data-toggle="modal"
                               data-target="#modal-claim-ro">
                                CLAIMS
                                <div class="ripple-container"></div>
                            </a>
                            {% if repairOrder.video %}
                                <a target="_blank" href="{{ clientUrl ~ repairOrder.linkHash }}" id=""
                                   class="dropdown-item">
                                    Customer View
                                </a>

                                <a href="javascript:" data-id="{{ repairOrder.id }}" class="dropdown-item"
                                   data-toggle="modal"
                                   data-open="ROVideo"
                                   data-target="#modal-roDetails">
                                    Watch Video
                                    <div class="ripple-container"></div>
                                </a>
                            {% endif %}
                            {% if is_delete_ro_role %}
                                <a href="javascript:" class="dropdown-item btn btn-danger delete_repair_order"
                                   data-id="{{ repairOrder.id }}">
                                    DELETE JOB
                                </a>
                            {% endif %}
                        </div>
                        <span class="" data-toggle="tooltip" data-placement="top" title=""
                              data-original-title="Total times the customer has viewed the video">
                        <span class="m-r-10 tag tag-raised tag-rounded tag-outline-primary tag-lg">
                            {% set video_views = 0 %}
                            {% for interaction in repairOrder.clientInteractions %}
                                {% if interaction.type == 'video_view' %}
                                    {% set video_views = video_views + 1 %}
                                {% endif %}
                            {% endfor %}
                            {{ video_views }}
                        </span>
                    </span>
                    </div>
                </td>
                <td class="nopad">
                    <a href="javascript:" data-id="{{ repairOrder.id }}" class="btn btn-raised btn-primary btn-outline"
                       data-toggle="modal" data-target="#modal-close-ro">
                        CLOSE RO
                    </a>
                </td>
                <td style="display: none;">
                    {{ repairOrder.advisor }}
                </td>
                <td style="display: none;">
                    {{ repairOrder.technician }}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block modal %}
    {{ include('@App/Default/roDetails.html.twig') }}
    {{ include('@App/Default/closeRepairOrderModal.html.twig') }}
    {{ include('@App/Default/scheduleFollowUpModal.html.twig') }}
    {{ include('@App/Default/completeMessage.html.twig') }}
    {{ include('@App/Default/createQuote.html.twig') }}
    {{ include('@App/Default/payments/createPmtRequest.html.twig') }}
    {{ include('@App/Default/payments/createPmtProgress.html.twig') }}
    {{ include('@App/Default/payments/roPaymentsList.html.twig') }}
    {{ include('@App/Default/payments/paidPmtDetails.html.twig') }}
    {{ include('@App/Default/payments/refundPmtRequest.html.twig') }}
    {{ include('@App/Default/createQuoteProgress.html.twig') }}
    {{ include('@App/Default/claimModal.html.twig') }}
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $('body').on('click', '.delete_repair_order', function () {
            var repair_order_id = $(this).data('id');

            if (confirm('Are you sure you want to delete this repair order?')) {
                $.post('/api/repair-order/delete', {
                    repair_order_id: repair_order_id
                }, function (resp) {
                    window.location.reload();
                }).error(function (e) {
                    console.log(e);
                });
            }
        });

        // collapse show data-open element
        $('#modal-roDetails').on('shown.bs.modal', function (e) {
            if (e.relatedTarget.dataset.open !== undefined) {
                $('#' + e.relatedTarget.dataset.open).collapse('show');
            }
        });

        {% if show_advisor_dropdown %}
        $(function () {
            var advisorDropDown = '<label id="advisor_dashboard_list">Advisor:\
                    <select id="advisor_select" aria-controls="dashboard_table">\
                        <option value>Select an Advisor</option>';
            {% for advisor in advisors %}
            advisorDropDown += '<option>{{ advisor }}</option>';
            {% endfor %}
            advisorDropDown += '</select></label>';
            $("#dashboard_table_wrapper .dataTables_filter").prepend(advisorDropDown);
        });

        $('body').on('change', '#advisor_select', function () {
            var selectedValue = $(this).val();

            $('#dashboard_table').DataTable().search(selectedValue).draw();
        });
        {% endif %}

        $('#dashboard_table tbody').on('mouseover', 'tr', function () {
            $('[data-toggle="tooltip"]').tooltip({
                trigger: 'hover',
                html   : true
            });
        });
    </script>
{% endblock %}