<!DOCTYPE html>
<html lang="pt-br">
<head>
  <?php include_once 'application/views/imports/head.php' ?>
</head>
<body class="overflow-x-hidden">
  <?php include_once 'application/views/imports/header.php' ?>

  <section class="flex items-center w-screen py-12 bg-cover bg-center bg-no-repeat" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(<?= base_url('assets/uploads/images/intern-banners/' . $banner->image) ?>)">
    <div class="wrapper">
      <h2 class="text-white font-bold uppercase text-center text-xl md:text-4xl leading-relaxed">
        Documentos
      </h2>
      <ul class="mt-4 flex justify-center items-center text-white">
        <li class="text-white font-semibold"><a href="<?= base_url() ?>">Início</a></li>
        <li class="mx-4">/</li>
        <li class="text-gray-300 font-semibold">Documentos</li>
      </ul>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="max-w-screen-md mx-auto px-4 lg:px-0">
      <h1 class="text-dark text-lg md:text-xl font-semibold">Documentos disponíveis para <span class="text-primary font-bold">download</span></h1>
      <?php if (!isset($isLoggedIn) || $isLoggedIn !== true) : ?>
        <p class="mt-2 text-sm text-gray-500">Para fazer download, informe um usuário e senha válidos.</p>
      <?php endif ?>
      <?php if ($this->session->flashdata('success')) : ?>
        <div class="alert border-l-8 border-green-800 mt-6 flex items-center justify-between p-4 bg-gray-100 shadow-md rounded-md">
          <div class="flex items-center">
            <div>
              <i class="text-green-800" data-feather="check-circle"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-dark text-sm font-semibold">Sucesso</h3>
              <p class="text-sm text-gray-500"><?= $this->session->flashdata('success') ?></p>
            </div>
          </div>
          <div class="flex items-center">
            <button class="close" title="Fechar">
              <i class="text-dark" data-feather="x-circle"></i>
            </button>
          </div>
        </div>
      <?php endif ?>
      <?php if ($this->session->flashdata('error')) : ?>
        <div class="alert border-l-8 border-red-800 mt-6 flex items-center justify-between p-4 bg-gray-100 shadow-md rounded-md">
          <div class="flex items-center">
            <div>
              <i class="text-red-800" data-feather="x-circle"></i>
            </div>
            <div class="ml-4">
              <h3 class="text-dark text-sm font-semibold">Erro</h3>
              <p class="text-sm text-gray-500"><?= $this->session->flashdata('error') ?></p>
            </div>
          </div>
          <div class="flex items-center">
            <button class="close" title="Fechar">
              <i class="text-dark" data-feather="x-circle"></i>
            </button>
          </div>
        </div>
      <?php endif ?>
      <?php if (!isset($isLoggedIn) || $isLoggedIn !== true) : ?>
        <form action="<?= base_url('documents/validate') ?>" method="post" class="grid grid-cols-1 md:grid-cols-3 gap-2 mt-6 md:mt-10">
          <div>
            <input type="text" required name="username" placeholder="Usuário" class="text-sm w-full border boder-dark p-2 rounded-sm outline-none">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <input type="password" required name="password" placeholder="Senha" class="text-sm w-full border boder-dark p-2 rounded-sm outline-none">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <button class="btn btn--primary w-full text-sm">Entrar</button>
          </div>
        </form>
      <?php else : ?>
        <div class="mt-6 md:mt-10 grid grid-cols-1 md:grid-cols-2 gap-4">
          <p class="mt-2 text-sm text-gray-500">
            Você já pode fazer download dos documentos. Para isso, clique no botão de <span class="font-semibold">download</span>
            ou no <span class="font-semibold">nome do arquivo</span>
          </p>
          <div class="flex items-center">
            <a href="<?= base_url('documents/logout') ?>">
              <button class="btn btn--primary w-full text-sm">Sair da conta</button>
            </a>
          </div>
        </div>
      <?php endif ?>
      <?php if (isset($documents) && is_array($documents) && count($documents) > 0) : ?>
        <div class="mt-6 md:mt-10 grid grid-cols-1 md:grid-cols-2 gap-3">
          <?php foreach ($documents as $document) : ?>
            <?php if (!empty($document->file)) : ?>
              <div class="bg-gray-200 p-2 rounded-md flex items-center justify-between">
                <div class="flex items-center">
                  <div class="rounded-full p-2 bg-gray-400 bg-opacity-40">
                    <?php if (array_key_exists('extension', pathinfo($document->file)) && !empty(pathinfo($document->file)['extension'])) : ?>
                      <img class="w-6" src="<?= base_url('assets/site/images/icons/' . pathinfo($document->file)['extension'] . '.png') ?>" alt="<?= pathinfo($document->file)['extension'] ?> icon">
                    <?php else : ?>
                      <img class="w-6" src="<?= base_url('assets/site/images/icons/files.png') ?>" alt="Files icon">
                    <?php endif ?>
                  </div>
                  <div class="ml-4">
                    <?php if (isset($isLoggedIn) && $isLoggedIn === true) : ?>
                      <a
                        href="<?= base_url('assets/uploads/files/documents/' . $document->file) ?>"
                        download class="hover:underline text-sm font-semibold text-dark"
                      >
                        <?= $document->title ?>
                      </a>
                    <?php else : ?>
                      <p class="text-sm font-semibold text-dark"><?= $document->title ?></p>
                    <?php endif ?>
                  </div>
                </div>
                <?php if (isset($isLoggedIn) && $isLoggedIn === true) : ?>
                  <a href="<?= base_url('assets/uploads/files/documents/' . $document->file) ?>" download>
                    <button title="Fazer download" class="hover:bg-primary hover:text-white transition-colors duration-500 rounded-full p-2 bg-gray-400 bg-opacity-40">
                      <i class="feather-lg" data-feather="download"></i>
                    </button>
                  </a>
                <?php endif ?>
              </div>
            <?php endif ?>
          <?php endforeach ?>
        </div>
      <?php else : ?>
        <div class="mt-6 md:mt-10">
          <h1 class="text-dark text-lg md:text-xl font-semibold">Nenhum documento encontrado. Tente mais tarde</h1>
        </div>
      <?php endif ?>
    </div>
  </section>

  <?php include_once 'application/views/imports/footer.php' ?>
  <?php include_once 'application/views/imports/scripts.php' ?>

  <script>
    window.addEventListener('load', function () {
      closeAlert()
    })

    function closeAlert () {
      const alerts = document.querySelectorAll('.alert')

      alerts.forEach(alert => {
        const close = alert.querySelector('.close')
        close.addEventListener('click', () => {
          alert.remove()
        })
      })
    }
  </script>
</body>
</html>