{$_me = $wa->user()}

{$_active_funnel = reset($funnels)}
{if !empty($funnel)}{$_active_funnel = $funnel}{/if}
{$_active_stage = reset($_active_funnel.stages)}

{function name="_renderStage"}
    {if empty($_stage)}
        {$_stage = [
            "id" => "%id%",
            "name" => "%name%",
            "color" => "%color%"
        ]}
    {/if}

    <li class="{if $_active_stage.id == $_stage.id}selected{/if}" xmlns="http://www.w3.org/1999/html">
        <a href="javascript:void(0);" data-id="{$_stage.id}">
            {if !empty($_stage.color)}
            <i class="icon16 funnel-state svg-icon" data-color="{$_stage.color}"></i>
            {/if}
            <b><i>{$_stage.name|escape}</i></b>
        </a>
    </li>
{/function}

{capture assign="_stage_template_html"}{_renderStage _stage=[]}{/capture}

<div class="dialog width600px {if !empty($open_deals)}height400px{else}height200px{/if} crm-create-order-dialog" id="js-crm-create-order-dialog">
    <div class="dialog-background"></div>
    <form method="post" action="{$wa_backend_url}crm/?module=deal&action=create">
        <div class="dialog-window">
            <div class="dialog-content">

                {if !empty($open_deals)}
                    <div class="dialog-content-indent">
                        <h1>[`Deal in CRM`]</h1>

                        <div class="js-deals-options-wrapper">
                            <ul class="c-deals-options-list menu-v" data-name="[`Create`]">
                                <li class="is-active">
                                    <div class="c-layout fixed">
                                        <div class="c-column" style="width: 20px;">
                                            <input id="c-add-new-deal-field" type="radio" name="data[deal_id]" value="new" checked>
                                        </div>
                                        <div class="c-column">
                                            <label for="c-add-new-deal-field">[`Create new deal`]</label>

                                            <div class="line" style="margin: 8px 0 4px -8px;">
                                                <div class="c-funnels-list js-funnels-list">
                                                    <ul class="menu-h dropdown">
                                                        <li>
                                                            <a class="inline-link c-visible-link js-visible-link" href="javascript:void(0);">
                                                                <span class="js-text">
                                                                    {if !empty($_active_funnel.color)}
                                                                        <i class="icon16 funnel-state svg-icon" data-color="{$_active_funnel.color}"></i>
                                                                    {/if}
                                                                    <b><i class="js-name">{$_active_funnel.name|escape}</i></b>
                                                                </span>&nbsp;<i class="icon10 darr"></i>
                                                            </a>
                                                            <ul class="menu-v with-icons">
                                                                {strip}
                                                                    {foreach $funnels as $_funnel}
                                                                        <li class="{if $_active_funnel.id == $_funnel.id}selected{/if}">
                                                                            <a href="javascript:void(0);" data-id="{$_funnel.id}">
                                                                                {if !empty($_funnel.color)}
                                                                                    <i class="icon16 funnel-state svg-icon" data-color="{$_funnel.color}"></i>
                                                                                {/if}
                                                                                <b><i>{$_funnel.name|escape}</i></b>
                                                                            </a>
                                                                        </li>
                                                                    {/foreach}
                                                                {/strip}
                                                            </ul>
                                                            <input class="js-field" name="data[funnel_id]" type="hidden" value="{$_active_funnel.id}">
                                                        </li>
                                                    </ul>
                                                </div>

                                                <div class="c-funnel-stages-list js-funnel-stages-list">
                                                    <ul class="menu-h dropdown">
                                                        <li>
                                                            <a class="inline-link c-visible-link js-visible-link" href="javascript:void(0);">
                                                                <span class="js-text">
                                                                    {if !empty($_active_stage.color)}
                                                                        <i class="icon16 funnel-state svg-icon" data-color="{$_active_stage.color}"></i>
                                                                    {/if}
                                                                    <b><i class="js-name">{$_active_stage.name|escape}</i></b>
                                                                </span>&nbsp;<i class="icon10 darr"></i>
                                                            </a>
                                                            <ul class="menu-v with-icons">
                                                                {strip}{foreach $_active_funnel.stages as $_id => $_stage}{_renderStage _stage=$_stage}{/foreach}{/strip}
                                                            </ul>
                                                            <input class="js-field" name="data[stage_id]" type="hidden" value="{$_active_stage.id}">
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <div class="line">
                                                <div class="c-contact-wrapper js-contact-wrapper">
                                                    <div class="c-contact js-user">
                                                        <span class="gray">[`Owner:`]</span>
                                                        {$_userpic = $_me->getPhotoUrl($_me.id, null, 16)}
                                                        {if !empty($_userpic)}
                                                            <i class="icon16 userpic20" style="background-image: url({$_userpic});"></i>
                                                        {/if}
                                                        <span class="c-name">{$_me.name|escape}</span>
                                                        <a class="inline-link js-show-combobox" href="javascript:void(0);"><b><i>[`Assign another user`]</i></b></a>
                                                    </div>
                                                    <div class="c-combobox">
                                                        <span class="gray">[`Owner:`]</span>
                                                        <input class="js-autocomplete" type="text" value="" placeholder="[`Choose a user`]">
                                                        <a class="inline-link js-hide-combobox" href="javascript:void(0);"><b><i>[`cancel`]</i></b></a>
                                                    </div>
                                                    <input class="js-field" type="hidden" name="data[user_contact_id]" value="{$_me.id}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="c-deals-options-list is-overflow menu-v" data-name="[`Bind`]">
                                {foreach $open_deals as $_deal}
                                    <li>
                                        <div class="c-layout fixed">
                                            <div class="c-column" style="width: 20px;">
                                                <input type="radio" name="data[deal_id]" value="{$_deal.id}" id="c-radio-for-deal-{$_deal.id}">
                                            </div>
                                            <div class="c-column">
                                                <label for="c-radio-for-deal-{$_deal.id}">
                                                    {if !empty($funnels[$_deal.funnel_id])}
                                                        {$_funnel = $funnels[$_deal.funnel_id]}
                                                        {if !empty($_funnel.stages[$_deal.stage_id])}
                                                            {$_stage = $_funnel.stages[$_deal.stage_id]}
                                                        {/if}
                                                        <i class="icon16 funnel-state svg-icon" data-color="{$_funnel.color|default:"inherit"|escape}" title="{if $_deal.status_id == "WON"}[`Won`] / {elseif $_deal.status_id == "LOST"}[`Lost`] / {/if}{$_funnel.name|escape} / {$_stage.name|default:""|escape}"></i>
                                                    {/if}

                                                    {$_deal.name|escape}

                                                    {if !empty($_deal.amount)}
                                                        <span class="c-amount">&mdash; {$_deal.amount|wa_format_amount_currency:$_deal.currency_id}</span>
                                                    {/if}
                                                </label>
                                            </div>
                                        </div>
                                    </li>
                                {/foreach}
                            </ul>
                        </div>
                    </div>

                {else}
                    <div class="dialog-content-indent">
                        <h1>[`Create deal in CRM`]</h1>

                        <div class="field">
                            <div class="name">[`Funnel:`]</div>
                            <div class="value">
                                <div class="c-funnels-list js-funnels-list">
                                    <ul class="menu-h dropdown">
                                        <li>
                                            <a class="inline-link c-visible-link js-visible-link" href="javascript:void(0);">
                                                <span class="js-text">
                                                    {if !empty($_active_funnel.color)}
                                                        <i class="icon16 funnel-state svg-icon" data-color="{$_active_funnel.color}"></i>
                                                    {/if}
                                                    <b><i class="js-name">{$_active_funnel.name|escape}</i></b>
                                                </span>&nbsp;<i class="icon10 darr"></i>
                                            </a>
                                            <ul class="menu-v with-icons">
                                                {strip}
                                                    {foreach $funnels as $_funnel}
                                                        <li class="{if $_active_funnel.id == $_funnel.id}selected{/if}">
                                                            <a href="javascript:void(0);" data-id="{$_funnel.id}">
                                                                {if !empty($_funnel.color)}
                                                                    <i class="icon16 funnel-state svg-icon" data-color="{$_funnel.color}"></i>
                                                                {/if}
                                                                <b><i>{$_funnel.name|escape}</i></b>
                                                            </a>
                                                        </li>
                                                    {/foreach}
                                                {/strip}
                                            </ul>
                                            <input class="js-field" name="data[funnel_id]" type="hidden" value="{$_active_funnel.id}">
                                        </li>
                                    </ul>
                                </div>
                                <div class="c-funnel-stages-list js-funnel-stages-list">
                                    <ul class="menu-h dropdown">
                                        <li>
                                            <a class="inline-link c-visible-link js-visible-link" href="javascript:void(0);">
                                                <span class="js-text">
                                                    {if !empty($_active_stage.color)}
                                                        <i class="icon16 funnel-state svg-icon" data-color="{$_active_stage.color}"></i>
                                                    {/if}
                                                    <b><i class="js-name">{$_active_stage.name|escape}</i></b>
                                                </span>&nbsp;<i class="icon10 darr"></i>
                                            </a>
                                            <ul class="menu-v with-icons">
                                                {strip}{foreach $_active_funnel.stages as $_id => $_stage}{_renderStage _stage=$_stage}{/foreach}{/strip}
                                            </ul>
                                            <input class="js-field" name="data[stage_id]" type="hidden" value="{$_active_stage.id}">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="field">
                            <div class="name">[`Owner:`]</div>
                            <div class="value">
                                <div class="c-contact-wrapper js-contact-wrapper">
                                    <div class="c-contact js-user">
                                        {$_userpic = $_me->getPhotoUrl($_me.id, null, 16)}
                                        {if !empty($_userpic)}
                                            <i class="icon16 userpic20" style="background-image: url({$_userpic});"></i>
                                        {/if}
                                        <span class="c-name">{$_me.name|escape}</span>
                                        <a class="inline-link js-show-combobox" href="javascript:void(0);"><b><i>[`Assign another user`]</i></b></a>
                                    </div>
                                    <div class="c-combobox">
                                        <input class="js-autocomplete" type="text" value="" placeholder="[`Choose a user`]">
                                        <a class="inline-link js-hide-combobox" href="javascript:void(0);"><b><i>[`cancel`]</i></b></a>
                                    </div>
                                    <input class="js-field" type="hidden" name="data[user_contact_id]" value="{$_me.id}">
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}
            </div>
            <div class="dialog-buttons">
                <div class="dialog-buttons-gradient">
                    {$wa->csrf()}
                    <input class="button green js-submit-button" type="submit" value="[`Create`]"> <i class="icon16 loading" style="display:none;"></i>
                    [`or`] <a class="cancel" href="javascript:void(0);">[`cancel`]</a>
                </div>
            </div>
        </div>
        <input type="hidden" name="order_id" value="{$order_id}">
    </form>
    <script>
        ( function($) {

            // DOM
            var $dialog = $("#js-crm-create-order-dialog");

            // VARS
            var funnels = {$funnels|json_encode},
                stage_template_html = {$_stage_template_html|json_encode},
                app_url = {$wa_backend_url|json_encode} + "crm/";

            // DYNAMIC VARS
            var is_locked = false;

            //

            initShowDialog();

            initFunnelsAndStates($dialog);

            initAutoComplete($dialog);

            initOptionsList($dialog);

            renderSVG($dialog);

            //

            function initShowDialog() {
                var $form = $dialog.find("form");

                $dialog.waDialog({
                    onClose: function() {
                        $dialog.remove();
                    }
                });

                $form.on("submit", function(event) {
                    event.preventDefault();
                    onSubmit();
                });

                function onSubmit() {
                    var $loading = $dialog.find('.loading').show();

                    if (!is_locked) {
                        is_locked = true;

                        var href = $form.attr('action'),
                            data = $form.serializeArray();

                        $.post(href, data, function(response) {
                            if (response.status === 'ok') {
                                $dialog.trigger('close');
                                location.reload();
                            }
                        }, "json").always( function() {
                            $loading.hide();
                            is_locked = false;
                        });
                    }
                }
            }

            function initFunnelsAndStates($outerWrapper) {

                //
                initChangeFunnel($outerWrapper);
                //
                initChangeStage($outerWrapper);

                function initChangeFunnel($outerWrapper) {
                    var $wrapper = $outerWrapper.find(".js-funnels-list");
                    if (!$wrapper.length) { return false; }

                    var $visibleLink = $wrapper.find(".js-visible-link"),
                        $field = $wrapper.find(".js-field"),
                        $menu = $wrapper.find(".menu-v");

                    $menu.on("click", "a", function () {
                        var $link = $(this);
                        $visibleLink.find(".js-text").html($link.html());

                        $menu.find(".selected").removeClass("selected");
                        $link.closest("li").addClass("selected");

                        $menu.hide();
                        setTimeout(function () {
                            $menu.removeAttr("style");
                        }, 200);

                        var id = $link.data("id");
                        $field.val(id).trigger("change");

                        loadStages(id);
                    });

                    function loadStages(id) {
                        var funnel = ( funnels[id] || false );
                        if (funnel) {
                            $wrapper.trigger("changeFunnel", funnel);
                        }
                    }
                }

                function initChangeStage($outerWrapper) {
                    var $funnelWrapper = $outerWrapper.find(".js-funnels-list");
                    if (!$funnelWrapper.length) { return false; }

                    var $wrapper = $outerWrapper.find(".js-funnel-stages-list"),
                        $visibleLink = $wrapper.find(".js-visible-link"),
                        $field = $wrapper.find(".js-field"),
                        $menu = $wrapper.find(".menu-v");

                    $menu.on("click", "a", function () {
                        var $link = $(this);
                        $visibleLink.find(".js-text").html($link.html());

                        $menu.find(".selected").removeClass("selected");
                        $link.closest("li").addClass("selected");

                        $menu.hide();
                        setTimeout(function () {
                            $menu.removeAttr("style");
                        }, 200);

                        var id = $link.data("id");
                        $field.val(id);
                    });

                    $funnelWrapper.on("changeFunnel", function (event, funnel) {
                        renderStages(funnel.stages);
                    });

                    function renderStages(stages) {
                        $menu.html("");

                        $.each(stages, function (index, stage) {
                            var stage_template = stage_template_html;
                            var name = $("<div />").text(stage.name).html();

                            stage_template = stage_template
                                .replace("%id%", stage.id)
                                .replace("%color%", stage.color)
                                .replace("%name%", name);

                            var $stage = $(stage_template);

                            $menu.append($stage);
                        });

                        renderSVG($wrapper);

                        $menu.find("li:first-child a").trigger("click");
                    }
                }
            }

            function initAutoComplete($outerWrapper) {
                var $wrapper = $outerWrapper.find(".js-contact-wrapper"),
                    $idField = $wrapper.find(".js-field");

                $wrapper.on("click", ".js-show-combobox", function(event) {
                    event.stopPropagation();
                    showToggle(true);
                });

                $wrapper.on("click", ".js-hide-combobox", function(event) {
                    event.stopPropagation();
                    showToggle(false);
                });

                initAutocomplete();

                function showToggle( show ) {
                    var active_class = "is-shown";
                    if (show) {
                        $wrapper.addClass(active_class);
                    } else {
                        $wrapper.removeClass(active_class);
                    }
                }

                function initAutocomplete() {
                    var $autocomplete = $wrapper.find(".js-autocomplete");

                    $autocomplete
                        .autocomplete({
                            appendTo: $wrapper,
                            source: app_url + "?module=autocomplete&type=user&ui=1.3",
                            minLength: 0,
                            html: true,
                            focus: function() {
                                return false;
                            },
                            select: function( event, ui ) {
                                setContact(ui.item);
                                showToggle(false);
                                $autocomplete.val("");
                                return false;
                            }
                        });

                    $autocomplete.on("focus", function(){
                        $autocomplete.autocomplete("search", $autocomplete.val() );
                    });

//                        .data("ui-autocomplete")._renderItem = function( ul, item ) {
//                            return $("<li />").addClass("ui-menu-item-html").append("<div>"+ item.value + "</div>").appendTo( ul );
//                        };
                }

                function setContact(user) {
                    var $user = $wrapper.find(".js-user");
                    if (user["photo_url"]) {
                        $user.find(".icon16").css("background-image", "url(" + user["photo_url"] + ")");
                    }
                    $user.find(".c-name").text(user.name);
                    $idField.val(user.id);
                }
            }

            function initOptionsList($outerWrapper) {
                var $wrapper = $outerWrapper.find(".js-deals-options-wrapper"),
                    $submitButton = $outerWrapper.find(".js-submit-button"),
                    active_class = "is-active";

                if (!$wrapper.length) { return false; }

                $wrapper.on("change", "input", function() {
                    var $input = $(this),
                        $li = $input.closest("li"),
                        $list = $li.closest(".c-deals-options-list");

                    var button_text = $list.data("name");
                    if (button_text) {
                        $submitButton.val(button_text);
                    }

                    var is_active = ( $input.attr("checked") === "checked" );
                    if (is_active) {
                        $wrapper.find("li." + active_class).removeClass(active_class);
                        $li.addClass(active_class);
                    }
                });
            }

            function renderSVG($wrapper) {
                if (!$wrapper) {
                    return false;
                }

                if (typeof d3 !== "object") {
                    $.getScript("{$wa_url}wa-content/js/d3/d3.min.js", function() {
                        renderSVG($wrapper);
                    });
                    return false;
                }

                var SVGIcon = ( function($, d3) {

                    SVGIcon = function(options) {
                        var that = this;

                        // DOM
                        that.$icon = options["$icon"];
                        that.svg = d3.select(that.$icon[0]).append("svg");

                        // VARS
                        that.type = that.$icon.data("type");

                        // DYNAMIC VARS
                        that.icon_w = that.$icon.outerWidth();
                        that.icon_h = that.$icon.outerHeight();

                        // INIT
                        that.initClass();
                    };

                    SVGIcon.prototype.initClass = function() {
                        var that = this;

                        that.svg.attr("width", that.icon_w)
                            .attr("height", that.icon_h);

                        if (that.$icon.hasClass("funnel-state")) {
                            that.renderFunnelState();
                        }

                        // save backdoor
                        that.$icon.data("icon", that);
                    };

                    SVGIcon.prototype.renderFunnelState = function() {
                        var that = this,
                            color = ( that.$icon.data("color") || "#aaa" );

                        var svg = that.svg,
                            group = svg.append("g");

                        group.append("polygon")
                        // .attr("points", "4,16 0,16 3.9,7.9 0,0 4,0 8.7,7.9")
                            .attr("points", getX(4) + "," + getY(16) + " " + getX(0) + "," + getY(16) + " " + getX(3.9) + "," + getY(7.9) + " " + getX(0) + "," + getY(0) + " " + getX(4) + "," + getY(0) + " " + getX(8.7) + "," + getY(7.9))
                            .style("opacity", .33)
                            .style("fill", color);

                        group.append("polygon")
                        // .attr("points", "8,16 4,16 7.9,7.9 4,0 8,0 12.6,7.9")
                            .attr("points", getX(8) + "," + getY(16) + " " + getX(4) + "," + getY(16) + " " + getX(7.9) + "," + getY(7.9) + " " + getX(4) + "," + getY(0) + " " + getX(8) + "," + getY(0) + " " + getX(12.6) + "," + getY(7.9))
                            .style("opacity", .66)
                            .style("fill", color);

                        group.append("polygon")
                        // .attr("points", "11.9,16 7.9,16 11.8,7.9 7.9,0 11.9,0 16,7.9")
                            .attr("points", getX(11.9) + "," + getY(16) + " " + getX(7.9) + "," + getY(16) + " " + getX(11.8) + "," + getY(7.9) + " " + getX(7.9) + "," + getY(0) + " " + getX(11.9) + "," + getY(0) + " " + getX(16) + "," + getY(7.9))
                            .style("fill", color);

                        function getX(x) { return x/16 * that.icon_w; }
                        function getY(y) { return y/16 * that.icon_h; }
                    };

                    SVGIcon.prototype.refresh = function() {
                        var that = this;

                        that.icon_w = that.$icon.outerWidth();
                        that.icon_h = that.$icon.outerHeight();

                        that.svg
                            .attr("width", that.icon_w)
                            .attr("height", that.icon_h);
                    };

                    return SVGIcon;

                })(jQuery, d3);

                if (typeof $wrapper === "string") {
                    $wrapper = $($wrapper);
                }

                if ($wrapper.length) {
                    $wrapper.find(".svg-icon").each( function() {
                        var $icon = $(this),
                            icon = $icon.data("icon");

                        if (icon) {
                            icon.refresh();
                        } else if (SVGIcon) {
                            new SVGIcon({
                                $icon: $icon
                            });
                        }
                    });
                }
            }

        })(jQuery);
    </script>
</div>