<div class="wrap">
  <div style="width: 100%; background:#fff;border-left:4px solid #2271b1;padding:10px 15px;margin-bottom:20px;">
      <p><strong><?= T_('Note:') ?></strong><?= T_('These customization options only apply to the property listing page.
The details page maintains a fixed layout to ensure visual consistency.') ?> </p>
  </div>
  <p><?= T_('Customize the appearance of your property display.') ?></p>
    <?php settings_errors(); ?>
  <div class="customization-container">
    <div class="customization-form">
            <form method="post" action="options.php">
                <?php
                    settings_fields('zoddak_property_display_group');
                    do_settings_sections('zoddak_property_display_page');
                    submit_button(T_('Save changes'));

                ?>
            </form>
        </div>
    <?php
    ?>
    <div class="preview-container">
    
      <h3><?= T_('Preview') ?></h3>
      <div class="preview-toggle">
        <input type="checkbox" id="toggleView">
        <label for="toggleView" class="toggle-label">
        <span class="option-cards"><?= T_('Cards') ?></span>
        <span class="switch"></span>
        <span class="option-layout"><?= T_('Layout') ?></span>
        </label>
    </div>
    <div class="page-preview">
    <div class="card-preview">
            <div class="container-img">
                <img src="https://aballanstrus.ee/wp-content/uploads/2015/01/Kodu-1.jpg" alt="property-image" class="property-image">
                <span class="stage-badge">
                    <span class="stage-dot" style="background-color: green;"></span>
                    <?= T_('Completed') ?>
                </span>
                <p id="propRef" class="prop-ref">#SAMPLE123</p>
            </div>

            <div class="container-info">
                <div>
                    <h4 class="property-loc"><?= T_('Villa in Marbella') ?></h4>
                </div>

                <div id="priceOut" class="price">
                    <div class="span-info">
                        <span class="value">300,000 €</span>
                        <i class="fa-solid fa-tags icon"></i>
                    </div>
                </div>

                <div class="property-info">
                    <div class="grid-templates vertical">

                        <!-- Precio -->
                        <div id="priceIn" class="grid">
                            <label class="label">Precio:</label>
                            <div class="info-and-icon">
                                <span class="value">300,000 €</span>
                                <i class="fa-solid fa-tags icon"></i>
                            </div>
                        </div>

                        <!-- Dormitorios -->
                        <div class="grid">
                            <label class="label"><?= T_('Bedrooms') ?>:</label>
                            <div class="info-and-icon">
                                <span class="value">3</span>
                                <i class="fa-solid fa-bed icon"></i>
                            </div>
                        </div>

                        <!-- Baños -->
                        <div class="grid">
                            <label class="label"><?= T_('Bathrooms') ?></label>
                            <div class="info-and-icon">
                                <span class="value">2</span>
                                <i class="fa-solid fa-bath icon"></i>
                            </div>
                        </div>

                        <!-- Área construida -->
                        <div class="grid">
                            <label class="label"><?= T_('Built area') ?></label>
                            <div class="info-and-icon">
                                <span class="value">150 m²</span>
                                <i class="fa-solid fa-ruler-combined icon"></i>
                            </div>
                        </div>

                        <!-- Unidades disponibles -->
                        <div id="units-in" class="grid">
                            <label class="label"><?= T_('Available Units') ?>:</label>
                            <div class="info-and-icon">
                                <span class="value">1</span>
                                <i class="fa-solid fa-layer-group icon"></i>
                            </div>
                        </div>

                    </div>
                    <div id="units-out" class="grid">
                            <label class="label"><?= T_('Available Units') ?>:</label>
                            <div class="info-and-icon">
                                <span class="value">1</span>
                                <i class="fa-solid fa-layer-group icon"></i>
                            </div>
                        </div>
                </div>
            </div>

        </div>

        <div class="pagination-preview" >
            <div class="pagination-container" style="display: inline-flex; gap: 4px; align-items: center;">
                <a class="pagination arrowPreview" href="#">«</a>
                <a class="pagination arrowPreview" href="#">‹</a>
                <a class="pagination other" href="#">1</a>
                <a class="pagination other" href="#">2</a>
                <a class="pagination current" href="#" class="hover-example">3</a>
                <a class="pagination other" href="#" class="hover-example">4</a>
                <a class="pagination other" href="#" class="hover-example">5</a>

                <a class="pagination arrowPreview" href="#">›</a>
                <a class="pagination arrowPreview" href="#">»</a>
            </div>
            <div style="margin-top: 10px; font-size: 0.9rem; color: #666;"><?= T_('Hover example: Page 3') ?></div>
        </div>
    </div>
    <div class="page-layout">
        <div id="layoutPreview" class="screen-preview">
        </div>
    </div>
    </div>      
    </div>
</div>

<script>
const card = `
  <div class="example-card">
    <div class="container-img">
      <img src="https://aballanstrus.ee/wp-content/uploads/2015/01/Kodu-1.jpg" alt="">
      <span class="stage-badge">
        <span class="stage-dot" style="background-color: green;"></span>
        Completed
      </span>
      <span class="prop-ref">#EXMPL12</span>
    </div>
    <div class="container-info">
      <span class="title"><?= T_('Property title') ?></span>
      <div class="box-price">
        <span id='price-out' class="price"><?= T_('Price:') ?></span>
        <i class="fa-solid fa-tags icon"></i>
      </div>

      <div class="property-info">
        <div class="grid-templates">
            <span id='price-in' class="price"><?= T_('Price:') ?></span>
            <div class='info-and-icon'>
                <span><?= T_('Bedrooms:') ?></span>
                <i class="fa-solid fa-bed icon"></i>
            </div>
            <div class='info-and-icon'>
                <span><?= T_('Baths') ?></span>
                <i class="fa-solid fa-bath icon"></i>
            </div>
            <div class='info-and-icon'>
                <span><?= T_('Area') ?></span>
                <i class="fa-solid fa-ruler-combined icon"></i>
            </div>
            <div class='info-and-icon'>
                <span><?= T_('Built Area:') ?></span>
                <i class="fa-solid fa-mountain-city icon"></i>
            </div>
          <span id="units-in"><?= T_('Units') ?></span>
        </div>
        <div id="units-out">
            <span ><?= T_('Units') ?></span>
            <i class="fa-solid fa-layer-group icon"></i>
        </div>
      </div>
    </div>
  </div>
`;

const cards = Array(20).fill(card);
document.getElementById('layoutPreview').innerHTML = cards.join('');
</script>
