{extends file="admin-layout.tpl"}

{block name="no-return-functions"}
    {$admin_current_location = 'configuration'}
{/block}

{block name="page-title"}{intl l='Edit a shipping configuration'}{/block}

{block name="check-resource"}admin.configuration.shipping-configuration{/block}
{block name="check-access"}update{/block}

{block name="main-content"}
<div class="shipping-configuration edit-shipping-configuration">

    <div id="wrapper" class="container">
        {loop name="area-edit" type="area" id=$area_id}
        <ul class="breadcrumb">
            <li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
            <li><a href="{url path='/admin/configuration'}">{intl l="Configuration"}</a></li>
            <li><a href="{url path='/admin/configuration/shipping_configuration'}">{intl l="Shipping configuration"}</a></li>
            <li>{intl l='Editing shipping zone "%name"' name={$NAME}}</li>
        </ul>

        {hook name="shipping-configuration-edit.top" area_id=$area_id}

        <div class="row">
            <div class="col-md-12">
                <div class="general-block-decorator">

                    <div class="col-md-12 title title-without-tabs">
                        {intl l='Shipping zone "%title"' title={$NAME}}
                    </div>

                    <div class="form-container">

                        {include
                            file = "includes/inner-form-toolbar.html"
                            hide_submit_buttons = true
                            hide_flags = true

                            page_url  = {url path="/admin/configuration/shipping_configuration/update/%id" id=$area_id}
                            close_url = {url path="/admin/configuration/shipping_configuration"}
                        }

                        <div class="row">
                            <div class="col-md-4">

                                {form name="thelia.admin.area.modification"}
                                    <form method="POST" action="{url path="/admin/configuration/shipping_configuration/save/%id" id=$area_id}">
                                        {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}

                                        {form_hidden_fields exclude="area_id"}

                                        <input type="hidden" name="area_id" value="{$area_id}">

                                        {render_form_field field="success_url" value={url path="/admin/configuration/shipping_configuration/update/%id" id=$area_id}}
                                        {render_form_field field="area_id" value=$area_id}

                                        {custom_render_form_field field='name'}
                                            <div class="input-group">
                                                <input type="text" {form_field_attributes field="name" value={$NAME}}>
                                                <span class="input-group-btn">
                                                    <button type="submit" class="btn btn-primary" type="button">{intl l='Update'}</button>
                                                </span>
                                            </div><!-- /input-group -->
                                        {/custom_render_form_field}
                                    </form>
                                {/form}

                                {form name="thelia.admin.area.country"}
                                    <form method="POST" action="{url path="/admin/configuration/shipping_configuration/country/add"}">
                                        {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}

                                        {form_hidden_fields exclude="area_id"}

                                        <input type="hidden" name="area_id" value="{$area_id}">

                                        {render_form_field field="success_url" value={url path="/admin/configuration/shipping_configuration/update/%id" id=$area_id}}
                                        {render_form_field field="area_id" value=$area_id}

                                        <div class="form-group">
                                            <input id="countries-filter" class="form-control" type="text" value="" placeholder="{intl l='filter country'}" />
                                        </div><!-- /input-group -->

                                        <select multiple {form_field_attributes field="country_id"}>
                                        </select>

                                        <button type="submit" class="btn btn-default btn-block btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> {intl l="Add selected countries"}</button>
                                    </form>
                                {/form}
                            </div>

                            <div class="col-md-8">
                                {form name="thelia.admin.area.delete.country"}
                                <form method="POST" action="{url path="/admin/configuration/shipping_configuration/countries/remove"}">
                                    {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}

                                    {form_hidden_fields exclude="area_id"}

                                    {render_form_field field="success_url" value={url path="/admin/configuration/shipping_configuration/update/%id" id=$area_id}}
                                    {render_form_field field="area_id" value=$area_id}

                                    <script id="tpl-countries-added" type="text/html">
                                    <%
                                    _.each(items, function(item) {
                                        if (!item.hasStates) { %>
                                            <tr>
                                                <td><%= item.title %></td>
                                                <td class="text-center">
                                                    {form_field field="country_id"}
                                                        <input class="country-selection" type="checkbox" name="{$name}[]" value="<%= item.id %>-0">
                                                    {/form_field}
                                                </td>
                                            </tr>
                                        <% } else { %>
                                            <tr>
                                                <th colspan="2"><%- item.title %></th>
                                            </tr>
                                        <% if (item.allStates) { %>
                                            <tr>
                                                <td> &mdash; <%= i18n.states_all %></td>
                                                <td class="text-center">
                                                    {form_field field="country_id"}
                                                        <input class="country-selection" type="checkbox" name="{$name}[]" value="<%= item.id %>-0">
                                                    {/form_field}
                                                </td>
                                            </tr>
                                        <% }
                                        _.each(item.states, function(state) { %>
                                            <tr>
                                                <td> &mdash; <%= state.title %></td>
                                                <td class="text-center">
                                                    {form_field field="country_id"}
                                                        <input class="country-selection" type="checkbox" name="{$name}[]" value="<%= item.id %>-<%= state.id %>">
                                                    {/form_field}
                                                </td>
                                            </tr>
                                        <% })
                                        }
                                    })
                                    %>
                                    </script>

                                    <div class="table-responsive">
                                        <table class="table table-striped table-condensed">
                                            <thead>
                                                <tr>
                                                    <th>{intl l="Countries assigned to this zone"}</th>
                                                    <th class="text-center">
                                                        {if {count type="country" area=$area_id backend_context=1 visible="*"} > 0}
                                                            {intl l='Select'} <a id="select-all" href="#">{intl l='all'}</a> - <a id="select-none" href="#">{intl l='none'}</a> - <a id="select-reverse" href="#">{intl l='reverse'}</a>
                                                        {/if}
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody id="countries-added">

                                            </tbody>
                                            {hook name="shipping-configuration.edit" location="shipping-configuration-edit" area_id={$area_id} }
                                        </table>

                                        <button type="submit" class="btn btn-default btn-primary pull-right"><span class="glyphicon glyphicon-remove"></span> {intl l="Delete selected countries"}</button>

                                    </div>
                                </form>
                                {/form}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {hook name="shipping-configuration-edit.bottom" area_id=$area_id}

        {/loop}

        {elseloop rel="area-edit"}
        <div class="row">
            <div class="col-md-12">
                {intl l="No area defined with this id"}
            </div>
        </div>
        {/elseloop}
    </div>
