<?php get_header(); ?>

<section class="container-fluid bg-teal">
  <main id="primary" class="site-main" style="max-width: 1200px; margin: auto; padding: 2rem;">
    <?php while (have_posts()):
      the_post();
      ?>
      <div class="row text-white">
        <h2 class="ms-3 fw-bold mb-2a"><?php the_title(); ?></h2>
      </div>
      <div class="doc-layout row align-items-start gy-4">
        <div class="col-12 col-md-5  order-2 order-sm-1">
          <div class="bg-light museum-label-box shadow-sm rounded-2 small shenasname pt-4">
            <div class="pb-2 mb-3 text-center">
              <h2 class="fs-5 fw-bold mb-0"><small>-</small> شناسنامه سند <small>-</small></h2>
            </div>
            <?php

            $fields = [
              'عنوان اصلی' => get_the_title(),
              'عنوان سند' => get_field('doc_name'),
              'عنوان‌های فرعی' => get_field('alt_names'),
              'پدیدآورنده سند' => get_field('creator'),
              'نوع سند' => get_field('doc_type'),
              'مکان موضوع سند' => get_field('place'),
              'شماره بازیابی' => get_field('accession_number'),
              'دوره تاریخی موضوع سند' => get_field('era_doc'),
              'تاریخ / دوره‌ تاریخی ایجاد سند' => get_field('era_creation'),
              'متون موجود در سند' => get_field('content'),
              'منبع' => get_field('source'),
              'توضیح نگارستان' => get_field('neg_description'),
            ];

            foreach ($fields as $label => $value) {
              if (!empty($value)) {
                echo '<div class="d-flex border-bottom border-light-subtle py-2">';
                echo '<div class="text-end fw-bold" style="width: 35%; color: #444;">' . $label . ':</div>';
                echo '<div class="ps-3 doc-info" style="width: 65%; color: #222;">';

                if ($label === 'عنوان‌های فرعی' && is_array($value)) {
                  $alt_titles = array_map(function ($item) {
                    return is_array($item) ? ($item['title'] ?? reset($item)) : $item;
                  }, $value);
                  echo esc_html(implode(', ', $alt_titles));
                } else {
                  echo nl2br(esc_html(is_array($value) ? implode('، ', $value) : $value));
                }

                echo '</div></div>';
              }
            }
            ?>
          </div>
        </div>
        <div class="col-12 col-md-7 order-1 order-sm-2">
          <div class="doc-image p-2 mb-3 bg-white shadow-sm border rounded-2">
            <?php if (has_post_thumbnail()): ?>
              <div style="cursor: zoom-in;" data-bs-toggle="modal" data-bs-target="#imageModal">
                <?php the_post_thumbnail('large', ['class' => 'w-100', 'id' => 'featured-image']); ?>
              </div>
            <?php else: ?>
              <p class="text-muted p-3">تصویری برای این سند ثبت نشده است.</p>
            <?php endif; ?>
          </div>
          <div class="bg-light rounded shadow-sm p-2" style="min-height: 100px;">
              <h5>شرح سند:</h5>
               <?php if (get_field('description')): 
                  echo nl2br(esc_html(get_field('description')));
                endif;
                ?>
          </div>
        </div>
      </div>
  <?php
  // Comments
  if (comments_open() || get_comments_number()): ?>
  <section class="container pb-5">
    <div id="comments">
      <?php comments_template(); ?>
    </div>
  </section>
    <?php
  endif;
    ?>
	    </main>

  </section>
	
<?php
endwhile; ?>

<!-- Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close position-sticky top-0 start-0 p-3" data-bs-dismiss="modal"
          aria-label="Close"></button>
        <?php the_post_thumbnail('large', ['class' => 'w-100', 'id' => 'featured-image']); ?>
      </div>
    </div>
  </div>
</div>
<?php get_footer(); ?>

<script>
  jQuery(document).ready(function ($) {
    var english = /^[A-Za-z0-9]*$/;
    $('.doc-info').each(function () {
      var text = $(this).text().replace(/\s/g, '');
      if (english.test(text.substring(0, 3))) {
        $(this).addClass('p-english');
      } else {
        $(this).addClass('font-fd');
      }
    });
  });
</script>