@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('breadcrumb')
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')

<!-- Info boxes -->
<div class="row">
    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box">
            <span class="info-box-icon bg-info elevation-1">
                <i class="fas fa-shopping-cart"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">Pedidos Hoje</span>
                <span class="info-box-number">
                    {{ number_format($metrics['pedidos_hoje'], 0, ',', '.') }}
                    <small>pedidos</small>
                </span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box mb-3">
            <span class="info-box-icon bg-danger elevation-1">
                <i class="fas fa-dollar-sign"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">Faturamento Hoje</span>
                <span class="info-box-number">
                    R$ {{ number_format($metrics['faturamento_hoje'], 2, ',', '.') }}
                </span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box mb-3">
            <span class="info-box-icon bg-success elevation-1">
                <i class="fas fa-motorcycle"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">Entregadores Online</span>
                <span class="info-box-number">
                    {{ number_format($metrics['entregadores_online'], 0, ',', '.') }}
                    <small>ativos</small>
                </span>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-3">
        <div class="info-box mb-3">
            <span class="info-box-icon bg-warning elevation-1">
                <i class="fas fa-clock"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">Pedidos Pendentes</span>
                <span class="info-box-number">
                    {{ number_format($metrics['pedidos_pendentes'], 0, ',', '.') }}
                    <small>pendentes</small>
                </span>
            </div>
        </div>
    </div>
</div>

