<?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>

      .service-banner{
        
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .service-b-1{
        background: linear-gradient(to right, #0a3980, #0D47A1, #1462af, #1971be, #1a78c5, #1E88E5);
        height: 10vh;
        width: 90%;
        border-radius: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: white;
        padding: 20px;
      }

      .ser-banner-text h1{
        font-size: 20px;
  
      }

      .ser-banner-text p{
        font-size: 12px;
  
      }

      .ser-banner-img i{
        font-size: 30px;
        padding: 10px;
      }

      .continue-btn-btn {
      display: block;
      width: 90%;              /* 🔹 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: 90%;
      font-size: 16px;
      padding: 15px 0;
        }
      }

    </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">
        <button class="back-btn"><i class="fa-solid fa-arrow-left"></i></button>
        <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>

      <div class="service-banner">
        <div class="service-b-1">
          <div class="ser-banner-text">
          <h1>Home Assist</h1>
          <p>Get your household problems solved instantly!</p>
          </div>
          <div class="ser-banner-img">
            <i class="fa-solid fa-wrench"></i>
          </div>
        </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']))
    {
      $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 = 'page4.php?id=".$id."';
        </script>
        ";
      }
      else{
        echo "not done";
      }
    }
    ?>