</div>

    {* Delete related content confirmation dialog *}

    {capture "delete_country_dialog"}
        <input type="hidden" name="area_id" value="{$area_id}">
        <input type="hidden" name="country_id" id="delete-country-id" value="">

        {hook name="shipping-configuration.country-delete-form" location="shipping_configuration_country_delete_form" }
    {/capture}

    {include
        file = "includes/generic-confirm-dialog.html"

        dialog_id       = "delete_country_dialog"
        dialog_title    = {intl l="Remove country"}
        dialog_message  = {intl l="Do you really want to remove this country from this shipping zone ?"}

        form_action     = {token_url path='/admin/configuration/shipping_configuration/country/remove'}
        form_content    = {$smarty.capture.delete_country_dialog nofilter}
    }
{/block}

{block name="javascript-initialization"}
    {javascripts file='assets/js/bootstrap-select/bootstrap-select.js'}
        <script src="{$asset_url}"></script>
    {/javascripts}

    {javascripts file='assets/js/libs/underscore-min.js'}
        <script src="{$asset_url}"></script>
    {/javascripts}

    <script id="tpl-countries-to-add" type="text/html">
        <%
        _.each(items, function(item) {
            if (!item.hasStates) {
                %><option value="<%= item.id %>-0"><%- item.title %></option><%
            } else {
                %>
                <optgroup label="<%- item.title %>">
                    <% if (item.allStates) { %><option value="<%= item.id %>-0"><%- i18n.states_all %></option><% } %>
                    <%
                    _.each(item.states, function(state) {
                    %><option value="<%= item.id %>-<%= state.id %>"><%- state.title %></option><%
                    }) %>
                </optgroup>
                <%
            }
        })
        %>
    </script>

    <script id="tpl-countries-added-empty" type="text/html">
        <td colspan="2">
            {intl l="This shipping zone does not contains any country."}
        </td>
    </script>

    {$configuration=[]}
    {loop type="country-area" name="country-area" area=$area_id}
        {$configuration[]=['id' => $ID, 'countryId' => $COUNTRY_ID, 'stateId' => $STATE_ID]}
    {/loop}

