<?php
if (session_status() === PHP_SESSION_NONE) {
  session_start();
}

include "../php/db_connect.php";

if (!isset($_SESSION['user_id'])) {
  header("Location: ../login.php");
  exit;
}

$shop_id = $_SESSION['user_id'];

$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->bind_param("i", $shop_id);
$stmt->execute();
$result = $stmt->get_result();
$shop = $result->fetch_assoc();

$shopImage = $shop['shop_image'] ?? '';

$imageSrc = !empty($shopImage)
  ? "../uploads/shops/" . htmlspecialchars($shopImage)
  : "";

function h($value) {
  return htmlspecialchars((string)($value ?? ''), ENT_QUOTES, 'UTF-8');
}
?>

<style>
.shop-profile-page {
  background: #f5f7fb;
  min-height: 100vh;
}

.profile-hero {
  background: linear-gradient(135deg, #7ee8fa 0%, #4fd3f7 100%);
  border-radius: 28px;
  padding: 34px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(79,211,247,0.15);
  position: relative;
  overflow: hidden;
}

.profile-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  background: rgba(255,255,255,0.14);
  border-radius: 50%;
  right: -140px;
  top: -180px;
}

.profile-photo-box {
  width: 130px;
  height: 130px;
  border-radius: 24px;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,0.85);
  background: #0aa3bd;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.profile-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-shop-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 54px;
  color: white;
}

.profile-chip {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.edit-profile-btn {
  background: #fff;
  color: #0097c7;
  border-radius: 999px;
  font-weight: 700;
  padding: 12px 22px;
  border: none;
}

.edit-profile-btn:hover {
  background: #e9fbff;
  color: #0083ad;
}

.profile-tabs {
  background: #fff;
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.profile-tabs .nav-link {
  color: #111;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 22px;
}

.profile-tabs .nav-link.active {
  background: #11c5e7;
  color: #fff;
}

.profile-card {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.info-tile {
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 18px;
  padding: 18px;
  height: 100%;
}

.info-icon,
.side-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e8faff;
  color: #0097c7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overview-card {
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 20px;
  padding: 22px;
  height: 100%;
  transition: 0.2s ease;
}

.overview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.07);
}

.overview-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #e8faff;
  color: #0097c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}

.btn-primary {
  background: #11c5e7;
  border-color: #11c5e7;
}

.btn-primary:hover {
  background: #0097c7;
  border-color: #0097c7;
}

@media (max-width: 768px) {
  .profile-hero {
    text-align: center;
  }

  .profile-photo-box {
    margin: 0 auto;
  }

  .profile-tabs {
    border-radius: 20px;
    justify-content: center;
  }
}
</style>

