<?php
include_once __DIR__ . '/config/db.php';

if ($_SERVER["REQUEST_METHOD"] === "POST") {

  $title = mysqli_real_escape_string($conn, trim($_POST['title']));
  $link  = mysqli_real_escape_string($conn, trim($_POST['youtube_link']));

  if ($title !== "" && $link !== "") {
    mysqli_query(
      $conn,
      "INSERT INTO videos (title, youtube_link) VALUES ('$title','$link')"
    );

    header("Location: video.php");
    exit;
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<!-- 🔥 REQUIRED FOR MOBILE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Add Video</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
/* ===============================
   GLOBAL FIX
================================ */
body{
  min-height:100vh;
  background:linear-gradient(135deg,#f8fafc,#eef2f7);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* CARD */
.video-card{
  width:100%;
  max-width:420px;     /* DESKTOP */
  border-radius:14px;
}

/* TITLE */
.video-card h5{
  font-weight:700;
  text-align:center;
}

/* INPUT */
.form-control{
  height:48px;
  font-size:15px;
}

/* BUTTON */
.btn{
  height:48px;
  font-weight:600;
}

/* MOBILE TWEAK */
@media(max-width:576px){
  .video-card{
    max-width:100%;
  }
}
</style>
</head>

<body>

<form method="post" class="card video-card shadow-sm p-4">

  <h5 class="mb-4">Add YouTube Video</h5>

  <div class="mb-3">
    <input
      type="text"
      name="title"
      class="form-control"
      placeholder="Video Title"
      required>
  </div>

  <div class="mb-4">
    <input
      type="url"
      name="youtube_link"
      class="form-control"
      placeholder="YouTube Link"
      required>
  </div>

  <button type="submit" class="btn btn-success w-100">
    Add Video
  </button>

  <a href="video.php" class="btn btn-outline-secondary w-100 mt-3">
    Back
  </a>

</form>

</body>
</html>