<script type="text/javascript">
(function($) {

    var configuration = {$configuration|json_encode nofilter};
    var countries = {render action='Thelia\Controller\Admin\CountryController::getDataAction'};
    var $countriesAdded = $("#countries-added");
    var $countriesToAdd = $("#countries-add");
    var $countriesFilter = $("#countries-filter");


    var i18n = {
        'configuration': '{intl l="Configuration"}'
        , 'states_all': '{intl l='All States'}'
        , 'countries': '{intl l="Countries"}'
    };

    {literal}
    var tpl = {
        'countries-to-add': _.template($("#tpl-countries-to-add").html())
        , 'countries-added': _.template($("#tpl-countries-added").html())
        , 'countries-added-empty': _.template($("#tpl-countries-added-empty").html())
    };

    var initialize = function initialize() {
        var addList = [],
                addedList = [];

        // build list of country/state not included
        _.each(countries, function(country) {
            var addStates = []
                , addedStates = []
            ;

            if (country.hasStates) {
                _.each(country.states, function (state) {
                    if (isSelectedCountry(country.id, state.id)) {
                        addedStates.push(state);
                    } else {
                        addStates.push(state);
                    }
                });

                if (addedStates.length > 0 || isSelectedCountry(country.id, 0)) {
                    addedList.push(prepareCountry(country, addedStates, isSelectedCountry(country.id, 0)));
                }

                if (addStates.length > 0) {
                    addList.push(prepareCountry(country, addStates, !isSelectedCountry(country.id, 0)));
                }

            } else {
                if (isSelectedCountry(country.id, 0)) {
                    addedList.push(prepareCountry(country));
                } else {
                    addList.push(prepareCountry(country));
                }
            }
        });

        // sort List
        var sorter = function sorter(item) {
            return item.title;
        };
        addList = _.sortBy(addList, sorter);
        addedList = _.sortBy(addedList, sorter);

        // render list
        $countriesToAdd.html(render('countries-to-add', {items: addList}));
        if (addedList.length === 0) {
            $countriesAdded.html(render('countries-added-empty', {}));
        } else {
            $countriesAdded.html(render('countries-added', {items: addedList}));
        }
    };

    var prepareCountry = function prepareCountry(country, states, allStates) {

        var item = {};

        item.id = country.id;
        item.title = country.title;
        item.hasStates = country.hasStates != 0;
        item.states = (undefined !== states)
            ? _.sortBy(states, function(item) { return item.title; })
            : []
        ;
        item.allStates = (undefined !== allStates) ? allStates : false;

        return item;
    };

    var isSelectedCountry = function isSelectedCountry(countryId, stateId) {
        return _.find(
                configuration,
                function(item) {
                    return countryId === (parseInt(item.countryId) || 0)
                        && stateId === (parseInt(item.stateId) || 0);
                }
        );
    };

    var filterCountries = function filterCountries() {
        var search = $countriesFilter.val().trim().toLowerCase();

        if (search == '') {
            $countriesToAdd.find('option, optgroup').removeClass('hidden');
        } else {
            $countriesToAdd.find('option, optgroup').each(function() {
                var $item = $(this);
                var text = $item.text();

                if (text.toLowerCase().indexOf(search) !== -1) {
                    $item.removeClass('hidden');
                } else {
                    $item.addClass('hidden');
                }
            });
        }
    };

    // Utils
    var render = function render(tplName, obj) {
        var data = $.extend({}, obj, {'i18n': i18n});
        return tpl[tplName](data);
    };

    $(document).ready(function(){

        initialize();

        $countriesFilter.on('keyup', function() {
            filterCountries();
        });

        $(".btn-delete-country").click(function(e){
            $("#delete-country-id").val($(this).data("id"));
        });

        $('#select-all').click(function(ev) {
            $('.country-selection').prop("checked", true);
            ev.preventDefault();
        });

        $('#select-none').click(function(ev) {
            $('.country-selection').prop("checked", false);
            ev.preventDefault();
        });

        $('#select-reverse').click(function(ev) {
            $('.country-selection').each(function() {
                $(this).prop("checked", ! $(this).prop('checked'));
            });
            ev.preventDefault();
        });
        {/literal}
    });
})(jQuery);
</script>
{/block}

{block name="javascript-last-call"}
    {hook name="shipping-configuration.edit-js" location="shipping-configuration-edit-js" area_id={$area_id} }
{/block}
