<?php
if (!defined('ABSPATH')) exit;

if (empty($property)) {
    echo '<div class="property-single-container"><p>Property not found.</p></div>';
    return;
}


$primary_color = $options['btnDetails'] ?: '#e65638';
$type_color = $options['btnTypeColor'] ?: '#dddd0f';
$description = $property['description'] ?? '';
?>
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<div class="zoddak-wrapper">
    <div data-ref="<?= $ref; ?>" class="property-single-container" 
        style="--btn-details-color: <?= esc_attr($primary_color);?>;--primary-color: <?= esc_attr($primary_color) ?>; --property-type-bg-color: <?= esc_attr($type_color) ?>; --page-width: <?= esc_attr($options['pageWidth']) ?>;">
    
        <div class="lang-and-back">
            <div class="property-back-link">
                <?php
                $route = trim(get_option('zoddak_custom_route'), '/');
                $url = home_url('/' . $route);
                ?>
                <a href="<?= esc_url($url) ?>">← <span><?= T_('Back to Properties'); ?></span></a>
    
            </div>
            <?php 
                $hideLangSelector = get_option('zoddak_lang_selector');
            ?>
            <?php
                $languages = apply_filters('wpml_active_languages', null, [
                    'skip_missing' => 0,
                    'orderby' => 'code'
                ]);
                $current_lang = defined('ICL_LANGUAGE_CODE')
                ? ICL_LANGUAGE_CODE
                : substr(get_locale(), 0, 2);
            ?>
           

        </div>
    
    <div class="property-gallery-section">
        <div class="property-gallery">
    
        <?php if (!empty($property['images_lg'])): ?>
          <?php
            $images = $property['images_lg'];
            $total_images = count($images);
            $visible_thumbs = 5;
          ?>
    
          <div class="swiper main-swiper">
            <div class="swiper-wrapper">
              <?php foreach ($images as $img): ?>
                <div class="swiper-slide">
                  <img src="<?= esc_url($img) ?>" alt="<?= esc_attr($property['name']) ?>">
                </div>
              <?php endforeach; ?>
            </div>
    
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
    
          <div class="thumbs-wrapper">
            <div class="swiper thumbs-swiper">
              <div class="swiper-wrapper">
                <?php foreach ($images as $index => $img): ?>
                    <div class="swiper-slide">
                      <img src="<?= esc_url($img) ?>" alt="Thumbnail <?= $index + 1 ?>">
                    </div>
                <?php endforeach; ?>
              </div>
            </div>
          </div>
    
        <?php endif; ?>
      </div>
    </div>
    
    
    
    <script>
      window.propertyImages = <?= json_encode($property['images_lg']); ?>;
    </script>
        <!-- Property info -->
        <!-- Features -->
        <div class="property-single-header">
            <h1 class="property-title">
                <?php
                $translations = [
                    'Apartments' => [
                        'es' => 'Apartamento',
                        'de' => 'Wohnung',
                    ],
                    'Villas' => [
                        'es' => 'Villa',
                        'de' => 'Villa',
                    ],
                    'Townhouses' => [
                        'es' => 'Adosado',
                        'de' => 'Reihenhaus',
                    ]
                ];
                $preposition = [
                    'es' => 'en',
                    'de' => 'in',
                ];
                $name = $translations[$property['prop_type']][$current_lang] ?? $property['prop_type'];
                ?>
                <?= esc_html($name . ' ' . strtolower($property['stage']) . ' ' . $preposition[$current_lang]  . ' ' . $property['place']) ?>
            </h1>
            <div class="property-ref"><strong>#</strong><?=esc_html($property['reference']) ?></div>
            <div class="property-meta">
                <?php if (!empty($property['max_price'])): ?>
                    <div class="property-price">
                        <?php if(!empty($property['min_price'] || !empty($property['max_price']))):?>
                            <?php if($property['min_price'] === $property['max_price']):?>
                                <span class="price-title">
                                    <?= $property['price_title'];?>    
                                </span> 
                                <?= number_format($property['max_price'], 0, ',', '.') ?>€
                            <?php else:?>
                                <span class="price-title">
                                    <?= $property['price_title'];?>    
                                </span> 
                                <?= number_format($property['min_price']);?>
                                <span class="price-title">
                                <?= T_('to'); ?>
                                </span>  
                                <?= number_format($property['max_price']);?>€
                            <?php endif;?>
                        <?php endif;?>
                    </div>
                <?php endif; ?>
    
                <?php if (!empty($property['prop_type'])): ?>
                    <div class="property-type" 
                        >
                        <span><?= esc_html($translations[$property['prop_type']][$current_lang] ?? $property['prop_type']) ?></span>
                    </div>
                <?php endif; ?>
                <?php if (!empty($property['stage'])): ?>
                    <div class="property-stage" >
                        <span><?= esc_html($property['stage']) ?></span>
                    </div>
                <?php endif; ?>
    
                <div class="property-location"><?= esc_html($property['place'] ??  '') ?></div>
            </div>
        </div>
        <div class="property-info-section">
            <div class="property-info-column">
    
            
                <div class="property-features-section">
                    <h3><?php echo T_('Features');?></h3>
                </div>
                <div class="property-info-container">
    
                    <table class="property-features-table">
                        <tbody>
                            <?php if (!empty($property['max_beds']) || $property['min_beds']): ?>
                                <?php if($property['min_beds'] === $property['max_beds']):?>
                                    <tr>
                                        <th><i class="fas fa-bed"></i></th>
                                        <td><?= number_format($property['max_beds']);?> <?php echo T_('Bedrooms')?></td>
    
                                    </tr>
                                <?php else:?>
                                <tr>
                                    <th><i class="fas fa-bed"></i></th>
                                    <td><?= number_format($property['min_beds'], 0, ',', '.') ?> - <?= number_format($property['max_beds']);?> <?php echo T_('Bedrooms');?></td>
                                </tr>
                                <?php endif;?>
                            <?php endif; ?>
                                
                            <?php if (!empty($property['max_baths']) || $property['min_baths']): ?>
                                <?php if($property['min_baths'] === $property['max_baths']):?>
                                    <tr>
                                    <th><i class="fas fa-bath"></i></th>
                                        <td><?= number_format($property['max_baths']);?> <?php echo T_('Bathrooms');?></td>
    
                                    </tr>
                                <?php else:?>
                                <tr>
                                    <th><i class="fas fa-bath"></i></th>
                                    <td><?= number_format($property['min_baths'], 0, ',', '.') ?> - <?= number_format($property['max_baths']);?> <?php echo T_('Bathrooms');?></td>
                                </tr>
                                <?php endif;?>
                            <?php endif; ?>
    
                            <?php if (!empty($property['max_built_area']) || $property['min_built_area']): ?>
                                <?php if($property['min_built_area'] === $property['max_built_area']):?>
                                    <tr>
                                        <th><span class="dashicons dashicons-admin-home"></th>
                                        <td><?= number_format($property['max_built_area']);?> m2 <?php echo T_('Built area');?></td>
    
                                    </tr>
                                <?php else:?>
                                <tr>
                                    <th><span class="dashicons dashicons-admin-home"></span></th>
                                    <td><?= number_format($property['min_built_area'], 0, ',', '.') ?> - <?= number_format($property['max_built_area']);?> m2 <?php echo T_('Built area');?></td>
                                </tr>
                                <?php endif;?>
                            <?php endif; ?>
    
                            <?php if (!empty($property['max_plot_area']) || $property['min_plot_area']): ?>
                                <?php if($property['min_plot_area'] === $property['max_plot_area']):?>
                                    <tr>
                                        <th><span class="dashicons dashicons-layout"></span></th>
                                        <td><?= number_format($property['max_plot_area']);?> m2 <?php echo esc_html(T_('Plot area'));?></td>
    
                                    </tr>
                                <?php else:?>
                                <tr>
                                    <th><span class="dashicons dashicons-layout"></span></th>
                                    <td><?= number_format($property['min_plot_area'], 0, ',', '.') ?> - <?= number_format($property['max_built_area']);?> m2 <?php echo T_('Plot area');?></td>
                                </tr>
                                <?php endif;?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
    
                <?php if (!empty($description)): ?>
                    <div class="property-description">
                        <h3><?php echo T_('Description'); ?></h3>
                        <div class="property-description-content">
                            <?= wp_kses_post($description) ?>
                        </div>
                    </div>
                <?php endif; ?>
                <?php 
                    $remaining = $property['units_total'] - $property['units_sold']
                ;?> 
                <?php if(!empty($unitsData)):?>
                    <div class="property-units">
                        <h3><?php echo T_('Units available'); ?></h3>
                        <div class="units-title">
                            <span><?php echo T_('Total:') ?> <?=$remaining;?></span>
                        </div>
                        <div class="box-content-units">
                            <?php foreach($unitsData as $key => $unit):?>
                                <div data-beds="<?= $key ?>" class="box-outter">
                                    <div class="box-total-units">
                                        <i class="fas fa-bed"></i>
                                        <span><?php echo T_('Bedrooms') ?> <?= $key; ?></span>
                                        <span class="total-available"><?= $unit['count']; ?> <?php echo T_('Units') ?></span>
                                    </div>
                                    <i class="fas fa-chevron-down arrow"></i>
                                    </div>
    
                                    <div class="box-collapse">
                                        <table class="units-table">
                                            <thead>
                                            <tr>
                                                <th><?php echo T_('Unit') ?></th>
                                                <th><?php echo T_('Baths') ?></th>
                                                <th><?php echo T_('Built Area') ?></th>
                                                <th><?php echo T_('Plot Area') ?></th>
                                                <th><?php echo T_('Price (€)') ?></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <?php foreach ($unit['units'] as $subunit): ?>
                                                <tr class="table-row">
                                                    <td><?= $subunit['name']; ?></td>
                                                    <td><?= $subunit['baths']; ?></td>
                                                    <td><?= $subunit['builtArea'];?>m2</td>
                                                    <td><?= $subunit['plotArea'];?>m2</td>
                                                    <td><?= number_format($subunit['price']); ?></td>
                                                </tr>
                                            <?php endforeach; ?>
                                            </tbody>
                                        </table>
                                        </div>
    
                            <?php endforeach;?>
                        </div>
                    </div>
                <?php endif;?>
                    <div class="property-map-section">
                        <h3><?php echo T_('Location'); ?></h3>
                        <div id="property-map" 
                            style="height: 400px; width: 100%; margin-bottom: 20px;"
                            data-lat="<?= (float) $property['latitude'] ?> "
                            data-lng="<?= (float) $property['longitude'] ?>"
                            data-color="<?= esc_attr($primary_color) ?>">
                        <?php $clave_api = get_option('zoddak_google_maps_api');?>
        
                        <?php if ($clave_api): ?>
                            <?php
                                $google_url = sprintf(
                                    'https://maps.googleapis.com/maps/api/js?key=%s&callback=initMap',
                                    esc_attr($clave_api)
                                );
                            ?>
                            <script src="<?php echo $google_url; ?>" async defer></script>
                        <?php else: ?>
                            <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
                            <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
                        <?php endif; ?>
                    </div>
                </div>
    
            </div>
            
            <div class="property-contact-column">
                <div class="property-contact-form">
                    <h2><?php echo T_('Inquire about this property'); ?></h2>
                    <?php
                        $form_shortcode = !empty($options['contactForm']) ? $options['contactForm'] : '';
                        if ($form_shortcode) {
                            echo do_shortcode($form_shortcode);
                        } else {
                            // Si no hay formulario, mostramos uno por defecto o un aviso
                            echo do_shortcode('[contact-form-7 id="2456" title="Property Contact"]');
                            echo '<div class="zoddak-contact-warning" style="margin-top:10px; background:#fff8e5; border:1px solid #f3c65c; border-radius:8px; padding:12px; color:#8a6d3b; font-size:14px;">
                                    ⚠️ No custom contact form configured. Default form loaded.
                                </div>';
                        }
                        ?>
                </div>
            </div>
        </div>
    </div>
    <div class="powered-by-zoddak">
        <span>Powered by: </span>
        <img id="zoddakLogo" src="<?php echo  ZODDAK_PLUGIN_URL . 'images/zoddak.png' ?>" alt="zoddak logo">
    </div>
</div>
<?php get_footer(); ?>
<script>
    const logoZoddak = document.getElementById('zoddakLogo');
    logoZoddak.addEventListener('click', () => {
        window.open('https://www.zoddak.com', '_blank');
    })
</script>
