{* Title *}
{$meta_title = "Баннеры" scope=root}

{function name=banner item=$banner}
{$id = $item->id}
<div class="modal-body">
    <form method="post" action="" enctype="multipart/form-data" id="id_{$id}">
        <input type="hidden" name="id" value="{$id}">
        <input type="hidden" name="old_image" value="{$item->image->filename}">
        <div class="row g-2">
            <div class="col-12">
                {if !empty($item->image->filename)}
                    {if $banner->image->filetype != "svg"}
                    <div class="form-group">
                        <div class="img-thumbnail text-center p-2 js-delivery-image">
                            <a href="{$item->image|resize}" data-fancybox="gallery">
                                <img src="{$item->image|resize}">
                            </a>
                        </div>
                    </div>
                    {else}
                    <div class="form-group">
                        <div class="img-thumbnail text-center p-2 js-delivery-image">
                            <a href="#" data-fancybox="gallery">
                                {$item->image|resize:0:0:auto:blob}
                            </a>
                        </div>
                    </div>
                    {/if}
                {/if}
                <div class="form-group mb-0">
                    <label class="form-label mb-1" for="customFile{$id}">Загрузить изображение</label>
                    <div class="form-control-wrap">
                        <div class="custom-file">
                            <input type="file" name="dropped_images[]" class="custom-file-input" id="customFile{$id}">
                            <label class="custom-file-label" for="customFile{$id}">Выберите фото</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group mb-1">
                    <label class="form-label mb-1">Заголовок</label>
                    <input type="text" class="form-control" name="banner[title]" value="{$item->title|escape}">
                </div>
                <div class="form-group">
                    <label class="form-label mb-1">Подзаголовок</label>
                    <input type="text" class="form-control" name="banner[subtitle]" value="{$item->subtitle|escape}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group mb-1">
                    <label class="form-label mb-1">Текст кнопки</label>
                    <input type="text" class="form-control" name="banner[button_text]" value="{$item->button_text|escape}">
                </div>
                <div class="form-group">
                    <label class="form-label mb-1">URL кнопки</label>
                    <input type="text" class="form-control" name="banner[button_url]" value="{$item->button_url|escape}">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="form-label mb-1" for="page_{$id}">Показывать на странице</label>
                    <div class="form-control-wrap">
                        <select name="banner[page_id]" id="page_{$id}" class="form-select form-control">
                            {function name=section_select}
                                {foreach $pages as $p}
                                    <option value='{$p->id}' {if $banner->page_id == $p->id}selected{/if}>
                                        {section name=sp loop=$level}&mdash;{/section}{$p->name}
                                    </option>
                                    {section_select pages=$p->subpages level=$level+1}
                                {/foreach}
                            {/function}
                            {section_select pages=$pages level=0}
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="form-label mb-1">Опциональные данные</label>
                    <input type="text" class="form-control" name="banner[options]" value="{$item->options|escape}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label class="form-label mb-1">Виден</label>
                    <ul class="custom-control-group g-3 align-center flex-wrap">
                        <li>
                            <div class="custom-control custom-control-sm custom-radio checked">
                                <input type="radio" class="custom-control-input" name="banner[visible]" value="1" id="newbanner_visible_on{$id}" {if $item->visible == '1'}checked="checked"{/if}>
                                <label class="custom-control-label" for="newbanner_visible_on{$id}">Да</label>
                            </div>
                        </li>
                        <li>
                            <div class="custom-control custom-control-sm custom-radio">
                                <input type="radio" class="custom-control-input" name="banner[visible]" value="0" id="newbanner_visible_off{$id}" {if $item->visible == '0'}checked="checked"{/if}>
                                <label class="custom-control-label" for="newbanner_visible_off{$id}">Нет</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label class="form-label mb-1">Текст</label>
                    <ul class="custom-control-group g-3 align-center flex-wrap">
                        <li>
                            <div class="custom-control custom-control-sm custom-radio checked">
                                <input type="radio" class="custom-control-input" name="banner[color]" value="white" id="newbanner_color_white{$id}" {if $item->color == 'white'}checked="checked"{/if}>
                                <label class="custom-control-label" for="newbanner_color_white{$id}">Светлый</label>
                            </div>
                        </li>
                        <li>
                            <div class="custom-control custom-control-sm custom-radio">
                                <input type="radio" class="custom-control-input" name="banner[color]" value="black" id="newbanner_color_black{$id}" {if $item->color == 'black'}checked="checked"{/if}>
                                <label class="custom-control-label" for="newbanner_color_black{$id}">Темный</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <label class="form-label mb-1">Описание</label>
                    <textarea rows=5 class="form-control" name="banner[description]">{$item->description|escape}</textarea>
                </div>
            </div>
            <div class="col-12">
                <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                    <li>
                        <button type="submit" class="btn btn-primary">Сохранить</button>
                    </li>
                    <li>
                        <a href="#" class="link link-light" data-dismiss="modal">Отменить</a>
                    </li>
                </ul>
            </div>
        </div>
    </form>
</div>
{/function}