<!-- Main row -->
<div class="row">
    <!-- Left col -->
    <div class="col-md-8">
        <!-- GRÁFICO DE VENDAS -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-pie mr-1"></i>
                    Vendas dos Últimos 30 Dias
                </h3>
                <div class="card-tools">
                    <ul class="nav nav-pills ml-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Faturamento</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#orders-chart" data-toggle="tab">Pedidos</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <div class="tab-content p-0">
                    <div class="chart tab-pane active" id="revenue-chart">
                        <canvas id="revenueChart" height="300" style="height: 300px; display: block; width: 100%;"></canvas>
                    </div>
                    <div class="chart tab-pane" id="orders-chart">
                        <canvas id="ordersChart" height="300" style="height: 300px; display: block; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- PRODUTOS MAIS VENDIDOS -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-star mr-1"></i>
                    Produtos Mais Vendidos (Este Mês)
                </h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Produto</th>
                                <th>Preço</th>
                                <th>Vendas</th>
                                <th>Receita</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topProducts as $produto)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($produto->imagem_principal)
                                        <img src="{{ $produto->imagem_principal }}" 
                                             alt="{{ $produto->nome }}" 
                                             class="img-circle elevation-2 mr-2" 
                                             style="width: 30px; height: 30px; object-fit: cover;">
                                        @else
                                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mr-2" 
                                             style="width: 30px; height: 30px;">
                                            <i class="fas fa-hamburger text-white"></i>
                                        </div>
                                        @endif
                                        <span>{{ $produto->nome }}</span>
                                    </div>
                                </td>
                                <td>R$ {{ number_format($produto->preco, 2, ',', '.') }}</td>
                                <td>
                                    <span class="badge badge-primary">{{ $produto->total_vendido }}</span>
                                </td>
                                <td>
                                    <strong>R$ {{ number_format($produto->receita_total, 2, ',', '.') }}</strong>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted">
                                    Nenhum produto vendido este mês
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- PEDIDOS RECENTES -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-list mr-1"></i>
                    Pedidos Recentes
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <ul class="products-list product-list-in-card pl-2 pr-2">
                    @forelse($recentOrders as $pedido)
                    <li class="item">
                        <div class="product-img">
                            <div class="badge badge-{{ $pedido['status_color'] }} badge-pill">
                                {{ $pedido['codigo'] }}
                            </div>
                        </div>
                        <div class="product-info">
                            <div class="product-title">
                                {{ $pedido['cliente'] }}
                                <span class="badge badge-{{ $pedido['status_color'] }} float-right">
                                    {{ $pedido['status_label'] }}
                                </span>
                            </div>
                            <span class="product-description">
                                {{ $pedido['tipo_entrega'] === 'entrega' ? 'Delivery' : 'Retirada' }} - 
                                R$ {{ number_format($pedido['total'], 2, ',', '.') }} - 
                                {{ $pedido['data_hora']->format('d/m/Y H:i') }}
                            </span>
                        </div>
                    </li>
                    @empty
                    <li class="item text-center text-muted">
                        Nenhum pedido recente
                    </li>
                    @endforelse
                </ul>
            </div>
            <div class="card-footer text-center">
                <a href="{{ route('admin.pedidos.index') }}" class="uppercase">Ver Todos os Pedidos</a>
            </div>
        </div>
    </div>

    <!-- Right col -->
    <div class="col-md-4">
        <!-- STATUS DOS PEDIDOS -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-pie mr-1"></i>
                    Status dos Pedidos
                </h3>
            </div>
            <div class="card-body">
                <div class="progress-group">
                    <span class="progress-text">Pendente</span>
                    <span class="float-right">
                        <b>{{ $orderStatus['pendente'] }}</b>
                    </span>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-warning" 
                             style="width: {{ ($orderStatus['pendente'] / max(array_sum($orderStatus), 1)) * 100 }}%"></div>
                    </div>
                </div>

                <div class="progress-group">
                    <span class="progress-text">Preparando</span>
                    <span class="float-right">
                        <b>{{ $orderStatus['preparando'] }}</b>
                    </span>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-primary" 
                             style="width: {{ ($orderStatus['preparando'] / max(array_sum($orderStatus), 1)) * 100 }}%"></div>
                    </div>
                </div>

                <div class="progress-group">
                    <span class="progress-text">Pronto</span>
                    <span class="float-right">
                        <b>{{ $orderStatus['pronto'] }}</b>
                    </span>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-success" 
                             style="width: {{ ($orderStatus['pronto'] / max(array_sum($orderStatus), 1)) * 100 }}%"></div>
                    </div>
                </div>

                <div class="progress-group">
                    <span class="progress-text">Em Entrega</span>
                    <span class="float-right">
                        <b>{{ $orderStatus['em_entrega'] }}</b>
                    </span>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-info" 
                             style="width: {{ ($orderStatus['em_entrega'] / max(array_sum($orderStatus), 1)) * 100 }}%"></div>
                    </div>
                </div>

                <div class="progress-group">
                    <span class="progress-text">Entregues</span>
                    <span class="float-right">
                        <b>{{ $orderStatus['entregue'] }}</b>
                    </span>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-success" 
                             style="width: {{ ($orderStatus['entregue'] / max(array_sum($orderStatus), 1)) * 100 }}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ENTREGADORES ONLINE -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-motorcycle mr-1"></i>
                    Entregadores Online
                </h3>
            </div>
            <div class="card-body">
                @forelse($onlineDeliveryBoys as $entregador)
                <div class="user-block">
                    <img class="img-circle img-bordered-sm" 
                         src="{{ asset('assets/img/user-placeholder.png') }}" 
                         alt="user image">
                    <span class="username">
                        {{ $entregador['nome'] }}
                        <span class="badge badge-success float-right">
                            <i class="fas fa-circle"></i> Online
                        </span>
                    </span>
                    <span class="description">
                        Saldo: R$ {{ number_format($entregador['saldo'], 2, ',', '.') }} - 
                        {{ $entregador['telefone'] }}
                    </span>
                    @if($entregador['localizacao'])
                    <small class="text-muted">
                        <i class="fas fa-map-marker-alt"></i> {{ $entregador['localizacao']['endereco'] }}
                    </small>
                    @endif
                </div>
                <hr class="my-2">
                @empty
                <div class="text-center text-muted">
                    <i class="fas fa-motorcycle fa-2x mb-2"></i>
                    <p>Nenhum entregador online no momento</p>
                </div>
                @endforelse
            </div>
            <div class="card-footer text-center">
                <a href="{{ route('admin.entregadores.index') }}" class="uppercase">Gerenciar Entregadores</a>
            </div>
        </div>

        <!-- RESUMO FINANCEIRO -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-line mr-1"></i>
                    Resumo do Mês
                </h3>
            </div>
            <div class="card-body">
                <div class="small-box bg-light">
                    <div class="inner">
                        <h3>R$ {{ number_format($metrics['faturamento_hoje'], 2, ',', '.') }}</h3>
                        <p>Ticket Médio: R$ {{ number_format($metrics['ticket_medio'], 2, ',', '.') }}</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-cash"></i>
                    </div>
                </div>

                <div class="d-flex justify-content-between">
                    <div class="text-center">
                        <div class="text-muted">Crescimento</div>
                        <div class="h4 mb-0">
                            @if($metrics['crescimento_mensal'] >= 0)
                                <span class="text-success">
                                    <i class="fas fa-arrow-up"></i> {{ $metrics['crescimento_mensal'] }}%
                                </span>
                            @else
                                <span class="text-danger">
                                    <i class="fas fa-arrow-down"></i> {{ abs($metrics['crescimento_mensal']) }}%
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="text-muted">Produtos Ativos</div>
                        <div class="h4 mb-0">{{ $metrics['produtos_ativos'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

<script>
$(function () {
    'use strict'

    var ticksStyle = {
        fontColor: '#495057',
        fontStyle: 'bold'
    }

    var mode = 'index'
    var intersect = true

    var $salesChart = $('#revenueChart')
    var $ordersChart = $('#ordersChart')
    var salesChart = new Chart($salesChart, {
        type: 'line',
        data: {
            labels: {!! json_encode($salesChart->pluck('date')) !!},
            datasets: [{
                label: 'Faturamento',
                backgroundColor: 'rgba(60,141,188,0.09)',
                borderColor: 'rgba(60,141,188,0.8)',
                pointRadius: 4,
                pointHoverRadius: 6,
                pointBackgroundColor: '#007bff',
                pointBorderColor: '#007bff',
                pointHoverBackgroundColor: '#007bff',
                pointHoverBorderColor: '#007bff',
                data: {!! json_encode($salesChart->pluck('total')) !!}
            }]
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                mode: mode,
                intersect: intersect,
                callbacks: {
                    label: function(tooltipItem, data) {
                        return 'R$ ' + parseFloat(tooltipItem.yLabel).toFixed(2).replace('.', ',');
                    }
                }
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    gridLines: {
                        display: true,
                        lineWidth: '4px',
                        color: 'rgba(0, 0, 0, 0.1)',
                    },
                    ticks: $.extend({
                        callback: function(value) {
                            return 'R$ ' + parseFloat(value).toFixed(2);
                        }
                    }, ticksStyle)
                }],
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: false
                    },
                    ticks: ticksStyle
                }]
            }
        }
    })

    var ordersChart = new Chart($ordersChart, {
        type: 'bar',
        data: {
            labels: {!! json_encode($salesChart->pluck('date')) !!},
            datasets: [{
                label: 'Número de Pedidos',
                backgroundColor: 'rgba(255, 193, 7, 0.8)',
                borderColor: 'rgba(255, 193, 7, 1)',
                borderWidth: 2,
                pointRadius: 4,
                pointHoverRadius: 6,
                data: {!! json_encode($salesChart->pluck('orders')) !!}
            }]
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                mode: mode,
                intersect: intersect
            },
            hover: {
                mode: mode,
                intersect: intersect
            },
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    gridLines: {
                        display: true,
                        lineWidth: '4px',
                        color: 'rgba(0, 0, 0, 0.1)',
                    },
                    ticks: ticksStyle
                }],
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: false
                    },
                    ticks: ticksStyle
                }]
            }
        }
    })
})
</script>

@endsection