{% extends '@App/base.html.twig' %}
{% block title %}
    Follow Up Targets
{% endblock %}
{% block body %}
    <div class="alert alert-outline-primary" role="alert">
        <h4 class="alert-heading text-center">
            <span id="follow_ups_today" class="color-green-600">0</span>
            FOLLOW UPS TO COMPLETE TODAY
        </h4>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12">
                        {#{% include 'AppBundle:Reporting:dateForm.html.twig' %}#}
                        <div class="alert alert-success" role="alert">
                            <h3 class="text-center">TOTAL POTENTIAL WORK: <b id="total_potential_work">$</b></h3>
                        </div>
                        <table id="table-export-xls"
                               class="table table-hover table-striped table-bordered text-center dataTable">
                            <thead>
                            <tr>
                                <th>RO NUMBER</th>
                                <th>CUSTOMER</th>
                                <th>DATE SCHEDULED</th>
                                <th>PHONE</th>
                                <th>POTENTIAL WORK</th>
                                <th>ACTION</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% set total_potential_work = 0 %}
                            {% set follow_ups_today = 0 %}
                            {% for follow_up in follow_ups %}
                                {% if follow_up.dateRequested|date("m/d/Y") <= "now"|date("m/d/Y") %}
                                    {% set follow_ups_today = follow_ups_today + 1 %}
                                {% endif %}
                                <tr>
                                    <td>{{ follow_up.repairOrder.number }}</td>
                                    <td>{{ follow_up.repairOrder.primaryCustomer.name }}</td>
                                    <td>{{ follow_up.dateRequested|date("m/d/Y") }}</td>
                                    <td>{{ follow_up.repairOrder.primaryCustomer.phone[0:3] }}
                                        -{{ follow_up.repairOrder.primaryCustomer.phone[3:3] }}
                                        -{{ follow_up.repairOrder.primaryCustomer.phone[6:9] }}</td>
                                    <td>
                                        <div class="btn-group">
                                            <div class="dropdown-menu dropdown-menu-cols dropdown-cols-1">
                                                {% set totalRepair = 0 %}
                                                {% for declined_item in follow_up.repairOrder.declinedWork %}
                                                    <a class="dropdown-item"
                                                       href="javascript:">{{ declined_item.workDescription }}:
                                                        ${{ declined_item.value }}</a>
                                                    {% set totalRepair = totalRepair + declined_item.value %}
                                                    {% set total_potential_work = total_potential_work + declined_item.value %}
                                                {% endfor %}
                                            </div>
                                            <button type="button" class="btn btn-info btn-raised dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <b>${{ totalRepair }}</b>
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-primary btn-raised dropdown-toggle" type="button"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Actions
                                                <div class="ripple-container"></div>
                                                <div class="ripple-container"></div>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a href="javascript:" class="dropdown-item" data-toggle="modal"
                                                   data-target="#modal-roDetails"
                                                   data-id="{{ follow_up.repairOrder.id }}">
                                                    RO DETAILS
                                                </a>
                                                {% if follow_up.repairOrder.video %}
                                                    <a href="{{ client_url }}{{ follow_up.repairOrder.linkHash }}"
                                                       target="_blank" class="dropdown-item">
                                                        CUSTOMER VIEW
                                                    </a>
                                                    {% if follow_up.phase > 1 %}
                                                        {% set phaseTwo = null %}
                                                        {% for followUpPhase in follow_up.followUpTargetPhases %}
                                                            {% if followUpPhase.phase == 2 %}
                                                                {% set phaseTwo = followUpPhase %}
                                                            {% endif %}
                                                        {% endfor %}
                                                        {% if phaseTwo %}
                                                            {% set break = false %}
                                                            {% for interaction in follow_up.repairOrder.clientInteractions if not break %}
                                                                {% if interaction.type == 'video_view' %}
                                                                    {% if interaction.date > phaseTwo.date %}
                                                                        <a href="javascript:"
                                                                           class="dropdown-header btn-success btn">
                                                                            VIDEO VIEWED
                                                                        </a>
                                                                        {% set break = true %}
                                                                    {% endif %}
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endif %}
                                                    {% endif %}
                                                    <a href="javascript:" data-id="{{ follow_up.repairOrder.id }}"
                                                       class="dropdown-item" data-toggle="modal"
                                                       data-target="#modal-resend-video">
                                                        {% if follow_up.phase > 1 %}
                                                            RESEND
                                                        {% else %}
                                                            SEND
                                                        {% endif %}
                                                        VIDEO
                                                    </a>
                                                {% else %}
                                                    <h3 class="dropdown-header btn-danger btn">NO VIDEO</h3>
                                                {% endif %}
                                                <a href="javascript:" data-id="{{ follow_up.repairOrder.id }}"
                                                   class="dropdown-item" data-toggle="modal"
                                                   data-target="#modal-schedule-followup">
                                                    SCHEDULE
                                                </a>
                                                <a href="javascript:" data-id="{{ follow_up.repairOrder.id }}"
                                                   class="dropdown-item" data-toggle="modal"
                                                   data-target="#modal-decline-followup">
                                                    DECLINE
                                                </a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            <script>
                                $('#total_potential_work').text('$' + {{ total_potential_work }});
                                $('#follow_ups_today').text({{ follow_ups_today }});
                            </script>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block modal %}
    {{ include('@App/Default/roDetails.html.twig') }}
    <!--Decline Follow Up-->
    <div class="modal modal-primary fade scale" id="modal-decline-followup" tabindex="-1" role="dialog"
         aria-labelledby="modal-decline-followup" aria-hidden="true">
        <input type="hidden" id="decline-followup-repair-order-id" value=""/>
        <div class="modal-dialog modal-lg" role="document">
            <div class="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">Decline The Follow Up</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <center><h2 class="text-center"><strong>Are You Sure You Want To Decline This Follow
                                    Up?</strong></h2></center>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" id="confirm-followup-return-decline"
                                    class="btn btn-block btn-success btn-block">CONFIRM DECLINE
                            </button>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-block btn-danger btn-block" data-toggle="modal"
                                    data-target="#modal-decline-followup">CANCEL
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--End Decline Follow Up -->
    <!-- Schedule Followup Modal -->
    <div class="modal modal-primary fade scale" id="modal-schedule-followup" tabindex="-1" role="dialog"
         aria-labelledby="modal-schedule-followup" aria-hidden="true">
        <input type="hidden" id="schedule-followup-repair-order-id" value=""/>
        <div class="modal-dialog modal-lg" role="document">
            <div class="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">Schedule A Followup</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <h3 class="btn btn-primary btn-block btn-raised"><b>When would the customer like to return?</b>
                        </h3>
                    </div>
                    <div class="row ">
                        <div class="col-md-12">
                            <div id="scheduleFollowUpRequired"></div>
                            <div class="form-group bmd-form-group">
                                <!--schedule a followup datetime picker -->
                                <div id="forms-start-date" data-controller="forms" data-view="date-picker">
                                    <div id="forms-start-date" data-controller="forms" data-view="date-picker">
                                        <input type="text" id="return_date" class="form-control" name="return_date"
                                               placeholder="Return Date" value="" required/>
                                    </div>
                                </div>
                                <!--end schedule a followup datetime picker -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <button id="schedule-return-submit" class="btn btn-block btn-success btn-block">
                                SCHEDULE RETURN
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Schedule Followup Modal -->
    <div class="modal modal-primary fade scale" id="modal-resend-video" tabindex="-1" role="dialog"
         aria-labelledby="modal-schedule-followup" aria-hidden="true">
        <input type="hidden" id="schedule-followup-repair-order-id" value=""/>
        <div class="modal-dialog modal-lg" role="document">
            <div class="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">Notice</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <h3 class="btn btn-primary btn-block btn-raised">
                            <b>The video has been re-sent to the customer</b>
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        // Show modal to decline return
        $('body').on('show.bs.modal', '#modal-decline-followup', function (e) {
            var repair_order_id = $(e.relatedTarget).data('id');

            $('#decline-followup-repair-order-id').val(repair_order_id);
        });

        // Submit of declining to return
        $('body').on('click', '#confirm-followup-return-decline', function () {
            var repair_order_id = $('#decline-followup-repair-order-id').val();

            $.post('/api/followup/target/decline-return', {
                repair_order_id: repair_order_id
            }, function (resp) {
                location.reload();
            }).error(function (e) {
                console.log(e);
            });
        });

        // Show modal to schedule follow up
        $('body').on('show.bs.modal', '#modal-schedule-followup', function (e) {
            var repair_order_id = $(e.relatedTarget).data('id');
            $('#return_date').bootstrapMaterialDatePicker({
                time       : true,
                clearButton: true,
                minDate    : new Date(),
                shortTime  : true,
                format     : 'MM/DD/YYYY hh:mm A'
            });

            $('#schedule-followup-repair-order-id').val(repair_order_id);
        });

        // Submit of schedule return
        $('body').on('click', '#schedule-return-submit', function () {
            var repair_order_id      = $('#schedule-followup-repair-order-id').val();
            var schedule_return_date = $('#return_date').val();

            if (schedule_return_date.length === 0) {
                var alert = '<div id="scheduleFollowUpRequired" class="alert alert-danger" role="alert"><strong>YOU NEED TO ADD A DATE</strong></div>';
                $('#scheduleFollowUpRequired').replaceWith(alert);
            } else {
                $.post('/api/followup/target/schedule-return', {
                    repair_order_id     : repair_order_id,
                    schedule_return_date: schedule_return_date
                }, function (resp) {
                    console.log(resp);
                    $('#modal-schedule-followup').modal('toggle');
                    $('#modal-complete').modal('toggle');
                    var alert = '<div id="finalValueRequired"></div>';

                    $('#scheduleFollowUpRequired').replaceWith(alert);
                    location.reload();
                }).error(function (e) {
                    console.log(e);
                });
            }
        });

        // Show modal to resend video
        $('body').on('show.bs.modal', '#modal-resend-video', function (e) {
            var repair_order_id = $(e.relatedTarget).data('id');
            var type = 'followup_send_video';

            $.post('/api/client-interaction/new', {
                repair_order_id: repair_order_id,
                type           : type
            }, function (resp) {
                console.log(resp);
            }).error(function (e) {
                console.log(e);
            });

            $.post('/api/repair-order/resend-video', {
                repair_order_id: repair_order_id
            }, function (resp) {
                setTimeout(function () {
                    window.location = '{{ path('iservice_follow_up_targets_dashboard') }}';
                }, 1000);
            }).error(function (e) {
                console.log(e);
            });
        });

        $('#table-export-xls').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
    </script>
{% endblock %}