{% extends 'layout/base.html' %}

{% block content %}
<style>
  .form-section {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
    margin-top: 40px;
  }

  .form-section h4 {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 25px;
    color: #2c3e50;
  }

  .form-label {
    font-weight: 500;
    color: #34495e;
    margin-bottom: 6px;
  }

  .form-control, .form-select {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid #ced4da;
    transition: 0.2s ease-in-out;
  }

  .form-control:focus, .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
  }

  .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
  }

  .form-check-label {
    font-size: 15px;
    margin-left: 8px;
    color: #2c3e50;
  }

  .company-name {
    font-weight: 600;
    font-size: 17px;
    margin-top: 30px;
    color: #1f2d3d;
  }

  .divider {
    border-top: 1px solid #e9ecef;
    margin: 20px 0;
  }

  .btn-primary {
    padding: 12px 28px;
    font-weight: 600;
    font-size: 15px;
    border-radius: 10px;
    background-color: #0d6efd;
    border: none;
    transition: 0.2s ease-in-out;
  }

  .btn-primary:hover {
    background-color: #0b5ed7;
  }

  .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
</style>

<div class="container-fluid">
  <div class="form-section">
    <h4>👤 Create Temporary User</h4>

    <form method="POST">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="row g-4">
        <div class="col-md-4">
          <label class="form-label">Name</label>
          <input type="text" name="name" class="form-control" placeholder="Full name" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Email</label>
          <input type="email" name="email" class="form-control" placeholder="email@example.com" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Password</label>
          <input type="password" name="password" class="form-control" placeholder="Password" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Confirm Password</label>
          <input type="password" name="confirm_password" class="form-control" placeholder="Re-enter password" required>
        </div>
        <div class="col-md-4">
          <label class="form-label">Role</label>
          <select name="role" class="form-select" required>
            <option value="">-- Select Role --</option>
            <option value="operator">Operator</option>
            <option value="accounts">Auditor</option>
          </select>
        </div>
      </div>

      <hr class="my-4">

      <h5 class="mb-3">📁 Grant Access to Year Folders</h5>
      <div class="row">
        {% for item in companies_with_years %}
        <div class="col-md-12">
          <div class="company-name">
            {{ item.company.name }}
          </div>
          <div class="checkbox-grid">
            {% for year in item.years %}
            <div class="form-check">
              <input
                class="form-check-input year-checkbox"
                type="checkbox"
                name="year_ids"
                value="{{ year.id }}"
                id="year{{ year.id }}"
                data-company-enabled="{{ '1' if item.company.is_enabled else '0' }}"
                data-company-name="{{ item.company.name }}"
              >
              <label class="form-check-label" for="year{{ year.id }}">{{ year.year }}</label>
            </div>
            {% endfor %}
          </div>
          <div class="divider"></div>
        </div>
        {% endfor %}
      </div>

      <button type="submit" class="btn btn-primary mt-3">✅ Create User</button>
    </form>
  </div>
</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Validate Passwords Match -->
<script>
  document.querySelector('form').addEventListener('submit', function (e) {
    const password = document.querySelector('input[name="password"]').value;
    const confirmPassword = document.querySelector('input[name="confirm_password"]').value;

    // Password strength regex
    const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

    // Check for password mismatch
    if (password !== confirmPassword) {
      e.preventDefault();
      Swal.fire({
        icon: 'error',
        title: 'Password Mismatch',
        text: '❌ Password and Confirm Password do not match.',
        confirmButtonColor: '#d33',
        confirmButtonText: 'OK'
      });
      return;
    }

    // Check for weak password
    if (!strongPasswordRegex.test(password)) {
      e.preventDefault();
      Swal.fire({
        icon: 'warning',
        title: 'Weak Password',
        html: `
          ⚠️ Your password must meet the following criteria:<br><br>
          <ul style="text-align:left">
            <li>Minimum 8 characters</li>
            <li>At least one uppercase letter (A-Z)</li>
            <li>At least one lowercase letter (a-z)</li>
            <li>At least one digit (0-9)</li>
            <li>At least one special character (@$!%*?&)</li>
          </ul>
        `,
        confirmButtonColor: '#d33',
        confirmButtonText: 'Got it'
      });
    }
  });

  // Prevent access for disabled companies
  document.querySelectorAll('.year-checkbox').forEach(function (checkbox) {
    checkbox.addEventListener('change', function (e) {
      const isEnabled = e.target.dataset.companyEnabled === '1';
      const companyName = e.target.dataset.companyName;

      if (!isEnabled && e.target.checked) {
        e.preventDefault();
        e.target.checked = false;

        Swal.fire({
          icon: 'warning',
          title: 'Company is Disabled',
          html: `❌ <strong>${companyName}</strong> is currently <b>inactive</b>.<br>Please enable it before giving access.`,
          confirmButtonColor: '#d33',
          confirmButtonText: 'OK'
        });
      }
    });
  });
</script>

{% endblock %}