@extends('template.template')

@section('content')
    @php
        $user_id = auth()->id();
        $user = auth()->user();

        use App\Models\Venda;
        use Carbon\Carbon;

        $mesAtual = ucfirst(Carbon::now()->locale('pt_BR')->monthName);
        $mesNumber = ucfirst(Carbon::now()->locale('pt_BR')->month);

        $vendas = Venda::where('user_id', $user_id)->whereRaw("month(date) = $mesNumber")->orderBy('id', 'desc')->get();

        $valorTotal = $vendas->sum(function ($venda) {
            return $venda->product_value + $venda->frame_value;
        });
        $valorTotalComissoes = $vendas->sum('commission');
        $valorTotalComissoesPagas = $vendas->sum('commission_paid');

        // Filtrado por mês

        $vendasMesAtual = Venda::where('user_id', $user_id)
            ->whereBetween('date', [Carbon::now()->startOfMonth(), Carbon::now()->endOfMonth()])
            ->orderBy('id', 'desc')
            ->get();
        $valorTotalMes = $vendasMesAtual->sum(function ($venda) {
            return $venda->product_value + $venda->frame_value;
        });
        $valorTotalComissoesMes = $vendasMesAtual->sum('commission');

    @endphp
    <div class="dashboard-wrapper">
        <div class="container-fluid  dashboard-content">
            <!-- ============================================================== -->
            <!-- pagehader  -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="page-header">
                        <h3 class="mb-2">Sistema de comissão - Tecnopartes RJ </h3>
                        {{-- <div class="page-breadcrumb">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Início</a></li>
                                </ol>
                            </nav>
                        </div> --}}
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- pagehader  -->
            <!-- ============================================================== -->
            <div class="row">
                <!-- metric -->
                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-muted">Total de vendas</h5>
                            <div class="metric-value d-inline-block">
                                <h3 class="mb-1 text-primary">{{ 'R$ ' . number_format($valorTotalMes, 2, ',', '.') }}
                                </h3>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- /. metric -->
                <!-- metric -->
                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-muted">Total de comissões</h5>
                            <div class="metric-value d-inline-block">
                                <h3 class="mb-1 text-primary">
                                    {{ 'R$ ' . number_format($valorTotalComissoesMes, 2, ',', '.') }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-muted">Mês de referência </h5>
                            <div class="metric-value d-inline-block">
                                <h3 class="mb-1 text-primary">{{ $mesAtual }}</h3>
                            </div>
                        </div>
                    </div>
                </div>




                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="text-muted">Data de hoje</h5>
                            <div class="metric-value d-inline-block">
                                <h3 class="mb-1 text-primary" name="face">

                                    <div id="data-hora"></div>


                                    <script>
                                        const options = {

                                            timeZone: 'America/Sao_Paulo',
                                            hour: 'numeric',
                                            minute: 'numeric'
                                        };
                                        const date = new Intl.DateTimeFormat([], options);
                                        console.log(date.format(new Date()));
                                        // Função para formatar 1 em 01
                                        const zeroFill = n => {
                                            return ('0' + n).slice(-2);
                                        }

                                        // Cria intervalo
                                        const interval = setInterval(() => {
                                            // Pega o horário atual
                                            const now = new Date();

                                            // Formata a data conforme dd/mm/aaaa hh:ii:ss
                                            const dataHora = zeroFill(now.getUTCDate() + 0) + '/' + zeroFill((now.getMonth() + 1)) + '/' + now
                                                .getFullYear() + ' ' + zeroFill(now.getHours()) + ':' + zeroFill(now.getMinutes()) + ':' + zeroFill(
                                                    now.getSeconds());

                                            // Exibe na tela usando a div#data-hora
                                            document.getElementById('data-hora').innerHTML = dataHora;
                                        }, 1000);
                                    </script>



                                </h3>



                            </div>

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



            </div>
            <div class="col-xl-12" style="padding: 0px 0 20px 0">
                <p class="text-left">
                    <a href="{{ route('venda') }}"
                    style="color: #fff"> <button type="submit" class="btn btn-space btn-primary">+ Cadastrar nova venda</button>
                </a>
                </p>
            </div>

            <div class="row">
                <!-- ============================================================== -->
                <!-- top selling products  -->
                <!-- ============================================================== -->
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card">
                        <h5 class="card-header">RESUMO DE VENDA</h5>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table">
                                    @foreach ($vendas as $venda)
                                        <thead class="bg-light">
                                            <tr class="border-0">
                                                <th class="border-0">Data de venda</th>
                                                <th class="border-0">Nota Fiscal</th>
                                                <th class="border-0">Cliente</th>
                                                <th class="border-0">Valor de venda</th>
                                                <th class="border-0">Valor de comissão</th>
                                                <th class="border-0">Forma de pagamento</th>
                                                <th class="border-0">Condição</th>
                                                <th class="border-0">Empresa</th>
                                                <th class="border-0">Tipo de material</th>
                                                <th class="border-0">Cliente quitou?</th>
                                                <th class="border-0"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>{{ Carbon::parse($venda->date)->format('d/m/Y') }}</td>
                                                <td>{{ $venda->invoice }}</td>
                                                <td>{{ $venda->client_name }}</td>
                                                <td>{{ 'R$ ' . number_format($venda->product_value + $venda->frame_value, 2, ',', '.') }}</td>
                                                <td>{{ 'R$ ' . number_format($venda->commission, 2, ',', '.') }}</td>
                                                {{-- <td>{{ 'R$ ' . number_format($venda->commission_paid, 2, ',', '.') }}</td> --}}
                                                <td>{{ $venda->payment_method }}</td>
                                                <td>{{ $venda->condition }}</td>
                                                <td>{{ $venda->company }}</td>
                                                <td>{{ $venda->product_type == 'PRODUCT' ? 'Produto' : ($venda->product_type == 'FRAME' ? 'Quadro' : 'Produto e Quadro') }}
                                                </td>
                                                <td>
                                                    @if ($venda->settled)
                                                        Quitado |
                                                        <a style="font-size: 0.8rem; color: blue;" href="{{route('quitar', ['id' => $venda->id])}}">(desfazer)</a>
                                                    @else
                                                        <a class="btn btn-sm  btn-outline-light"
                                                            style="margin-right:5px; border-color: #007003;"
                                                            href="{{route('quitar', ['id' => $venda->id])}}">
                                                            Quitar
                                                        </a>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href="{{ route('venda', ['id' => $venda->id]) }}">
                                                        <button
                                                            class="btn btn-sm float-right btn-outline-light">Editar</button>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    @endforeach
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

                    <div class="card">
                        <h5 class="card-header">HISTÓRICO TOTAL DO VENDEDOR</h5>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead class="bg-light">
                                        <tr class="border-0">
                                            <th class="border-0">#</th>
                                            <th class="border-0">Vendedor</th>
                                            <th class="border-0">Valor total</th>
                                            <th class="border-0">Valor de comissão</th>
                                            <th class="border-0">Recebido</th>
                                            <th class="border-0">Pendente</th>
                                            <th class="border-0"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{{ $user->id }}</td>
                                            <td>{{ $user->name }}</td>
                                            <td>{{ 'R$ ' . number_format($valorTotal, 2, ',', '.') }}</td>
                                            <td>{{ 'R$ ' . number_format($valorTotalComissoes, 2, ',', '.') }}</td>
                                            <td>{{ 'R$ ' . number_format($valorTotalComissoesPagas, 2, ',', '.') }}</td>
                                            <td>{{ 'R$ ' . number_format($valorTotalComissoes - $valorTotalComissoesPagas, 2, ',', '.') }}
                                            </td>
                                            <td>
                                                <a href="{{route('historico_vendedor', ['id' => auth()->id()])}}"
                                                    class="btn btn-outline-light float-right">Visualizar</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
@endsection