@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">
    @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 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)
                                        @php
                                        // Pega o primeiro retorno ativo (ou null)
                                        $ret = $cotacao->retornoAtivo;
                                        @endphp
                                        <tr data-url="{{ route('cotacoes.edit', $cotacao->idcotacao) }}" style="cursor: pointer;">
                                        <!-- ID -->
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0 p-2">{{ $cotacao->idcotacao }}</p>
                                        </td>

                                        <!-- Empresa -->
                                        <td>
                                            <div class="d-flex p-0 m-0">
                                            <div class="d-flex flex-column justify-content-center">
                                                {{-- Se tiver sigla, mostra; senão nomefantasia --}}
                                                <h6 class="mb-0 text-xs">{{ $cotacao->empresa->sigla
                                                    ?? $cotacao->empresa->nomefantasia }}</h6>
                                                <p class="text-xs font-weight-bold mb-0">{{ $cotacao->empresa->razaosocial }}</p>
                                            </div>
                                            </div>
                                        </td>

                                        <!-- Usuário -->
                                        <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">{{ optional($cotacao->user)->name }}</p>
                                                <p class="text-xs font-weight-bold mb-0">{{ optional($cotacao->user)->username }}</p>

                                            </div>
                                            </div>
                                        </td>

                                        <!-- Origem / Destino -->
                                        <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">{{ $cotacao->origemcidade }}/{{ $cotacao->origemuf }}</p>
                                                <h6 class="mb-0 text-xs">{{ $cotacao->destinocidade }}/{{ $cotacao->destinouf }}</h6>
                                            </div>
                                            </div>
                                        </td>

                                        <!-- Data / Hora -->
                                        <td>
                                            <div class="d-flex p-0 m-0">
                                            <div class="d-flex flex-column text-center w-100">
                                                <p class="text-xs font-weight-bold mb-0">{{ $cotacao->created_at->format('d/m/y') }}</p>
                                                <p class="text-xs font-weight-bold mb-0">{{ $cotacao->created_at->format('H:i') }}h</p>
                                            </div>
                                            </div>
                                        </td>

                                        <!-- Retorno ativo -->
                                        <td>
                                            <div class="d-flex p-0 m-0">
                                            <div class="d-flex flex-column align-items-start">
                                                @if($ret)
                                                {{-- sigla da transportadora via relacionamento + nome do serviço --}}
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ optional($ret->transportadoraservico)->sigla }}/{{ $ret->transportadora }}
                                                </p>
                                                <h6 class="mb-0 text-xs">{{ $ret->tipo }}</h6>
                                                @else
                                                <span class="text-xs text-muted">/</span>
                                                @endif
                                            </div>
                                            </div>
                                        </td>

                                        <!-- Valor total -->
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0 p-2 text-end">
                                            R$ {{ number_format($ret->somatotal ?? 0, 2, ',', '.') }}
                                            </p>
                                        </td>

                                        <!-- Status -->
                                        <td class="align-middle text-center text-sm">
                                            @switch($cotacao->status)
                                            @case('concluido')
                                                <span class="badge badge-sm bg-gradient-success p-2">Concluído</span>
                                                @break
                                            @case('aberto')
                                                <span class="badge badge-sm bg-gradient-info p-2">Aberto</span>
                                                @break
                                            @case('cancelado') @case('recusado')
                                                <span class="badge badge-sm bg-gradient-danger p-2">{{ ucfirst($cotacao->status) }}</span>
                                                @break
                                            @default
                                                <span class="badge badge-sm bg-gradient-secondary p-2">{{ ucfirst($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 }}";
    let isLoading    = false;

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

    // clique na linha para editar
    $('tr[data-url]').on('click', function() {
        window.location.href = $(this).data('url');
    });

    // infinite scroll
    const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting && !isLoading) {
            loadMore();
        }
    }, { rootMargin: '100px' });
    observer.observe(document.getElementById('scroll-anchor'));

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

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

        isLoading = true;
        // 1) mostra o container e atualiza o botão
        const $btn = $('#load-more button');
        $('#load-more').show();
       
        // aguarda 200 ms e só então muda para “Carregando…”
        setTimeout(() => {
        $btn
            .removeClass('btn-primary')
            .addClass('btn-info')
            .text('Carregando...');
        }, 200);

        $.ajax({
            url: nextPageUrl,
            type: 'GET',
            dataType: 'json',
            success(resp) {
                
                isLoading = false;

                 // 2) após carregar, restaura o estilo e texto antes de esconder
                $btn
                .removeClass('btn-info')
                .addClass('btn-primary')
                .text('Carregar mais');

                // atualiza nextPageUrl ou encerra observer
                if (resp.nextPageUrl) {
                    nextPageUrl = resp.nextPageUrl;
                } else {
                    nextPageUrl = null;
                    observer.unobserve(document.getElementById('scroll-anchor'));
                }

                resp.cotacoes.forEach(cotacao => {
                    // 1) dados da empresa
                    //console.log(cotacao);
                    const empSigla = cotacao.sigla
                                   || cotacao.empresa?.sigla
                                   || cotacao.empresa?.nomefantasia
                                   || '';
                    const empRazao = cotacao.razaosocial
                                   || cotacao.empresa?.razaosocial
                                   || '';

                    // 2) dados do usuário
                    const userName     = cotacao.user_name
                                       || cotacao.user?.name
                                       || '';
                    const userUsername = cotacao.user_username
                                       || cotacao.user?.username
                                       || '';

                    // 3) rota origem→destino
                    const origem  = `${cotacao.origemcidade||''}/${cotacao.origemuf||''}`;
                    const destino = `${cotacao.destinocidade||''}/${cotacao.destinouf||''}`;

                    // 4) data e hora
                    const dt      = new Date(cotacao.created_at);
                    const dataFmt = dt.toLocaleDateString('pt-BR', {
                                        day:   '2-digit',
                                        month: '2-digit',
                                        year:  '2-digit'
                                    });
                    const horaFmt = dt.toLocaleTimeString('pt-BR', {
                                        hour:   '2-digit',
                                        minute: '2-digit',
                                        hour12: false
                                    }) + 'h';

                    // 5) transporte: flat ou nested
                    let siglaT = cotacao.retorno_idtransportadora || '';
                    let nomeS  = cotacao.retorno_transportadora   || '';
                    let tipoS  = cotacao.retorno_tipo              || '';
                    let valor  = cotacao.somatotal                 || 0;

                    if (!siglaT && cotacao.retorno_ativo) {
                        const ret = cotacao.retorno_ativo;
                        siglaT = ret.transportadoraservico?.sigla || '';
                        nomeS  = ret.transportadora              || '';
                        tipoS  = ret.tipo                        || '';
                        valor  = ret.somatotal                   || 0;
                    }

                    // monta a linha
                    const linha = `
                        <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">
                                    <div class="flex-column">
                                        <h6 class="mb-0 text-xs">${empSigla}</h6>
                                        <p class="text-xs font-weight-bold mb-0">${empRazao}</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex">
                                    <div class="flex-column">
                                        <p class="text-xs font-weight-bold mb-0">${userName}</p>
                                        <p class="text-xs font-weight-bold mb-0">${userUsername}</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex">
                                    <div class="flex-column">
                                        <p class="text-xs font-weight-bold mb-0">${origem}</p>
                                        <h6 class="mb-0 text-xs">${destino}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex">
                                    <div class="flex-column text-center w-100">
                                        <p class="text-xs font-weight-bold mb-0>${dataFmt}</p>
                                        <p class="text-xs font-weight-bold mb-0">${horaFmt}</p>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex">
                                    <div class="flex-column align-items-start">
                                        <p class="text-xs mb-0">${siglaT}/${nomeS}</p>
                                        <h6 class="mb-0 text-xs">${tipoS}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <p class="text-xs font-weight-bold mb-0 p-2 text-end">
                                    R$ ${parseFloat(valor).toFixed(2).replace('.',',')}
                                </p>
                            </td>
                            <td class="align-middle text-center">
                                ${getStatusBadge(cotacao.status)}
                            </td>
                        </tr>
                    `;
                    $('#cotacao-table-body').append(linha);
                });

                // reaplica clique
                $('tr[data-url]').off('click').on('click', function() {
                    window.location.href = $(this).data('url');
                });
            },
            error(xhr, status, err) {
                console.error('AJAX Error:', status, err);
                $('#load-more').hide();
                isLoading = false;
                $btn
                    .removeClass('btn-info')
                    .addClass('btn-primary')
                    .text('Carregar mais');
                    $('#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-secondary p-2">
                            ${status.charAt(0).toUpperCase()+status.slice(1)}
                        </span>`;
        }
    }
});
</script>