<?php
require_once("../php/db_connect.php");

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$successMessage = null;

if (isset($_SESSION['success_message'])) {
    $successMessage = $_SESSION['success_message'];
    unset($_SESSION['success_message']);
}

$shopsStmt = $conn->prepare("
    SELECT id, shop_name, shop_type, main_services, shop_image
    FROM users
    WHERE role = 'admin' AND status = 'active'
    ORDER BY shop_name ASC
");
$shopsStmt->execute();
$shops = $shopsStmt->get_result();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Printing Shop Collaboration</title>
    <link rel="stylesheet" href="../css/style.css?v=3">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <!-- Optional: your small custom overrides -->
  

    <style>
        body {
            background-color: whitesmoke;
        }

        .brand-bar {
            background-color: #333d4f;
        }

        .hero-section {
            padding: 5rem 0 3rem;
        }

        .hero-title {
           
            font-weight: 800;
            line-height: 1.05;
        }

        .hero-text {
            font-size: clamp(1rem, 2vw, 1.35rem);
            max-width: 700px;
        }

        .shop-card-img {

            object-fit: cover;
        }

        .shop-placeholder {
            height: 230px;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-weight: 500;
        }

        .section-title {
            font-weight: 700;
        }

        .badge-shop {
            background-color: #e9f6ff;
            color: #0b7ec2;
        }
.register-modal-rect {
  max-width: 600px;
}

#registerFormModal .modal-content {
  width: 100%;
  border-radius: 20px;
}

#registerFormModal .modal-body {
  padding: 2rem 2.5rem;
}



#registerFormModal textarea.form-control {
  min-height: 100px;
}
#shopImage {
    min-height: 190px;
}

@media (max-width: 991px) {
  .register-modal-rect {
    max-width: 95%;
  }
}




    </style>
</head>
<body>

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-dark brand-bar shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <img src="./images/logo1.png" alt="logo" style="width: 70px; height: auto;">
                <span class="fw-bold fs-4">TAIPRINT</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="mainNavbar">
                <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-3">
                    <li class="nav-item">
                        <a class="nav-link" href="#shops">Shops</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">FAQ</a>
                    </li>
                    <li class="nav-item">
                        <button class="btn btn-info text-white px-4 rounded-pill" data-bs-toggle="modal" data-bs-target="#loginModal">
                            Log in
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- HERO -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <h1 class="hero-title mb-4">
                        TAILORING AND PRINTING SHOPS WITH SUBCONTRACTING SYSTEM<br>
                        <br>
        
                    </h1>

                    <p class="hero-text text-secondary mb-4">
                        A centralized platform for printing and tailoring shops to manage orders, outsourcing, and tracking.
                    </p>

                    <button class="btn btn-info text-white btn-lg px-4 py-3 rounded-pill shadow-sm"
                            data-bs-toggle="modal" data-bs-target="#registerRoleModal">
                        Register <span class="ms-1">↗</span>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- HOW IT WORKS -->
<section class="how-it-works py-5">
    <div class="container text-center">
        <h2 class="fw-bold mb-5">How It Works</h2>

        <div class="row g-4">
            <div class="col-md-3">
                <div class="p-4 shadow-sm bg-white rounded-4">
                    <i class="fa fa-store fa-2x text-info mb-3"></i>
                    <h5>Choose Shop</h5>
                    <p class="text-muted">Browse printing or tailoring shops.</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="p-4 shadow-sm bg-white rounded-4">
                    <i class="fa fa-list fa-2x text-info mb-3"></i>
                    <h5>Select Service</h5>
                    <p class="text-muted">Pick the service you need.</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="p-4 shadow-sm bg-white rounded-4">
                    <i class="fa fa-cart-shopping fa-2x text-info mb-3"></i>
                    <h5>Place Order</h5>
                    <p class="text-muted">Submit your order details.</p>
                </div>
            </div>

            <div class="col-md-3">
                <div class="p-4 shadow-sm bg-white rounded-4">
                    <i class="fa fa-truck fa-2x text-info mb-3"></i>
                    <h5>Track Order</h5>
                    <p class="text-muted">Monitor progress in real time.</p>
                </div>
            </div>
        </div>
    </div>
