<?php
// اتصال به پایگاه داده
$conn = new mysqli("localhost", "dahyukao_NatureProject", "fereshteh22", "dahyukao_NatureProject");
if ($conn->connect_error) {
    die("خطا در اتصال به پایگاه داده: " . $conn->connect_error);
}
$conn->set_charset("utf8mb4");

// دریافت شناسه پروژه از URL
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;

// بررسی مقدار ورودی ID
if ($id <= 0) {
    die("شناسه نامعتبر!");
}

// 1️⃣ دریافت اطلاعات پروژه
$sql_proj = "SELECT title, description, thumbnail FROM TitleDescription WHERE id = $id";
$res_proj = $conn->query($sql_proj);
if ($res_proj && $res_proj->num_rows > 0) {
    $p = $res_proj->fetch_assoc();
    $title       = $p['title'];
    $description = $p['description'];
    $thumbnail   = $p['thumbnail'];
} else {
    $title       = "عنوان موجود نیست";
    $description = "توضیحات موجود نیست";
    $thumbnail   = "https://example.com/default-thumbnail.jpg";
}

// 2️⃣ دریافت نقشه پراکنش
$sql_map = "SELECT iframe FROM Distribution_Map WHERE id = $id";
$res_map = $conn->query($sql_map);
$map_iframe = ($res_map && $res_map->num_rows > 0) ? $res_map->fetch_assoc()["iframe"] : "اطلاعات نقشه موجود نیست.";

// 3️⃣ دریافت توضیحات تخصصی
$sql_expert = "SELECT description FROM Expert_Description WHERE NatProj_id = $id";
$res_expert = $conn->query($sql_expert);
$expert_desc = ($res_expert && $res_expert->num_rows > 0) ? $res_expert->fetch_assoc()["description"] : "اطلاعات تخصصی موجود نیست.";

// 4️⃣ دریافت گالری تصاویر
$sql_gallery = "SELECT * FROM PicVerGal WHERE id = $id";
$res_gallery = $conn->query($sql_gallery);

// 5️⃣ دریافت گالری ویدئویی
$sql_video = "SELECT * FROM VertGalleryVid WHERE NatProj_id = $id";
$res_video = $conn->query($sql_video);

// 6️⃣ دریافت لیست عوامل مرتبط با پروژه
$sql_agents = "SELECT Num, Author, Link, Output_Link, Achievements FROM Agents WHERE NatProj_id = $id ORDER BY Num ASC";
$res_agents = $conn->query($sql_agents);
?>

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title><?php echo htmlspecialchars($title); ?></title>
    <link rel="stylesheet" href="NatProj.css">
				<link type="text/css" rel="stylesheet" href="../../IlamFixedMenu.css"/>

  <!-- ارجاع به فایل جاوا اسکریپت -->
  <script src="NatProj.js" defer></script>
  <!-- بارگذاری API نقشه نشانی با defer -->
  <script src="https://api.neshan.org/v1/map.js?key=web.a9425873d1ea471aa575f0eabe2b671f" defer></script>
  <style>
  @font-face {
  font-family: 'Vazir-Regular';
  src: url('../../fonts/Vazir/Vazir-Regular-FD.eot');
  src: url('../../fonts/Vazir/Vazir-Regular-FD.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Vazir/Vazir-Regular-FD.woff2') format('woff2'),
       url('../../fonts/Vazir/Vazir-Regular-FD.woff') format('woff'),
       url('../../fonts/Vazir/Vazir-Regular-FD.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
    p, td {font-family: 'Vazir-Regular', sans-serif;}
td{font-size: 13px; font-weight: 700;}
  
    /* استایل‌های ریسپانسیو برای نگهداری iframe نقشه */
    .responsive-map {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding-top: 56.25%; /* نسبت 16:9 (برای دسکتاپ) */
    }
    .responsive-map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    @media (max-width: 600px) {
        .responsive-map {
            padding-top: 100%; /* افزایش ارتفاع در گوشی */
        }
    }
    
    /* استایل جدول طبقه‌بندی */
    .classification-responsive {
        overflow-x: scroll; /* نوار اسکرول افقی همیشه قابل مشاهده */
    }
    .responsive-classification-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    .responsive-classification-table th,
    .responsive-classification-table td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: right;
    }
    .responsive-classification-table th {
      background-color: #d1f2eb;
    }
    
    /* استایل جدول مراجع (References) - حالت اولیه */
    .references-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }
    .references-table th,
    .references-table td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: right;
    }
    .references-table th {
      background-color: #f9f9f9;
    }
	
	h2 {
    color: #27ae60; /* یک سبز زیبا که خوانایی خوبی دارد */
    font-weight: bold;
    
    
}



/*      آیکون های گل و گیاه  */


