{% extends 'base.html.twig' %}

{% block title %}{{ dealer.name }} | View Dealer | {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ include('file_upload/css.html.twig') }}
{% endblock %}

{% block body %}
    <h1><a href="{{ path('territory_dealer_list', { 'id' : territory.id }) }}">Dealers</a> > View: {{ dealer.name }}</h1>
    <hr>
    <form method="GET">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <a class="btn btn-primary" href="{{ path('territory_dealer_edit', {'id' : territory.id, 'dealer' : dealer.id}) }}">Edit This Dealer</a>
            </div>
            <div class="col-auto mr-2" style="font-size:1.5em;">
                Rank: <span id="dealer_rank_row_{{ dealer.id }}">
                    {{ render(controller('App\\Controller\\TerritoryRep\\DealerController::getRankStars', { 'id' : territory.id, 'dealer' : dealer.id })) }}
                </span>
            </div>
        </div>
    </form>
    <hr>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Info</a></li>
            <li><a href="#tabs-2">Notes</a></li>
            <li><a href="#tabs-3">Orders</a></li>
            <li><a href="#tabs-4">Order Stats</a></li>
            <li><a href="#tabs-5">Leads</a></li>
            <li><a href="#tabs-6">Assigned Postal Codes</a></li>
            <li><a href="#tabs-7">Assigned Pool Yards</a></li>
            <li><a href="#tabs-8">Emails</a></li>
        </ul>
        <div id="tabs-1">
            {% include('territory_rep/dealer/_dealer_info_table.html.twig') %}
        </div>
        <div id="tabs-2" class="dealerNoteListAndForm">
            {% include('territory_rep/dealer/_dealer_notes.html.twig') %}
        </div>
        <div id="tabs-3">
            {% include('territory_rep/dealer/_dealer_orders_table_form.html.twig') %}
        </div>
        <div id="tabs-4">
            {% include('territory_rep/dealer/_dealer_order_stats_table.html.twig') %}
        </div>
        <div id="tabs-5">
            {% set leads = dealer.leads %}
            {% include('territory_rep/dealer/_dealer_lead_table_form.html.twig') %}
        </div>
        <div id="tabs-6">
            {% include('territory_rep/dealer/_dealer_postal_codes_table.html.twig') %}
        </div>
        <div id="tabs-7">
            {% include('territory_rep/dealer/_dealer_pool_yards_table.html.twig') %}
        </div>
        <div id="tabs-8">
            {% include('territory_rep/dealer/_dealer_emails_table.html.twig') %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ include('file_upload/js.html.twig') }}
    <script>
        {# returns a javascript array of any parameters in the url #}
        function getUrlVars() {
            let vars = {}, hash;
            {# this if statement is neccessary incase there are not parameters the fuction does not return the current url because a '?' does not exist #}
            if (window.location.href.indexOf('?') > 0) {
                let hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (let i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars[hash[0]] = hash[1];
                }
            }
            return vars;
        }

        function createAndPushNewUrl(urlParams) {
            {# re-create the entire parameter string #}
            let paramString = '?';
            let firstParam = true;
            for (var key in urlParams) {
                if (!firstParam) {
                    paramString = paramString + '&';
                }
                firstParam = false;
                paramString = paramString + key + '=' + urlParams[key];
            }
            {# re-create the entire url path and replace #}
            const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + paramString;
            window.history.pushState({path: newUrl}, '', newUrl);
        }

        function getParamsFromLink(linkHref) {
            let parseThis = linkHref.slice(linkHref.indexOf('?') + 1);
            return parseStringForParams(parseThis);
        }

        function parseStringForParams(parseThis) {
            let vars = {}, hash;
            let hashes = parseThis.split('&');
            for (let i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        $(document).ready(function () {

            $("#tabs").tabs({
                activate: function (event, ui) {
                    if (history.pushState) {

                        let urlParams = getUrlVars();
                        urlParams.dealerTab = $("#tabs").tabs("option", "active");

                        createAndPushNewUrl(urlParams);
                    }
                },
                {% if app.request.get('dealerTab') is not empty %}active: {{ app.request.get('dealerTab') }},{% endif %}
            });

            $(document).on('click', '.revertDealerAutoResponse', function (event) {
                event.preventDefault();
                if (confirm('Are you sure you want to revert this dealers auto response email to the factory default?')) {
                    $.get('{{ path('territory_dealer_revert_auto_response_email_to_default', { 'id' : territory.id, 'dealer' : dealer.id }) }}', function (data) {
                        window.location.reload();
                    });
                }
            });

        });
    </script>

    <script src="{{ asset('js/dealerRank.js') }}"></script>
    <script src="{{ asset('js/dealerNotes.js') }}"></script>
    <script src="{{ asset('js/dealerPoolOrders.js') }}"></script>
    <script src="{{ asset('js/dealerPoolStats.js') }}"></script>
    <script src="{{ asset('js/dealerLeads.js') }}"></script>
    <script src="{{ asset('js/leadFilters.js') }}"></script>
    <script src="{{ asset('js/leadRank.js') }}"></script>
    <script src="{{ asset('js/dealerPostalCodes.js') }}"></script>
{% endblock %}