@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@php
    use Carbon\Carbon;
@endphp
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Notas Fiscais'])

<style>
/* torna evidente que o badge é um botão/link */
.badge-clickable {
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.badge-clickable:hover {
  background-color: rgba(0,0,0,0.1);
  color: #000;
  text-decoration: none; /* remove sublinhado se houver */
}


/* 2) Permitir quebra de texto dentro da célula */
.table-responsive .table td {
  white-space: normal;       /* libera quebras de linha */
  overflow-wrap: break-word; /* quebra palavras muito longas */
}

</style>
    <div class="container-fluid py-4">
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show text-white position-relative" role="alert" style="background-color: #dc3545; padding-right: 3rem;">
            <span style="font-weight: normal;">{{ session('error') }}</span>
            <button type="button"
                class="btn position-absolute top-0 end-0 mt-2 me-2"
                style="background: transparent; border: none;"
                data-bs-dismiss="alert"
                aria-label="Fechar">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16">
                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                </svg>
            </button>
        </div>
    @endif
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Notas Fiscais</h6>
                    </div>

                    <div class="col-12 my-3 text-end p-2" style="background:#f5f5f5; margin: 0px !important">
                        <button class="btn btn-info btn-delicate me-2 mb-0" type="button" data-bs-toggle="collapse" data-bs-target="#busca" aria-expanded="false" aria-controls="busca">
                            <i class="fa fa-filter" aria-hidden="true"></i>
                        </button>
                        <a class="btn bg-gradient-dark mb-0 me-4 d-none" href="{{ route('empresanfes.create') }}">
                            <i class="fa fa-plus text-sm"></i>&nbsp;&nbsp;Adicionar
                        </a>
                        <p class="btn bg-gradient-warning mb-0 me-4  d-none" id="btn-importar">
                            <i class="fa fa-plus text-sm"></i>&nbsp;&nbsp;Importar XML
                        </p>
                        <p class="btn bg-gradient-info mb-0 me-4  d-none" id="btn-exportar">
                            Exportar
                        </p>
                    </div>
                    <form action="{{ route('empresanfes.search') }}" class="navbar-form mt-3" method="get">
                    <div class="row m-0 collapse {{ count(request()->except(['page'])) > 0 ? 'show' : '' }}" id="busca">
                            <div class="col-md-2 col-sm-4 text-left">
                                <div class="input-group mb-4" wire:ignore>
                                    <input type="text" id="datePicker" name="datePicker" class="form-control select-custom text-sm"  value="{{ request('datePicker') }}" placeholder="Selecione a data..." style="font-size: 0.7rem !important;">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                            <div class="col-md-5 col-sm-12 text-left">
                                <div class="input-group mb-4 input-group-outline d-flex align-items-center">
                                    <input type="text" name="search" class="form-control input-custom text-sm" 
                                           placeholder="Digite os termos..."
                                           value="{{ \Request::get('search') }}" style="font-size: 0.7rem !important; color: #777;line-height:1.2rem">
                                </div>
                            </div>
                           

                            <div class="col-md-1 col-sm-4 text-left">
                                <div class="input-group mb-4">
                                    <select class="form-control select-custom text-sm" name="destinouf" onchange="updateSelection(this)" data-destinouf="{{ $destinouf ?? ''}}" style="border: 1px solid #d2d6da;border-radius: 0.5rem;font-size: 0.7rem !important; color: #777;appearance: menulist; -webkit-appearance: menulist;line-height:1.4rem">
                                        <option value="">- Destino UF -</option>
                                        @foreach(['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO'] as $uf)
                                            <option value="{{ $uf }}" {{ (isset($destinouf) && $destinouf == $uf) ? 'selected' : '' }}>{{ $uf }}</option>
                                        @endforeach
                                    </select>
                                    <div class="selected-value" style="display: none;" onclick="clearSelection(this)">
                                        <span class="text"></span>
                                        <button type="button"><i class="fa fa-window-close" aria-hidden="true"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-4 text-left">
                                <div class="input-group mb-4">
                                <select class="form-control select-custom text-sm" name="status" onchange="updateSelection(this)"
                                        data-status="{{ \Request::get('status') }}"
                                        style="border: 1px solid #d2d6da; border-radius: 0.5rem; font-size: 0.7rem !important; color: #777; appearance: menulist; -webkit-appearance: menulist; line-height:1.4rem">
                                    <option value="">- Status -</option>
                                    <option value="aguardando" {{ \Request::get('status') == 'aguardando' ? 'selected' : '' }}>Aguardando</option>
                                    <option value="concluido" {{ \Request::get('status') == 'concluido' ? 'selected' : '' }}>Concluído</option>
                                    <option value="pendente" {{ \Request::get('status') == 'pendente' ? 'selected' : '' }}>Pendente</option>
                                    <option value="cancelado" {{ \Request::get('status') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                                  
                                </select>

                                    <div class="selected-value" style="display: none;" onclick="clearSelection(this)">
                                        <span class="text"></span>
                                        <button type="button"><i class="fa fa-window-close" aria-hidden="true"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-6 col-xs-6 text-left">
                                <button type="submit" class="btn btn-primary btn-round btn-just-icon m-0 btn-xs">
                                    <i class="fa fa-search"></i> Buscar
                                    <div class="ripple-container"></div>
                                </button>
                                <a href="/empresanfes" type="button" class="btn btn-secondary btn-round btn-just-icon m-0 btn-xs">
                                    <i class="fa fa-close"></i> Limpar
                                    <div class="ripple-container"></div>
                                </a>
                            </div>
                        </div>
                    </form>

                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">id</th>
                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2" style="width:18%">Emitente<br>CNPJ</th>
                                    
                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2" style="width:18%">Destinatário<br>CNPJ</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Nº Nfe</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Emissão</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Total</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">AWB/CTE</th>
                                         <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2" style="width:18%">Transportadora</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Tracking</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Status</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2"><i class="fa fa-trash" aria-hidden="true"></i></th>
                                    </tr>
                                </thead>
                                <tbody id="empresanfe-table-body">
                                    @foreach ($empresaNfes as $empresanfe)
                                        <tr  >
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0 p-2">{{ $empresanfe->idempresanfe }}</p>
                                            </td>
                                            <td >
                                                <div class="d-flex p-0 m-0"  >
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" >
                                                            {{ $empresanfe->emit_xNome }}
                                                        </p>
                                                        <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" >
                                                            {{ $empresanfe->emit_xFant }}
                                                        </p>
                                                         <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" >
                                                            {{ $empresanfe->emit_cnpj }}
                                                        </p>

                                                    </div>
                                                </div>
                                            </td>
                                             <td >
                                                <div class="d-flex p-0 m-0" >
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" >
                                                            {{ $empresanfe->dest_xNome }}
                                                        </p>
                                                        <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" >
                                                            {{ $empresanfe->dest_cnpj }}
                                                        </p>
                                                    
                                                    </div>
                                                </div>
                                            </td>
                                            <td >
                                                <p class="text-xs font-weight-bold mb-0 p-2 text-center">
                                                    {{ $empresanfe->nNF }}</p>
                                            </td>

                                           
                                            <td  style="width: 100px;" class="align-middle text-center text-sm">
                                                <p class="text-xs font-weight-bold mb-0 pb-0" >{{ isset($empresanfe->dhEmi) ? Carbon::parse($empresanfe->dhEmi)->format('d/m/y') : ''}}</p>
                                            </td>
                                             <td >
                                                <p class="text-xs font-weight-bold mb-0 p-2 text-center">
                                                    R$ {{ number_format($empresanfe->tot_vNF ?? 0, 2, ',', '.') }} </p>
                                            </td>
                                             <td  >
                                                @if($empresanfe->trackingCteNfes->isNotEmpty())
                                                    @foreach($empresanfe->trackingCteNfes as $tcn)
                                                    @php
                                                        $tracking = optional($tcn->trackingCte)->tracking;
                                                    @endphp

                                                    @if($tracking)
                                                    <div class="d-flex p-0 m-0" >
                                                        <div class="d-flex flex-column justify-content-center">
                                                            <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" >
                                                                {{ $tracking->awbminuta ?? $tracking->cte_numero ?? '-' }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                    @else
                                                        -
                                                    @endif
                                                    @endforeach
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td >
                                                <div class="d-flex p-0 m-0" >
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" >
                                                            {{ $empresanfe->transp_transporta_xNome }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </td>
                                          
                                            <td class="align-middle text-center text-sm">
                                            @if($empresanfe->trackingCteNfes->isNotEmpty())
                                                @foreach($empresanfe->trackingCteNfes as $tcn)
                                                @php
                                                    $tracking = optional($tcn->trackingCte)->tracking;
                                                @endphp

                                                @if($tracking)
                                                    <a target="_blank" href="{{ route('trackings.edit', $tracking->idtracking) }}"
                                                    class="badge badge-sm bg-gradient-dark me-1 badge-clickable  p-2 mb-1"
                                                    title="Clique para ver o tracking #{{ $tracking->idtracking }}">
                                                    <i class="fa fa-eye fa-xs"></i> visualizar</a><br>
                                                @else
                                                    -
                                                @endif
                                                @endforeach
                                            @else
                                                -
                                            @endif
                                            </td>

                                            <td 
                                                class="align-middle text-center text-sm">

                                               @switch($empresanfe->status)
                                                    @case('concluido')
                                                        <span class="badge badge-sm bg-gradient-success p-2">Concluído</span>
                                                        @break
                                                    @case('aguardando')
                                                        <span class="badge badge-sm bg-gradient-info p-2">Aguardando</span>
                                                        @break
                                                    @case('pendente')
                                                        <span class="badge badge-sm bg-gradient-warning p-2">Pendente</span>
                                                        @break
                                                    @case('cancelado') @case('recusado')
                                                        <span class="badge badge-sm bg-gradient-danger p-2">{{ ucfirst($empresanfe->status) }}</span>
                                                        @break
                                                    @default
                                                        <span class="badge badge-sm bg-gradient-secondary p-2">Aguardando</span>
                                                @endswitch

                                            </td>

                                            <td class="align-middle text-center text-sm">
                                                @if(isset($empresanfe->fase) && $empresanfe->fase == 'em_separacao' && Carbon::parse($empresanfe->updated_at)->diffInDays(Carbon::now()) > 2)
                                                    <i class="fas fa-trash cursor-pointer text-danger deleteTracking" data-value="{{ $empresanfe->idempresanfe}}"></i>
                                                @endif
                                            </td>



                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div id="load-more" class="text-center my-3" style="display: none;">
                            <button class="btn btn-primary">Carregar mais</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">Importar XML</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="uploadForm">
                    <div class="modal-body">
                            <div class="form-group">
                                <label for="xmlFiles">Selecione os arquivos XML</label>
                                <input type="file" class="form-control" id="xmlFiles" name="xmlFiles[]" accept=".xml" multiple>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary" id="importButton" form="uploadForm">Importar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importErros" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">Erros ao importar XML</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="errorsImport">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de confirmação -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmação de Exclusão</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Tem certeza de que deseja excluir este empresanfe?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">Excluir</button>
            </div>
        </div>
    </div>
</div>


@endsection



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#btn-importar').click(function() {
        $('#importModal').modal('show');
    });

    const urlParams = new URLSearchParams(window.location.search);
    const dataParams = {};

    // Converte os parâmetros da URL em um objeto
    urlParams.forEach((value, key) => {
        dataParams[key] = value;
    });

    $('#btn-exportar').click(function() {
        $.ajax({
            url: "{{ route('empresanfes.exportarTracking') }}",
            type: 'POST',
            data: dataParams,
            xhrFields: {
                responseType: 'blob' // Indica que a resposta será um arquivo
            },
            success: function (response) {
                const url = window.URL.createObjectURL(new Blob([response]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'empresanfes.xlsx'); // Nome do arquivo
                document.body.appendChild(link);
                link.click();
            },
            error: function (xhr, status, error) {
                alert('Erro ao exportar o arquivo.');
            }
        });
    });

    // Intercepta o envio do formulário
    $('#uploadForm').submit(function(event) {
        event.preventDefault(); // Impede o comportamento padrão do formulário

        var formData = new FormData(this);
        var $importButton = $('#importButton');

        $importButton.prop('disabled', true);
        $importButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Carregando...');

        $.ajax({
            url: "{{ route('empresanfes.importXml') }}", // Rota Laravel
            type: 'POST',
            data: formData,
            processData: false, // Necessário para enviar arquivos
            contentType: false, // Necessário para enviar arquivos
            success: function(response) {
                if(response.erros && response.erros.length > 0) {
                    let errorsHtml = ''; // Variável para armazenar os erros

                    // Iterar sobre cada erro e adicionar à variável
                    response.erros.forEach(function(error) {
                            errorsHtml += `
                        <div class="alert alert-warning" role="alert">
                            NF ${error.nf}: ${error.errors}
                        </div>
                    `;
                    });

                    // Inserir os erros na div #errorsImport
                    $('#errorsImport').html(errorsHtml);

                    // Mostrar o modal de erros
                    $('#importErros').modal('show');
                    return
                }
                alert(response.message);
                $('#importModal').modal('hide');

                setTimeout(() =>  window.location.reload(), 1500)

            },
            error: function(xhr, status, error) {
                alert('Erro ao importar os arquivos XML.');
            },
            complete: function() {
                // Restaura o botão ao estado original
                $importButton.prop('disabled', false);
                $importButton.html('Importar');
            }
        });
    });

    let nextPageUrl = @json($empresaNfes->nextPageUrl());
    let nextUrl = new URL(nextPageUrl, window.location.origin);
    let currentUrl = new URL(window.location.href);

    // Percorre todos os parâmetros da URL atual e adiciona à próxima URL
    currentUrl.searchParams.forEach((value, key) => {
        if (value) { // Adiciona apenas se o valor não for vazio
            nextUrl.searchParams.set(key, value);
        }
    });

    console.log(nextPageUrl, 'nextPageUrl', nextUrl.toString())
    nextPageUrl = nextUrl.toString();
    let isLoading = false; // Adicione esta variável para controlar o estado de carregamento

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

    $(window).scroll(debounce(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 100 && !isLoading) {
            console.log('Scrolled to bottom');
            loadMore();
        }
    }, 250)); // 250ms debounce

    function debounce(func, wait) {
        let timeout;
        return function() {
            const context = this, args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), wait);
        };
    }

    function loadMore() {
        if (!nextPageUrl) return;

        // 1) reinsere TODOS os filtros atuais (window.location.search)
        const urlObj = new URL(nextPageUrl, window.location.origin);
        new URLSearchParams(window.location.search)
            .forEach((v,k) => urlObj.searchParams.set(k,v));
        nextPageUrl = urlObj.toString();

        // 2) agora sim faz o AJAX usando nextPageUrl já “filtrado”
        isLoading = true;
        const $btn = $('#load-more button');
        $('#load-more').show();
        setTimeout(() => {
            $btn.removeClass('btn-primary').addClass('btn-info').text('Carregando…');
        }, 200);

    $.ajax({
        url: nextPageUrl,
        type: 'GET',
        beforeSend: function() {
            $('#load-more').show();
             setTimeout(() => {
                $btn
                  .removeClass('btn-primary')
                  .addClass('btn-info')
                  .text('Carregando...');
            }, 200);
        },
        success: function(response) {
    $('#load-more').hide();
    nextPageUrl = response.nextPageUrl;
    isLoading = false;

    response.empresanfe.forEach(empresanfe => {
        const id = empresanfe.idempresanfe;
        const trackingEditUrl = empresanfe.tracking?.idtracking
            ? `/tracking/${empresanfe.tracking.idtracking}/edit`
            : '';

        const emitenteHtml = `
            <div class="d-flex flex-column justify-content-center">
                <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${empresanfe.emit_xNome || ''}</p>
                <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${empresanfe.emit_xFant || ''}</p>
                <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${empresanfe.emit_cnpj || ''}</p>
            </div>`;

        const destinatarioHtml = `
            <div class="d-flex flex-column justify-content-center">
                <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${empresanfe.dest_xNome || ''}</p>
                <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${empresanfe.dest_cnpj || ''}</p>
            </div>`;

        const awbCteHtml = empresanfe.tracking_cte_nfes?.length
        ? empresanfe.tracking_cte_nfes.map(tcn => `
            <div class="d-flex flex-column justify-content-center">
                <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">
                ${tcn.tracking_cte?.tracking?.awbminuta 
                    ?? tcn.cte_numero 
                    ?? '-'}
                </p>
            </div>
            `).join('')
        : '-';

        const transpHtml = ` <div class="d-flex flex-column justify-content-center">
                <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${empresanfe.transp_transporta_xNome || ''}</p>
            </div>`;

        const servicoHtml = empresanfe.tracking_cte_nfes?.length
            ? empresanfe.tracking_cte_nfes.map(tcn => `
                <div class="d-flex flex-column justify-content-center">
                    <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${(tcn.tracking_cte?.tracking?.transportadora?.servicename || '').replace('Service','-')}</p>
                    <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${tcn.tracking_cte?.tracking?.empresa?.sigla || '-'}</p>
                </div>`).join('')
            : '-';

        const visualizeHtml = empresanfe.tracking_cte_nfes?.length
            ? empresanfe.tracking_cte_nfes.map(tcn => {
                const trk = tcn.tracking_cte?.tracking;
                return trk ? `<a href="/trackings/${trk.idtracking}/edit" class="badge badge-sm bg-gradient-dark me-1 badge-clickable p-2 mb-1">
                                <i class="fa fa-eye fa-xs"></i> visualizar
                              </a><br>` : '-';
            }).join('')
            : '-';

        const statusBadgeClass = {
            concluido: 'bg-gradient-success',
            aguardando: 'bg-gradient-info',
            pendente: 'bg-gradient-warning',
            cancelado: 'bg-gradient-danger',
            recusado: 'bg-gradient-danger',
        }[empresanfe.status] || 'bg-gradient-secondary';

        const statusLabel = {
            concluido: 'Concluído',
            aguardando: 'Aguardando',
            pendente: 'Pendente',
            cancelado: 'Cancelado',
            recusado: 'Recusado',
        }[empresanfe.status] || 'Aguardando';

        $('#empresanfe-table-body').append(`
            <tr>
                <td><p class="text-xs font-weight-bold mb-0 p-2">${id}</p></td>
                <td ${trackingEditUrl ? `data-url="${trackingEditUrl}"` : ''}>${emitenteHtml}</td>
                <td ${trackingEditUrl ? `data-url="${trackingEditUrl}"` : ''}>${destinatarioHtml}</td>
                <td class="text-center text-xs font-weight-bold mb-0 p-2">${empresanfe.nNF || '-'}</td>
                <td class="text-center text-xs font-weight-bold mb-0 p-2">${empresanfe.dhEmi ? moment(empresanfe.dhEmi).format('DD/MM/YY') : '-'}</td>
                <td class="text-center text-xs font-weight-bold mb-0 p-2">R$ ${Number(empresanfe.tot_vNF || 0).toLocaleString('pt-BR',{minimumFractionDigits:2})}</td>
                <td>${awbCteHtml}</td>
                <td>${transpHtml}</td>
                <td class="align-middle text-center text-sm">${visualizeHtml}</td>
                <td class="align-middle text-center text-sm">
                    <span class="badge badge-sm ${statusBadgeClass} p-2">${statusLabel}</span>
                </td>
                <td class="align-middle text-center text-sm">
                    ${empresanfe.fase === 'em_separacao' && moment().diff(empresanfe.updated_at, 'days') > 2 ? `<i class="fas fa-trash cursor-pointer text-danger deleteTracking" data-value="${id}"></i>` : ''}
                </td>
            </tr>
        `);
    });
},

        error: function(e) {
            isLoading = false; // Defina como false se ocorrer um erro

            $btn
              .removeClass('btn-info')
              .addClass('btn-primary')
              .text('Carregar mais');

            setTimeout(() => {
              $('#load-more').hide();
            }, 200);
        }
    });

    $('#empresanfe-table-body').on('click', 'td[data-url]', function() {
    window.location.href = $(this).data('url');
    });
}

    var dateRange = null

    @if(isset($datePicker))
    // Se estiver definida, passa o valor para o JavaScript
    dateRange = @json($datePicker);
    @endif

    let defaultDate = [];
    if (dateRange?.includes('até')) {
        const [startDate, endDate] = dateRange.split(' até ');

        // Função para converter a data no formato D-M-YYYY para Date
        function convertToDate(dateString) {
            const [day, month, year] = dateString.split('-');
            return new Date(`${year}-${month}-${day}`); // Converte para o formato YYYY-MM-DD que o JavaScript entende
        }

        // Converte as datas
        let startDateObj = convertToDate(startDate);
        let endDateObj = convertToDate(endDate);

        // Adiciona 1 dia nas duas datas
        startDateObj.setDate(startDateObj.getDate() + 1);
        endDateObj.setDate(endDateObj.getDate() + 1);

        // Agora você pode usar essas datas para o que precisar
        console.log("Start Date:", startDateObj);
        console.log("End Date:", endDateObj);

        // Se você precisar das datas no formato brasileiro D-M-YYYY
        const formattedStartDate = `${startDateObj.getDate()}-${startDateObj.getMonth() + 1}-${startDateObj.getFullYear()}`;
        const formattedEndDate = `${endDateObj.getDate()}-${endDateObj.getMonth() + 1}-${endDateObj.getFullYear()}`;

        // Exemplo de uso em uma requisição
        console.log("Formatted Start Date:", formattedStartDate);
        console.log("Formatted End Date:", formattedEndDate);


        defaultDate = [formattedStartDate, formattedEndDate]
    }


    console.log(defaultDate, 'defaultDate')

    flatpickr("#datePicker", {
        mode: "range",
        dateFormat: "d-m-Y",
        defaultDate,
        minDate: "01-01-1900", // Por exemplo, mínimo em 1 de janeiro de 1900
        maxDate: "31-12-2099", // Por exemplo, máximo em 31 de dezembro de 2099
        "locale": {
            "firstDayOfWeek": 0, // Define segunda-feira como primeiro dia da semana
            "weekdays": {
                "shorthand": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
                "longhand": ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
            },
            "months": {
                "shorthand": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                "longhand": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]
            },
            "rangeSeparator": " até ",
            "daysInMonth": [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
            "ordinal": function () {
                return "º";
            }
        },
        onChange: function(selectedDates, dateStr) {
            // Atualiza a propriedade do Livewire
            console.log(dateStr);
        }
    });

    let empresanfeIdToDelete;

    $(document).on('click', '.deleteTracking', function(event) {
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        const empresanfeId = $(this).data('value');

        empresanfeIdToDelete = empresanfeId;
        // Exibe o modal de confirmação
        $('#confirmDeleteModal').modal('show');
    });

    $('#confirmDeleteButton').click(function() {
        console.log(empresanfeIdToDelete)
        if (!empresanfeIdToDelete) return;

        $.ajax({
            url: `/deleteTracking/${empresanfeIdToDelete}`, // URL da rota definida
            type: 'DELETE',
            success: function (response) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal'));
                modal.hide();

                // Atualiza a página ou remove a linha da tabela
                location.reload();
            },
            error: function (status, error) {
                console.log(error)
                alert('Erro ao excluir o empresanfe. Tente novamente.');
            }
        });
    })

});
</script>