<form method="post" class="form-content-wrapper">


	<!-- Page header -->
    {include file="components/group-buttons.tpl" url="{$generate_url}?page={if !empty($page)}{$page}{/if}{$buildQueryString}"}

    {capture name="breadcrumb"}
		<a href="{$generate_url}" class="breadcrumb-item">{if isset($title)}{$title}{/if}</a>
		<span class="breadcrumb-item active">{general:add}</span>
    {/capture}

    {capture name="showBy"}{/capture}

    {include file="components/page-header.tpl" buttons=$smarty.capture.buttons breadcrumb=$smarty.capture.breadcrumb showBy=$smarty.capture.showBy}
	<!-- /page header -->

    <div class="content">

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

	            <div class="card border shadow-sm">
		            <div class="card-header d-flex flex-wrap">
			            <h6 class="mb-0">{general:card:general}</h6>
			            <div class="d-inline-flex ms-auto">
				            <a class="text-body" data-card-action="collapse"><i class="ph-caret-down"></i></a>
			            </div>
		            </div>
		            <div class="collapse show">
			            <div class="card-body">
				            <div class="row">
					            <div class="col-md-4">
						            <div class="form-group mb-3">
							            <label class="form-label {if isset($errors.title)}text-danger{/if}">Название свойства опции</label>
							            <input type="text" class="form-control" id="title" autocomplete="off" name="features[name]" value="{if isset($features.name)}{$features.name}{/if}">
		                            </div>
					            </div>
					            <div class="col-md-4">
	                                {* field status *}
	                                {include file="components/fields/select.tpl" id="types" title="Тип" field="features[type]" array=$types selected=$features.type|default:'' class="form-group mb-3"}
	                                {* /field status *}
					            </div>
					            <div class="col-md-4">
	                                {* field status *}
	                                {include file="components/fields/select.tpl" id="status" title="{general:status}" field="features[status]" array=$statuses selected=$features.status|default:'V' class="form-group mb-3"}
	                                {* /field status *}
					            </div>
				            </div>
                        </div> 
                    </div>
    		    </div>

                {* Опции *}
	            <div class="card border shadow-sm">
		            <div class="card-header d-flex flex-wrap">
			            <h6 class="mb-0">Опции</h6>
			            <div class="d-inline-flex ms-auto">
				            <a class="text-body" data-card-action="collapse"><i class="ph-caret-down"></i></a>
			            </div>
		            </div>
		            <div class="collapse show">
			            <div class="card-body p-0">
				            <div class="table-responsive">
					            <table class="table table_options" id="table_options">
						            <thead id="header">
						            <tr>
							            <th class="text-center" width="30">#</th>
							            <th class="text-start variant_name" width="65%">Название опции</th>
							            <th class="text-start variant_name">Свойство опции</th>
							            <th class="text-center text-muted" width="30"><i class="icon-checkmark3"></i></th>
						            </tr>
						            </thead>

						            <tbody class="sortable_options sortable-table">
	                                    {if !empty($options)}
	                                        {foreach from=$options item=option key=key}
									            <tr id="option-{$key}">
										            <td class="move_list"><i class="ph-dots-six text-muted" data-bs-popup="popover-solid" data-bs-trigger="hover" title="Переместить"></i></td>
										            <td><input class="form-control" type="text" name="options[{$key}][name]" value="{$option.name|default:''}" autocomplete="off" placeholder=""/></td>
										            <td><input class="form-control" type="text" name="options[{$key}][hardware]" value="{$option.hardware|default:''}" autocomplete="off" placeholder=""/></td>
										            <td>
											            <input class="form-control" type="hidden" name="options[{$key}][optionId]" value="{$key}" />
											            <button type="button" class="btn btn-light text-danger p-0" onclick="confirm('Данное действие необратимо. Вы уверены?') ? $('#option-{$key}').remove() : false;"><i class="ph-trash"></i></button>
										            </td>
									            </tr>
	                                        {/foreach}
	                                    {/if}
						            </tbody>

					            </table>
				            </div>
			            </div>
			            <div class="card-footer text-right">
				            <button type="button" class="btn btn-outline-primary" onclick="addOption();">Добавить опцию</button>
			            </div>
		            </div>
	            </div>
            </div>



	        <div class="col-md-12 main main_buttons text-center">
                {if isset($features.optionId)}<input type="hidden" name="id" value="{$features.optionId}" />{/if}

                {$smarty.capture.buttons nofilter}
	        </div>
        </div>
    </div>
</form>

<script>

    function notFound() {
        new Noty({ text: '{articles:errors:6}', layout: 'topRight', type: 'error', timeout: 1500 }).show();
    }
    function deleteMessage(){
        new Noty({ text: '{articles:messages:2}', type: 'success', timeout: 1500 }).show();
    }

    $(document).ready(function () {
        {if isset($messages.saved)} new Noty({ text: 'Свойство опций сохранено', type: 'success', timeout: 1500 }).show(); {/if}

        {if isset($errors.title)} new Noty({ text: 'Введите навание свойства', type: 'error', timeout: 2500 }).show();{/if}
        {if isset($errors.access_denied)} new Noty({ text: '{articles:errors:0}', type: 'error', timeout: 2500 }).show(); {/if}
        {if isset($errors.not_saved)} new Noty({ text: 'Свойство не сохранено, ', type: 'error', timeout: 2500 }).show(); {/if}
        {if isset($errors.equipmentIds)} new Noty({ text: 'Необходимо прикрепить комплектацию', type: 'error', timeout: 2500 }).show(); {/if}

    });

    {if empty($options)}
	    $(document).ready(function() {
            addOption();
	    });
	    var option_row = 0;
    {else}
        var option_row = {count($options)};
	    dragula(Array.from(document.querySelectorAll('.sortable_options')), {
	        direction: 'vertical',
	        slideFactorY: 100,
	        mirrorContainer: document.querySelector('.sortable_options')
	    });

    {/if}
    function addOption() {
        html  = '<tr id="option-' + option_row + '">';
        html += '    <td class="move_list"><i class="ph-dots-six text-muted" data-bs-popup="popover-solid" data-bs-trigger="hover" title="Переместить"></i></td>';
        html += '    <td><input class="form-control" type="text" name="options[' + option_row + '][name]" value="" autocomplete="off" placeholder="Название опции"/></td>';
        html += '    <td><input class="form-control" type="text" name="options[' + option_row + '][hardware]" value="" autocomplete="off" placeholder=""/></td>';
        html += '    <td>' +
			            '<input class="form-control" type="hidden" name="options[' + option_row + '][optionId]" value="" />' +
				        '<button type="button" class="btn btn-light text-danger p-0" onclick="confirm(\'Данное действие необратимо. Вы уверены?\') ? $(\'#option-' + option_row + '\').remove() : false;"><i class="ph-trash"></i></button>' +
	                '</td>';
        html += '</tr>';



        $('.table_options tbody').append(html);

        option_row++;
    }

</script>
