@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard'])

    <div class="container-fluid py-4">
        @livewire('dashboard-filters')
    </div>

    <div class="container-fluid py-4">
        <ul class="nav nav-pills mb-3 mt-6">
            <li class="nav-item">
                <a class="nav-link nav-link-tab active" aria-current="page" href="#" data-target="cotacao">Cotação</a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link-tab" href="#" data-target="tracking">Tracking</a>
            </li>
        </ul>
        <div class="cotacao content active">
            <div class="row">
                <div class="col-md-12">
                    <div style="background-color: #f0f0f0; padding: 15px; border-radius: 10px;">
                        <div class="row mt-2 mb-4 d-none">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">OPERAÇÃO</p>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                @livewire('cotacoes')
                                @livewire('cotacoes-dia')
                                @livewire('cotacoes-usuarios')
                            </div>
                            <div class="col-md-10">
                            @livewire('graph-cotacoes')
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-6">
                    <div style="background-color: #f0f0f0; padding: 15px; border-radius: 10px;">
                        <div class="row mt-2 mb-4 d-none">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">OPERAÇÃO</p>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                @livewire('cotacoes-abertas')
                                @livewire('cotacoes-concluidas')
                                @livewire('cotacoes-recusadas')
                            </div>
                            <div class="col-md-8">
                            @livewire('graph-cotacoes-destinouf')
                            </div>

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

                <div class="col-md-6">
                    <div style="background-color: #f0f0f0; padding: 15px; border-radius: 10px;">
                        <div class="row mt-2 mb-4 d-none">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">OPERAÇÃO</p>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                            @livewire('peso-cotacao')
                            @livewire('volume-cotacao')
                            @livewire('valornf-peso')
                            </div>
                            <div class="col-md-8">
                            @livewire('graph-cotacoes-transportadora')
                            </div>

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



            </div>
        </div>

        <div class="tracking content ">
            <div class="row">
                <div class="col-md-12">
                    <div style="background-color: #f0f0f0; padding: 15px; border-radius: 10px;">
                        <div class="row mt-2 mb-4">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">EMBARQUES</p>
                        </div>

                        <div class="row">
                            <div class="col-md-2"  style="display: flex; align-items: center; justify-content: space-between; flex-direction: column;">
                                
                                 @livewire('trackings-dia')
                                @livewire('TrackingPerformance')
                                @livewire('total-frete')
                                @livewire('TrackingPrazoEntrega')
                            </div>
                            <div class="col-md-10">
                                <div class="row">
                                    <div class="col-md-4"  style="display: flex; align-items: center; justify-content: space-between; flex-direction: column;">
                                        @livewire('tracking')
                                    </div>
                                    <div class="col-md-4"  style="display: flex; align-items: center; justify-content: space-between; flex-direction: column;">
                                        @livewire('tracking-dentro-prazo')
                                    </div>
                                    <div class="col-md-4"  style="display: flex; align-items: center; justify-content: space-between; flex-direction: column;">
                                        @livewire('tracking-fora-prazo')
                                    </div>
                                </div>      
                                <div class="row">
                                    <div class="col-md-12"  style="display: flex; align-items: center; justify-content: space-between; flex-direction: column;">
                                    @livewire('graph-trackings')
                                </div>    
                            </div>
                           
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-6">
                    <div style="background-color: #f0f0f0; padding: 15px; border-radius: 10px;">
                        <div class="row mt-2 mb-4">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">ENTREGUES</p>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                @livewire('trackings-entregue')
                                @livewire('tracking-concluido-dentro-prazo')
                                @livewire('tracking-concluido-fora-prazo')
                            </div>
                            <div class="col-md-8">
                                @livewire('graph-trackings-destinouf')
                            </div>

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

                <div class="col-md-6">
                    <div style="background-color: #f0f0f0; padding: 15px; border-radius: 10px;">
                        <div class="row mt-2 mb-4 ">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">CARGA</p>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                @livewire('TrackingTotalFrete')
                                @livewire('media-frete')
                                @livewire('frete-mercadoria')
                            </div>
                            <div class="col-md-8">
                                @livewire('graph-trackings-transportadora')
                            </div>

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



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

    <script>
        // Seleciona as tabs e as divs de conteúdo
        const tabs = document.querySelectorAll('.nav-link-tab');
        const contents = document.querySelectorAll('.content');

        tabs.forEach(tab => {
            tab.addEventListener('click', function (e) {
                e.preventDefault(); // Evita o comportamento padrão do link

                // Remove a classe 'active' de todas as tabs e divs
                tabs.forEach(t => t.classList.remove('active'));
                contents.forEach(content => content.classList.remove('active'));

                // Adiciona a classe 'active' apenas na tab e na div correspondentes
                this.classList.add('active');
                const target = this.getAttribute('data-target');
                document.querySelector(`.${target}`).classList.add('active');
            });
        });
    </script>

    <style>
        /* Esconde todas as divs de conteúdo por padrão */
        .content {
            display: none;
        }

        /* Mostra apenas a div de conteúdo ativa */
        .content.active {
            display: block;
        }
    </style>
@endsection