<?php
/**
 * Метабокс «Адреса магазинов» для страницы контактов
 *
 * @package Matreshka
 */

/**
 * Регистрируем метабокс
 */
add_action( 'add_meta_boxes', function () {
    add_meta_box(
        'matreshka_stores_metabox',
        'Адреса магазинов',
        'matreshka_stores_metabox_render',
        'page',
        'normal',
        'high'
    );
});

/**
 * Рендер метабокса
 */
function matreshka_stores_metabox_render( $post ) {
    // Показываем метабокс только для шаблона «Контакты»
    $template = get_page_template_slug( $post->ID );
    // Метабокс в DOM всегда — JS покажет/скроет при смене шаблона

    wp_nonce_field( 'matreshka_stores_nonce_action', 'matreshka_stores_nonce' );

    $stores = get_post_meta( $post->ID, '_matreshka_stores', true );
    if ( ! is_array( $stores ) ) {
        $stores = array();
    }
    ?>
    <div id="matreshka-stores-wrapper">
        <p class="description" style="margin-bottom: 12px;">
            Добавьте адреса магазинов сети. Они отобразятся на странице красивой сеткой.
        </p>

        <div id="matreshka-stores-list">
            <?php
            if ( ! empty( $stores ) ) {
                foreach ( $stores as $i => $store ) {
                    matreshka_store_row_html( $i, $store );
                }
            }
            ?>
        </div>

        <button type="button" class="button button-primary" id="matreshka-add-store" style="margin-top: 10px;">
            + Добавить магазин
        </button>

        <!-- Шаблон строки (скрытый) -->
        <script type="text/html" id="tmpl-matreshka-store-row">
            <?php matreshka_store_row_html( '{{INDEX}}', array( 'name' => '', 'address' => '', 'phone' => '', 'hours' => '' ) ); ?>
        </script>
    </div>

    <style>
        .matreshka-store-row {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 14px 16px;
            margin-bottom: 10px;
            position: relative;
        }
        .matreshka-store-row .matreshka-store-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .matreshka-store-row label {
            display: block;
            font-weight: 600;
            margin-bottom: 4px;
            font-size: 12px;
            color: #555;
        }
        .matreshka-store-row input,
        .matreshka-store-row textarea {
            width: 100%;
        }
        .matreshka-store-row textarea {
            min-height: 46px;
        }
        .matreshka-store-row .matreshka-remove-store {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #a00;
            cursor: pointer;
            border: none;
            background: none;
            font-size: 18px;
            line-height: 1;
        }
        .matreshka-store-row .matreshka-remove-store:hover {
            color: #dc3232;
        }
        .matreshka-store-row .matreshka-store-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .matreshka-store-row .matreshka-store-header strong {
            font-size: 14px;
        }
    </style>

    <script>
    jQuery(function($) {
        var storeIndex = <?php echo count( $stores ); ?>;
        var template = document.getElementById('tmpl-matreshka-store-row').innerHTML;

        // Показати/сховати метабокс в залежності від шаблону
        function toggleMetabox() {
            var selectedTemplate = $('#page_template').val() || $('select[name="page_template"]').val() || '';
            var $metabox = $('#matreshka_stores_metabox');
            if (selectedTemplate === 'page-contacts.php' || selectedTemplate === 'page-about-service.php') {
                $metabox.show();
            } else {
                $metabox.hide();
            }
        }
        toggleMetabox();
        $(document).on('change', '#page_template, select[name="page_template"]', toggleMetabox);

        // Додати магазин
        $('#matreshka-add-store').on('click', function() {
            var html = template.replace(/\{\{INDEX\}\}/g, storeIndex);
            $('#matreshka-stores-list').append(html);
            storeIndex++;
        });

        // Видалити магазин
        $(document).on('click', '.matreshka-remove-store', function() {
            $(this).closest('.matreshka-store-row').slideUp(200, function() {
                $(this).remove();
            });
        });

        // Сортування перетягуванням
        if ($.fn.sortable) {
            $('#matreshka-stores-list').sortable({
                handle: '.matreshka-store-header',
                cursor: 'move',
                opacity: 0.7,
                placeholder: 'matreshka-store-placeholder'
            });
        }
    });
    </script>
    <?php
}

/**
 * HTML однієї строки магазину
 */
function matreshka_store_row_html( $index, $store ) {
    $name    = isset( $store['name'] )    ? $store['name']    : '';
    $address = isset( $store['address'] ) ? $store['address'] : '';
    $phone   = isset( $store['phone'] )   ? $store['phone']   : '';
    $hours   = isset( $store['hours'] )   ? $store['hours']   : '';
    ?>
    <div class="matreshka-store-row">
        <div class="matreshka-store-header">
            <strong>Магазин</strong>
            <button type="button" class="matreshka-remove-store" title="Удалить">&times;</button>
        </div>
        <div class="matreshka-store-fields">
            <div>
                <label>Название</label>
                <input type="text" name="matreshka_stores[<?php echo esc_attr( $index ); ?>][name]"
                       value="<?php echo esc_attr( $name ); ?>" placeholder="Матрёшка на Ленина" class="widefat">
            </div>
            <div>
                <label>Адрес</label>
                <input type="text" name="matreshka_stores[<?php echo esc_attr( $index ); ?>][address]"
                       value="<?php echo esc_attr( $address ); ?>" placeholder="ул. Ленина, 42" class="widefat">
            </div>
            <div>
                <label>Телефон</label>
                <input type="text" name="matreshka_stores[<?php echo esc_attr( $index ); ?>][phone]"
                       value="<?php echo esc_attr( $phone ); ?>" placeholder="+7 (959) 189-75-72" class="widefat">
            </div>
            <div>
                <label>График работы</label>
                <textarea name="matreshka_stores[<?php echo esc_attr( $index ); ?>][hours]"
                          placeholder="Пн-Вс: 8:00 - 22:00" class="widefat" rows="2"><?php echo esc_textarea( $hours ); ?></textarea>
            </div>
        </div>
    </div>
    <?php
}

/**
 * Зберігаємо дані метабокса
 */
add_action( 'save_post', function ( $post_id ) {
    // Перевірки безпеки
    if ( ! isset( $_POST['matreshka_stores_nonce'] ) ) return;
    if ( ! wp_verify_nonce( $_POST['matreshka_stores_nonce'], 'matreshka_stores_nonce_action' ) ) return;
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
    if ( ! current_user_can( 'edit_post', $post_id ) ) return;

    $stores = array();
    if ( ! empty( $_POST['matreshka_stores'] ) && is_array( $_POST['matreshka_stores'] ) ) {
        foreach ( $_POST['matreshka_stores'] as $store ) {
            $clean = array(
                'name'    => sanitize_text_field( $store['name'] ?? '' ),
                'address' => sanitize_text_field( $store['address'] ?? '' ),
                'phone'   => sanitize_text_field( $store['phone'] ?? '' ),
                'hours'   => sanitize_textarea_field( $store['hours'] ?? '' ),
            );
            // Зберігаємо тільки непорожні записи
            if ( ! empty( $clean['name'] ) || ! empty( $clean['address'] ) ) {
                $stores[] = $clean;
            }
        }
    }

    update_post_meta( $post_id, '_matreshka_stores', $stores );
});