<html>
  <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
  crossorigin="anonymous"
/>
<div class="container-fluid">
  <div class="row group-1 collapse show" id="card-1">
    <div class="col">
      <div class="card m-2">
        <div class="card-header text-white bg-danger">Select a Device Type</div>
        <div class="card-body">
          <div class="row">
            <% types.forEach( type => { %>
            <div class="col-3 mt-2">
              <button
                onclick="getMakes(event)"
                data-bs-toggle="collapse"
                data-bs-target=".group-1"
                class="btn btn-outline-danger btn-type d-block mx-auto w-100"
              >
                <%= type %>
              </button>
            </div>
            <% }) %>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row group-1 group-2 collapse" id="card-2">
    <div class="col">
      <div class="card">
        <div class="card-header text-white bg-danger">
          Select a Device Manufacturer
        </div>
        <div class="row card-body card-2-body">
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated bg-danger w-100"
              role="progressbar"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row group-2 group-3 collapse" id="card-3">
    <div class="col">
      <div class="card">
        <div class="card-header text-white bg-danger">
          Select a Device Model
        </div>
        <div class="row card-body card-3-body">
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated bg-danger w-100"
              role="progressbar"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row group-3 group-4 collapse" id="card-4">
    <div class="col">
      <div class="card">
        <div class="card-header text-white bg-danger">
          Select a Device Repair
        </div>
        <div class="row card-body card-4-body">
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated bg-danger w-100"
              role="progressbar"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row group-4 group-5 collapse" id="card-5">
    <div class="col">
      <div class="card">
        <div class="card-header text-white bg-danger">
          Tell us where to send the Quote
        </div>
        <form id="form">
          <div class="card-body card-5-body">
            <div class="form-group row" id="repair-group">
              <input
                type="hidden"
                readonly
                name="type"
                id="typeField"
                class="form-control text-center"
                placeholder="Type"
              />
              <input
                type="hidden"
                readonly
                name="make"
                id="makeField"
                class="form-control text-center"
                placeholder="Make"
              />
              <input
                type="hidden"
                readonly
                name="model"
                id="modelField"
                class="form-control text-center"
                placeholder="Model"
              />
              <input
                type="hidden"
                readonly
                name="repair"
                id="repairField"
                class="form-control text-center"
                placeholder="Repair"
              />
            </div>
            <div class="row mt-3">
              <div class="col">
                <label for="firstname">First Name</label>
                <input
                  type="text"
                  name="firstname"
                  id="firstNameField"
                  class="form-control"
                />
              </div>
              <div class="col">
                <label for="lastname">Last Name</label>
                <input
                  type="text"
                  name="lastname"
                  id="lastNameField"
                  class="form-control"
                />
              </div>
            </div>
            <div class="row mt-3">
              <div class="col">
                <label for="phone">Phone Number</label>
                <input
                  type="tel"
                  name="phone"
                  id="phoneField"
                  class="form-control"
                />
              </div>
              <div class="col">
                <label for="email">Email Address</label>
                <input
                  type="email"
                  name="email"
                  id="emailField"
                  class="form-control"
                />
              </div>
            </div>
            <div class="row mt-3 text-end">
              <div class="col">
                <input type="submit" class="btn btn-danger text-end" />
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="row group-5 collapse" id="card-6">
    <div class="col">
      <div class="card">
        <div class="card-header text-white bg-danger response-header">
          &nbsp;
        </div>
        <div class="row card-body card-6-body">
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated bg-danger w-100"
              role="progressbar"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</html>

<script
  src="https://code.jquery.com/jquery-3.6.4.min.js"
  integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
  integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
  crossorigin="anonymous"
></script>
<script>
  let formData = {};

  // Reset form and formData
  function reset() {
    formData = {};
    $("#card-6").collapse("hide");
    $("#card-1").collapse("show");
  }

  // Submit Quote
  $("#form").submit((e) => {
    e.preventDefault();
    e.stopPropagation();
    formData.firstname = $("#firstNameField").val();
    formData.lastname = $("#lastNameField").val();
    formData.phone = $("#phoneField").val();
    formData.email = $("#emailField").val();
    fetch("/", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    })
      .then((res) => res.json())
      .then((res) => {
        $("input").removeClass("is-invalid");
        if (res.errors) throw res;
        console.log(res)
        $(".card-6-body").html(`
                <h1 class="text-center text-${res.success || "danger"}">${
          res.message
        }</h1>
            `);
        new bootstrap.Collapse($("#card-5"));
        $("#card-6").collapse("show");
        setTimeout(() => reset(), 2000);
      })
      .catch((res) => {
        if (res.errors) {
          res.errors.forEach((error) => {
            $(`input[name='${error.param}']`).addClass("is-invalid");
          });
        } else {
          return res;
        }
      });
  });

  // Get Makes
  function getMakes(e) {
    formData.type = e.target.innerText;
    fetch(`/makes/${e.target.innerText}`)
      .then((res) => res.json())
      .then((makes) => {
        $(".card-2-body").html("");
        makes.forEach((make) => {
          $(".card-2-body").append(`
                    <div class="col-3 mt-2">
                        <button onclick="getModels(event)" data-bs-toggle="collapse" data-bs-target=".group-2" class="btn btn-outline-danger btn-make d-block mx-auto w-100 h-100">${make}</button>
                    </div>
                `);
        });
      });
  }

  // Get Models
  function getModels(e) {
    formData.make = e.target.innerText;
    fetch(`/models/${e.target.innerText}/${formData.type}`)
      .then((res) => res.json())
      .then((models) => {
        $(".card-3-body").html("");
        models.forEach((model) => {
          $(".card-3-body").append(`
                    <div class="col-3 mt-2">
                        <button onclick="getRepairs(event)" data-bs-toggle="collapse" data-bs-target=".group-3" class="btn btn-outline-danger btn-model d-block mx-auto w-100 h-100">${model}</button>
                    </div>
                `);
        });
      });
  }

  // Get Repairs
  function getRepairs(e) {
    formData.model = e.target.innerText;
    fetch(`/repairs/${e.target.innerText}`)
      .then((res) => res.json())
      .then((repairs) => {
        $(".card-4-body").html("");
        repairs.forEach((repair) => {
          $(".card-4-body").append(`
                    <div class="col-3 mt-2">
                        <button onclick="getContact(event)" data-bs-toggle="collapse" data-bs-target=".group-4" class="btn btn-outline-danger btn-repair d-block mx-auto w-100 h-100">${repair}</button>
                    </div>
                `);
        });
      });
  }

  // Show Contact Card
  function getContact(e) {
    formData.repair = e.target.innerText;
    $("#typeField").val(formData.type);
    $("#makeField").val(formData.make);
    $("#modelField").val(formData.model);
    $("#repairField").val(formData.repair);
  }
</script>
