<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <link rel="stylesheet" href="../css/page4.css" />
    <style>
      body {
        background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        color: #333;
      }
      .card {
        height:100vh;
        background: #fff;
        width: 100%;
        max-width: 380px;
        padding: 40px 35px;
        
        box-shadow: 0 20px 60px rgba(30, 109, 251, 0.12);
        text-align: center;
        position: relative;
        animation: cardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }
      @keyframes cardEnter {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .back-icon {
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 18px;
        color: #666;
        cursor: pointer;
        transition: 0.3s;
      }
      .back-icon:hover { color: #1e6dfb; }

      
      
      .custom-banner {
        background: linear-gradient(to right, #0D47A1, #1565C0, #1976D2, #1E88E5, #2196F3, #42A5F5);
        padding: 10px;
        border-radius: 16px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
      }
      .custom-banner h3 {
        margin: 0 0 8px;
        color: #fff;
        
        font-weight: 700;
            font-size: 17px;
      padding: 5px;
      }
      .custom-banner p {
        margin: 0;
        color: #ffff;
        
        font-weight: 500;
        font-size: 12px;
      padding: 2px;
      }
      .custom-banner img {
        width: 90px;
        margin-right: 15px;
      }
      
      .input-group {
        position: relative;
        margin-bottom: 15px;
      }
      .input-group i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #b0b0b0;
        transition: 0.3s;
      }
      .input-group input {
        width: 100%;
        padding: 14px 15px 14px 45px;
        border: 1px solid #eef1f6;
        border-radius: 12px;
        background: #f8faff;
        outline: none;
        transition: 0.3s;
        font-size: 15px;
        color: #333;
      }
      .input-group input:hover {
        border-color: #1e6dfb;
      }
      .input-group input:focus {
        border-color: #1e6dfb;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(30, 109, 251, 0.15);
      }
      .input-group input:focus + i, .input-group:focus-within i {
        color: #1e6dfb;
      }
      .input-group textarea {
        width: 100%;
        padding: 14px 15px 14px 45px;
        border: 1px solid #eef1f6;
        border-radius: 12px;
        background: #f8faff;
        outline: none;
        transition: 0.3s;
        font-size: 15px;
        color: #333;
        resize: none;
        height: 100px;
        font-family: inherit;
      }
      .input-group textarea:hover { border-color: #1e6dfb; }
      .input-group textarea:focus {
        border-color: #1e6dfb;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(30, 109, 251, 0.15);
      }
      
      .forgot-pass {
        text-align: right;
        font-size: 13px;
        margin-bottom: 25px;
        margin-top: 5px;
      }
      .forgot-pass a {
        color: #888;
        text-decoration: none;
        font-weight: 500;
        transition: 0.3s;
      }
      .forgot-pass a:hover { color: #1e6dfb; }

      #file-upload-button{
        padding:100px;
      }
      
      button {
        width: 100%;
        padding: 15px;
        background: linear-gradient(to right, #0D47A1, #1565C0, #1976D2, #1E88E5, #2196F3, #42A5F5);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 10px 20px rgba(30, 109, 251, 0.2);
      }
      button:hover { 
        background: #155ac4; 
        transform: translateY(-2px);
        box-shadow: 0 15px 25px rgba(30, 109, 251, 0.3);
      }
      button:active { transform: scale(0.98); }
      
      .social-login { margin-top: 35px; }
      .social-text {
        font-size: 13px;
        color: #aaa;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight: 500;
      }
      .social-text::before, .social-text::after {
        content: "";
        height: 1px;
        background: #eef1f6;
        flex: 1;
      }
      
      .social-icons {
        display: flex;
        justify-content: center;
        gap: 18px;
      }
      .social-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid #eef1f6;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s;
        color: #666;
        font-size: 18px;
      }
      .social-btn:hover {
        background: #f8faff;
        border-color: #dbeafe;
        transform: translateY(-3px);
        color: #1e6dfb;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      }
      
      .footer-note {
        margin-top: 30px;
        font-size: 14px;
        color: #888;
      }
      .footer-note a {
        color: #1e6dfb;
        text-decoration: none;
        font-weight: 700;
        transition: 0.2s;
      }
      .footer-note a:hover {
        text-decoration: underline;
      }
      .p{
        text-align: right;
      }
    </style>
  </head>

  <body>
    <div class="card">
      <div class="back-icon" onclick="history.back()">
        <i class="fa-solid fa-arrow-left"></i>
      </div>

      <div class="custom-banner">
        
        <div >
          <h3>Describe Problem</h3>
          <p>Please upload a photo or video of the issue so we can assist you better.</p>
        </div>
      </div>
      <form action="" method="POST"
        enctype="multipart/form-data">  
      <div class="input-group">
        <i class="fa-solid fa-cloud-arrow-up"></i>
        <input  type="file" name="file"/>
      </div>
      
      <div class="input-group">
        <i class="fa-solid fa-pen"></i>
        <textarea name="msg" placeholder="Describe your problem..."></textarea>
      </div>

      <div class="custom-banner">
        <img src="../image/3dimages.png" alt="Banner">
        <div style="text-align: right; flex: 1;">
          <h3 style="white-space: nowrap;">Home Assists!</h3>
          <p class="p" style="text-align: right;">Get your household problems solved instantly !</p>
        </div>
      </div>
      
      <button type="submit" name="submit">Submit</button>
      </form>
         <br><br><br>
         
      

      <?php

      include("connection.php");
      error_reporting(0);
      if(isset($_POST['submit']))
      {
        $id  = $_GET['id'];
        $msg = $_POST['msg'];

       
        $file_name = $_FILES['file']['name'];
        $file_tmp  = $_FILES['file']['tmp_name'];

       
        $target_dir = "Files/";
        $target_file = $target_dir . basename($file_name);

        
        if(move_uploaded_file($file_tmp, $target_file))
        {
          
          $sql = "UPDATE user SET msg='$msg', file='$target_file' WHERE id='$id'";

          $res = mysqli_query($con,$sql);

          if($res){
          echo "
          <script>
          window.location.href = 'page5.php';
          </script>
          ";
          }
        
          else{
            echo "Database update failed";
          }
        }
        else{
        echo "File upload failed";
        }
      }

    ?>
    
    <script>
      document.querySelector("button").addEventListener("click", () => {
        window.location.href = "page7.html";
      });
    </script>
  </body>
</html>
