#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);


const int led = 13;
const int strobe_pin = 2;

void handleRoot();
void strobe_on();

void setup() {

  pinMode(led, OUTPUT);
  pinMode(strobe_pin, OUTPUT);
  digitalWrite(led, 0);
  WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP

  // put your setup code here, to run once:
  Serial.begin(115200);

  // WiFi.mode(WiFi_STA); // it is a good practice to make sure your code sets wifi mode how you want it.

  //WiFiManager, Local intialization. Once its business is done, there is no need to keep it around
  WiFiManager wm;

  //reset settings - wipe credentials for testing
  //wm.resetSettings();

  // Automatically connect using saved credentials,
  // if connection fails, it starts an access point with the specified name ( "AutoConnectAP"),
  // if empty will auto generate SSID, if password is blank it will be anonymous AP (wm.autoConnect())
  // then goes into a blocking loop awaiting configuration and will return success result

  bool res;
  // res = wm.autoConnect(); // auto generated AP name from chipid
  // res = wm.autoConnect("AutoConnectAP"); // anonymous ap
  res = wm.autoConnect("AutoConnectAP", "password"); // password protected ap

  if (!res) {
    Serial.println("Failed to connect");
    // ESP.restart();
  }
  else {
    //if you get here you have connected to the WiFi
    Serial.println("connected...yeey :)");
  }

  server.on("/", handleRoot);
  server.on("/on", strobe_on);
  server.on("/off", strobe_off);

  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}

void handleRoot() {
  digitalWrite(led, 1);

  const char MYHTML[]         PROGMEM = "<!DOCTYPE html>"
                                        "<html lang='en'> \n"
                                        "<head> \n"
                                        "<title></title> \n"
                                        "<meta charset='utf-8'> \n"
                                        "<meta name='viewport' content='width=device-width, initial-scale=1'> \n"
                                        "<style> \n"
                                        "html *{ \n"
                                        "font-size: 35px !important; \n"
                                        "margin: 2px; \n"
                                        "} \n"
                                        "@media only screen and (min-width: 600px) { \n"
                                        "body { \n"
                                        "margin-right:200px; \n"
                                        "margin-left:200px; \n"
                                        "margin-top: 0; \n"
                                        "} \n"
                                        "} \n"
                                        ".flex{ \n"
                                        "display: grid; \n"
                                        "grid-row-gap: 1rem; \n"
                                        "grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); \n"
                                        "} \n"
                                        ".button-red { \n"
                                        "box-shadow:inset 0px 1px 0px 0px #cf866c; \n"
                                        "background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%); \n"
                                        "background-color:#d0451b; \n"
                                        "border-radius:3px; \n"
                                        "border:1px solid #942911; \n"
                                        "display:inline-block; \n"
                                        "cursor:pointer; \n"
                                        "color:#ffffff; \n"
                                        "font-family:Arial; \n"
                                        "font-size:13px; \n"
                                        "padding:6px 24px; \n"
                                        "text-decoration:none; \n"
                                        "text-shadow:0px 1px 0px #854629; \n"
                                        "text-align:center; \n"
                                        "} \n"
                                        ".button-red:hover { \n"
                                        "background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%); \n"
                                        "background-color:#bc3315; \n"
                                        "} \n"
                                        ".button-red:active { \n"
                                        "position:relative; \n"
                                        "top:1px; \n"
                                        "} \n"
                                        ".button { \n"
                                        "box-shadow:inset 0px 1px 0px 0px #54a3f7; \n"
                                        "background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%); \n"
                                        "background-color:#007dc1; \n"
                                        "border-radius:3px; \n"
                                        "border:1px solid #124d77; \n"
                                        "display:inline-block; \n"
                                        "cursor:pointer; \n"
                                        "color:#ffffff; \n"
                                        "font-family:Arial; \n"
                                        "font-size:13px; \n"
                                        "padding:6px 24px; \n"
                                        "text-decoration:none; \n"
                                        "text-shadow:0px 1px 0px #154682; \n"
                                        "} \n"
                                        ".button:hover { \n"
                                        "background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%); \n"
                                        "background-color:#0061a7; \n"
                                        "} \n"
                                        ".button:active { \n"
                                        "position:relative; \n"
                                        "top:1px; \n"
                                        "} \n"
                                        "</style> \n"
                                        "<script> \n"
                                        "document.addEventListener('DOMContentLoaded', function(){ \n"
                                        "}); \n"
                                        "function get(url, success) { \n"
                                        "var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); \n"
                                        "xhr.open('GET', url); \n"
                                        "xhr.onreadystatechange = function() { \n"
                                        "if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText); \n"
                                        "}; \n"
                                        "xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); \n"
                                        "xhr.send(); \n"
                                        "return xhr; \n"
                                        "} \n"
                                        "function strobe_off(){ \n"
                                        "// example request \n"
                                        "get('off', function(data){ \n"
                                        "console.log(data); \n"
                                        "}); \n"
                                        "} \n"
                                        "function strobe_on(){ \n"
                                        "// example request \n"
                                        "get('on', function(data){ \n"
                                        "console.log(data); \n"
                                        "}); \n"
                                        "} \n"
                                        "</script> \n"
                                        "</head> \n"
                                        "<body> \n"
                                        "<div class='flex'> \n"
                                        "<button onclick='strobe_on()' class='button'>On</button> \n"
                                        "<button onclick='strobe_off()' class='button-red'>Off</button> \n"
                                        "</div> \n"
                                        "</body> \n"
                                        "</html> \n";

  server.send(200, "text/html", MYHTML);
  digitalWrite(led, 0);
}

void strobe_on() {
  digitalWrite(strobe_pin, 1);
  server.send(200, "text/plain", "stobe on");
}

void strobe_off() {
  digitalWrite(strobe_pin, 0);
  server.send(200, "text/plain", "stobe off");
}