.item {display: flex; flex-direction: column; padding: 0.1em; margin: 0.2em; border-radius: 0.25em; scroll-snap-align: start; scroll-margin-inline: 0; min-width: 18%;} 
.list {width: 100%; height: auto; display: flex; overflow-x: auto; overflow-y: hidden; margin: 0; padding: 0.5em; border-radius: 0.5em; scroll-snap-type: x mandatory; direction: rtl; gap: 0.15em;} 
.itemImage {width: 100%; max-width: 100px; aspect-ratio: 1 / 1; object-fit: contain;} 
.itemTitle {color: #000000; margin-top: 0.1em; margin-bottom: 0.1em; text-align: center;}
@media (max-width: 800px) {
  .item {padding: 0.2em; margin: 0.3em;} 
  .item {min-width: 30%;} 
  .itemImage {max-width: 87px;} 
  .list {gap: 0em;}
}
a{text-decoration: none;}	
  
  
  
  
  
  
  </style>
  <script>
    // ثبت خطاهای ویدئو
    document.addEventListener("DOMContentLoaded", function() {
      var videos = document.querySelectorAll("video");
      videos.forEach(function(video) {
        video.addEventListener("error", function(e) {
          console.error("خطا در بارگذاری ویدئو:", e);
        });
      });
    });
  </script>
</head>
<body>

<div class="project-container">

    <!-- بخش 1️⃣: عنوان و تصویر -->
    <div class="title-box">
        <img src="<?php echo htmlspecialchars($thumbnail); ?>" alt="پروژه های کمک به طبیعت در ایلام" class="title-thumbnail">
        <h1><?php echo htmlspecialchars($title); ?></h1>
    </div>

    <!-- بخش 2️⃣: توضیحات -->
    <div class="description-box">
        <p><?php echo nl2br(htmlspecialchars($description)); ?></p>
    </div>

<!-- بخش گالری تصاویر -->
<?php if ($res_gallery && $res_gallery->num_rows > 0): ?>
    <h2 style ="direction: rtl;">گالری تصاویر مرتبط با پروژه</h2>

<div class="list3">
    <?php
    $row_gallery = $res_gallery->fetch_assoc();
    for ($i = 1; $i <= 7; $i++) {
        if (!empty($row_gallery["image_url$i"])) {
            echo '<div class="item3">';
                echo '<a href="' . htmlspecialchars($row_gallery["image_url$i"]) . '">';
                    echo '<img src="' . htmlspecialchars($row_gallery["image_url$i"]) . '" alt="تصویر ' . $i . '">';
                echo '</a>';
                echo '<div class="info-icon" onclick="toggleTooltip(this)">ℹ</div>';
                echo '<div class="info-tooltip">';
                    echo '<strong>عکاس:</strong> ' . htmlspecialchars($row_gallery["photographer$i"]) . '<br>';
                    echo '<strong>توضیحات:</strong> ' . nl2br(htmlspecialchars($row_gallery["description$i"]));
                echo '</div>';
                echo '<div class="itemTitle3">' . htmlspecialchars($row_gallery["title$i"]) . '</div>';
            echo '</div>';
        }
    }
    ?>
</div>
<?php else: ?>
<p>هیچ تصویری برای این گل یافت نشد.</p>
<?php endif; ?>




    <!-- بخش 4️⃣: توضیحات تخصصی -->
    <div class="expert-description-section">
        <h2>توضیحات تکمیلی در مورد پروژه</h2>
        <div class="description-box">
            <p><?php echo nl2br(htmlspecialchars($expert_desc)); ?></p>
        </div>
    </div>



    <!-- بخش 6️⃣: گالری ویدئویی -->
    <?php if ($res_video && $res_video->num_rows > 0): ?>
    <div class="vertical-video-gallery-section">
        <h2  style ="direction: rtl;">گالری ویدئوهای مرتبط با پروژه</h2>
        <div class="list3">
            <?php
            $row_video = $res_video->fetch_assoc();
            for ($i = 1; $i <= 7; $i++) {
                if (!empty($row_video["video_url$i"])) {
                    echo '<div class="item3">';
                    echo '<video controls preload="metadata" playsinline>';
                    echo '<source src="' . htmlspecialchars($row_video["video_url$i"]) . '" type="video/mp4">';
                    echo 'مرورگر شما قادر به پخش این ویدئو نیست.';
                    echo '</video>';
                    echo '<div class="itemTitle3">' . htmlspecialchars($row_video["video_title$i"]) . '</div>';
                    echo '</div>';
                }
            }
            ?>
        </div>
    </div>
    <?php endif; ?>


  <!-- بخش 3️⃣: نقشه پراکنش -->
    <div class="distribution-map-section">
        <h2 style ="direction: rtl;">نقشه پراکنش پروژه</h2>
        <div class="responsive-map">
            <?php echo $map_iframe; ?>
        </div>
    </div>



<?php
// دریافت لیست عوامل مرتبط از جدول Agents
$sql_agents = "SELECT * FROM `Agents` WHERE NatProj_id = $id ORDER BY `Num` ASC";
$res_agents = $conn->query($sql_agents);

if ($res_agents && $res_agents->num_rows > 0) {
    echo '<h2 class="agents-heading">عوامل ' . htmlspecialchars($title) . '</h2>';
    echo '<table class="agents-table">';
    echo '<colgroup>';
        echo '<col style="width: 20px;">';   // شماره
        echo '<col style="width: auto;">';   // نویسنده
        echo '<col style="width: 36px;">';   // لینک
        echo '<col style="width: auto;">';   // دستاورد
    echo '</colgroup>';
    
    echo '<thead>';
        echo '<tr>';
            echo '<th>N</th>';  // شماره عامل (Agent Number)
            echo '<th>متصدی</th>';
            echo '<th>لینک</th>';
            echo '<th>دستاورد و ماموریت</th>';
        echo '</tr>';
    echo '</thead>';
    
    echo '<tbody>';
    while ($row_agents = $res_agents->fetch_assoc()) {
        // بررسی اینکه اطلاعات ردیف کاملاً خالی نباشد
        if (
            trim($row_agents['Author']) === '' &&
            trim($row_agents['Link']) === '' &&
            trim($row_agents['Output_Link']) === '' &&
            trim($row_agents['Achievements']) === ''
        ) {
            continue;
        }
        
        echo '<tr>';
            echo '<td>' . htmlspecialchars($row_agents['Num']) . '</td>';
            echo '<td>' . htmlspecialchars($row_agents['Author']) . '</td>';
            echo '<td>';
                echo '<a href="' . htmlspecialchars($row_agents['Output_Link']) . '">';
                    echo '<img src="' . htmlspecialchars($row_agents['Link']) . '" alt="لینک پروژه های مهار آتش سوزی ایلام" width="30" height="30">';
                echo '</a>';
            echo '</td>';
            echo '<td>' . nl2br(htmlspecialchars($row_agents['Achievements'])) . '</td>';
        echo '</tr>';
    }
    echo '</tbody>';
    echo '</table>';
} else {
    echo '<p>هیچ عاملی برای این پروژه ثبت نشده است.</p>';
}

// بستن اتصال به پایگاه داده
$conn->close();
?>


<div style="direction: rtl;">
    🔐 نکته: برای ورود به پیام رسان های فیلتر شده، با وی پی ان (VPN) وارد شوید.
</div>

            <!-- ************** بخش کپی لینک مرتبط با <script src = "../../CommonJavaScripts/LinkCopy.js"></script>***********   -->
<div id="link-copy-module" style="margin: 20px 0; font-family: Tahoma, sans-serif; position: relative;">
    <div class="copy-link-container" 
         style="display: flex; width: 100%; border-radius: 50px; overflow: hidden; box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3); height: 40px;">
        <input type="text" id="page-url" value="" readonly
               style="flex-grow: 1; padding: 0 20px; border: none; background-color: #f8f9fa; font-size: 0.9rem; outline: none; color: #2b2d42; border-radius: 50px 0 0 50px; height: 100%; line-height: 40px;">
        <button id="copy-button"
                style="padding: 0 20px; background: linear-gradient(135deg, #4361ee, #3a0ca3); color: white; border: none; cursor: pointer; font-size: 0.9rem; font-weight: bold; border-radius: 0 50px 50px 0; height: 100%; line-height: 40px; transition: all 0.3s ease;">
            کُپی لینک
        </button>
    </div>
    <div id="copy-notification" 
         style="display: none; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); 
                padding: 6px 12px; background-color: #4cc9f0; color: white; border-radius: 15px; 
                font-size: 0.8rem; text-align: center; white-space: nowrap; z-index: 1;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
        !لینک کپی شد
    </div>
</div>


        <h2 style ="direction: rtl;">سایر پروژه های طبیعت</h2>

<?php
include('NatProjList.php');
?>
<br>

<div class="hideOnPC"> <div class="navbar">								 				<!-- ****************** Fixed Menu ******************** -->
<a href="https://dahyuka.org/Nat/Ilam.php">طبیعت</a>
<a href="https://dahyuka.org/His/Ilam.php">تاریخ</a>
<a href="#contact">نمایه</a>
<a href="https://dahyuka.org/Proj/Ilam.php">پروژه ها</a>
<a href="https://dahyuka.org/">فروشگاه</a>
  </div>	</div>
</div>


<script src = "../../CommonJavaScripts/LinkCopy.js"></script>
</body>
</html>