{% extends '@App/base.html.twig' %}
{% block title %}Preview Dashboard
{% endblock %}
{% block buttonNew %}
    <div class="col-xs-6 col-lg-4">
        <a href="#" id="createNewLead" data-toggle="modal" data-target="#createNewLeadModal"
           class="btn btn-warning btn-raised btn-block btn-lg"
           style="float: right; max-width: 250px;">
            Create New Lead
            <div class="ripple-container"></div>
        </a>
    </div>
    <div class="col-xs-6 col-lg-4">

    </div>
{% 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;
        }

        .legendIcon {
            font-size: 40px;
        }

        .legend {
            background-color: #0b3d89;
            color: #ffffff;
        }

        .dt-buttons {
            position: absolute;
        }

        .complete {
            color: #00c853;
        }

        .pending {
            color: #aa0d00;
        }

        .panel {
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
        }

        .panel-body {
            padding: 15px;
            height: auto !important;
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            color: inherit;
        }

        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            background-color: #71b4da;
        }

        .panel-default {
            border-color: #ddd;
        }

        .estimate-input {
            border: 1px solid;
            margin-bottom: 10px;
        }
    </style>

{% endblock %}
{% block body %}
    <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 colspan="6" class="legend">
                <div class="row text-center">
                    <div class="col-xs-3">
                        <h1 style="padding-top:10px;">LEGEND</h1>
                    </div>
                    <div class="col-xs-2">
                        <i class="large material-icons legendIcon">build</i><br/>Inspection Request
                    </div>
                    <div class="col-xs-2">
                        <i class="large material-icons legendIcon">directions_car</i><br/>Walkaround Request
                    </div>
                    <div class="col-xs-2">
                        <i class="large material-icons legendIcon">attach_money</i><br/>Appraise My Car
                    </div>
                    <div class="col-xs-2">
                        <i class="large material-icons legendIcon">card_membership</i><br/>Test Drive
                    </div>
                </div>
            </th>
        </tr>
        <tr role="row">
            <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;">
                LEAD TYPE
            </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;">
                STATUS
            </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;">
                CREDIT
            </th>
            <th class="text-center sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"
                aria-label="DETAILS: activate to sort column ascending" style="width: 413px;">
                LEAD 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;">
                SALES AGENT
            </th>
        </tr>
        </thead>
        <tbody>
        {% for salesLead in salesLeads %}
            <tr role="row"
                style=""
                class="odd">
                <td class="nopad">
                    <span data-toggle="tooltip" data-placement="top" title="{{ salesLead.customer.phone }}">
                    {{ salesLead.customer.name }}
                    </span>
                </td>
                <td class="nopad">
                    {% set leadStatus = 0 %}
                    {% for leadRequest in salesLead.leadRequest %}
                        {% if (leadRequest.type == 'video') and (leadRequest.subtype == 'inspection') %}
                            <span data-toggle="tooltip" data-placement="top" title="Inspection Request">
                                    <i class="large material-icons legendIcon {% if leadRequest.dateCompleted %}{% set leadStatus = leadStatus+1 %}complete{% else %}pending{% endif %}">build</i>
                                </span>
                        {% elseif (leadRequest.type == 'video') and (leadRequest.subtype == 'walkaround') %}
                            <span data-toggle="tooltip" data-placement="top" title="Walkaround Request">
                                <i class="large material-icons legendIcon {% if leadRequest.dateCompleted %}{% set leadStatus = leadStatus+1 %}complete{% else %}pending{% endif %}">360</i>
                            </span>
                        {% elseif leadRequest.type == 'carAppraisal' %}
                            <span data-toggle="tooltip" data-placement="top" title="Appraise My Car">
                                <a href="#" data-toggle="modal" data-target="#valueTradeModal"
                                   data-id="{{ leadRequest.id }}" class="valueTradeAction">
                                    <i class="large material-icons legendIcon {% if leadRequest.dateCompleted %}{% set leadStatus = leadStatus+1 %}complete{% else %}pending{% endif %}">attach_money</i>
                                </a>
                            </span>
                        {% elseif leadRequest.type == 'testDrive' %}
                            <span data-toggle="tooltip" data-placement="top" title="Test Drive">
                                <i class="large material-icons legendIcon {% if leadRequest.dateCompleted %}{% set leadStatus = leadStatus+1 %}complete{% else %}pending{% endif %}">directions_car</i>
                            </span>
                        {% elseif leadRequest.type == 'finance' %}
                            <span data-toggle="tooltip" data-placement="top" title="Finance">
                                <i class="large material-icons legendIcon {% if leadRequest.dateCompleted %}{% set leadStatus = leadStatus+1 %}complete{% else %}pending{% endif %}">account_balance</i>
                            </span>
                        {% endif %}
                    {% endfor %}
                </td>
                <td class="nopad ">
                    {% if leadStatus == salesLead.leadRequest|length %}COMPLETE{% else %}PENDING{% endif %}
                </td>
                <td>
                    <button class="btn btn-block btn-primary creditPull" data-toggle="modal"
                            data-target="#financeDetailsModal"
                            data-sales_lead_id="{{ salesLead.id }}">
                        Access Credit
                    </button>
                </td>
                <td>
                    <button class="btn btn-block btn-primary launchLeadDetails" data-toggle="modal"
                            data-target="#leadDetailsModal"
                            data-dealId="{{ salesLead.id }}">
                        Details
                    </button>
                </td>
                <td class="nopad">
                    <button class="btn btn-block {% if salesLead.salesAgent %}btn-primary{% else %}btn-danger{% endif %}"
                            id="delegateAgentGrid" data-toggle="modal" data-target="#delegateAgentModal"
                            data-dealId="{{ salesLead.id }}">
                        {% if salesLead.salesAgent %}{{ salesLead.salesAgent.firstName }}{% else %}Not Assigned{% endif %}
                    </button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block modal %}
    {{ include('@Preview/Default/delegateAgentModal.html.twig') }}
    {{ include('@Preview/Default/leadDetailsModal.html.twig') }}
    {{ include('@Preview/Default/financeDetailsModal.html.twig') }}
    {{ include('@Preview/Default/valueTradeModal.html.twig') }}
    {{ include('@Preview/Default/newLeadModal.html.twig') }}
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $('#dashboard_table tbody').on('mouseover', 'tr', function () {
            $('[data-toggle="tooltip"]').tooltip({
                trigger: 'hover',
                html   : true
            });
        });
        $(document).ready(function () {

            // On credit pull click
            $('body').on('click', '.creditPull', function () {
                $('#creditPullCustomer').text('');
                $('#creditPullAgent').text('');
                $('#creditPullLastDate').text('');
                //Complete Logic for this after transunion $('#creditPullFico').text('');
                $('#CreditPullFirstName').val('');
                $('#CreditPullMiddleName').val('');
                $('#CreditPullLastName').val('');
                $('#CreditPullAddress').val('');
                $('#CreditPullCity').val('');
                $('#CreditPullState').val('');
                $('#CreditPullZip').val('');
                $('#CreditPullDOB').val('');

                var sales_lead_id = $(this).data('sales_lead_id');
                $.get('/api/sales/lead/details/' + sales_lead_id, {}, function (resp) {
                    var requestTimeline = '';
                    $('#creditPullCustomer').text(resp.customer.name);
                    $('#delegateAgentSalesLeadId').val(resp.id);
                    if (resp.salesAgent) {
                        $('#creditPullAgent').text(resp.salesAgent.firstName + ' ' + resp.salesAgent.lastName);
                    }
                    $(resp.leadRequests).each(function (index, element) {
                        console.log(element);
                        if (element.type == 'finance') {
                            console.log(element.data.firstName);
                            $('#CreditPullFirstName').val(element.data.firstName);
                            $('#CreditPullMiddleName').val(element.data.middleName);
                            $('#CreditPullLastName').val(element.data.lastName);
                            $('#CreditPullAddress').val(element.data.address1);
                            $('#CreditPullCity').val(element.data.city);
                            $('#CreditPullState').val(element.data.state);
                            $('#CreditPullZip').val(element.data.postalCode);
                            if(element.data.dob){
                                var birthDay = element.data.dob.split("/");
                                var dobField = birthDay[2] + '-' + birthDay[0] + '-' + birthDay[1];
                                $('#CreditPullDOB').val(dobField);
                            }

                        }
                        //console.log(element);
                    });
                    //console.log(resp);
                }).error(function (e) {
                    console.log(e);
                });
            });

            // On team delegation click
            $('body').on('click', '#delegateAgentGrid', function () {
                $('#delegateAgentSalesLeadId').val('');
                $('#delegateAgentSalesLeadId').val($(this).data('dealid'));
            });

            // On value trade click
            $('body').on('click', '.valueTradeAction', function () {
                //reset values
                $('#tradeValueId').val('');
                $('#valueTradeYear').text('');
                $('#valueTradeMake').text('');
                $('#valueTradeModel').text('');
                $('#valueTradeMiles').text('');
                $('#valueTradeEstimate').val('');
                $('#tradeValueSubmitButton').html('');

                $('#tradeValueId').val($(this).data('id'));
                var request_id = $(this).data('id');
                $.get('/api/sales/request/details/' + request_id, {}, function (resp) {
                    $('#valueTradeYear').text(resp.data.year);
                    $('#valueTradeMake').text(resp.data.make);
                    $('#valueTradeModel').text(resp.data.model);
                    $('#valueTradeMiles').text(resp.data.miles);
                    $('#valueTradeEstimate').val(resp.data.estimate);
                    if (resp.data.estimate) {
                        var tradeButton = '<button type="button" id="tradeValueSubmit" class="btn btn-block btn-danger">Save New Estimated Value</button>';
                    } else {
                        var tradeButton = '<button type="button" id="tradeValueSubmit" class="btn btn-block btn-success">Save Estimated Value</button>';
                    }
                    $('#tradeValueSubmitButton').html(tradeButton);

                    console.log(resp);
                }).error(function (e) {
                    console.log(e);
                });
            });

            // On new lead click
            $('body').on('click', '#createNewLead', function () {
                //reset values
                $('#newLeadCustomerName').val('');
                $('#newLeadCustomerPhone').val('');
                $('#newLeadCustomerEmail').val('');
            });
        });
    </script>
{% endblock %}