<!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">
        Cidades atendidas
      </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">Cidades atendidas</li>
      </ul>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <div class="w-full px-4 md:px-0 grid grid-cols-1 gap-10 md:grid-cols-2">
        <div>
          <h2 class="text-dark text-xl uppercase font-bold">Procure a unidade mais próxima de você</h2>
          <p class="mt-2 text-sm text-gray-500">Digite uma cidade desejada, iremos informar a <span class="font-semibold">unidade mais próxima</span> de você.</p>
          <div class="mt-10 bg-white shadow-md rounded-sm p-6 border border-gray-100">
            <form action="<?= base_url('cidades-atendidas/pesquisar') ?>" method="get" class="grid grid-cols-1 gap-2">
              <div>
                <label class="text-gray-600 text-sm font-medium">Nome da cidade</label>
                <input type="text" name="city" class="text-sm mt-1 border border-gray-400 rounded-sm p-2 w-full">
              </div>
              <button class="btn btn--primary">Pesquisar</button>
            </form>
          </div>
        </div>
        <?php if (isset($unity) && !empty($unity)) : ?>
          <div>
            <?php if (isset($unity->near_city)) : ?>
              <h2 class="text-dark text-lg font-semibold mb-6">Unidade mais próxima ou em <span class="text-primary font-bold"><?= ($unity->near_city) ?></span></h2>
            <?php endif ?>
            <div class="rounded-sm p-6 bg-gray-100 shadow-lg border border-primary border-opacity-40">
              <h2 class="mb-2 uppercase text-sm font-semibold"><?= $unity->title ?></h2>
              <span style="height: 2px" class="block w-32 bg-primary"></span>
              <div class="mt-6 flex items-center">
                <i class="mr-4" data-feather="map-pin"></i>
                <p class="text-sm text-gray-600"><?= $unity->full_address ?></p>
              </div>
              <?php if (!empty($unity->phone)) : ?>
              <div class="mt-4 flex items-center">
                <i class="mr-4" data-feather="phone"></i>
                <a class="hover:underline" href="tel:+55<?= $unity->phone ?>">
                  <p class="text-sm text-gray-600"><?= $unity->phone ?></p>
                </a>
              </div>
              <?php endif ?>
              <?php if (!empty($unity->email)) : ?>
                <div class="mt-4 flex items-center">
                  <i class="mr-4" data-feather="mail"></i>
                  <a class="hover:underline" href="mailto:<?= $unity->email ?>">
                    <p class="text-sm text-gray-600"><?= $unity->email ?></p>
                  </a>
                </div>
              <?php endif ?>
              <?php if (!empty($unity->contact)) : ?>
                <div class="mt-4 flex items-center">
                  <i class="mr-4" data-feather="user"></i>
                  <p class="text-sm text-gray-600">Falar com: <?= $unity->contact ?></p>
                </div>
              <?php endif ?>
            </div>
          </div>
        <?php elseif (isset($isSearching) && $isSearching === true) : ?>
          <h3 class="text-dark text-lg font-semibold">Nenhuma cidade encontrada com a essas especificações. Tente novamente</h3>
        <?php endif ?>
        <!-- <div>
          <h3 class="text-dark text-xl uppercase font-bold">Procure a cidade desejada</h3>
          <p class="mt-2 text-gray-600">
            Caso a cidade desejada não esteja na lista acima, <a href="<?= base_url('contato') ?>" class="text-primary hover:underline">entre em contato conosco</a> e consulte sobre a possibildade de frete utilizando outros de nossos serviços de entrega da Transportadora Tempo.
          </p>
        </div> -->
      </div>
    </div>
  </section>

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