@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@php
    use Carbon\Carbon;
@endphp
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Cotações'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 d-flex align-items-center justify-content-between">
                        <h6>Cotações</h6>
                        <div>
                            <button class="btn btn-info btn-delicate me-2" 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 btn-delicate btn-sm" href="{{ route('cotacoes.create') }}">
                                <i class="fa fa-plus text-sm"></i>&nbsp;&nbsp;NOVA
                            </a>
                        </div>
                    </div>
                    <form action="{{ route('cotacoes.search') }}" class="navbar-form mt-3" method="get">
                        <div class="row m-0 collapse" id="busca">
                            <div class="col-md-3 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"
                                        placeholder="Digite os termos..."
                                        value="{{ \Request::get('search') }}" style="font-size: 0.777rem; color: #777;line-height:1.2rem">
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-4 text-left">
                                <div class="input-group mb-4">
                                    <input class="form-control input-custom" name="date_range" id="date_range" value="{{ $dateRange ?? '' }}" placeholder="Selecione o período" autocomplete="off" type="text" style="font-size: 0.777rem; color: #777;line-height:1.2rem">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                            <div class="col-md-1 col-sm-4 text-left">
                                <div class="input-group mb-4">
                                    <select class="form-control select-custom" name="idempresa" onchange="updateSelection(this)" data-idempresa="{{$idempresa ?? ''}}" style="border: 1px solid #d2d6da;border-radius: 0.5rem;font-size: 0.777rem; color: #777;appearance: menulist; -webkit-appearance: menulist;line-height:1.4rem">
                                        <option value="">Empresa</option>
                                        @foreach($empresas as $empresa)
                                            <option value="{{ $empresa->idempresa }}" {{ (isset($idempresa) && $idempresa == $empresa->idempresa) ? 'selected' : '' }}>{{$empresa->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" name="id" onchange="updateSelection(this)" data-id="{{ $id ?? ''}}" style="border: 1px solid #d2d6da;border-radius: 0.5rem;font-size: 0.777rem; color: #777;appearance: menulist; -webkit-appearance: menulist;line-height:1.4rem">
                                        <option value="">Usuário</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" {{ (isset($id) && $id == $user->id) ? 'selected' : '' }}>{{$user->name}}</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" name="origemuf" onchange="updateSelection(this)" data-origemuf="{{ $origemuf ?? ''}}" style="border: 1px solid #d2d6da;border-radius: 0.5rem;font-size: 0.777rem; color: #777;appearance: menulist; -webkit-appearance: menulist;line-height:1.4rem">
                                        <option value="">Origem 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($origemuf) && $origemuf == $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" name="destinouf" onchange="updateSelection(this)" data-destinouf="{{ $destinouf ?? ''}}" style="border: 1px solid #d2d6da;border-radius: 0.5rem;font-size: 0.777rem; 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" name="status" onchange="updateSelection(this)" data-status="{{ $status ?? ''}}" style="border: 1px solid #d2d6da;border-radius: 0.5rem;font-size: 0.777rem; color: #777;appearance: menulist; -webkit-appearance: menulist;line-height:1.4rem">
                                        <option value="">Status</option>
                                        @foreach(['aberto', 'concluido', 'cancelado', 'recusado'] as $status)
                                            <option value="{{ $status }}">{{ ucfirst($status) }}</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-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="/cotacoes" 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">id</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">Usuário</th>
                                        <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">Data<br>Hora</th>
                                        <th class="text-left text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Transportadora<br>Serviço</th>
                                        <th class="text-end text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Valor</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 p-2">Status</th>
                                    </tr>
                                </thead>
                                <tbody id="cotacao-table-body">
                                    @foreach ($cotacoes as $cotacao)
                                        <tr data-url="{{ route('cotacoes.edit', $cotacao->idcotacao) }}" style="cursor: pointer;">
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0 p-2">{{ $cotacao->idcotacao }}</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">{{ (isset($cotacao->empresa->sigla)) ? $cotacao->empresa->sigla : $cotacao->empresa->nomefantasia }}</h6>
                                                        <p class="text-xs font-weight-bold mb-0 pb-0">{{ $cotacao->empresa->razaosocial }}</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">{{ $cotacao->user ? $cotacao->user->name : '' }}</p>
                                                        <p class="text-xs font-weight-bold mb-0 pb-0">{{ $cotacao->user ? $cotacao->user->username : '' }}</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">{{ $cotacao->origemcidade }}/{{ $cotacao->origemuf }}</p>
                                                        <h6 class="mb-0 text-xs mb-0 pb-0">{{ $cotacao->destinocidade }}/{{ $cotacao->destinouf }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex p-0 m-0">
                                                    <div class="d-flex flex-column text-center" style="width:100%">
                                                        <p class="text-xs font-weight-bold mb-0 pb-0">{{ Carbon::parse($cotacao->created_at)->format('d/m/y') }}</p>
                                                        <p class="text-xs font-weight-bold mb-0 pb-0">{{ Carbon::parse($cotacao->created_at)->format('H:i') }}h</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex p-0 m-0">
                                                    <div class="d-flex flex-column align-items-start">
                                                        <p class="text-xs font-weight-bold mb-0 pb-0">{{ $cotacao->retorno_idtransportadora }}/{{ $cotacao->retorno_transportadora }}</p>
                                                        <h6 class="mb-0 text-xs mb-0 pb-0">{{ $cotacao->retorno_tipo }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <p class="text-xs font-weight-bold mb-0 p-2 text-end">R$ {{ number_format($cotacao->somatotal, 2, ',', '.') }}</p>
                                            </td>
                                            <td class="align-middle text-center text-sm">
                                                @switch($cotacao->status)
                                                    @case('concluido')
                                                        <span class="badge badge-sm bg-gradient-success p-2">{{ $cotacao->status }}</span>
                                                        @break
                                                    @case('aberto')
                                                        <span class="badge badge-sm bg-gradient-info p-2">{{ $cotacao->status }}</span>
                                                        @break
                                                    @case('cancelado')
                                                    @case('recusado')
                                                        <span class="badge badge-sm bg-gradient-danger p-2">{{ $cotacao->status }}</span>
                                                        @break
                                                    @default
                                                        <span class="badge badge-sm bg-gradient-info p-2">{{ $cotacao->status }}</span>
                                                @endswitch
                                            </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 id="scroll-anchor"></div>
@endsection
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
$(document).ready(function() {
    let nextPageUrl = "{{ $nextPageUrl }}";
    console.log('Initial nextPageUrl:', nextPageUrl);
    let isLoading = false;

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

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

    const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting && !isLoading) {
            console.log('Scrolled to bottom');
            loadMore();
        }
    }, {
        rootMargin: '100px',
    });

    observer.observe(document.getElementById('scroll-anchor'));

    function loadMore() {
        if (!nextPageUrl) {
            console.log('nextPageUrl is empty, exiting loadMore');
            return;
        }

         // Incluindo parâmetros de consulta da URL atual na requisição AJAX
         let currentUrl = new URL(nextPageUrl, window.location.origin);
        let params = new URLSearchParams(window.location.search);
        params.forEach((value, key) => {
            currentUrl.searchParams.set(key, value);
        });
        nextPageUrl = currentUrl.toString();

        console.log('Loading more from:', nextPageUrl);
        isLoading = true;


        $.ajax({
            url: nextPageUrl,
            type: 'GET',
            dataType: 'json',
            beforeSend: function() {
                $('#load-more').show();
            },
            success: function(response) {
                $('#load-more').hide();
                isLoading = false;

                nextPageUrl = response.nextPageUrl;
                console.log('Next Page URL Updated:', nextPageUrl);

                if (!nextPageUrl) {
                    console.log('No more pages to load');
                    observer.unobserve(document.getElementById('scroll-anchor'));
                    return;
                }

                response.cotacoes.forEach(cotacao => {
                    $('#cotacao-table-body').append(`
                        <tr data-url="/cotacoes/${cotacao.idcotacao}/edit" style="cursor: pointer;">
                            <td>
                                <p class="text-xs font-weight-bold mb-0 p-2">${cotacao.idcotacao}</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">${cotacao.idempresa ? cotacao.sigla || cotacao.nomefantasia : ''}</h6>
                                        <p class="text-xs font-weight-bold mb-0 pb-0">${cotacao.idempresa ? cotacao.razaosocial : ''}</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">${cotacao.user_name ? cotacao.user_name : ''}</p>
                                        <p class="text-xs font-weight-bold mb-0 pb-0">${cotacao.user_username ? cotacao.user_username : ''}</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">${cotacao.origemcidade ? cotacao.origemcidade : ''}/${cotacao.origemuf ? cotacao.origemuf : ''}</p>
                                        <h6 class="mb-0 text-xs mb-0 pb-0">${cotacao.destinocidade ? cotacao.destinocidade : ''}/${cotacao.destinouf ? cotacao.destinouf : ''}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex p-0 m-0">
                                    <div class="d-flex flex-column text-center" style="width:100%">
                                        <p class="text-xs font-weight-bold mb-0 pb-0">${new Date(cotacao.created_at).toLocaleDateString()}</p>
                                        <p class="text-xs font-weight-bold mb-0 pb-0">${new Date(cotacao.created_at).toLocaleTimeString()}</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex p-0 m-0">
                                    <div class="d-flex flex-column align-items-start">
                                        <p class="text-xs font-weight-bold mb-0 pb-0">${cotacao.retorno_idtransportadora ? cotacao.retorno_idtransportadora : ''}/${cotacao.retorno_transportadora ? cotacao.retorno_transportadora : ''}</p>
                                        <h6 class="mb-0 text-xs mb-0 pb-0">${cotacao.retorno_tipo ? cotacao.retorno_tipo : ''}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p class="text-xs font-weight-bold mb-0 p-2 text-end">R$ ${parseFloat(cotacao.somatotal ? cotacao.somatotal : 0).toFixed(2).replace('.', ',')}</p>
                            </td>
                            <td class="align-middle text-center text-sm">
                                ${getStatusBadge(cotacao.status)}
                            </td>
                        </tr>
                    `);
                });

                $('tr[data-url]').off('click').on('click', function() {
                    window.location.href = $(this).data('url');
                });
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error: ', status, error);
                isLoading = false;
                $('#load-more').hide();
            }
        });
    }

    function getStatusBadge(status) {
        switch(status) {
            case 'concluido':
                return '<span class="badge badge-sm bg-gradient-success p-2">Concluído</span>';
            case 'aberto':
                return '<span class="badge badge-sm bg-gradient-info p-2">Aberto</span>';
            case 'cancelado':
            case 'recusado':
                return '<span class="badge badge-sm bg-gradient-danger p-2">' + status.charAt(0).toUpperCase() + status.slice(1) + '</span>';
            default:
                return '<span class="badge badge-sm bg-gradient-info p-2">' + status.charAt(0).toUpperCase() + status.slice(1) + '</span>';
        }
    }
});
</script>