<div class="wrap">
  <h1>Customize Property Detail</h1>
  <p>Aquí podrás ajustar los colores y estilos visibles en la página de detalle de cada propiedad.</p>
  <?php settings_errors(); ?>
  <div class="customization-container">
    <!-- Panel de configuración -->
    <div class="customization-form">
      <form method="post" action="options.php">
        <?php
        $options = [
            'bgPriceColor' => get_option('zoddak-btn-price-color'),
            'bgStageColor' => get_option('zoddak-btn-stage-color'),
            'bgFeatureColor' => get_option('zoddak-icons-color'),
            'bgTxtFeatureColor' => get_option('zoddak-icons-txt-color')
        ]; 
            settings_fields('zoddak_details_display_group');
            do_settings_sections('zoddak_property_detail_page'); // <-- cambia esto
            submit_button(T_('Save changes'));

            ?>
      </form>
    </div>
    <!-- Vista previa -->
    <div class="preview-container">
      <h3><?= T_('Preview') ?></h3>

      <div id="propertyPreview" class="property-preview">
        <!-- Header -->
        <h2 class="property-title"><?= T_('Villa completed in La Zagaleta') ?></h2>

        <div class="property-tags">
          <span id="pricePreview" class="tag price" style="background-color: <?= $options['bgPriceColor'];?>;">€30,000,000</span>
          <span class="tag type"><?= T_('Villa') ?></span>
          <span id="stagePreview" class="tag status" style="background-color: <?= $options['bgStageColor'];?>;"><?= T_('Completed') ?></span>
          <span class="tag location">La Zagaleta</span>
        </div>

        <!-- Features -->
        <div class="property-features">
          <!-- Bedrooms -->
            <div class="feature">
            <div class="icon-circle"><i  class="fa-solid fa-bed ft-text"></i></div>
            <div class="feature-info">
                <strong>9</strong>
                <span><?= T_('Bedrooms') ?></span>
            </div>
            </div>

            <!-- Bathrooms -->
            <div class="feature">
            <div class="icon-circle"><i  class="fa-solid fa-bath ft-text"></i></div>
            <div class="feature-info">
                <strong>13</strong>
                <span><?= T_('Bathrooms') ?></span>
            </div>
            </div>

            <!-- Built Area -->
            <div class="feature">
            <div class="icon-circle"><i  class="fa-solid fa-building ft-text"></i></div>
            <div class="feature-info">
                <strong>2,200 m²</strong>
                <span><?= T_('Built Area') ?></span>
            </div>
            </div>

            <!-- Plot Area -->
            <div class="feature">
            <div class="icon-circle"><i  class="fa-solid fa-vector-square ft-text"></i></div>
            <div class="feature-info">
                <strong>8,000 m²</strong>
                <span><?= T_('Plot Area') ?></span>
            </div>
            </div>

        </div>

        <!-- Description -->
        <div class="property-description">
          <h3><?= T_('Description') ?></h3>
          <p><?= T_('We are delighted to introduce you a very luxurious mansion with panoramic views of the Mediterranean Sea and located within the gated and secure La Zagaleta Resort...') ?></p>
        </div>
      </div>
    </div>
  </div>
</div>
