<?php 
// Set page title before including header
$pageTitle = "Contact Us - E&SE Kotli";
include_once 'header_new.php'; 
?>

<style>
  /* Alert for Sending messages */  
  .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
  }
  
  .alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
  }
  
  .alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
  }
  
  .alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
  }
  
  /* Contact Info Section */
  .contact-info {
    background: #ffffff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-left: 5px solid #53ccc6;
    max-width: 600px;
    width: 80%;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .contact-info:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  .contact-info img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #53ccc6;
    margin-bottom: 15px;
    transition: all 0.3s ease;
  }
  
  .contact-info:hover img {
    transform: scale(1.05);
  }
  
  .contact-info h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.5rem;
    text-align: center;
  }
  
  .contact-details {
    text-align: left;
  }
  
  .contact-info p {
    margin: 5px 0;
    color: #34495e;
    font-size: 13px;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 0;
  }
  
  .contact-info strong {
    color: #2c3e50;
    font-size: 12px;
    display: inline-block;
    width: 110px;
  }
  
  /* Developer Team Section */
  .developers-section {
    background: #ffffff;
    padding: 25px;
    margin: 30px auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-top: 5px solid #e8491d;
    max-width: 1200px;
    width: 100%;
  }
  
  .developers-section h1 {
    color: #2c3e50;
    margin-bottom: 25px;
    font-size: 1.8rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .developers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .developer-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-top: 4px solid #e8491d;
  }
  
  .developer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
  
  .developer-card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e8491d;
    margin-bottom: 15px;
    transition: all 0.3s ease;
  }
  
  .developer-card:hover img {
    transform: scale(1.05);
  }
  
  .developer-card h3 {
    color: #2c3e50;
    margin-bottom: 12px;
    font-size: 1.1rem;
    text-align: center;
  }
  
  .developer-details {
    text-align: left;
  }
  
  .developer-card p {
    margin: 4px 0;
    color: #34495e;
    font-size: 12px;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
  }
  
  .developer-card strong {
    color: #2c3e50;
    font-size: 11px;
    display: inline-block;
    width: 100px;
  }
  
  /* Coordinators Section: same as Developer Team but separate classes */
.coordinators-section-alt {
  background: #ffffff;
  padding: 25px;
  margin: 30px auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-right: 5px solid #3498db; /* blue accent for coordinators */
  max-width: 1200px;
  width: 55%;
}

.coordinators-section-alt h1 {
  color: #2c3e50;
  margin-bottom: 25px;
  font-size: 1.8rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.coordinators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.coordinator-card-alt {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-top: 4px solid #3498db;
}

.coordinator-card-alt:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.coordinator-card-alt img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #3498db;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.coordinator-card-alt:hover img {
  transform: scale(1.05);
}

.coordinator-card-alt h3 {
  color: #2c3e50;
  margin-bottom: 12px;
  font-size: 1.1rem;
  text-align: center;
}

.coordinator-details-alt {
  text-align: left;
}

.coordinator-card-alt p {
  margin: 4px 0;
  color: #34495e;
  font-size: 12px;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 0;
}

