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

@php
$faseDescriptions = [
        'cte_emitido' => 'Em unidade de origem',
        'pendente' => 'Pendente',
        'unidade_origem' => 'Em unidade de origem',
        'transito' => 'Em trânsito',
        'unidade_destino' => 'Em unidade de destino',
        'rota_entrega' => 'Rota de entrega',
        'aguardando_retirada' => 'Aguardando Retirada',
        'entrega_realizada' => 'Mercadoria Entregue',
        'cancelado' => 'Cancelado',
        'em_separacao' => 'Em unidade de origem',
        'finalizado' => 'Entrega Finalizada',
    ];


@endphp
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6>Tracking</h6>
                    </div>

                    <div class="col-12 my-3 text-end p-2" style="background:#1a4742; 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" href="{{ route('trackings.create') }}">
                            <i class="fa fa-plus text-sm"></i>&nbsp;&nbsp;Adicionar
                        </a>
                        <p class="btn bg-gradient-warning mb-0 me-4" 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" id="btn-exportar">
                            Exportar
                        </p>
                    </div>
                    <form action="{{ route('tracking.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" 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-2 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-2 col-sm-4 text-left">
                                <div class="input-group mb-4">
                                    <select class="form-control select-custom text-sm" name="prazo" onchange="updateSelection(this)"
                                            data-idtransportadora="{{ \Request::get('prazo') }}"
                                            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="">- Prazo -</option>
                                        <option value="dentro" {{ \Request::get('prazo') == 'dentro' ? 'selected' : '' }}>DENTRO DO PRAZO</option>
                                        <option value="fora" {{ \Request::get('prazo') == 'fora' ? 'selected' : '' }}>FORA DO PRAZO</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-4 text-left">
                            <div class="input-group mb-4">
                                <select class="form-control select-custom text-sm" name="idtransportadora" onchange="updateSelection(this)"
                                        data-idtransportadora="{{ \Request::get('idtransportadora') }}"
                                        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="">- Transportadoras -</option>
                                    @foreach($servicos as $servico)
                                        <option value="{{ $servico->idtransportadora }}"
                                                {{ \Request::get('idtransportadora') == $servico->idtransportadora ? 'selected' : '' }}>
                                            {{ $servico->sigla }}
                                        </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-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-1 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="cte_emitido" {{ \Request::get('status') == 'cte_emitido' ? 'selected' : '' }}>Em unidade de origem</option>
                                    <option value="pendente" {{ \Request::get('status') == 'pendente' ? 'selected' : '' }}>Pendente</option>
                                    <option value="transito" {{ \Request::get('status') == 'transito' ? 'selected' : '' }}>Em trânsito</option>
                                    <option value="unidade_destino" {{ \Request::get('status') == 'unidade_destino' ? 'selected' : '' }}>Em unidade de destino</option>
                                    <option value="rota_entrega" {{ \Request::get('status') == 'rota_entrega' ? 'selected' : '' }}>Rota de entrega</option>
                                    <option value="aguardando_retirada" {{ \Request::get('status') == 'aguardando_retirada' ? 'selected' : '' }}>Aguardando Retirada</option>
                                    <option value="entrega_realizada" {{ \Request::get('status') == 'entrega_realizada' ? 'selected' : '' }}>Mercadoria Entregue</option>
                                    <option value="finalizado" {{ \Request::get('status') == 'finalizado' ? 'selected' : '' }}>Entrega Finalizada</option>
                                    <option value="cancelado" {{ \Request::get('status') == 'cancelado' ? 'selected' : '' }}>Cancelado</option>
                                    <option value="nao_entregue" {{ \Request::get('status') == 'nao_entregue' ? 'selected' : '' }}>Não entregue</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="/trackings" 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-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Origem<br>Destino</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">AWB/CTE</th>
                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Serviço</th>
                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Empresa</th>
                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Destinatário</th>
{{--                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Cliente</th>--}}
{{--                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Nº Nf</th>--}}
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2 ">Última<br>Atualização</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Previsão<br>Entrega</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="tracking-table-body">
                                    @foreach ($trackings as $tracking)
                                        <tr  style="cursor: pointer;">

                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}">
                                                <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" style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                                            {{ $tracking->cte_remetente_municipio ? $tracking->cte_remetente_municipio.'/'.$tracking->cte_remetente_uf : '-' }}
                                                        </p>
                                                        <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                                            {{ $tracking->cte_destinatario_municipio ? $tracking->cte_destinatario_municipio.'/'.$tracking->cte_destinatario_uf : ($tracking->destinocidade ? $tracking->destinocidade : '-') }}
                                                        </p>

                                                    </div>
                                                </div>
                                            </td>
                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}">
                                                <p class="text-xs font-weight-bold mb-0 p-2 text-center">
                                                    {{ $tracking->nro_nf }}</p>
                                            </td>

                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}">
                                                    @if($tracking->awbminuta)
                                                        <p class="text-xs font-weight-bold mb-0 p-2 text-center">
                                                            {{ $tracking->awbminuta }}
                                                        </p>
                                                    @elseif($tracking->cte_numero)
                                                        <p class="text-xs font-weight-bold mb-0 p-2 text-center">
                                                            {{ $tracking->cte_numero }}
                                                        </p>
                                                    @endif
                                            </td>


                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}">
                                                <p class="text-xs font-weight-bold mb-0 p-2">{{ $tracking->transportadora_sigla }}</p>
                                            </td>
                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}">
                                                <div class="d-flex p-0 m-0" style="width: 150px;">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <h6 class="mb-0 text-xs mb-0 pb-0" style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ (isset($tracking->sigla)) ? $tracking->sigla : $tracking->nomefantasia }}</h6>
{{--                                                        <p class="text-xs font-weight-bold mb-0 pb-0" style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ $tracking->razaosocial }}</p>--}}
                                                    </div>
                                                </div>
                                            </td>
                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}">
                                                <p class="text-xs font-weight-bold mb-0 p-2">
                                                    {{ $tracking->cte_destinatario_nome }}</p>
                                            </td>

                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}" style="width: 100px;" class="align-middle text-center text-sm">
                                                <p class="text-xs font-weight-bold mb-0 pb-0" style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ isset($tracking->dataatualizacao) ? Carbon::parse($tracking->dataatualizacao)->format('d/m/y') : ''}}</p>
                                                <p class="text-xs font-weight-bold mb-0 pb-0" style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ isset($tracking->dataatualizacao) ? Carbon::parse($tracking->dataatualizacao)->format('H:i').'h' : ''}}</p>

                                            </td>
                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}" class="align-middle text-center text-sm">
                                                @if(!$tracking->dataprevisao)
                                                    <span class="badge badge-sm bg-gradient-light text-dark p-2">{{ isset($tracking->dataprevisao) ? Carbon::parse($tracking->dataprevisao)->format('d/m/y') : ''}}</span>

                                                @elseif(
                                                    (
                                                        (is_array($tracking->fase) && !array_intersect($tracking->fase, ['entrega_realizada', 'finalizado'])) ||
                                                        (!is_array($tracking->fase) && !in_array($tracking->fase, ['entrega_realizada', 'finalizado']))
                                                    )
                                                    && $tracking->dataprevisao && Carbon::now()->toDateString() <= Carbon::parse($tracking->dataprevisao)->toDateString()
                                                )
                                                    <span class="badge badge-sm bg-gradient-light text-dark p-2">{{ Carbon::parse($tracking->dataprevisao)->format('d/m/y') }}</span>

                                                @elseif(
                                                    (
                                                        (is_array($tracking->fase) && array_intersect($tracking->fase, ['entrega_realizada', 'finalizado'])) ||
                                                        (!is_array($tracking->fase) && in_array($tracking->fase, ['entrega_realizada', 'finalizado']))
                                                    )
                                                    && (Carbon::parse($tracking->dataentrega)->isBefore(Carbon::parse($tracking->dataprevisao)) ||
                                                        Carbon::parse($tracking->dataentrega)->isSameDay(Carbon::parse($tracking->dataprevisao)))
                                                )
                                                    <span class="badge badge-sm bg-gradient-light text-dark p-2">{{ Carbon::parse($tracking->dataprevisao)->format('d/m/y') }}</span>
                                                @else
                                                    <span class="badge badge-sm bg-gradient-danger">{{ Carbon::parse($tracking->dataprevisao)->format('d/m/y') }}</span>
                                                @endif
                                            </td>



                                            <td data-url="{{ route('trackings.edit', $tracking->idtracking) }}" class="align-middle text-center text-sm">
                                                @if(isset($tracking->fase) && is_array($tracking->fase))
                                                    @switch($tracking->fase)
                                                        @case(in_array('cancelado', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-danger p-2">{{ $faseDescriptions['cancelado'] }}</span>
                                                            @break
                                                        @case(in_array('entrega_realizada', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-success p-2">{{ $faseDescriptions['entrega_realizada'] }}</span>
                                                        @break
                                                        case(in_array('finalizado', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-danger p-2">{{ $faseDescriptions['finalizado'] }}</span>
                                                        @break
                                                        @case(in_array('pendente', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-warning p-2">{{ $faseDescriptions['pendente'] }}</span>
                                                            @break
                                                        @case(in_array('rota_entrega', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['rota_entrega'] }}</span>
                                                            @break
                                                        @case(in_array('unidade_destino', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['unidade_destino'] }}</span>
                                                        @break
                                                        @case(in_array('transito', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['transito'] }}</span>
                                                        @break
                                                        @case(in_array('unidade_origem', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['unidade_origem'] }}</span>
                                                            @break
                                                        @case(in_array('aguardando_retirada', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['aguardando_retirada'] }}</span>
                                                            @break
                                                        @case(in_array('em_separacao', $tracking->fase))
                                                            <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['em_separacao'] }}</span>
                                                            @break
                                                        @default
                                                            <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['cte_emitido'] }}</span>
                                                    @endswitch
                                                @else
                                                    <span class="badge badge-sm bg-gradient-info p-2">{{ $faseDescriptions['cte_emitido'] }}</span>
                                                @endif
                                            </td>
                                            <td class="align-middle text-center text-sm">
                                                @if(isset($tracking->fase) && $tracking->fase == 'em_separacao' && Carbon::parse($tracking->updated_at)->diffInDays(Carbon::now()) > 2)
                                                    <i class="fas fa-trash cursor-pointer text-danger deleteTracking" data-value="{{ $tracking->idtracking}}"></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 tracking?
            </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('trackings.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', 'trackings.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('trackings.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 = "{{ $trackings->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')
        }
    });

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

    $(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;
    isLoading = true;
    console.log('Loading more from:', nextPageUrl);

    const faseDescriptions = {
        'cte_emitido': 'Em unidade de origem',
            'pendente': 'Pendente',
            'unidade_origem': 'Em unidade de origem',
            'transito': 'Em trânsito',
            'unidade_destino': 'Em unidade de destino',
            'rota_entrega': 'Rota de entrega',
            'aguardando_retirada': 'Aguardando Retirada',
            'entrega_realizada': 'Mercadoria Entregue',
            'cancelado': 'Cancelado',
            'em_separacao': 'Em unidade de origem'
};

        const normalizeDate = (date) => {
            const normalized = new Date(date);
            normalized.setHours(0, 0, 0, 0); // Remove a hora
            return normalized;
        };

    $.ajax({
        url: nextPageUrl,
        type: 'GET',
        beforeSend: function() {
            $('#load-more').show();
        },
        success: function(response) {
            $('#load-more').hide();
            nextPageUrl = response.nextPageUrl;
            isLoading = false; // Defina como false após o carregamento

            response.trackings.forEach(tracking => {
                const empresaNome = tracking.nomefantasia ? (tracking.sigla || tracking.nomefantasia) : '';
                const empresaRazaosocial = tracking.razaosocial ? tracking.razaosocial : '';
                const userName = tracking.name ? tracking.name : '';
                const userUsername = tracking.username ? tracking.username : '';
                const destinatario_nome = tracking.cte_destinatario_nome ? tracking.cte_destinatario_nome : '';
                const transportadoraSigla = tracking.transportadora_sigla ? tracking.transportadora_sigla : '';
                const remetente = tracking.cte_remetente_municipio ? `${tracking.cte_remetente_municipio}/${tracking.cte_remetente_uf}` : '-';
                const destinatario = tracking.cte_destinatario_municipio ? `${tracking.cte_destinatario_municipio}/${tracking.cte_destinatario_uf}` : (tracking.destinocidade ? tracking.destinocidade : '-');
                const awbminuta = tracking.awbminuta ? tracking.awbminuta : '';
                const cte_destinatario_nome = tracking.cte_destinatario_nome ? tracking.cte_destinatario_nome : '';
                const nr_nf = tracking.nro_nf ? tracking.nro_nf : '';
                const faseDescription = tracking.fase ? faseDescriptions[tracking.fase] : '-';
                const faseBadgeClass = 
                        tracking.fase === 'entrega_realizada' ? 'bg-gradient-success' :
                        tracking.fase === 'cancelado' || tracking.fase === 'finalizado' ? 'bg-gradient-danger' :
                        tracking.fase === 'pendente' ? 'bg-gradient-warning' :
                        'bg-gradient-info';


                let trackingHistDate = '';
                let trackingHistTime = '';

                if(tracking.dataatualizacao){
                    const datahist = tracking.dataatualizacao ? tracking.dataatualizacao : '-';
                    trackingHistDate = moment(datahist).format('DD/MM/YY');
                    trackingHistTime = moment(datahist).format('HH:mm') + 'h';
                }else{
                    trackingHistDate = '-';
                    trackingHistTime = '-';
                }


                let faseBadge = '-';
                if (tracking.fase) {
                    let faseDescription = null

                    if(tracking.fase.includes('cancelado')) {
                        faseDescription = faseDescriptions['cancelado'];
                    }else if(tracking.fase.includes('entrega_realizada')) {
                        faseDescription = faseDescriptions['entrega_realizada'];
                    }else if(tracking.fase.includes('finalizado')) {
                        faseDescription = faseDescriptions['finalizado'];
                    }else if(tracking.fase.includes('pendente')) {
                        faseDescription = faseDescriptions['pendente'];
                    }else if(tracking.fase.includes('rota_entrega')) {
                        faseDescription = faseDescriptions['rota_entrega'];
                    }else if(tracking.fase.includes('unidade_destino')) {
                        faseDescription = faseDescriptions['unidade_destino'];
                    }else if(tracking.fase.includes('transito')) {
                        faseDescription = faseDescriptions['transito'];
                    }else if(tracking.fase.includes('unidade_origem')) {
                        faseDescription = faseDescriptions['unidade_origem'];
                    }else if(tracking.fase.includes('aguardando_retirada')) {
                        faseDescription = faseDescriptions['aguardando_retirada'];
                    }else if(tracking.fase.includes('em_separacao')) {
                        faseDescription = faseDescriptions['em_separacao'];
                    } else {
                        faseDescription = faseDescriptions['cte_emitido'];
                    }

                    if (faseDescription) {
                        let badgeClass = 'bg-gradient-info';
                        if (faseDescription === 'Mercadoria Entregue') {
                            badgeClass = 'bg-gradient-success';
                        } else if (faseDescription === 'Cancelado') {
                            badgeClass = 'bg-gradient-danger';
                        }else {
                            badgeClass = 'bg-gradient-info';
                        }
                        faseBadge = `<span class="badge badge-sm ${badgeClass} p-2">${faseDescription}</span>`;
                    }
                }

                const dataPrevisao = normalizeDate(tracking.dataprevisao);
                dataPrevisao.setDate(dataPrevisao.getDate() + 1);
                const dataEntrega = normalizeDate(tracking.dataentrega);

                let prazo = '-';


                if (
                    (
                        (Array.isArray(tracking.fase) && !tracking.fase.some(f => ['entrega_realizada', 'finalizado'].includes(f))) ||
                        (!Array.isArray(tracking.fase) && !['entrega_realizada', 'finalizado'].includes(tracking.fase))
                    )
                    && dataPrevisao && new Date() < dataPrevisao
                ) {
                    prazo = `<span class="badge badge-sm bg-gradient-light text-dark p-2">{{ isset($tracking->dataprevisao) ? Carbon::parse($tracking->dataprevisao)->format('d/m/y') : ''}}</span>`;
                } else if (!tracking.dataprevisao) {
                    prazo = `<span class="badge badge-sm bg-gradient-light text-dark p-2">{{ isset($tracking->dataprevisao) ? Carbon::parse($tracking->dataprevisao)->format('d/m/y') : ''}}</span>`;
                } else if (
                    (
                        (Array.isArray(tracking.fase) && tracking.fase.some(f => ['entrega_realizada', 'finalizado'].includes(f))) ||
                        (!Array.isArray(tracking.fase) && ['entrega_realizada', 'finalizado'].includes(tracking.fase))
                    )
                    && dataPrevisao && dataPrevisao >= dataEntrega
                ) {
                    prazo = `<span class="badge badge-sm bg-gradient-light text-dark p-2">{{ isset($tracking->dataprevisao) ? Carbon::parse($tracking->dataprevisao)->format('d/m/y') : ''}}</span>`;
                } else {
                    prazo = `<span class="badge badge-sm bg-gradient-danger p-2">{{ isset($tracking->dataprevisao) ? Carbon::parse($tracking->dataprevisao)->format('d/m/y') : ''}}</span>`;
                }






                $('#tracking-table-body').append(`
                    <tr data-url="/trackings/${tracking.idtracking}/edit" style="cursor: pointer;">
                        <td style="">
                            <div class="d-flex p-0 m-0" style="">
                                <div class="d-flex flex-column justify-content-center">
                                    <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${remetente}</p>
                                    <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase" style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${destinatario}</p>
                                </div>
                            </div>
                        </td>
                        <td class="align-middle text-center text-sm">
                            <p class="text-xs font-weight-bold mb-0 pb-0 text-uppercase">${nr_nf}</p>
                        </td>
                        <td class="align-middle text-center text-sm">
                            <p class="text-xs font-weight-bold mb-0 p-2">${awbminuta}</p>
                        </td>
                        <td>
                            <p class="text-xs font-weight-bold mb-0 p-2">${transportadoraSigla}</p>
                        </td>

                        <td>
                            <div class="d-flex p-0 m-0">
                                <div class="d-flex flex-column justify-content-center">
                                    <h6 class="mb-0 text-xs mb-0 pb-0" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${empresaNome}</h6>
<!--                                    <p class="text-xs font-weight-bold mb-0 pb-0" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${empresaRazaosocial}</p>-->
                                </div>
                            </div>
                        </td>
                        <td>
                            <p class="text-xs font-weight-bold mb-0 p-2"    >
                                ${cte_destinatario_nome}
                            </p>
                        </td>

                        <td class="align-middle text-center text-sm">
                            <p class="text-xs font-weight-bold mb-0 pb-0" style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${trackingHistDate}</p>
                            <p class="text-xs font-weight-bold mb-0 pb-0" style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${trackingHistTime}</p>
                        </td>
                        <td class="align-middle text-center text-sm">
                            ${prazo}
                        </td>
                        <td class="align-middle text-center text-sm">
                           ${faseBadge}
                        </td>
                        <td>
                        </td>
                    </tr>
                `);
            });

            $('tr[data-url]').on('click', function() {
                window.location.href = $(this).data('url');
            });
        },
        error: function(e) {
            isLoading = false; // Defina como false se ocorrer um erro
        }
    });


}

    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 trackingIdToDelete;

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

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

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

        $.ajax({
            url: `/deleteTracking/${trackingIdToDelete}`, // 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 tracking. Tente novamente.');
            }
        });
    })

});
</script>