@include('header')
<input type="hidden" name="input-uuid" value="">

<div class="row">
  <div class="col-lg-4">
    <div id="candidate-card" class="card mb-4">
      <div id="candidate-card-header" class="card-header">
        <strong>Candidate</strong>
      </div>
      <div class="card-body">
        
        <div class="mb-3">
          <label for="input-start-date" class="form-label">Start Date</label>
          <input type="text" class="form-control" name="input-start-date" id="input-start-date" autocomplete="off" value="Jan/01/1970">
        </div>
        <div class="mb-3">
          <label for="input-name" class="form-label">Name</label>
          <input type="text" class="form-control" name="input-name" id="input-name" autocomplete="off" value="">
        </div>
        <div class="mb-3">
          <label for="input-location" class="form-label">Location</label>
          <input type="text" class="form-control" name="input-location" id="input-location" autocomplete="off" value="">
        </div>
        <div class="mb-3">
          <label for="input-orientaton" class="form-label">Orientation</label>
          <input type="text" class="form-control" name="input-orientation" id="input-orienatation" autocomplete="off" value="">
        </div>
        <div class="mb-3">
          <label for="input-role" class="form-label">Role</label>
          <input type="text" class="form-control" name="input-role" id="input-role" autocomplete="off" value="">
        </div>
        <div class="mb-3">
          <label for="input-password" class="form-label">Password</label>
          <input type="text" class="form-control" name="input-password" id="input-password" autocomplete="off" value="">
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div id="entra-card" class="card mb-4">
      <div class="card-header">
        <strong>Entra</strong>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <label for="input-email" class="form-label">Email</label>
          <input type="text" class="form-control" name="input-email" id="input-email" autocomplete="off" value="">
        </div>
        <div class="mb-3">
          <label for="input-entra-uuid" class="form-label">Entra UUID</label>
          <input type="text" class="form-control" name="input-entra-uuid" id="input-entra-uuid" autocomplete="off" value="">
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div id="account-creation-card" class="card mb-4">
      <div class="card-header">
        <strong>Account Creation</strong>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="1" id="input-account-created-microsoft" name="input-account-created-microsoft" >
            <label class="form-check-label" for="input-account-created-microsoft">
              Microsoft
            </label>
          </div>
          <div class="form-check">
                                                <label class="form-check-label" for="input-account-created-rethink">
              Rethink
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
   <div class="col-lg-4">
    <div id="equipment-card" class="card mb-4">
      <div class="card-header">
        <strong>Equipment</strong>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <label for="input-computer-serial" class="form-label">Computer Serial</label>
          <input type="text" class="form-control" name="input-computer-serial" id="input-computer-serial" autocomplete="off" value="">
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll(".card-body input").forEach(input => {
    let originalValue = input.value;

    input.addEventListener("focus", () => {
      originalValue = input.value;
    });

    input.addEventListener("blur", () => {
      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      const candidate_uuid = document.querySelector('[name="input-uuid"]').value;

      const currentValue = input.type === "checkbox" ? input.checked : input.value;

      if (currentValue !== originalValue) {
        const card = input.closest(".card");
        const header = card.querySelector(".card-header");

        // Candidate Card
        if (card.id == "candidate-card") {
          fetch('update-candidate', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
              candidate_uuid: document.querySelector('[name="input-uuid"]').value,
              start_date: document.querySelector('[name="input-start-date"]').value,
              name: document.querySelector('[name="input-name"]').value,
              location: document.querySelector('[name="input-location"]').value,
              orientationLocation: document.querySelector('[name="input-orientation"]').value,
              role: document.querySelector('[name="input-role"]').value,
              password: document.querySelector('[name="input-password"]').value,
            })
          })
          .then(response => {
            if (!response.ok) throw new Error('Request failed');
            header.style.backgroundColor = "lightgreen";
            setTimeout(() => {
              header.style.backgroundColor = "";
            }, 1000);
          })
          .then(data => {
            console.log('Success:', data);
          })
          .catch(error => {
            console.error('Error:', error);
          });
        }

        // Entra Card
        if (card.id == "entra-card") {
          fetch('update-entra', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
              candidate_uuid: document.querySelector('[name="input-uuid"]').value,
              email: document.querySelector('[name="input-email"]').value,
              entraUUID: document.querySelector('[name="input-entra-uuid"]').value,
            })
          })
          .then(response => {
            if (!response.ok) throw new Error('Request failed');
            header.style.backgroundColor = "lightgreen";
            setTimeout(() => {
              header.style.backgroundColor = "";
            }, 1000);
          })
          .then(data => {
            console.log('Success:', data);
            
          })
          .catch(error => {
            console.error('Error:', error);
          });
        }

        // Account Creation Card
        if (card.id == "account-creation-card") {
          fetch('update-account-creation', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
              candidate_uuid: document.querySelector('[name="input-uuid"]').value,
              microsoftAccount: document.querySelector('[name="input-account-created-microsoft"]').checked ? "1" : "0",
              rethinkAccount: document.querySelector('[name="input-account-created-rethink"]').checked ? "1" : "0",
            })
          })
          .then(response => {
            if (!response.ok) throw new Error('Request failed');
            header.style.backgroundColor = "lightgreen";
            setTimeout(() => {
              header.style.backgroundColor = "";
            }, 1000);
          })
          .then(data => {
            console.log('Success:', data);
            
          })
          .catch(error => {
            console.error('Error:', error);
          });
        }

        // Equipment Card
        if (card.id == "equipment-card") {
          fetch('update-equipment', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
              candidate_uuid: document.querySelector('[name="input-uuid"]').value,
              computerSerial: document.querySelector('[name="input-computer-serial"]').value,
            })
          })
          .then(response => {
            if (!response.ok) throw new Error('Request failed');
            header.style.backgroundColor = "lightgreen";
            setTimeout(() => {
              header.style.backgroundColor = "";
            }, 1000);
          })
          .then(data => {
            console.log('Success:', data);
            
          })
          .catch(error => {
            console.error('Error:', error);
          });
        }
      }
    });
  });

  document.addEventListener('DOMContentLoaded', function () {
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');

    checkboxes.forEach(function (checkbox) {
      checkbox.addEventListener('change', function () {
        if (this.checked) {
          this.disabled = true;
        }
      });
    });
  });
</script>
@include('footer')