<?php
include('connection.php');
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Services App</title>
<style>
  .continue-btn-btn {
  display: block;
  width: 100%;              /* 🔹 width badha di */
  margin: 25px auto;       /* 🔹 center */
  padding: 16px 0;

  font-size: 17px;
  font-weight: 600;
  text-align: center;

  border: none;
  border-radius: 16px;

  background: linear-gradient(135deg, #1e6dfb, #4f8bff);
  color: #ffffff;

  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 12px 28px rgba(30, 109, 251, 0.4);
}

/* Hover effect */
.continue-btn-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(30, 109, 251, 0.5);
}

/* Click effect */
.continue-btn-btn:active {
  transform: scale(0.97);
}

/* Mobile fine-tune */
@media (max-width: 480px) {
  .continue-btn-btn {
    width: 96%;
    font-size: 16px;
    padding: 15px 0;
  }
}
.app{
    /*width:200%;*/
    width: 100%;
}
.header{
    text-align:center;
}
</style>
    <!-- Font Awesome CDN -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/page3.css" />
  </head>
  <body>
    <div class="app">
      <!-- HEADER -->
      <div class="header">
        <!--<a href="page2.php?id='<?php echo$_GET['id']?>'"><button class="back-btn"><i class="fa-solid fa-arrow-left"></i></button></a>-->
        <h4> Services</h4>
        <div class="header-right"></div>
      </div>

      <!-- SEARCH -->
      <div class="search-bar">
        <input type="text" placeholder="Search for any service..." />
        <button class="search-btn">
          <i class="fas fa-search"></i>
        </button>
       
      </div>

      <!-- CATEGORY / MOST BOOKED SERVICES -->
      <div class="section">
        <h4>Most Booked Services</h4>
        <!--<span>View all</span-->
      </div>
<?php
 $id = $_GET['id'];
?>
<form action="" method="POST">
      <input type="hidden" name="id" value="<?php echo $id ?>">
      <div class="services">
         <?php
        include('connection.php');
        $sql = "SELECT * FROM `category`";
        $res = mysqli_query($con,$sql);

        
        while($row = mysqli_fetch_assoc($res)){

          echo'
        <div class="service">
          <img src="../image/'.$row['icon'].'" />
          <p><input type="checkbox" value="'.$row['name'].'" name="service[]" ><br>'.$row['name'].'</p>
        </div>';
        }
        ?>
        <!-- <div class="service">
          <img src="../image/OIP (4) .jpeg" />
          <p><input type="checkbox" value="Electrician" name="service"><br>Electrician</p>
        </div>
        <div class="service">
          <img src="../image/OIP (5) .jpeg" />
          <p>Carpenter</p>
        </div>
        <div class="service">
          <img src="../image/OIP (6) .jpeg" />
          <p>Painter</p>
        </div>
        <div class="service">
          <img src="../image/OIP (7) .jpeg" />
          <p>Mason</p>
        </div>
        <div class="service">
          <img src="../image/OIP (8) .jpeg" />
          <p>Welder</p>
        </div>
        <div class="service">
          <img src="../image/download.jpeg" />
          <p>Roofer</p>
        </div>
        <div class="service">
            <img src="../image/OIP(10).jpg" />
            <p>AC Repair</p>
        </div>
        <div class="service">
            <img src="../image/OIP(11).jpg" />
            <p>Home Cleaning</p>
        </div>
        <div class="service">
            <img src="../image/OIP(18).jpg" />
            <p>Gardener</p>
        </div>
        <div class="service">
            <img src="../image/OIP(19).jpg" />
            <p>Pest Control</p>
        </div>
        <div class="service">
          <img src="../image/OIP (9) .jpeg" />
          <p>More</p>
        </div> -->
      </div>

      <!-- CONTINUE BUTTON (KEEP THIS) -->
      <button class="continue-btn-btn" type="submit" name="submit">Continue</button>

    </form>  
    </div>

    <script src="../js/page3.js"></script>
  </body>
</html>
<?php
    error_reporting(0);
    include('connection.php');
    $id = $_POST['id'];
    $cat = $_POST['service'];
    
   
    

    if(isset($_POST['submit']) && $cat)
    {
      $sql = "UPDATE `user` SET `category` = '$cat' WHERE `user`.`id` = '$id'";
      $res = mysqli_query($con,$sql);
      if($res){
        $sid = mysqli_insert_id($con);
        echo "
        <script>
        window.location.href = '../html/page4.php?id=".$id."';
        </script>
        ";
      }
      else{
        echo "
        <script>
        alert('Select any category');
        </script>
        ";
      }
    }
?>