<div class="container-fluid px-4 py-4 shop-profile-page">

  <div class="profile-hero mb-4">
    <div class="row align-items-center g-4 position-relative" style="z-index: 2;">

      <div class="col-md-auto">
        <div class="profile-photo-box">
          <?php if (!empty($shopImage)): ?>
            <img src="<?php echo $imageSrc; ?>" alt="Shop Image">
          <?php else: ?>
            <div class="profile-shop-icon">
              <i class="fa-solid fa-store"></i>
            </div>
          <?php endif; ?>
        </div>
      </div>

      <div class="col-md">
        <span class="profile-chip mb-3">
          <i class="fa-solid fa-shop"></i> Shop Profile
        </span>

        <h1 class="fw-bold mb-3">
          <?php echo h($shop['shop_name'] ?? 'Shop Name'); ?>
        </h1>

        <div class="d-flex flex-wrap gap-2">
          <span class="profile-chip">
            <i class="fa-solid fa-envelope"></i>
            <?php echo !empty($shop['email']) ? h($shop['email']) : 'No email yet'; ?>
          </span>

          <span class="profile-chip">
            <i class="fa-solid fa-phone"></i>
            <?php echo !empty($shop['mobile_number']) ? h($shop['mobile_number']) : 'No mobile number yet'; ?>
          </span>

          <span class="profile-chip">
            <i class="fa-solid fa-location-dot"></i>
            <?php echo !empty($shop['address']) ? h($shop['address']) : 'No address yet'; ?>
          </span>
        </div>
      </div>

      <div class="col-md-auto">
        <button type="button" class="btn edit-profile-btn" data-bs-toggle="modal" data-bs-target="#editShopProfileModal">
          <i class="fa-solid fa-pen me-1"></i> Edit Profile
        </button>
      </div>

    </div>
  </div>

  <ul class="nav profile-tabs mb-4">
    <li class="nav-item"><button class="nav-link active">Overview</button></li>
    <li class="nav-item"><button class="nav-link">Services</button></li>
    <li class="nav-item"><button class="nav-link">Orders</button></li>
    <li class="nav-item"><button class="nav-link">Feedback</button></li>
  </ul>

  <div class="row g-4">

    <div class="col-lg-8">

      <div class="card profile-card p-4 mb-4">
        <h4 class="fw-bold mb-1">Shop Information</h4>
        <p class="text-muted mb-4">Basic public information about your shop.</p>

        <div class="row g-3">
          <div class="col-md-6">
            <div class="info-tile d-flex gap-3">
              <div class="info-icon"><i class="fa-solid fa-store"></i></div>
              <div>
                <div class="fw-bold">Shop Name</div>
                <div class="text-muted"><?php echo h($shop['shop_name'] ?? 'No shop name yet'); ?></div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="info-tile d-flex gap-3">
              <div class="info-icon"><i class="fa-solid fa-envelope"></i></div>
              <div>
                <div class="fw-bold">Email Address</div>
                <div class="text-muted"><?php echo !empty($shop['email']) ? h($shop['email']) : 'No email yet'; ?></div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="info-tile d-flex gap-3">
              <div class="info-icon"><i class="fa-solid fa-phone"></i></div>
              <div>
                <div class="fw-bold">Mobile Number</div>
                <div class="text-muted"><?php echo !empty($shop['mobile_number']) ? h($shop['mobile_number']) : 'No mobile number yet'; ?></div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="info-tile d-flex gap-3">
              <div class="info-icon"><i class="fa-solid fa-location-dot"></i></div>
              <div>
                <div class="fw-bold">Shop Address</div>
                <div class="text-muted"><?php echo !empty($shop['address']) ? h($shop['address']) : 'No address yet'; ?></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card profile-card p-4">
        <h4 class="fw-bold mb-1">Shop Overview</h4>
        <p class="text-muted mb-4">Quick access to the main parts of your shop account.</p>

        <div class="row g-3">
          <div class="col-md-4">
            <div class="overview-card">
              <div class="overview-icon"><i class="fa-solid fa-shirt"></i></div>
              <h5 class="fw-bold">Services</h5>
              <p class="text-muted mb-0">Manage services offered by your shop.</p>
            </div>
          </div>

          <div class="col-md-4">
            <div class="overview-card">
              <div class="overview-icon"><i class="fa-solid fa-box"></i></div>
              <h5 class="fw-bold">Orders</h5>
              <p class="text-muted mb-0">Track customer orders and progress.</p>
            </div>
          </div>

          <div class="col-md-4">
            <div class="overview-card">
              <div class="overview-icon"><i class="fa-solid fa-star"></i></div>
              <h5 class="fw-bold">Feedback</h5>
              <p class="text-muted mb-0">View ratings and customer feedback.</p>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="col-lg-4">

      <div class="card profile-card p-4 mb-4">
        <div class="d-flex gap-3 align-items-center mb-3">
          <div class="side-card-icon">
            <i class="fa-solid fa-circle-check"></i>
          </div>
          <div>
            <h5 class="fw-bold mb-0">Account Status</h5>
            <small class="text-muted">Current shop account state</small>
          </div>
        </div>

        <div class="alert alert-success rounded-4 mb-0">
          Active Shop Account
        </div>
      </div>

      <div class="card profile-card p-4">
        <div class="d-flex gap-3 align-items-center mb-3">
          <div class="side-card-icon">
            <i class="fa-solid fa-image"></i>
          </div>
          <div>
            <h5 class="fw-bold mb-0">Profile Image</h5>
            <small class="text-muted">Used on your public shop card</small>
          </div>
        </div>

        <p class="text-muted mb-0">
          Update your shop photo from the Edit Profile button above.
        </p>
      </div>

    </div>

  </div>
</div>

<!-- EDIT SHOP PROFILE MODAL -->
<div class="modal fade" id="editShopProfileModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow">

      <form action="update_profile.php" method="POST" enctype="multipart/form-data">

        <div class="modal-header border-0">
          <h5 class="modal-title fw-bold">Edit Shop Profile</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">

          <div class="mb-3">
            <label class="form-label fw-bold">Shop Name</label>
            <input type="text" name="shop_name" class="form-control"
              value="<?php echo h($shop['shop_name'] ?? ''); ?>" required>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Email</label>
            <input type="email" name="email" class="form-control"
              value="<?php echo h($shop['email'] ?? ''); ?>" required>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Mobile Number</label>
            <input type="text" name="mobile_number" class="form-control"
              value="<?php echo h($shop['mobile_number'] ?? ''); ?>" required>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Address</label>
            <textarea name="address" class="form-control" rows="3" required><?php echo h($shop['address'] ?? ''); ?></textarea>
          </div>

          <div class="mb-3">
            <label class="form-label fw-bold">Shop Image</label>
            <input type="file" name="shop_image" class="form-control" accept="image/*">
            <small class="text-muted">Leave blank if you do not want to change the current image.</small>
          </div>

        </div>

        <div class="modal-footer border-0">
          <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary rounded-3">Save Changes</button>
        </div>

      </form>

    </div>
  </div>
</div>