#include <WiFi.h>

// ---------- WIFI ----------
const char* ssid = "Enter Your WIFI Username";     // replace with your wifi username
const char* password = "Enter Your WIFI password"; // replacew with your wifi password

WiFiServer server(80);

// ---------- PINS ----------
#define LED_PIN 2
#define MOTOR_PIN1 25
#define MOTOR_PIN2 26

bool state = false;

void setup() {

  Serial.begin(115200);

  pinMode(LED_PIN, OUTPUT);
  pinMode(MOTOR_PIN1, OUTPUT);
  pinMode(MOTOR_PIN2, OUTPUT);

  digitalWrite(LED_PIN, LOW);
  digitalWrite(MOTOR_PIN1, LOW);
  digitalWrite(MOTOR_PIN2, LOW);

  WiFi.begin(ssid, password);
  Serial.print("Connecting");

  while (WiFi.status() != WL_CONNECTED) {
    delay(300);
    Serial.print(".");
  }

  Serial.println("\nConnected!");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop() {

  WiFiClient client = server.available();
  if (!client) return;

  String request = client.readStringUntil('\r');

  // -------- Handle Toggle --------
  if (request.indexOf("/toggle?state=1") != -1) {
    state = true;

    digitalWrite(LED_PIN, HIGH);

    // Motor forward
    digitalWrite(MOTOR_PIN1, HIGH);
    digitalWrite(MOTOR_PIN2, LOW);
  }

  if (request.indexOf("/toggle?state=0") != -1) {
    state = false;

    digitalWrite(LED_PIN, LOW);

    // Motor stop
    digitalWrite(MOTOR_PIN1, LOW);
    digitalWrite(MOTOR_PIN2, LOW);
  }

  // -------- Send Web Page --------
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html; charset=UTF-8");
  client.println("Connection: close");
  client.println();

  client.println("<!DOCTYPE html><html><head>");
  client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
  client.println("<title>ESP32 Motor Toggle</title>");

  client.println("<style>");
  client.println("body{font-family:sans-serif;text-align:center;padding-top:40px;}");
  client.println(".switch{position:relative;display:inline-block;width:60px;height:34px;}");
  client.println(".switch input{display:none;}");
  client.println(".slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;}");
  client.println(".slider:before{position:absolute;content:'';height:26px;width:26px;left:4px;bottom:4px;background-color:white;transition:.4s;}");
  client.println("input:checked + .slider{background-color:#2196F3;}");
  client.println("input:checked + .slider:before{transform:translateX(26px);}");
  client.println(".slider.round{border-radius:34px;}");
  client.println(".slider.round:before{border-radius:50%;}");
  client.println("</style>");

  client.println("</head><body>");

  client.println("<h2>QUAD ROBOTICS</h2>");
  client.println("<h3>LED + Motor Toggle</h3>");

  client.print("<label class='switch'>");
  client.print("<input type='checkbox' onchange='toggle(this)' ");
  if (state) client.print("checked");
  client.println(">");
  client.println("<span class='slider round'></span>");
  client.println("</label>");

  client.println("<script>");
  client.println("function toggle(el){");
  client.println("var xhr=new XMLHttpRequest();");
  client.println("xhr.open('GET','/toggle?state='+(el.checked?1:0),true);");
  client.println("xhr.send();");
  client.println("}");
  client.println("</script>");

  client.println("</body></html>");

  client.stop();
}