{{-- resources/views/admin_panel/pages/dashboard/index.blade.php --}}
@extends('adminlte::page')

@section('title', 'Dashboard')


@section('content_header')
    <div class="d-flex align-items-center justify-content-between w-100 flex-wrap">
        <h1 class="m-0">Dashboard</h1>

        <form action="{{ route('admin::home') }}" method="GET" class="form-inline">
            {{-- Selector de cuenta --}}
            @if($accounts->count())
                <label for="account_id" class="mr-2 mb-0 font-weight-bold">Cuenta:</label>
                <select name="account_id" id="account_id" class="form-control mr-3" onchange="this.form.submit()">
                    <option value="0" {{ (int)$currentAccountId === 0 ? 'selected' : '' }}>Todas las cuentas</option>
                    @foreach($accounts as $acc)
                        <option value="{{ $acc->id }}" {{ (int)$currentAccountId === (int)$acc->id ? 'selected' : '' }}>
                            {{ $acc->name }}
                        </option>
                    @endforeach
                </select>
            @endif

            {{-- DateRangePicker visible --}}
            <div class="input-group">
                <input type="text" id="daterange_display" class="form-control" style="min-width:260px;" readonly>
                <div class="input-group-append">
                    <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                </div>
            </div>

            {{-- Hidden en ISO para el backend --}}
            <input type="hidden" name="start_date" id="start_date" value="{{ $startDate }}">
            <input type="hidden" name="end_date" id="end_date" value="{{ $endDate }}">
        </form>
    </div>
@stop


@section('content')

    <style>
        /* Donut wrapper */
        .bots-chart-wrap { position: relative; height: 240px; }
        .bots-donut     { height: 100%; }

        /* Leyenda como chips */
        .bots-legend{
            display:flex; flex-wrap:wrap; gap:.5rem .75rem;
        }
        .bots-legend-item{
            display:inline-flex; align-items:center; gap:.5rem;
            background:#f8f9fa; border:1px solid #e9ecef; border-radius:999px;
            padding:.25rem .6rem; font-size:.85rem;
        }
        .bots-legend-swatch{ width:10px; height:10px; border-radius:2px; display:inline-block; }
        .bots-legend-label{ font-weight:600; }
        .bots-legend-value{ color:#6c757d; }

        /* Lista por bot con scroll suave si hay muchos */
        .bots-list{ max-height: 330px; overflow:auto; }
        .bots-list .list-group-item{
            display:flex; align-items:center; justify-content:space-between;
        }
        .bots-list .bot-name{
            display:flex; align-items:center; gap:.5rem; font-weight:600;
        }
        .bots-list .bot-count{ font-weight:700; }
    </style>

    <div class="container-fluid">

        {{-- ===== Row KPIs ===== --}}
        <div class="row">
            {{-- Total enviados (OK) --}}
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3 id="kpi-ok">0</h3>
                        <p>Mensajes OK</p>
                    </div>
                    <div class="icon">
                        <i class="far fa-comment-dots"></i>
                    </div>
                </div>
            </div>

            {{-- Errores --}}
            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3 id="kpi-error">0</h3>
                        <p>Mensajes ERROR</p>
                    </div>
                    <div class="icon">
                        <i class="far fa-times-circle"></i>
                    </div>
                </div>
            </div>

            {{-- Tasa éxito --}}
            <div class="col-lg-3 col-6">
                <div class="small-box bg-gradient-success">
                    <div class="inner">
                        <h3 id="kpi-success-rate">0%</h3>
                        <p>Tasa de éxito</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-percentage"></i>
                    </div>
                </div>
            </div>

            {{-- Promedio diario --}}
            <div class="col-lg-3 col-6">
                <div class="small-box bg-gradient-purple">
                    <div class="inner">
                        <h3 id="kpi-daily-avg">0</h3>
                        <p>Promedio diario (OK)</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== Row Chart + Donut ===== --}}
        <div class="row">
            {{-- Barras por día --}}
            <div class="col-lg-8">
                <div class="card card-outline card-secondary h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h3 class="card-title mb-0">Mensajes enviados por día</h3>
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div class="card-body p-3">
                        <div id="msgs-by-day" style="height: 280px;"></div>
                    </div>
                </div>
            </div>

            {{-- Donut por bot --}}
            <div class="col-lg-4">
                <div class="card card-primary card-outline h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h3 class="card-title mb-0">Distribución por bot</h3>
                        <i class="fas fa-chart-pie"></i>
                    </div>
                    <div class="card-body p-3">
                        <div class="bots-chart-wrap">
                            <div id="bots-donut" class="bots-donut"></div>
                        </div>
                        <div class="bots-legend mt-3" id="bots-legend"></div>
                        <div class="text-muted small mt-2" id="bots-no-data" style="display:none;">
                            No hay datos para graficar en el rango seleccionado.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== Row Listado por bot ===== --}}
        <div class="row">
            <div class="col-lg-5">
                <div class="card card-success card-outline h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h3 class="card-title mb-0">Mensajes por bot (enviados)</h3>
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group list-group-flush bots-list" id="bots-list">
                            {{-- Se completa por JS --}}
                        </ul>
                    </div>
                </div>
            </div>

            {{-- (ESPACIO LIBRE) Podés sumar otra card: últimos errores, top destinos, etc. --}}
            <div class="col-lg-7">
                <div class="card card-outline card-light h-100">
                    <div class="card-header">
                        <h3 class="card-title mb-0">Actividad reciente (mock)</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-1">Acá podés sumar lo que quieras: últimos errores, top plantillas, destinos más usados, etc.</p>
                        <ul class="mb-0">
                            <li>Top plantilla: <code>recordatorio_turno</code> (3.1k envíos)</li>
                            <li>Top país: <code>AR</code> (98%)</li>
                            <li>Último error: <code>131008 Button Url requires parameter</code></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop

