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

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

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

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

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

    <div id="wrapper" class="container">

        {loop type="module" id="$delivery_module_id" active="*" name="module.name" backend_context="1" order="code"}

        <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_zones'}">{intl l="Shipping configuration"}</a></li>
            <li>{intl l='Editing shipping configuration for module "%name"' name="{$CODE} - {$TITLE}"}</li>
        </ul>

        {hook name="shipping-zones-edit.top" delivery_module_id=$delivery_module_id}

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

                    <div class="title title-without-tabs">
                        <div class="row">
                            <div class="col-md-10">
                                {intl l='Shipping configuration of delivery module "%title"' title={$TITLE}}
                            </div>
                            <div class="col-md-2 text-right">
                                <a href="{url path='/admin/configuration/shipping_zones'}" class="btn btn-sm btn-default">{intl l='Close'} <span class="glyphicon glyphicon-remove"></span></a>
                            </div>
                        </div>
                    </div>


                    <div class="form-container clearfix">
                        <div class="col-md-4">
                            {ifloop rel="area.module.not_associated"}
                            {form name="thelia.shipping_zone_area"}
                            <form method="POST" action="{url path="/admin/configuration/shipping_zones/area/add"}">
                                {form_hidden_fields}

                                {form_field field='success_url'}
                                    <input type="hidden" name="{$name}" value="{url path="/admin/configuration/shipping_zones/update/%id" id=$delivery_module_id}" /> {* the url the user is redirected to on login success *}
                                {/form_field}

                                {form_field field='shipping_zone_id'}
                                <input type="hidden" name="{$name}" value="{$delivery_module_id}" />
                                {/form_field}

                                {form_field field='area_id'}
                                <label class="control-label" for="{$label_attr.for|default:null}">{$label}</label>
                                <div class="input-group">
                                    <select name="{$name}" id="{$label_attr.for|default:null}" data-toggle="selectpicker">
                                        {loop name="area.module.not_associated" type="area" without_zone=$delivery_module_id}
                                        <option value="{$ID}">{$NAME}</option>
                                        {/loop}
                                    </select>
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> {intl l="Add"}</button>
                                    </span>
                                </div>
                                {/form_field}
                            </form>
                            {/form}
                            {/ifloop}
                            {elseloop rel="area.module.not_associated"}
                                <div class="alert alert-info">
                                    {intl l="This delivery module handles all shipping zones."}
                                </div>
                            {/elseloop}
                        </div>

                        <div class="col-md-8">
                            <div class="table-responsive">
                                <table class="table table-striped table-condensed">
                                    <thead>
                                        <tr>
                                            <th>{intl l="Shipping zone"}</th>
                                            <th class="text-center">{intl l="Actions"}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {loop type="area" name="area.module.associated" with_zone=$delivery_module_id}
                                        <tr>
                                            <td>{$NAME}</td>
                                            <td class="text-center">
                                                <a class="btn btn-default btn-xs delete-zone-area" title="{intl l='Delete this zone'}"  href="#delete_zone_dialog" data-id="{$ID}" data-toggle="modal">
                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </a>
                                            </td>
                                        </tr>
                                        {/loop}
                                        {elseloop rel="area.module.associated"}
                                            <tr>
                                                <td colspan="2">
                                                    <div class="text-center">
                                                        {intl l="There are no shipping zones attached to this module."}
                                                    </div>
                                                </td>
                                            </tr>
                                        {/elseloop}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        {hook name="shipping-zones-edit.bottom" delivery_module_id=$delivery_module_id}

        {/loop}
    </div>
</div>

    {* Delete related content confirmation dialog *}

    {capture "delete_zone_dialog"}
        {form name="thelia.shopping_zone_remove_area"}
            {form_hidden_fields}

            {form_field field='success_url'}
                <input type="hidden" name="{$name}" value="{url path="/admin/configuration/shipping_zones/update/%id" id=$delivery_module_id}" /> {* the url the user is redirected to on login success *}
            {/form_field}

            {form_field field='shipping_zone_id'}
                <input type="hidden" name="{$name}" value="{$delivery_module_id}" />
            {/form_field}

            {form_field field='area_id'}
                <input type="hidden" name="{$name}" value="" id="shipping-zone-id-delete" />
            {/form_field}
            {hook name="zone.delete-form" location="zone_delete_form" module_id={$delivery_module_id} }
        {/form}
    {/capture}

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

        dialog_id       = "delete_zone_dialog"
        dialog_title    = {intl l="Remove zone"}
        dialog_message  = {intl l="Do you really want to remove this zone ?"}

        form_action     = {url path='/admin/configuration/shipping_zones/area/remove'}
        form_content    = {$smarty.capture.delete_zone_dialog nofilter}
    }
{/block}

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

    <script>
        $(document).ready(function(){
            $(".delete-zone-area").click(function(e){
                $("#shipping-zone-id-delete").val($(this).data('id'));
            });
        });
    </script>
{/block}

{block name="javascript-last-call"}
    {hook name="shipping-zones.edit-js" location="shipping-zones-edit-js" module_id={$delivery_module_id} }
{/block}