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

{block name="page-title"}{intl l='Edit a tax rule'}{/block}

{block name="check-permissions"}admin.configuration.taxes-rules.edit{/block}

{block name="main-content"}
<div class="taxes-rules edit-taxes-rules">

    <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/taxes_rules'}">{intl l="Taxes rules"}</a></li>
            <li>{intl l='Editing tax rule "%name"' name="{$TITLE}"}</li>
        </ul>

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

                <div class="title title-without-tabs">
                   {intl l="Edit tax rule $TITLE"}
                </div>

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

                    <div class="form-group">
                        <label for="" class="label-control">{intl l="Choose a country"} :</label>
                        <div class="input-group">
                            <select name="" id="" data-toggle="selectpicker">
                                <option value="">France</option>
                                <option value="">Spanish</option>
                            </select>
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span></button>
                            </span>
                        </div>
                    </div>

                </form>

                <p><strong>{intl l="Countries that have the same tax rule"} :<strong></p>
                <p class="lead">
                    <span class="label label-info">Italy</span>
                    <span class="label label-info">England</span>
                    <span class="label label-info">Japan</span>
                </p>

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

                        <!-- <div class="panel droppable place">
                            <p id="drop-message">
                                <span class="glyphicon glyphicon-plus"></span>
                                {intl l="Drop tax here to create a tax rule"}
                            </p>
                        </div> -->

                        <div id="panel" class="panel panel-default place">
                            <div class="panel-heading">
                                <h3 class="panel-title">Create a tax rule</h3>
                            </div>
                            <div class="panel-body">

                                <div class="drop-group droppable add-to-group">
                                    <p class="drop-message">
                                        <span class="glyphicon glyphicon-plus"></span>
                                        <span class="message">{intl l="Add tax to this group"}</span>
                                    </p>
                                </div>

                            </div>
                            <div class="panel-footer droppable create-group">
                                <p class="drop-message">
                                    <span class="glyphicon glyphicon-plus"></span>
                                    <span class="message">{intl l="Drop tax here to create a tax group"}</span>
                                </p>
                            </div>
                        </div>

                        <button type="button" id="apply-taxes-rules" class="btn btn-default btn-primary btn-block"><span class="glyphicon glyphicon-check"></span> {intl l="Apply"}</button>

                    </div>
                    <div class="col-md-6">

                        <div id="panel-list" class="panel panel-default take">
                            <div class="panel-heading">
                                <h3 class="panel-title">List of taxes</h3>
                            </div>
                            <div class="panel-body">
                                <div class="draggable">Cras justo odio</div>
                                <div class="draggable">Dapibus ac facilisis in</div>
                                <div class="draggable">Morbi leo risus</div>
                                <div class="draggable">Porta ac consectetur ac</div>
                                <div class="draggable">Vestibulum at eros</div>
                            </div>
                            <div class="panel-footer droppable remove-from-group">
                                <p class="drop-message">
                                    <span class="glyphicon glyphicon-minus"></span>
                                    <span class="message">{intl l="Drop tax here to delete from group"}</span>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
{/block}

{block name="javascript-initialization"}

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

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

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    {literal}
    <script>
    <!--
        $(function() {

            // Cache jQuery Objects
            var $group = $('#panel');
            var $list = $('#panel-list');

            // Build array of taxes rules
            $('#apply-taxes-rules').click(function(){
                var taxesRules = [],
                    index;

                $('.drop-group',$group).each(function(i){
                    var $this = $(this);
                    index = i;
                    taxesRules[index] = [];

                    $('.draggable', $this).each(function(j){
                        taxesRules[index][j] = [];
                        taxesRules[index][j] = $(this).text();
                    });
                });
            });

            // Make the list of taxes draggable
            $('.draggable', $list).draggable({
                cursor: 'move',
                helper: 'clone',
                containment: "document",
                opacity: 0.5,
                revert: "invalid", // when not dropped, the item will revert back to its initial position
                zIndex: 10
            });

            // Droppable Options
            var droppableOptions = {
                accept: "#panel-list .draggable", // Controls which draggable elements are accepted
                hoverClass: 'over',
                drop: function( event, ui ) {
                    var $current_group = $(this),
                        $tax = ui.draggable;

                    // Move taxes
                    $tax.fadeOut(function() {
                        $(this).remove();
                        $tax.appendTo( $current_group ).fadeIn();

                    });
                }
            };

            // let the drop-group be droppable & sortable, accepting the tax items
            $('.add-to-group', $group)
            .sortable({ // Sort
                //axis: 'y',
                cursor: 'crosshair',
                items: "div",
                revert: true,
            }).droppable(droppableOptions);


            // Allow the user to create a new drop-group
            $('.create-group', $group)
            .droppable({
                accept: "#panel-list .draggable", // Controls which draggable elements are accepted
                hoverClass: 'over',
                drop: function( event, ui ) {
                    var $tax = ui.draggable;
                    var $create_group;

                    // Check if we have already an empty group
                    var $empty_group = $group.find('.drop-group:not(:has(> .draggable))');
                    if($empty_group.size() > 0){ // if yes (Use the first empty group)
                        $create_group = $empty_group.filter(':first');

                        // Move taxes
                        $tax.fadeOut(function() {
                            $(this).remove();
                            $tax.appendTo( $create_group ).show();
                            $group.find('.panel-body').append($create_group);
                        });

                    }else{ //if no (Create a new group)
                        $create_group = $group.find('.drop-group:last-child').clone();

                        // Remove taxes
                        $create_group.find('.draggable').remove();

                        // Make the new group droppable
                        $create_group
                        .sortable({ // Sort
                            //axis: 'y',
                            cursor: 'crosshair',
                            items: "div",
                            revert: true,
                        })
                        .droppable(droppableOptions);

                        // Move taxes
                        $tax.fadeOut(function() {
                            $(this).remove();
                            $tax.appendTo( $create_group ).show();
                            $group.find('.panel-body').append($create_group);
                        });
                    }
                }
            });


             // let the gallery be droppable as well, accepting items from the trash
            $('.remove-from-group', $list)
            .droppable({
                accept: "#panel .draggable",
                hoverClass: 'over',
                drop: function( event, ui ) {
                    var $tax = ui.draggable.clone(); ui.draggable.remove();

                    // Move taxes
                    $tax.fadeOut(function() {
                        //$(this).remove();
                        $tax.removeClass('ui-sortable-helper').addClass('ui-draggable').removeAttr('style').draggable({
                            cursor: 'move',
                            helper: 'clone',
                            //containment: "document",
                            opacity: 0.5,
                            revert: "invalid", // when not dropped, the item will revert back to its initial position
                            zIndex: 10
                        }).prependTo( $list.find('.panel-body') ).fadeIn();

                        // Check if we have an empty group
                        var $zone = $('.add-to-group', $group);
                        var $empty_zone = $zone.filter(':not(:has(> .draggable))');
                        if($zone.size() > $empty_zone.size()){ // Remove empty group only if we have more than 1 group
                            $empty_zone.slideUp(function(){ $(this).remove(); });
                        }
                    });
                }
            });
        });
    // -->
    </script>
    {/literal}

{/block}