{{-- ====== ESTILOS ====== --}}



{{-- ====== SCRIPTS ====== --}}
@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // ====== 1) DateRangePicker (cuenta + fechas) ======
            var startISO = "{{ $startDate }}";   // YYYY-MM-DD
            var endISO   = "{{ $endDate }}";     // YYYY-MM-DD
            var start = moment(startISO, 'YYYY-MM-DD');
            var end   = moment(endISO, 'YYYY-MM-DD');

            function updateDisplay(s, e) {
                var el = document.getElementById('daterange_display');
                if (el) el.value = s.format('DD/MM/YYYY') + ' - ' + e.format('DD/MM/YYYY');
            }

            if (window.$ && $('#daterange_display').length) {
                $('#daterange_display').daterangepicker({
                    startDate: start,
                    endDate: end,
                    autoApply: true,
                    opens: 'left',
                    locale: {
                        format: 'DD/MM/YYYY',
                        separator: ' - ',
                        applyLabel: 'Aplicar',
                        cancelLabel: 'Cancelar',
                        fromLabel: 'Desde',
                        toLabel: 'Hasta',
                        customRangeLabel: 'Personalizado',
                        daysOfWeek: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
                        monthNames: [
                            'Enero','Febrero','Marzo','Abril','Mayo','Junio',
                            'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'
                        ],
                        firstDay: 1
                    },
                    ranges: {
                        'Hoy': [moment(), moment()],
                        'Ayer': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
                        'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
                        'Este mes': [moment().startOf('month'), moment()],
                        'Mes pasado': [
                            moment().subtract(1, 'month').startOf('month'),
                            moment().subtract(1, 'month').endOf('month')
                        ]
                    }
                }, function (s, e) {
                    updateDisplay(s, e);
                    // setear hidden en ISO y enviar form
                    document.getElementById('start_date').value = s.format('YYYY-MM-DD');
                    document.getElementById('end_date').value   = e.format('YYYY-MM-DD');
                    $('#daterange_display').closest('form')[0].submit();
                });

                updateDisplay(start, end);
            }

            // ====== 2) KPIs ======
            var okReal = {{ (int)($totals->messagesTotalsOK ?? 0) }};
            var erReal = {{ (int)($totals->messagesTotalsError ?? 0) }};
            var stackedData  = @json($totals->byDayStacked ?? []);
            var daysCount    = Math.max(stackedData.length, 1);
            var successRate  = (okReal + erReal) > 0 ? Math.round(okReal * 100 / (okReal + erReal)) : 0;
            var dailyAvg     = Math.round(okReal / daysCount);

            var kpiOk = document.getElementById('kpi-ok');
            var kpiEr = document.getElementById('kpi-error');
            var kpiSr = document.getElementById('kpi-success-rate');
            var kpiDa = document.getElementById('kpi-daily-avg');
            if (kpiOk) kpiOk.textContent = okReal.toLocaleString('es-AR');
            if (kpiEr) kpiEr.textContent = erReal.toLocaleString('es-AR');
            if (kpiSr) kpiSr.textContent = successRate + '%';
            if (kpiDa) kpiDa.textContent = dailyAvg.toLocaleString('es-AR');

            // ====== 3) Paleta común ======
            var PALETTE = [
                '#1f77b4','#ff7f0e','#2ca02c','#d6a427','#9467bd',
                '#8c564b','#e377c2','#7f7f7f','#bcbd22','#17becf'
            ];

            // ====== 4) Barras apiladas por bot (Morris.Bar) ======
            var seriesLabels = @json($totals->byDaySeries ?? []); // ['Bot A','Bot B','Otros']
            if (typeof Morris !== 'undefined') {
                var barContainer = document.getElementById('msgs-by-day');
                if (barContainer) {
                    if (stackedData.length && seriesLabels.length) {
                        new Morris.Bar({
                            element: 'msgs-by-day',
                            data: stackedData,
                            xkey: 'x',
                            ykeys: seriesLabels,     // cada bot es una serie
                            labels: seriesLabels,
                            stacked: true,           // apilado
                            hideHover: 'auto',
                            resize: true,
                            barColors: PALETTE.slice(0, seriesLabels.length),
                            xLabelAngle: 30,
                            yLabelFormat: function (y) { return y.toLocaleString('es-AR'); },
                            hoverCallback: function (index, options, content, row) {
                                // formateamos valores del tooltip
                                var el = document.createElement('div');
                                el.innerHTML = content;
                                var spans = el.querySelectorAll('.morris-hover-point');
                                spans.forEach(function(sp){
                                    var txt = sp.textContent;
                                    var m = txt.match(/^(.*?):\s*([0-9]+)/);
                                    if (m) {
                                        var label = m[1], val = parseInt(m[2],10);
                                        sp.textContent = label + ': ' + val.toLocaleString('es-AR');
                                    }
                                });
                                return el.innerHTML;
                            }
                        });
                    } else {
                        barContainer.innerHTML = '<div class="text-muted small">Sin datos para el período seleccionado.</div>';
                    }
                }
            }

            // ====== 5) Donut por bot (Morris.Donut) ======
            var donutData = @json($totals->botsChartData ?? []); // [{label, value}]
            var donutEl   = document.getElementById('bots-donut');
            var legendEl  = document.getElementById('bots-legend');
            var noDataEl  = document.getElementById('bots-no-data');

            if (donutEl) {
                if (!donutData.length) {
                    if (noDataEl) noDataEl.style.display = '';
                    donutEl.innerHTML = '<div class="text-muted small">Sin datos.</div>';
                } else {
                    if (noDataEl) noDataEl.style.display = 'none';
                    var colors = PALETTE.slice(0, donutData.length);
                    new Morris.Donut({
                        element: 'bots-donut',
                        data: donutData,
                        colors: colors,
                        resize: true,
                        formatter: function(value){ return value.toLocaleString('es-AR') + ' msgs'; }
                    });

                    if (legendEl) {
                        legendEl.innerHTML = '';
                        donutData.forEach(function (item, idx) {
                            var color = colors[idx % colors.length];
                            var div = document.createElement('div');
                            div.className = 'bots-legend-item';
                            div.innerHTML =
                                '<span class="bots-legend-swatch" style="background:'+color+'"></span>' +
                                '<span class="bots-legend-label">'+ item.label +'</span>' +
                                '<span class="bots-legend-value">('+ (item.value||0).toLocaleString('es-AR') +')</span>';
                            legendEl.appendChild(div);
                        });
                    }
                }
            }

            // ====== 6) Listado por bot ======
            var listEl = document.getElementById('bots-list');
            var botsList = @json($totals->botsList ?? []); // [{id,name,total}]
            if (listEl) {
                listEl.innerHTML = '';
                (botsList || []).forEach(function(item){
                    var li = document.createElement('li');
                    li.className = 'list-group-item';
                    li.innerHTML =
                        '<span class="bot-name"><i class="fas fa-robot"></i> ' + item.name + '</span>' +
                        '<span class="bot-count">' + (item.total||0).toLocaleString('es-AR') + '</span>';
                    listEl.appendChild(li);
                });
            }
        });
    </script>
@stop