{* Container *}
<div class="container-fluid">

    {* Head *}
    <div class="nk-block-head nk-block-head-sm">
        <div class="nk-block-between">

            {* Title *}
            <div class="nk-block-head-content">
                <h3 class="nk-block-title page-title">
                    Баннеры
                </h3>
                <div class="nk-block-des text-soft">
                    <p>Управление баннерами.</p>
                </div>
            </div>

            {* Buttons *}
            <div class="nk-block-head-content">
                <div class="toggle-wrap nk-block-tools-toggle">

                    {* Mobile toogle btn *}
                    <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu">
                        <em class="icon ti ti-menu"></em>
                    </a>

                    {* Buttons *}
                    <div class="toggle-expand-content" data-content="pageMenu">
                        <ul class="nk-block-tools g-3">

                            {* Return *}
                            {if $smarty.get.return}
                            <li>
                                <a href="{$smarty.get.return}" class="btn btn-white btn-outline-light">
                                    <em class="icon ti ti-arrow-back-up"></em>
                                    <span>Вернуться</span>
                                </a>
                            </li>
                            {/if}

                            {* Add one more *}
                            <li>
                                <a href="javascript:void(0);" data-toggle="modal" data-target="#addBanner" class="btn btn-secondary">
                                    <em class="icon ti ti-circle-plus"></em>
                                    <span>Создать баннер</span>
                                </a>
                            </li>

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

        </div>
    </div>

    {* Success *}
    {if $smarty.get.message_success}
    <div class="pb-2">
        <div class="alert alert-fill alert-success alert-icon">
            <em class="icon ti ti-circle-check"></em>
            {if $smarty.get.message_success=='updated'}
                Баннер обновлён.
            {else if $smarty.get.message_success=='added'}
                Баннер добавлен.
            {else if $smarty.get.message_success=='deleted'}
                Баннер удалён.
            {else}
                {$smarty.get.message_success|escape}.
            {/if}
        </div>
    </div>
    {/if}

    {* Main block *}
    <div class="nk-block">
        <div class="card card-bordered card-stretch">
            <div class="card-inner-group">
                <div class="card-inner position-relative card-tools-toggle">
                    <div class="card-title-group">
                        <div class="card-title">
                            <h5 class="title">Баннеры</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {* List *}
    <div class="nk-block">
        <div class="row g-gs js-banners-sortable">
            {foreach $banners as $banner}
            <div class="col-lg-3 js-list-item" data-position="{$banner->position}" data-id="{$banner->id}">
                <div class="card card-bordered h-100">
                    <div class="img-thumbnail border-0">
                        {if !empty($banner->image->filename)}
                            {if $banner->image->filetype != "svg"}
                            <div class="w-max-350px h-150px of-hidden center">
                                <a href="{$banner->image|resize}" data-toggle="modal" data-target="#EditBanner{$banner->id}">
                                    <img src="{$banner->image|resize:350:120:auto}" class="rounded-0 p-2">
                                </a>
                            </div>
                            {else}
                            <div class="w-max-350px h-150px of-hidden">
                                <a class="center" href="#" data-toggle="modal" data-target="#EditBanner{$banner->id}">
                                    {$banner->image|resize:0:0:auto:blob}
                                </a>
                            </div>
                            {/if}
                        {else}
                        <div class="w-max-350px of-hidden center">
                            <h6 data-toggle="modal" data-target="#EditBanner{$banner->id}" style="padding:10px 0;">{$banner->title}</h6>
                        </div>
                        {/if}
                    </div>
                    <div class="card-inner border-top">
                        <div class="team">
                            <ul class="pricing-features fw-medium fs-14px">
                                <li>
                                    <span class="w-50">Активность</span> -
                                    <span class="ms-auto {if $banner->visible}text-success{else}text-danger{/if}">
                                        {if $banner->visible}Включен{else}Выключен{/if}
                                    </span>
                                </li>
                                <li>
                                    <span class="w-50">Цвет текста</span> -
                                    <span class="ms-auto">
                                        {if $banner->color == 'white'}Светлый{else}Темный{/if}
                                    </span>
                                </li>
                                <li>
                                    <span class="w-50">На странице</span> -
                                    <span class="ms-auto">
                                        {foreach $all_pages AS $p}
                                            {if $p->id == $banner->page_id}
                                                {$p->name}
                                            {/if}
                                        {/foreach}
                                    </span>
                                </li>
                                <li>
                                    <span class="w-50">URL страницы</span> -
                                    <span class="ms-auto">{$all_pages[$banner->page_id]->url}</span>
                                </li>
                            </ul>
                            <div class="center mt-2">
                                <ul class="nk-tb-actions gx-1">

                                    {* ID *}
                                    <input type="hidden" name="id" value="{$banner->id}">

                                    {* Edit *}
                                    <li>
                                        <button type="button" class="btn btn-trigger nk-tooltip btn-icon" data-toggle="modal" data-target="#EditBanner{$banner->id}" data-placement="top" title="Редактировать">
                                            <em class="icon ti ti-edit"></em>
                                        </button>
                                    </li>

                                    {* Move *}
                                    <li>
                                        <div class="btn btn-trigger btn-icon js-list-move" data-toggle="tooltip" data-placement="top" title="Переместить">
                                            <em class="icon ti ti-arrows-down-up"></em>
                                        </div>
                                    </li>

                                    {* Delete *}
                                    <li>
                                        <a onclick="return confirm('Подтверждаете удаление?') ? true : false;" href="{url module=BannersAdmin name=$smarty.get.name delete=$banner->id}" class="btn btn-trigger btn-icon text-danger" data-toggle="tooltip" data-placement="top" title="Удалить">
                                            <em class="icon ti ti-trash"></em>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    </div>

    {* Banners modals *}
    {foreach $banners as $banner}
    <div class="modal fade" tabindex="-1" role="dialog" id="EditBanner{$banner->id}">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Редактирование баннера</h5>
                    <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                {banner item=$banner}
            </div>
        </div>
    </div>
    {/foreach}

    {* Add banner *}
    <div class="modal fade" tabindex="-1" role="dialog" id="addBanner">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Создать баннер</h5>
                    <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                        <em class="icon ni ni-cross"></em>
                    </a>
                </div>
                {banner item=null}
            </div>
        </div>
    </div>

</div>
