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

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

{block name="page-title"}{intl l='Countries'}{/block}

{block name="check-resource"}admin.configuration.country{/block}
{block name="check-access"}view{/block}

{block name="main-content"}
    <div class="countries">

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

            <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/countries'}">{intl l="Countries"}</a></li>
            </ul>

            {hook name="countries.top" location="countries_top" }

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

                    <form action="" method="post">

                        <div class="general-block-decorator">

                            {ifloop rel="country-not-in-any-zone"}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="alert alert-warning">
                                            {intl l='<strong>Warning</strong>, some of your countries are not included in any shipping zone:'}
                                            {loop name="country-not-in-any-zone" type="country" with_area=false}
                                                {$TITLE}{if $LOOP_COUNT < $LOOP_TOTAL},{else}.{/if}
                                            {/loop}
                                        </div>
                                    </div>
                                </div>
                            {/ifloop}

                            <div class="table-responsive">
                                <table class="table table-striped table-condensed">
                                    <caption class="clearfix">
                                        {intl l='Countries'}
                                        {include file='renderer/buttons.html' btn_group=false buttons=[
                                            [
                                                'type' => 'create',
                                                'class' => 'action-btn',
                                                'title' => {intl l='admin.configuration.country'},
                                                'href' => '#add_country_dialog',
                                                'auth' => ['resource' => 'admin.configuration.country'],
                                                'data' => [
                                                    'toggle' => 'modal'
                                                ]
                                            ]
                                        ]}
                                    </caption>
                                    <thead>
                                        <tr>
                                            <th>{intl  l="ID"}</th>
                                            <th>{intl l="Name"}</th>
                                            <th>{intl l="Default"}</th>
                                            <th>{intl l="N° ISO"}</th>
                                            <th>{intl l="ISO Code"}</th>
                                            <th>{intl l="Shipping zone"}</th>
                                            <th>{intl l="Visible"}</th>

                                            {hook name="countries.table-header" location="countries_table_header" }

                                            <th class="actions">{intl l='Actions'}</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {loop name="countries" type="country" backend_context="1" lang=$lang_id order=$order|default:null visible="*"}
                                            <tr>
                                                <td>{$ID}</td>
                                                <td><a href="{url path="/admin/configuration/country/update/%id" id=$ID}">{$TITLE}</a></td>
                                                <td>
                                                    <div class="make-switch switch-small switch-radio change-default-toggle" data-id="{$ID}" data-on="success" data-off="danger" data-on-label="<i class='glyphicon glyphicon-ok'></i>" data-off-label="<i class='glyphicon glyphicon-remove'></i>">
                                                        <input class="change-default-toggle" type="radio" name="by_default" value="{$ID}" {if $IS_DEFAULT}checked="checked"{/if}/>
                                                    </div>
                                                </td>
                                                <td>{$ISOCODE}</td>
                                                <td>{$ISOALPHA3}</td>
                                                <td>
                                                    {loop type="area" name="country-area" country={$ID} group_by_country_area=1}
                                                        <a href="{url path="/admin/configuration/shipping_configuration/update/%id" id=$ID}">{$NAME}</a>{if $LOOP_COUNT < $LOOP_TOTAL},{/if}
                                                    {/loop}
                                                    {elseloop rel="country-area"}
                                                        <span class="text-warning"><i class="glyphicon glyphicon-warning-sign"></i> {intl l='None'}</span>
                                                    {/elseloop}
                                                </td>
                                                <td class="text-center">
                                                    {loop type="auth" name="can_change" role="ADMIN" resource="admin.country" access="UPDATE"}
                                                        <div class="make-switch switch-small visibleToggle" data-id="{$ID}"  data-on="success" data-off="danger" data-on-label="<i class='glyphicon glyphicon-ok'></i>" data-off-label="<i class='glyphicon glyphicon-remove'></i>">
                                                            <input type="checkbox" class="visibleToggle" {if $VISIBLE == 1}checked="checked"{/if}>
                                                        </div>
                                                    {/loop}

                                                    {elseloop rel="can_change"}
                                                        <div class="make-switch switch-small" data-on="success" data-off="danger" data-on-label="<i class='glyphicon glyphicon-ok'></i>" data-off-label="<i class='glyphicon glyphicon-remove'></i>">
                                                            <input type="checkbox" class="disabled" disabled="disabled" {if $VISIBLE == 1}checked="checked"{/if}>
                                                        </div>
                                                    {/elseloop}
                                                </td>


                                                {hook name="countries.table-row" location="countries_table_row" country_id={$ID} }

                                                <td class="actions">
                                                    {include file='renderer/buttons.html' buttons=[
                                                        [
                                                            'type' => 'edit',
                                                            'class' => 'country-change',
                                                            'title' => {intl l='Change this country'},
                                                            'href' => {url path="/admin/configuration/country/update/%id" id=$ID},
                                                            'auth' => ['resource' => 'admin.configuration.country']
                                                        ],
                                                        [
                                                            'type' => 'delete',
                                                            'class' => 'country-delete',
                                                            'title' => {intl l='Delete this country'},
                                                            'href' => '#delete_dialog',
                                                            'data' => [
                                                                'id' => $ID,
                                                                'toggle' => 'modal'
                                                            ],
                                                            'auth' => ['resource' => 'admin.configuration.country']
                                                        ]
                                                    ]}
                                                </td>
                                            </tr>
                                        {/loop}
                                        {elseloop rel="countries"}
                                            <tr>
                                                <td colspan="8">
                                                    <div class="alert alert-info">
                                                        {intl l="No country has been created yet. Click the + button to create one."}
                                                    </div>
                                                </td>
                                            </tr>
                                        {/elseloop}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </form>

                </div>

            </div>

            {hook name="countries.bottom" location="countries_bottom" }

        </div>
    </div>

    {* Adding a new Country *}

    {form name="thelia.admin.country.creation"}

        {* Capture the dialog body, to pass it to the generic dialog *}
        {capture "country_creation_dialog"}

            {form_hidden_fields exclude="locale"}

            {* on success, redirect to the edition page, _ID_ is replaced with the created object ID, see controller  *}
            {render_form_field field='success_url' value="{url path='/admin/configuration/country/update/_ID_'}"}

            {custom_render_form_field field="title"}
            {loop type="lang" name="default-lang" default_only="1"}
                {* Switch edition to the current locale *}
                <input type="hidden" name="edit_language_id" value="{$ID}" />

                {render_form_field field="locale" value=$LOCALE}

                <div class="input-group">
                    <input type="text" {form_field_attributes field="title"}>
                    <span class="input-group-addon"><img class="img-flags" src="{image file="assets/img/svgFlags/{$CODE}.svg"}" alt="{$TITLE}" /></span>
                </div>
            {/loop}
            {/custom_render_form_field}

            {render_form_field field="isocode"}
            {render_form_field field="isoalpha2"}
            {render_form_field field="isoalpha3"}

            {custom_render_form_field field="visible"}
                <input type="checkbox" checked {form_field_attributes field="visible"}> {$label}
            {/custom_render_form_field}

            {custom_render_form_field field="has_states"}
                <input type="checkbox" {form_field_attributes field="has_states"}> {$label}
            {/custom_render_form_field}

            {hook name="country.create-form" location="country_create_form" }

        {/capture}

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

            dialog_id    = "add_country_dialog"
            dialog_title = {intl l="Create a new country"}
            dialog_body  = {$smarty.capture.country_creation_dialog nofilter}

            dialog_ok_label     = {intl l="Create this country"}
            dialog_cancel_label = {intl l="Cancel"}

            form_action        = {url path='/admin/configuration/countries/create'}
            form_enctype       = {form_enctype}
            form_error_message = $form_error_message
        }
    {/form}


    {* Delete confirmation dialog *}

    {capture "delete_dialog"}
        <input type="hidden" name="country_id" id="country_delete_id" value="" />

        {hook name="country.delete-form" location="country_delete_form" }

    {/capture}

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

        dialog_id       = "delete_dialog"
        dialog_title    = {intl l="Delete country"}
        dialog_message  = {intl l="Do you really want to delete this country ?"}

        form_action         = {token_url path='/admin/configuration/countries/delete'}
        form_content        = {$smarty.capture.delete_dialog nofilter}
    }

