@extends('theme::layout.layout')

@section('title', ''.env('APP_NAME_DASHBOARD').' | Meu Histórico')

@section('content')
    <div class="section" style="width: 100%;">
        <div class="space-y-12">
            <div class="border-gray-900/10 pb-0">
                <div class="title-drake-fusion-formated">
                    <h2 class="text-base font-semibold leading-4 text-gray-900 inline-flex-aliest" style="text-transform: uppercase;">Meu Histórico de Investimentos</h2>
                    <p style="color: #ffffffc2;" class="mt-0 text-sm leading-0 text-gray-600">Aqui, é possível acompanhar todas as transações realizadas, desde compras e vendas até os resultados obtidos em cada operação.</p>
                </div>
                <hr style="margin-top: 1em;">
            </div>
        </div>

        <style type="text/css">
          @media (max-width: 768px) {
            table > thead > tr > th:nth-child(1) { display: revert-layer; }
          }
        </style>

        <div class="py-0">
            @if($Logs->count() > 0)
              <form action="" method="POST" id="massDeleteForm" style="margin-top: 0.5em;">
                @csrf
                @method('POST')
                <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
                  <div class="inline-block min-w-full shadow-md rounded-lg overflow-hidden" style="background-color: #fff!important;">
                    <table class="min-w-full leading-normal">
                      <thead>
                        <tr>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Investimento</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Valor de compra</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Valor de venda</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Data</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach ($Logs as $page)
                            @php
                            $dateTime = $page->created_at;

                            // Crie um objeto DateTime a partir da string
                            $date = new DateTime($dateTime);

                            // Separe a data e a hora
                            $onlyDate = $date->format('d/m/Y');
                            $onlyTime = $date->format('H:i:s');
                            @endphp
                            <tr>
                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    <p class="text-gray-600 whitespace-no-wrap" style="color: #333; margin-bottom: 0.3em;">R${{ $page->investment }}</p>
                                  </div>
                                </div>
                              </td>
                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    <p class="text-gray-900 whitespace-no-wrap" style="color: #333;"> R${{ $page->lastCandle }}</p>
                                  </div>
                                </div>
                              </td>
                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    <p class="text-gray-900 whitespace-no-wrap" style="color: #333;"> R${{ $page->lastCandleEnd }}</p>
                                  </div>
                                </div>
                              </td>

                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    @if ($page->status_viewn == "true")
                                        <span style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" class="bg-green-500 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                            Lucro
                                        </span>
                                    @else
                                        @if ($page->status_viewn == NULL)
                                            <span style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" class="bg-blue-500 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                                PROCESSANDO
                                            </span>
                                        @else
                                            <span style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" class="bg-red-500 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                                Perda
                                            </span>
                                        @endif
                                    @endif
                                  </div>
                                </div>
                              </td>

                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <p class="text-gray-900 whitespace-no-wrap" style="color: #333;">{{ $onlyDate }}, {{ $onlyTime }}</p>
                              </td>

                              <!-- <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                                <a href="{{env('APP_URL')}}admin/model/packages/{{ $page->id }}/edit" type="button" class="inline-block text-gray-500 hover:text-gray-700">
                                  <svg class="inline-block h-6 w-6 fill-current"
                                    viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"/></svg>
                                </a>
                              </td> -->
                            </tr>
                        @endforeach
                      </tbody>
                    </table>
                    <!-- Links de paginação -->
                    <div style="padding: 1em 1em;">
                      {{ $Logs->links() }}
                    </div>
                  </div>
                </div>
              </form>
            @else
              <div style="margin-top: 1.5em;" id="alert-additional-content-2" class="p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
                <div class="flex items-center">
                  <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                  </svg>
                  <span class="sr-only">Info</span>
                  <h3 class="text-lg font-medium">Atenção</h3>
                </div>
                <div class="mt-2 mb-4 text-sm">
                  Não foram encontrados itens disponíveis em nosso banco de dados.
                </div>
                <div class="flex">
                  <!-- <a style="text-transform: uppercase;" href="{{ route('admin.pages.create') }}" class="text-white bg-red-800 hover:bg-red-900 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                    <i data-feather="plus" class='mr-0'></i>
                    Adicionar páginas
                  </a> -->
                  <button style="text-transform: uppercase;" type="button" class="text-red-800 bg-transparent border border-red-800 hover:bg-red-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-red-600 dark:border-red-600 dark:text-red-500 dark:hover:text-white dark:focus:ring-red-800" data-dismiss-target="#alert-additional-content-2" aria-label="Close">
                    Fechar
                  </button>
                </div>
              </div>
            @endif
        </div>
    </div>
@endsection