<?php echo view('common/top_header_backdesk.php') ?>
<meta name="csrf-token" content="<?= csrf_hash() ?>">
<meta name="csrf-name" content="<?= csrf_token() ?>">
</head>

<body>
<div class="container-scroller">
  <div class="container-fluid page-body-wrapper full-page-wrapper">
    <div class="content-wrapper d-flex align-items-center auth">
      <div class="row flex-grow">
        <div class="col-lg-4 mx-auto">
          <div class="auth-form-light text-left p-5">
            <div class="brand-logo text-center">
              <img style="width: 70px;height:70px" src="<?= base_url() ?>assets/backdesk/img/logo_books.png">
              <hr>
              <h5><?= COMPANY_FULL_NAME ?></h5>
              <hr>
            </div>
            <h4>Hello! let's get started</h4>
            <h6 class="font-weight-light">Sign in to continue.</h6>
            <form id="login_form" class="pt-3" method="post">
              <?= csrf_field() ?>
              <div class="form-group">
                <input type="text" class="form-control form-control-lg border border-dark" required id="user_id" name="user_id" placeholder="User ID">
              </div>
              <div class="form-group">
                <input type="password" class="form-control form-control-lg border border-dark" minlength="8" required id="password" name="password" placeholder="Password">
              </div>
              <div class="mt-3 d-grid gap-2">
                <button type="submit" class="submit btn btn-block btn-gradient-primary btn-lg font-weight-medium auth-form-btn">SIGN IN</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php echo view('common/footer_backdesk.php') ?>

<script>
  $(document).ready(function () {
    $("#login_form").validate();

    $('#login_form').on('submit', function (e) {
      e.preventDefault();

      if (!$('#login_form').valid()) {
        return false;
      }

      const formData = {
        user_id: $('#user_id').val(),
        password: $('#password').val(),
        '<?= csrf_token() ?>': $('input[name="<?= csrf_token() ?>"]').val()
      };

      $.ajax({
        url: "<?= base_url('api/auth/login') ?>",
        type: "POST",
        data: formData,
        dataType: "json",
        success: function (data) {
          if (data.status !== 200) {
            toast('danger', data.message || 'Something went wrong');
          } else {
            localStorage.setItem('jwt_token', data.token);
            $.ajaxSetup({
              headers: {
                'Authorization': 'Bearer ' + data.token
              }
            });

            toast('success', data.message || 'Login successful');
            setTimeout(() => {
              window.location = "<?= base_url('backdesk/dashboard') ?>";
            }, 1000);
          }
        },
        error: function (xhr) {
          const msg = xhr.responseJSON?.message || 'An unexpected error occurred.';
          toast('danger', msg);
        }
      });
    });

    const token = localStorage.getItem('jwt_token');
    if (token) {
      $.ajaxSetup({
        headers: {
          'Authorization': 'Bearer ' + token
        }
      });
    }

    const sessionVal = "<?= session()->getFlashdata('fail') ?>";
    if (sessionVal) {
      toast('danger', sessionVal);
    }
  });
</script>


</body>
</html>