<div class="modal fade" id="toggle-default-failed" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content alert alert-block alert-danger ">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2>{intl l="Error"}</h2>
            </div>
            <div class="modal-body">
                <strong>{intl l="Impossible to change default country. Please contact your administrator or try later"}</strong>
            </div>


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

{/block}

{block name="javascript-initialization"}

    {javascripts file='assets/js/bootstrap-switch/bootstrap-switch.js'}
        <script src="{$asset_url}"></script>

        <script>
            $(document).ready(function(){
                // Toogle switch on input radio
                $('.switch-radio').on('switch-change', function () {
                    $('.switch-radio').bootstrapSwitch('toggleRadioState');
                });

                $('.country-delete').click(function(ev){
                    $('#country_delete_id').val($(this).data('id'));
                });

                $('.change-default-toggle').on('switch-change', function(e, data){
                    if(data.value) {
                        $.ajax({
                            url : "{url path='/admin/configuration/country/toggleDefault'}",
                            data : {
                                country_id: $(this).data('id')
                            }
                        }).fail(function(){
                            $('#toggle-default-failed').modal('show');
                        });
                    }
                });

                {* Visibility toggle *}

                $(".visibleToggle").on('switch-change', function(event, data) {
                    $.ajax({
                        url : "{url path='admin/configuration/country/toggle-online'}",
                        data : {
                            country_id : $(this).data('id'),
                            action : 'visibilityToggle'
                        }
                    });
                });
            });

        </script>
    {/javascripts}

{/block}

{block name="javascript-last-call"}
    {hook name="countries.js" location="countries-js" }
{/block}