.coordinator-card-alt strong {
  color: #2c3e50;
  font-size: 11px;
  display: inline-block;
  width: 100px;
}

  
  /* Contact Form Section */
  .contact-form {
    background: #ffffff;
    padding: 25px;
    margin: 30px auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-bottom: 5px solid #50b3a2;
    max-width: 800px;
    width: 80%;
  }
  
  .contact-form h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 22px;
    text-align: center;
  }
  
  .contact-form label {
    display: block;
    margin-bottom: 5px;
    color: #2c3e50;
    font-weight: bold;
    text-align: left;
  }
  
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
  }
  
  .contact-form input[type="text"]:focus,
  .contact-form input[type="email"]:focus,
  .contact-form textarea:focus {
    border-color: #50b3a2;
    outline: none;
    box-shadow: 0 0 5px rgba(80, 179, 162, 0.3);
  }
  
  .contact-form textarea {
    resize: vertical;
    min-height: 100px;
  }
  
  .contact-form button {
    background: #50b3a2;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
  }
  
  .contact-form button:hover {
    background: #e8491d;
    transform: translateY(-2px);
  }
  
  /* Modal/Popup Styles */
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
    animation: modalopen 0.4s;
    position: relative;
  }
  
  @keyframes modalopen {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
  }
  
  .close {
    color: #aaa;
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .close:hover {
    color: #e8491d;
    transform: rotate(90deg);
  }
  
  .modal-info {
    text-align: center;
  }
  
  .modal-info img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #53ccc6;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  
  .modal-info h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.5rem;
  }
  
  .modal-details {
    text-align: left;
    padding: 0 10px;
  }
  
  .modal-info p {
    margin: 6px 0;
    color: #34495e;
    font-size: 13px;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 0;
  }
  
  .modal-info strong {
    color: #2c3e50;
    font-size: 12px;
    display: inline-block;
    width: 115px;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 992px) {
    .stylish-header {
      font-size: 1.8rem;
    }
    
    .contact-info,
    .contact-form,
    .developers-section {
      width: 90%;
    }
    
    .developers-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .coordinators-container {
      flex-direction: column;
      align-items: center;
    }
    
    .coordinator-card {
      width: 100%;
      max-width: 350px;
    }
  }
  
  @media (max-width: 768px) {
    .stylish-header {
      font-size: 1.6rem;
    }
    
    .contact-info img,
    .modal-info img,
    .coordinator-card img {
      width: 160px;
      height: 160px;
    }
    
    .developer-card img {
      width: 120px;
      height: 120px;
    }
    
    .modal-content {
      margin: 15% auto;
      width: 90%;
      padding: 15px;
    }
    
    .developers-grid {
      grid-template-columns: 1fr;
    }
    
    .developers-section h1 {
      font-size: 1.5rem;
    }
    
    .coordinators-section h2 {
      font-size: 1.2rem;
    }
    
    .modal-details {
      padding: 0 5px;
    }
    
    /* Force single line on all devices */
    .contact-info p,
    .developer-card p,
    .coordinator-card p,
    .modal-info p {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }
  
  @media (max-width: 576px) {
    .stylish-header {
      font-size: 1.4rem;
    }
    
    .contact-info img,
    .modal-info img,
    .coordinator-card img {
      width: 140px;
      height: 140px;
    }
    
    .developer-card img {
      width: 100px;
      height: 100px;
    }
    
    .modal-info h2 {
      font-size: 1.3rem;
    }
    
    .modal-info p {
      font-size: 12px;
    }
    
    .coordinator-card {
      min-width: 100%;
    }
    
    .developers-section {
      padding: 20px;
    }
    
    .coordinators-section {
      padding: 15px;
    }
    
    /* Adjust label widths for mobile */
    .contact-info strong {
      width: 95px;
      font-size: 11px;
    }
    
    .developer-card strong {
      width: 85px;
      font-size: 10px;
    }
    
    .coordinator-card strong {
      width: 90px;
      font-size: 10px;
    }
    
    .modal-info strong {
      width: 100px;
      font-size: 11px;
    }
    
    /* Ensure text stays on one line on mobile */
    .contact-info p,
    .developer-card p,
    .coordinator-card p,
    .modal-info p {
      font-size: 11px;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    
    .contact-info strong,
    .developer-card strong,
    .coordinator-card strong,
    .modal-info strong {
      font-size: 10px;
    }
  }
  
  /* Very small screens */
  @media (max-width: 400px) {
    .contact-info,
    .developer-card,
    .coordinator-card {
      padding: 15px;
    }
    
    .contact-info p,
    .developer-card p,
    .coordinator-card p {
      font-size: 10px;
    }
    
    .contact-info strong,
    .developer-card strong,
    .coordinator-card strong {
      font-size: 9px;
    }
    
    .contact-info strong {
      width: 85px;
    }
    
    .developer-card strong {
      width: 75px;
    }
    
    .coordinator-card strong {
      width: 80px;
    }
    
    .modal-info strong {
      width: 90px;
    }
    
    /* Force single line even on very small screens */
    .contact-info p,
    .developer-card p,
    .coordinator-card p,
    .modal-info p {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-size: 10px;
      line-height: 1;
      margin: 3px 0;
    }
  }
  
  /* Extra small devices */
  @media (max-width: 320px) {
    .contact-info strong {
      width: 80px;
      font-size: 9px;
    }
    
    .developer-card strong {
      width: 70px;
      font-size: 8px;
    }
    
    .coordinator-card strong {
      width: 75px;
      font-size: 8px;
    }
    
    .modal-info strong {
      width: 85px;
      font-size: 9px;
    }
    
    .contact-info p,
    .developer-card p,
    .coordinator-card p,
    .modal-info p {
      font-size: 9px;
    }
  }
</style>

<main>
  <div class="container">
    <h1 class="text-center text-uppercase stylish-header"><strong>Contact Us</strong></h1>
    
    <!-- The Modal -->
    <div id="infoModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <div class="modal-info" id="modalContent"></div>
      </div>
    </div>
    
    <!-- DEO Contact Info -->
    <div class="contact-info" onclick="openModal(this)">
      <img src="images/jamshed.jpg" alt="DEO Photo">
      <h2>District Education Officer</h2>
      <div class="contact-details">
        <p><strong>Name:</strong> Syed Jamshed Bukhari</p>
        <p><strong>Phone/Whatsapp:</strong> (05826) 960019</p>
        <p><strong>Email:</strong> deo@example.com</p>
        <p><strong>Address:</strong> District Education Office, Kotli</p>
      </div>
    </div>
    
    <!-- Developer Team Section with Coordinators inside -->
    <div class="developers-section">
      <h1><strong>Developer's Team</strong></h1>
      
      <!-- Developer Team Grid -->
      <div class="developers-grid">
        <div class="developer-card" onclick="openModal(this)">
          <img src="images/amir_hamza.jpg" alt="Developer 1">
          <h3>Amir Hamza Khan</h3>
          <div class="developer-details">
            <p><strong>Role:</strong> Frontend Developer</p>
            <p><strong>Phone/Whatsapp:</strong> (+92) 343-0547661</p>
            <p><strong>Email:</strong> hamza.amir.49143@gmail.com</p>
          </div>
        </div>
        
        <div class="developer-card" onclick="openModal(this)">
          <img src="images/mohsin.jpg" alt="Developer 2">
          <h3>MOHSIN BASHIR</h3>
          <div class="developer-details">
            <p><strong>Role:</strong> Backend Developer & Team Leader</p>
            <p><strong>Phone/Whatsapp:</strong> (+92) 343-5115550</p>
            <p><strong>Email:</strong> mohsinbashirraja@gmail.com</p>
          </div>
        </div>
        
        <div class="developer-card" onclick="openModal(this)">
          <img src="images/wajid.jpg" alt="Developer 3">
          <h3>Wajid Muzaffar</h3>
          <div class="developer-details">
            <p><strong>Role:</strong> Database Administrator</p>
            <p><strong>Phone/Whatsapp:</strong> (+92) 346-8145393</p>
            <p><strong>Email:</strong> wajidmuzaffar804@gmail.com</p>
          </div>
        </div>
        
        <div class="developer-card" onclick="openModal(this)">
          <img src="images/shiraz.jpg" alt="Developer 4">
          <h3>Shiraz Ahmad</h3>
          <div class="developer-details">
            <p><strong>Role:</strong> UI/UX Designer</p>
            <p><strong>Phone/Whatsapp:</strong> (+92) 300-5326859</p>
            <p><strong>Email:</strong> shirazahmad843@gmail.com</p>
          </div>
        </div>
      </div>
      </div>
      
          <!-- Coordinators Section -->
<div class="coordinators-section-alt">
  <h1><strong>Coordinators</strong></h1>

  <div class="coordinators-grid">
    <div class="coordinator-card-alt" onclick="openModal(this)">
      <img src="images/coordinator1.jpg" alt="Coordinator 1">
      <h3>Hamza Ali Syed</h3>
      <div class="coordinator-details-alt">
        <p><strong>Role:</strong> Project Coordinator</p>
        <p><strong>Phone/Whatsapp:</strong> +92-347-7900003</p>
        <p><strong>Email:</strong> coordinator@example.com</p>
        <p><strong>Department:</strong> Project Coordination</p>
      </div>
    </div>

    <div class="coordinator-card-alt" onclick="openModal(this)">
      <img src="images/coordinator2.jpg" alt="Coordinator 2">
      <h3>Kabeer Ahmed</h3>
      <div class="coordinator-details-alt">
        <p><strong>Role:</strong> Data Coordinator</p>
        <p><strong>Phone/Whatsapp:</strong> +92-346-5707118</p>
        <p><strong>Email:</strong> data.co@example.com</p>
        <p><strong>Department:</strong> Data Management</p>
      </div>
    </div>
  </div>
</div>

    
    <!-- Contact Form -->
    <div class="contact-form">
      <h2><u><strong>Send Us a Message</strong></u></h2>
      
      <?php if (isset($_GET['status'])): ?>
        <div class="alert 
          <?php 
          if ($_GET['status'] === 'success') echo 'alert-success';
          elseif ($_GET['status'] === 'mail_error') echo 'alert-warning';
          elseif ($_GET['status'] === 'limit_exceeded') echo 'alert-danger';
          else echo 'alert-danger';
          ?>
        ">
          <?php
          switch ($_GET['status']) {
            case 'success':
              echo "Your message has been sent successfully!";
              break;
            case 'mail_error':
              echo "Message was saved but we couldn't send the email notification. We'll get back to you soon.";
              break;
            case 'limit_exceeded':
              echo "You've reached the maximum of 2 messages per 24 hours. Please try again later.";
              break;
            case 'db_error':
              echo "There was an error saving your message. Please try again.";
              break;
            case 'error':
              echo isset($_GET['message']) ? htmlspecialchars($_GET['message']) : "There was an error with your submission.";
              break;
            default:
              echo "There was an unexpected error. Please try again.";
          }
          ?>
        </div>
      <?php endif; ?>
      
      <form action="contact_mail_submit.php" method="post">
        <label for="name">Your Name:</label>
        <input type="text" id="name" name="name" required placeholder="Enter your full name">
        
        <label for="contact">Contact No:</label>
        <input type="text" id="contact" name="contact" required placeholder="Enter your contact number">
        
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" required placeholder="Enter your email address">
        
        <label for="message">Your Message:</label>
        <textarea id="message" name="message" rows="4" required placeholder="Type your message here..."></textarea>
        
        <button type="submit">Send Message</button>
      </form>
    </div>
  </div>
</main>

<script>
  // Get the modal and modal content elements
  const modal = document.getElementById("infoModal");
  const modalContent = document.getElementById("modalContent");
  
  // Function to open modal with clicked element's content
  function openModal(element) {
    // Create a new div for the modal content
    const content = document.createElement('div');
    
    // Get the image source and alt text
    const imgSrc = element.querySelector('img').src;
    const imgAlt = element.querySelector('img').alt;
    
    // Get the heading if it exists
    let heading = '';
    if (element.querySelector('h2')) {
      heading = element.querySelector('h2').innerHTML;
    } else if (element.querySelector('h3')) {
      heading = element.querySelector('h3').innerHTML;
    } else {
      heading = 'Contact Information';
    }
    
    // Get all paragraphs from details section
    let detailsDiv;
    if (element.querySelector('.contact-details')) {
      detailsDiv = element.querySelector('.contact-details');
    } else if (element.querySelector('.developer-details')) {
      detailsDiv = element.querySelector('.developer-details');
    } else if (element.querySelector('.coordinator-details')) {
      detailsDiv = element.querySelector('.coordinator-details');
    } else {
      detailsDiv = element;
    }
    
    const paragraphs = detailsDiv.querySelectorAll('p');
    let pContent = '';
    paragraphs.forEach(p => {
      pContent += `<p>${p.innerHTML}</p>`;
    });
    
    // Set the modal content with left-aligned details
    content.innerHTML = `
      <img src="${imgSrc}" alt="${imgAlt}">
      <h2>${heading}</h2>
      <div class="modal-details">
        ${pContent}
      </div>
    `;
    
    // Clear previous content and add new content
    modalContent.innerHTML = '';
    modalContent.appendChild(content);
    
    // Display the modal
    modal.style.display = "block";
    
    // Add event listener for escape key
    document.addEventListener('keydown', function(event) {
      if (event.key === "Escape") {
        modal.style.display = "none";
      }
    });
  }
  
  // Get the close button
  const closeBtn = document.querySelector(".close");
  
  // When the user clicks on the close button, close the modal
  closeBtn.onclick = function() {
    modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

<?php include_once 'footer_new.php'; ?>