{% extends '@App/base.html.twig' %}
{% block title %}Technician Dashboard
{% endblock %}
{% block stylesheet %}
    <style>
        #Dashboard {
            table-layout: fixed;
            width: 100% !important;
        }
        #Dashboard td,
        #Dashboard th{
            width: auto !important;
            white-space: normal;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-md-12 text-right">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <button class="btn btn-raised btn-default filterState" data-state="">ALL</button>
                <button class="btn btn-raised filterState" data-state="NOT STARTED">NOT STARTED</button>
                <button class="btn btn-raised btn-warning filterState" data-state="IN PROGRESS">IN PROGRESS</button>
                <button class="btn btn-raised btn-danger filterState" data-state="REVIEW">REVIEW</button>
                <button class="btn btn-raised btn-danger filterState" data-state="SEND">SEND</button>
                <button class="btn btn-raised btn-warning filterState" data-state="SENT">SENT</button>
                <button class="btn btn-raised btn-warning filterState" data-state="VIEWED">VIEWED</button>
                <button class="btn btn-raised btn-success filterState" data-state="COMPLETE">COMPLETE</button>
                <button class="btn btn-raised btn-success filterState" data-state="COMPLETE">ACTION NEEDED</button>
                <button class="btn btn-raised btn-success filterState" data-state="COMPLETE">PENDING</button>
                <button class="btn btn-raised btn-success filterState" data-state="COMPLETE">COMPLETE</button>
            </div>
        </div>
    </div>
    <table id="Dashboard" class="table table-hover table-striped table-bordered text-center dataTable"
           role="grid" aria-describedby="datatable-example-2_info">
        <thead>
        <tr role="row">
            <!--Why width= && style=width:?-->
            <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;">
                MPI
            </th>
            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                aria-label="VIDEO: activate to sort column ascending" style="width: 216px;">
                VIDEO
            </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;">
                QUOTE
            </th>
        </tr>
        </thead>
    </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') }}
    {{ include('@App/Default/watchVideoModal.html.twig') }}
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        var Dashboard = $('#Dashboard').DataTable({
            'rowCallback': function(row, data, index){
                //Set Starting Column
                var x = 1;
                //Set End Column
                while(x <= 3){
                    if(data[x].includes("NOT STARTED") || data[x].includes("AT PARTS")){
                        $(row).find('td:eq(' + x + ')').css('background-color', '#ffffff');
                    }
                    if(data[x].includes("IN PROGRESS") || data[x].includes("SENT") || data[x].includes("VIEWED")){
                        $(row).find('td:eq(' + x + ')').css('background-color', '#ffd700');
                    }
                    if(data[x].includes("REVIEW") || data[x].includes("SEND")){
                        $(row).find('td:eq(' + x + ')').css('background-color', '#d32f2f');
                    }
                    if(data[x].includes("COMPLETE")){
                        $(row).find('td:eq(' + x + ')').css('background-color', '#388e3c');
                    }
                    x++;
                }
            }
        });

        function getRepairOrders() {
            $.ajax({
                url: "/api/iservice/advisor", success: function (result) {
                    result.forEach((repairOrder) => {
                        //console.log(repairOrder);

                        var dataId = repairOrder.REPAIRORDER.ID;
                        var dataNumber = repairOrder.REPAIRORDER.NUMBER;
                        var dataLinkHash = repairOrder.REPAIRORDER.LINK_HASH;
                        var dataCustomerName = repairOrder.REPAIRORDER.CUSTOMER.NAME;

                        //RO NUMBER
                        var RO_NUMBER = '<span data-toggle="tooltip" data-placement="top" title="" data-original-title="Advisor:' + repairOrder.REPAIRORDER.ADVISOR.LAST_NAME + '">';
                        RO_NUMBER = RO_NUMBER + '<span data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Technician:' + repairOrder.REPAIRORDER.TECHNICIAN.LAST_NAME + '">';
                        RO_NUMBER = RO_NUMBER + repairOrder.REPAIRORDER.NUMBER;
                        RO_NUMBER = RO_NUMBER + '</span></span>';

                        //MPI
                        var button_label = 'NOT STARTED';
                        var button_class = 'btn btn-block ';
                        var disabled = 'disabled';
                        var loggedTime = '';

                        if(repairOrder.MPI.length > 0){
                            var lastAction = repairOrder.MPI.pop();
                            switch (lastAction.type) {
                                case 'mpi_technician_in_progress':
                                    button_label = "IN PROGRESS";
                                    button_class = 'btn-warning';
                                    disabled = 'disabled';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'mpi_technician_submitted':
                                    button_label = "REVIEW";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'mpi_advisor_review':
                                    button_label = "SEND";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'mpi_customer_sent':
                                    button_label = "SENT";
                                    button_class = 'btn-warning';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'mpi_customer_view':
                                    button_label = "COMPLETE";
                                    button_class = 'btn-success';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                            }
                        }
                        var MPIDataAttributes = 'data-target="#mpi_details_modal" ';
                        MPIDataAttributes = MPIDataAttributes + 'data-toggle="modal" ';
                        MPIDataAttributes = MPIDataAttributes + 'data-id="' + dataId + '" ';
                        MPIDataAttributes = MPIDataAttributes + 'data-number="' + dataNumber + '" ';
                        MPIDataAttributes = MPIDataAttributes + 'data-ro_hash="' + dataLinkHash + '" ';
                        MPIDataAttributes = MPIDataAttributes + 'data-ro_number="' + dataNumber + '" ';
                        MPIDataAttributes = MPIDataAttributes + 'data-customer_name="' + dataCustomerName + '" ';
                        MPIDataAttributes = MPIDataAttributes + 'data-ro_id="' + dataId + '" ';

                        var MPI = '<button class="btn btn-block ' + button_class + '" ' +  MPIDataAttributes + disabled + '>' +
                            '<span data-toggle="tooltip" data-placement="top" title="" data-original-title="' + loggedTime + '">' + button_label + '</span></button>';

                        //VIDEO
                        var button_label = 'NOT STARTED';
                        var button_class = 'btn btn-block ';
                        var disabled = 'disabled';
                        var loggedTime = '';

                        if(repairOrder.VIDEO.length > 0){
                            var lastAction = repairOrder.VIDEO.pop();
                            switch (lastAction.type) {
                                case 'video_technician_in_progress':
                                    button_label = "IN PROGRESS";
                                    button_class = 'btn-warning';
                                    disabled = 'disabled';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'video_technician_submitted':
                                    button_label = "REVIEW";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'video_advisor_review':
                                    button_label = "SEND";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'video_customer_sent':
                                    button_label = "SENT";
                                    button_class = 'btn-warning';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'video_customer_view':
                                    button_label = "COMPLETE";
                                    button_class = 'btn-success';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                            }
                        }

                        var VIDEODataAttributes = 'data-id="' + dataId + '" ';
                        VIDEODataAttributes = VIDEODataAttributes + 'data-toggle="modal" ';
                        VIDEODataAttributes = VIDEODataAttributes + 'data-open="ROVideo" ';
                        VIDEODataAttributes = VIDEODataAttributes + 'data-target="#modal-watch-video-ro" ';
                        if(repairOrder.REPAIRORDER.VIDEO){
                            VIDEODataAttributes = VIDEODataAttributes + 'data-video="' + repairOrder.REPAIRORDER.VIDEO + '" ';
                        }

                        var VIDEO = '<button class="btn btn-block ' + button_class + '" '+ VIDEODataAttributes + disabled + '>' +
                            '<span data-toggle="tooltip" data-placement="top" title="" data-original-title="' + loggedTime + '">' + button_label + '</span></button>';

                        //CAQ
                        var button_label = 'NOT STARTED';
                        var button_class = 'btn btn-block ';
                        var disabled = 'disabled';
                        var loggedTime = '';

                        if(repairOrder.CAQ.length > 0){
                            var lastAction = repairOrder.CAQ.pop();
                            switch (lastAction.type) {
                                case 'quote_technician_recommendations':
                                    button_label = "AT PARTS";
                                    button_class = 'btn-warning';
                                    disabled = 'disabled';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_parts_save':
                                    button_label = "IN PROGRESS";
                                    button_class = 'btn-warning';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_advisor_save':
                                    button_label = "IN PROGRESS";
                                    button_class = 'btn-warning';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_parts_submit':
                                    button_label = "REVIEW";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_advisor_submit':
                                    button_label = "REVIEW";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_advisor_reviewed':
                                    button_label = "SEND";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_customer_sent':
                                    button_label = "SENT";
                                    button_class = 'btn-warning';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_customer_view':
                                    button_label = "VIEWED";
                                    button_class = 'btn-warning';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_customer_approvals':
                                    button_label = "REVIEW";
                                    button_class = 'btn-danger';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                                case 'quote_advisor_approvals_review':
                                    button_label = "COMPLETE";
                                    button_class = 'btn-success';
                                    disabled = '';
                                    loggedTime = lastAction.date;
                                    break;
                            }
                        }

                        var CAQ = '<button class="btn btn-block ' + button_class + '" ' + disabled + '>' +
                            '<span data-toggle="tooltip" data-placement="top" title="" data-original-title="' + loggedTime + '">' + button_label + '</span></button>';

                        Dashboard.row.add([
                            RO_NUMBER,
                            MPI,
                            VIDEO,
                            CAQ
                        ]).draw(false);

                    });
                }
            });
        }
        getRepairOrders();
        setInterval( function () {
            Dashboard.clear().draw();
            getRepairOrders();
        }, 10000000 );
        $('#Dashboard tbody').on('mouseover', 'tr', function () {
            $('[data-toggle="tooltip"]').tooltip({
                trigger: 'hover',
                html   : true
            });
        });
        $('body').on('click', '.filterState', function () {
            Dashboard.search( $(this).data('state') ).draw();
        });
    </script>
{% endblock %}