</section>

    <!-- SHOPS -->
    <section class="py-5" id="shops">
        <div class="container">
            <div class="mb-4">
                <h2 class="section-title">Available Shops</h2>
                <p class="text-muted mb-0">Browse different shops and explore the services they offer.</p>
            </div>

            <div class="row g-4">
                <?php if ($shops && $shops->num_rows > 0): ?>
                    <?php while ($row = $shops->fetch_assoc()): ?>
                        <?php
                        $shop_id = (int)$row["id"];

                        $serviceStmt = $conn->prepare("
                            SELECT service_name
                            FROM services
                            WHERE owner_shop_id = ? AND status = 'active'
                            ORDER BY created_at DESC
                            LIMIT 3
                        ");
                        $serviceStmt->bind_param("i", $shop_id);
                        $serviceStmt->execute();
                        $shopServices = $serviceStmt->get_result();

                        $serviceNames = [];
                        while ($service = $shopServices->fetch_assoc()) {
                            $serviceNames[] = $service["service_name"];
                        }
                        ?>

                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                                <?php if (!empty($row["shop_image"])): ?>
                                    <img
                                        src="../uploads/shops/<?php echo htmlspecialchars($row["shop_image"]); ?>"
                                        alt="<?php echo htmlspecialchars($row["shop_name"]); ?>"
                                        class="card-img-top shop-card-img"
                                    >
                                <?php else: ?>
                                    <div class="shop-placeholder">
                                        No Image Available
                                    </div>
                                <?php endif; ?>

                                <div class="card-body d-flex flex-column p-4">
                                    <span class="badge badge-shop rounded-pill align-self-start mb-3 px-3 py-2">Shop</span>

                                    <h4 class="card-title fw-bold">
                                        <?php echo htmlspecialchars($row["shop_name"]); ?>
                                    </h4>

                                    <p class="mb-2 text-secondary">
                                        <strong>Shop Type:</strong>
                                        <?php echo htmlspecialchars($row["shop_type"]); ?>
                                    </p>

                                    <p class="mb-2 text-secondary">
                                        <strong>Main Services:</strong>
                                        <?php echo !empty($row["main_services"]) ? htmlspecialchars($row["main_services"]) : 'Available services'; ?>
                                    </p>

                                    <p class="mb-4 text-secondary">
                                        <strong>Services:</strong>
                                        <?php
                                        if (!empty($serviceNames)) {
                                            echo htmlspecialchars(implode(", ", $serviceNames));
                                        } else {
                                            echo "No active services yet.";
                                        }
                                        ?>
                                    </p>

                                    <div class="mt-auto">
                                        <a href="landing-shop-view-details.php?shop_id=<?php echo $shop_id; ?>" class="btn btn-dark rounded-3">
    View Shop
</a>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endwhile; ?>
                <?php else: ?>
                    <div class="col-12">
                        <div class="alert alert-secondary mb-0">No shops available yet.</div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- LOGIN MODAL -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Log in</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body pt-2">
                    <form action="../php/login.php" method="POST">
                        <div class="mb-3">
                            <input type="text" name="username" class="form-control form-control-lg rounded-4" placeholder="Username" required>
                        </div>

                        <div class="mb-3">
                            <input type="password" name="password" class="form-control form-control-lg rounded-4" placeholder="Password" required>
                        </div>

                        <button type="submit" class="btn btn-info text-white w-100 py-3 rounded-4">
                            Log in
                        </button>
                    </form>

                    <div class="d-flex justify-content-end mt-3">
                        <a href="#" class="text-dark text-decoration-none">Forgot Password?</a>
                    </div>

                    <p class="text-center mt-3 mb-1">
                        Don’t have an Account?
                        <a href="#" class="link-info" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#registerRoleModal">
                            Register
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- REGISTER ROLE MODAL -->
    <div class="modal fade" id="registerRoleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Register as</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="d-grid gap-3">
                        <button type="button" class="btn btn-outline-dark btn-lg rounded-4"
                                onclick="setRoleAndOpen('admin')">
                            Shop Owner
                        </button>

                        <button type="button" class="btn btn-outline-info btn-lg rounded-4"
                                onclick="setRoleAndOpen('customer')">
                            Customer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- REGISTER FORM MODAL -->
   <div class="modal fade" id="registerFormModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl register-modal-rect">
    <div class="modal-content border-0 shadow rounded-4">
      <div class="modal-header border-0 pb-0 px-4 pt-4">
        <h4 class="modal-title fw-bold" id="registerTitle">Register</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body px-4 pb-4">
       <form action="../php/register.php" method="POST" enctype="multipart/form-data" autocomplete="off">
          <input type="hidden" id="selectedRole" name="role" value="customer">

          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">First Name</label>
              <input type="text" name="first_name" class="form-control" placeholder="First Name" required>
            </div>

            <div class="col-md-6">
              <label class="form-label">Last Name</label>
              <input type="text" name="last_name" class="form-control" placeholder="Last Name" required>
            </div>

            <div class="col-md-6">
              <label class="form-label">Mobile Number</label>
              <input type="tel" id="mobileNumber" name="mobile_number" class="form-control"
                     placeholder="Mobile Number" pattern="^09\d{9}$" maxlength="11"
                     inputmode="numeric" required>
            </div>

            <div class="col-6">
  <label class="form-label fw-semibold">Email Address</label>
  
  <input type="email" name="email" class="form-control form-control"
         placeholder="Enter your email (e.g. example@gmail.com)" required>

  <div class="form-text text-muted">
    We will send verification and important updates to this email.
  </div>
</div>

            

            <div class="col-md-6">
  <label class="form-label">Birth Date</label>

  <div class="row g-2">
    <!-- Month -->
    <div class="col-4">
      <select id="birthMonth" class="form-select" required>
        <option value="">Month</option>
        <?php
        $months = [
          "01" => "January", "02" => "February", "03" => "March",
          "04" => "April", "05" => "May", "06" => "June",
          "07" => "July", "08" => "August", "09" => "September",
          "10" => "October", "11" => "November", "12" => "December"
        ];
        foreach ($months as $num => $name) {
          echo "<option value='$num'>$name</option>";
        }
        ?>
      </select>
    </div>

    <!-- Day -->
    <div class="col-4">
      <select id="birthDay" class="form-select" required>
        <option value="">Day</option>
        <?php
        for ($i = 1; $i <= 31; $i++) {
          $day = str_pad($i, 2, "0", STR_PAD_LEFT);
          echo "<option value='$day'>$i</option>";
        }
        ?>
      </select>
    </div>

    <!-- Year -->
    <div class="col-4">
      <select id="birthYear" class="form-select" required>
        <option value="">Year</option>
        <?php
        $currentYear = date("Y");
        for ($i = $currentYear; $i >= 1950; $i--) {
          echo "<option value='$i'>$i</option>";
        }
        ?>
      </select>
    </div>
  </div>

  <!-- Hidden input (important for backend) -->
  <input type="hidden" name="birthdate" id="birthdate">
</div>

     <div class="col-md-6 d-none" id="shopNameField">
  <label class="form-label">Shop Name</label>
  <input type="text" id="shopName" name="shop_name" class="form-control" placeholder="Shop Name">
</div>

<div class="col-md-6 d-none" id="birField">
  <label class="form-label">Business Permit Number</label>
  <input type="text" id="businessPermitNumber" name="business_permit_number"
         class="form-control" placeholder="Business Permit Number">
</div>

            <div class="col-md-6 d-none" id="shopTypeField">
              <label class="form-label">Shop Type</label>
              <select name="shop_type" id="shopType" class="form-select" >
                 <option value="" disabled selected>Select Shop Type</option>
                <option value="printing">Printing Shop</option>
                <option value="tailoring">Tailoring Shop</option>
              </select>
            </div>

          <div class="col-12 d-none" id="mainServicesField">
  <div class="row g-3">
    
    <div class="col-md-6">
      <label class="form-label">Main Services</label>
      <textarea id="mainServices" name="main_services"
                class="form-control" rows="5"
                placeholder="Enter your main services"></textarea>
    </div>

    <div class="col-md-6">
      <label class="form-label">Shop Image</label>
      <input type="file"
             name="shop_image"
             id="shopImage"
             class="form-control"
             accept="image/*">
    </div>

  </div>
</div>

            <div class="col-12">
              <label class="form-label">Address</label>
              <input type="text" name="address" class="form-control" placeholder="Address" required>
            </div>

            <div class="col-md-6">
              <label class="form-label">Username</label>
              <input type="text" name="username" class="form-control"
                     placeholder="Username"
                     pattern="^[a-zA-Z0-9_]{4,20}$"
                     title="Username must be 4–20 characters (letters, numbers, underscore only)"
                     required>
            </div>

            <div class="col-md-6">
              <label class="form-label">Password</label>
              <input type="password" id="passwordField" name="password" class="form-control" placeholder="Password" required>
            </div>
          </div>

          <div class="mt-4">
            <button type="submit" class="btn btn-info text-white w-100 py-2">
              Register
            </button>
          </div>

          <p class="text-center mt-3 mb-0">
            Already have an account?
            <a href="#" class="link-info" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#loginModal">
              Log in
            </a>
          </p>
        </form>
      </div>
    </div>
  </div>
</div>
    <script>
     function setRoleAndOpen(role) {
    const selectedRole = document.getElementById('selectedRole');
    const title = document.getElementById('registerTitle');

    const shopNameField = document.getElementById('shopNameField');
    const birField = document.getElementById('birField');
    const shopTypeField = document.getElementById('shopTypeField');
    const mainServicesField = document.getElementById('mainServicesField');

    const shopNameInput = document.getElementById('shopName');
    const businessPermitInput = document.getElementById('businessPermitNumber');
    const shopType = document.getElementById('shopType');
    const mainServices = document.getElementById('mainServices');

    const isShopOwner = role === 'admin';

    selectedRole.value = role;
    title.textContent = isShopOwner ? 'Register as Shop Owner' : 'Register as Customer';

   shopNameField.classList.toggle('d-none', !isShopOwner);
birField.classList.toggle('d-none', !isShopOwner);
    shopTypeField.classList.toggle('d-none', !isShopOwner);
    mainServicesField.classList.toggle('d-none', !isShopOwner);

    shopNameInput.required = isShopOwner;
    businessPermitInput.required = isShopOwner;
    shopType.required = isShopOwner;
    mainServices.required = isShopOwner;

    const roleModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('registerRoleModal'));
    const formModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('registerFormModal'));

    roleModal.hide();
    formModal.show();
}

    </script>
    <script>
document.addEventListener("DOMContentLoaded", function () {
  const month = document.getElementById("birthMonth");
  const day = document.getElementById("birthDay");
  const year = document.getElementById("birthYear");
  const hidden = document.getElementById("birthdate");

  function updateBirthdate() {
    if (month.value && day.value && year.value) {
      hidden.value = `${year.value}-${month.value}-${day.value}`;
    }
  }

  month.addEventListener("change", updateBirthdate);
  day.addEventListener("change", updateBirthdate);
  year.addEventListener("change", updateBirthdate);
});
</script>

<?php if (!empty($successMessage)): ?>
<div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow rounded-4">
      <div class="modal-header border-0">
        <h5 class="modal-title fw-bold text-success">Notice</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0"><?php echo htmlspecialchars($successMessage); ?></p>
      </div>
      <div class="modal-footer border-0">
        <button type="button" class="btn btn-success" data-bs-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
<?php endif; ?>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<?php if (!empty($successMessage)): ?>
<script>
window.addEventListener("load", function () {
    const successModalEl = document.getElementById("successModal");
    if (successModalEl) {
        const successModal = new bootstrap.Modal(successModalEl);
        successModal.show();
    }
});
</script>
<?php endif; ?>

</body>
</html>