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

@section('title', ''.env('APP_NAME').' | Listar Detalhes do Envio - Leads')

@section('content')
    <style>
        .text-gray-900 { color: #fff; }
        .text-gray-600 { color: #ffffffb3; }
        th { background-color: #1f2937 !important; }
        #massDeleteForm > div > div > div { background-color: #1f2937!important; }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <div class="section container px-5 py-8 mx-auto" 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;">
                        Detalhes do seu envio <strong style="margin-left: 0.4em;">{{ $Send->camp }}</strong> <a href="{{env('APP_URL')}}user/facebook/meta/pages/send" style="cursor: pointer;" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-2 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-blue-950 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4">
                        <i data-feather="message-square" class='mr-0'></i> <span>Enviar Mensagens</span>
                    </a>
                    </h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Gostaria de ver os detalhes do seu envio?</p>
                </div>
                <hr style="margin-top: 1em; border-color: #e5e7eb36;">
            </div>
        </div>

        @if(session('success'))
            <div class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg border border-green-400">
                <span class="font-medium">Sucesso!</span> {{ session('success') }}
            </div>
        @endif


        @if(session('error'))
            <div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg border border-red-400">
                <span class="font-medium">Erro!</span> {{ session('error') }}
            </div>
        @endif

        <div class="py-0">
            @if($Count_Accounts > 0)
              <style>
                #lne h3 {
                    margin-bottom: 0em;
                    text-transform: uppercase;
                    font-size: 0.8em;
                }

                #lne p {
                    margin-top: 0em;
                }
              </style>
              @php
                  $GetPages_1 = DB::table("facebook_pages_conversations_send_list")->where('conversations_send_id', '=', $Send->id)->get();
                  $CountPages_1 = $GetPages_1->count();
              @endphp
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4" style="margin-top: 1.5em;" id="lne">
                  <!-- Card Total -->
                  <div class="bg-gray-800 text-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold">Total</h3>
                    <p class="text-4xl font-bold mt-4" id="total-value">{{$CountPages_1}}</p>
                  </div>

                  <!-- Card Sucessos -->
                  <div class="bg-gray-800 text-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold">Sucessos</h3>
                    <p class="text-4xl font-bold mt-4 text-green-500" id="success-value">{{ $Send->send }}</p>
                  </div>

                  <!-- Card Erros -->
                  <div class="bg-gray-800 text-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold">Erros</h3>
                    <p class="text-4xl font-bold mt-4 text-red-500" id="error-value">{{ $Send->error }}</p>
                  </div>
              </div>

              <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">

                    <table class="min-w-full leading-normal">
                      <thead>
                        <tr>
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            Nome
                          </th>
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            User Id
                          </th>
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            Status
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach ($Accounts as $Account)
                          <tr>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <p class="text-gray-300 whitespace-no-wrap" style="margin-bottom: 0;">
                                  <strong>{{ $Account->name }}</strong>
                                </p>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <p class="text-gray-300 whitespace-no-wrap" style="margin-bottom: 0;">
                                  <strong>{{ $Account->user_id }}</strong>
                                </p>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <div class="flex">
                                <div class="ml-1" id="value_tx_{{ $Account->id }}">
                                  @if ($Account->status == "2")
                                    <span
                                      style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;"
                                      class="bg-green-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                      SUCCESSO: (#1) Envio processado e enviado para o usuário.
                                    </span>
                                  @else
                                    @if ($Account->status == 1)
                                      <span
                                        style="padding: 0em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em; background-color: #2196f3!important; display: inline-flex; justify-content: space-between; align-items: center;"
                                        class="bg-blue-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                        PROCESSANDO <i data-feather="refresh-ccw" class='mr-0 rotate-infinite' style="color: #fff; cursor: pointer; margin-left: 0.7em; margin-right: 0.2em; width: 1.7em"></i>
                                      </span>
                                    @else
                                      <span
                                        style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em; background-color: #e91e63!important;"
                                        class="bg-red-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                        ERRO: {{$Account->log}}
                                      </span>
                                    @endif
                                  @endif
                                </div>
                              </div>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>

                    <div class="pagenation" style="padding: 1em 1em;">
                      {{ $Accounts->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">
                  <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>

    
    <script>
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });
    </script>
@endsection