<?php
/**
 * Template for displaying single hebergement custom post type posts
 */
get_header();

// Check if this post is built with Elementor to bypass standard template
if ( class_exists( '\Elementor\Plugin' ) && \Elementor\Plugin::$instance->documents->get( get_the_ID() ) && \Elementor\Plugin::$instance->documents->get( get_the_ID() )->is_built_with_elementor() ) {
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    get_footer();
    return;
}

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        $post_id = get_the_ID();
        $price = get_post_meta( $post_id, 'price', true );
        $rating = get_post_meta( $post_id, 'rating', true );
        $city = get_post_meta( $post_id, 'city', true );
        $type = get_post_meta( $post_id, 'type', true );

        if ( empty( $price ) ) $price = '€€';
        if ( empty( $rating ) ) $rating = '4,5';
        if ( empty( $city ) ) $city = 'Bénin';
        if ( empty( $type ) ) $type = 'Hôtel';

        $hero_img = get_the_post_thumbnail_url( $post_id, 'full' ) ? get_the_post_thumbnail_url( $post_id, 'full' ) : 'https://dahomeydiscovery.com/wp-content/uploads/2026/05/Attractions-banner.jpg';
        $bg_style = "background-image:url('{$hero_img}');";

        ?>
        <div style="font-family:'Sora',sans-serif; color:#241009; background:#FBF7EF; overflow:hidden;">

          <!-- Hero Section -->
          <section style="position:relative; height:480px; overflow:hidden; background:#241009;">
            <div style="position:absolute; inset:0; <?php echo $bg_style; ?> background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
            <div style="position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,16,9,0.3) 0%, rgba(36,16,9,0.2) 50%, rgba(36,16,9,0.85) 100%); pointer-events:none;"></div>
            <div style="position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 56px; max-width:1180px; margin:0 auto; left:0; right:0; pointer-events:none;">
              <div style="display:flex; align-items:center; gap:9px; font-weight:500; font-size:13px; color:rgba(251,247,239,0.7); margin-bottom:18px;">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><span style="color:#FB9A02;">Accueil</span></a>
                <span>›</span>
                <a href="<?php echo esc_url( home_url( '/organisez/' ) ); ?>"><span style="color:#FB9A02;">Organisez</span></a>
                <span>›</span>
                <span><?php the_title(); ?></span>
              </div>
              <div style="display:inline-flex; align-items:center; gap:7px; background:rgba(26,11,5,0.78); backdrop-filter:blur(4px); color:#FBF7EF; font-weight:600; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; padding:7px 13px; border-radius:20px; width:fit-content; margin-bottom:16px;"><?php echo esc_html($type); ?></div>
              <h1 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:56px; line-height:1.1; letter-spacing:-0.02em; color:#FBF7EF; margin:0; max-width:24ch;"><?php the_title(); ?></h1>
            </div>
          </section>

          <!-- Core content & Sidebar layout -->
          <section style="max-width:1180px; margin:0 auto; padding:80px 56px; display:grid; grid-template-columns:1.8fr 1fr; gap:64px; align-items:flex-start;">
            <div>
              <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#E8431E; text-transform:uppercase;">L'hébergement</span>
              <h2 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:36px; line-height:1.1; letter-spacing:-0.015em; color:#241009; margin:12px 0 22px;">Présentation</h2>
              <div style="font-weight:400; font-size:17px; line-height:1.8; color:#3A2415; margin:0;">
                <?php the_content(); ?>
              </div>
            </div>
            
            <div style="background:#fff; border:1px solid #EFE2CE; border-radius:20px; padding:32px;">
              <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:18px; color:#241009; margin-bottom:22px;">En bref</div>
              <div style="display:flex; flex-direction:column; gap:18px;">
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Type</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($type); ?></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Ville</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($city); ?></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Note</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($rating); ?> / 5</span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Budget</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($price); ?></span>
                </div>
              </div>
              <div class="gb-btn" style="margin-top:26px; text-align:center; background:linear-gradient(95deg,#FB9A02,#E8431E); color:#FBF7EF; font-weight:600; font-size:15px; padding:15px; border-radius:30px; cursor:pointer; width:100%;">Contacter l'établissement</div>
              
              <?php
              $etab_id = get_post_meta( get_the_ID(), '_associated_etablissement_id', true );
              if ( $etab_id ) {
                  $etab_post = get_post( $etab_id );
                  if ( $etab_post ) {
                      ?>
                      <div style="margin-top: 24px; padding-top: 20px; border-top: 1px dashed #EFE2CE;">
                        <span style="font-weight:600; font-size:11px; letter-spacing:0.06em; color:#9A8270; text-transform:uppercase;">Géré par</span>
                        <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:18px; color:#241009; margin-top:4px;"><?php echo esc_html( $etab_post->post_title ); ?></div>
                        <div style="font-size:13px; color:#6A4A38; margin-top:4px;"><?php echo wp_trim_words( $etab_post->post_content, 14 ); ?></div>
                      </div>
                      <?php
                  }
              } else {
                  ?>
                  <div style="margin-top: 24px; padding-top: 20px; border-top: 1px dashed #EFE2CE;">
                    <div id="gb-claim-trigger" class="gb-btn" style="text-align:center; background:#241009; color:#FBF7EF; font-weight:600; font-size:13.5px; padding:12px; border-radius:30px; cursor:pointer; width:100%;">Revendiquer cet article</div>
                  </div>
                  <?php
              }
              ?>
            </div>
          </section>

          <!-- Claim Modal -->
          <div id="gb-claim-modal" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(26,11,5,0.7); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px;">
            <div style="background:#fff; border-radius:24px; max-width:480px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,0.3); overflow:hidden; border:1px solid #EFE2CE; position:relative; font-family:'Sora',sans-serif;">
              
              <!-- Header -->
              <div style="padding:24px 30px; background:#241009; color:#FBF7EF; display:flex; justify-content:space-between; align-items:center;">
                <h3 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:22px; margin:0;">Revendiquer cet article</h3>
                <div id="gb-claim-close" style="cursor:pointer; opacity:0.8; font-size:24px; line-height:1;">&times;</div>
              </div>

              <!-- Inner container -->
              <div style="padding:30px;" id="gb-modal-body">
                <?php if ( ! is_user_logged_in() ) : ?>
                  <!-- STEP 1: LOGIN / REGISTER -->
                  <div style="display:flex; border-bottom:1px solid #EFE2CE; margin-bottom:24px;">
                    <div id="tab-login-btn" style="flex:1; text-align:center; padding-bottom:12px; font-weight:700; font-size:15px; color:#E8431E; border-bottom:2px solid #E8431E; cursor:pointer;">Connexion</div>
                    <div id="tab-register-btn" style="flex:1; text-align:center; padding-bottom:12px; font-weight:700; font-size:15px; color:#9A8270; border-bottom:2px solid transparent; cursor:pointer;">Créer un compte</div>
                  </div>

                  <form id="gb-auth-form">
                    <input type="hidden" name="auth_action" id="gb-auth-action" value="login">
                    
                    <div id="reg-fields" style="display:none; margin-bottom:16px;">
                      <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Nom de votre établissement</label>
                      <input type="text" name="etablissement_name" placeholder="Ex: Awalé Plage" style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; background:#FFF;">
                    </div>

                    <div style="margin-bottom:16px;">
                      <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Adresse e-mail</label>
                      <input type="email" name="email" required placeholder="Ex: partenaire@gmail.com" style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; background:#FFF;">
                    </div>

                    <div style="margin-bottom:20px;">
                      <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Mot de passe</label>
                      <input type="password" name="password" required placeholder="Saisissez un mot de passe" style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; background:#FFF;">
                    </div>

                    <div id="gb-auth-error" style="color:#E8431E; font-size:13.5px; margin-bottom:16px; display:none;"></div>

                    <button type="submit" class="gb-btn" style="background:linear-gradient(95deg,#FB9A02,#E8431E); color:#fff; font-weight:600; font-size:15px; padding:14px; border-radius:30px; width:100%; border:none; outline:none; cursor:pointer;">Suivant</button>
                  </form>
                <?php else : ?>
                  <!-- STEP 2: JUSTIFICATION -->
                  <form id="gb-claim-form">
                    <input type="hidden" name="post_id" value="<?php echo get_the_ID(); ?>">
                    <div style="margin-bottom:20px;">
                      <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Justificatif de revendication</label>
                      <textarea name="justification" required rows="5" placeholder="Décrivez votre lien avec cet établissement et fournissez des preuves pour que l'administrateur puisse valider votre demande." style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; font-family:'Sora',sans-serif; line-height:1.5; resize:none; background:#FFF;"></textarea>
                    </div>

                    <div id="gb-claim-error" style="color:#E8431E; font-size:13.5px; margin-bottom:16px; display:none;"></div>
                    <div id="gb-claim-success" style="color:green; font-size:13.5px; margin-bottom:16px; display:none;"></div>

                    <button type="submit" class="gb-btn" style="background:linear-gradient(95deg,#FB9A02,#E8431E); color:#fff; font-weight:600; font-size:15px; padding:14px; border-radius:30px; width:100%; border:none; outline:none; cursor:pointer;">Soumettre la demande</button>
                  </form>
                <?php endif; ?>
              </div>
            </div>
          </div>

          <script>
          document.addEventListener('DOMContentLoaded', function() {
              const trigger = document.getElementById('gb-claim-trigger');
              const modal = document.getElementById('gb-claim-modal');
              const closeBtn = document.getElementById('gb-claim-close');

              if (trigger) {
                  trigger.addEventListener('click', () => modal.style.display = 'flex');
              }
              if (closeBtn) {
                  closeBtn.addEventListener('click', () => modal.style.display = 'none');
              }
              window.addEventListener('click', (e) => {
                  if (e.target === modal) modal.style.display = 'none';
              });

              const tabLogin = document.getElementById('tab-login-btn');
              const tabRegister = document.getElementById('tab-register-btn');
              const authAction = document.getElementById('gb-auth-action');
              const regFields = document.getElementById('reg-fields');

              if (tabLogin && tabRegister) {
                  tabLogin.addEventListener('click', () => {
                      tabLogin.style.color = '#E8431E';
                      tabLogin.style.borderBottom = '2px solid #E8431E';
                      tabRegister.style.color = '#9A8270';
                      tabRegister.style.borderBottom = '2px solid transparent';
                      authAction.value = 'login';
                      regFields.style.display = 'none';
                  });

                  tabRegister.addEventListener('click', () => {
                      tabRegister.style.color = '#E8431E';
                      tabRegister.style.borderBottom = '2px solid #E8431E';
                      tabLogin.style.color = '#9A8270';
                      tabLogin.style.borderBottom = '2px solid transparent';
                      authAction.value = 'register';
                      regFields.style.display = 'block';
                  });
              }

              const authForm = document.getElementById('gb-auth-form');
              if (authForm) {
                  authForm.addEventListener('submit', function(e) {
                      e.preventDefault();
                      const errorDiv = document.getElementById('gb-auth-error');
                      errorDiv.style.display = 'none';

                      const formData = new FormData(this);
                      formData.append('action', 'gb_auth_user');
                      formData.append('security', gb_auth_vars.nonce);

                      fetch(gb_auth_vars.ajax_url, {
                          method: 'POST',
                          body: formData
                      })
                      .then(res => res.json())
                      .then(data => {
                          if (data.success) {
                              location.reload(); 
                          } else {
                              errorDiv.textContent = data.data.message;
                              errorDiv.style.display = 'block';
                          }
                      })
                      .catch(() => {
                          errorDiv.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                          errorDiv.style.display = 'block';
                      });
                  });
              }

              const claimForm = document.getElementById('gb-claim-form');
              if (claimForm) {
                  claimForm.addEventListener('submit', function(e) {
                      e.preventDefault();
                      const errorDiv = document.getElementById('gb-claim-error');
                      const successDiv = document.getElementById('gb-claim-success');
                      errorDiv.style.display = 'none';
                      successDiv.style.display = 'none';

                      const formData = new FormData(this);
                      formData.append('action', 'gb_submit_claim');
                      formData.append('security', gb_auth_vars.nonce);

                      fetch(gb_auth_vars.ajax_url, {
                          method: 'POST',
                          body: formData
                      })
                      .then(res => res.json())
                      .then(data => {
                          if (data.success) {
                              successDiv.textContent = data.data.message;
                              successDiv.style.display = 'block';
                              claimForm.reset();
                              setTimeout(() => {
                                  modal.style.display = 'none';
                                  location.reload();
                              }, 2500);
                          } else {
                              errorDiv.textContent = data.data.message;
                              errorDiv.style.display = 'block';
                          }
                      })
                      .catch(() => {
                          errorDiv.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                          errorDiv.style.display = 'block';
                      });
                  });
              }
          });
          </script>

        </div>
        <?php
    endwhile;
endif;
get_footer();
