@extends('layout.administrator.index')
@section('title', 'Dashboard')

@section('content')
    <style>
        .operator-kpi-grid .dashboard-card,
        .operator-kpi-grid .small-box,
        .operator-kpi-grid .box,
        .operator-kpi-grid [class*="dashboard-card"] {
            margin-bottom: 12px;
        }

        .operator-kpi-grid .col-md-6 {
            margin-bottom: 12px;
        }

        .operator-kpi-grid {
            padding-top: 4px;
        }

        .operator-overview-row {
            display: flex;
            flex-wrap: wrap;
        }

        .operator-overview-row>[class*="col-"] {
            display: flex;
            margin-bottom: 12px;
        }

        .operator-kpi-grid .row {
            margin-left: -6px;
            margin-right: -6px;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
        }

        .operator-kpi-grid .kpi-col {
            padding-left: 6px;
            padding-right: 6px;
            margin-bottom: 12px;
            display: flex;
        }

        .operator-kpi-grid .info-box,
        .operator-kpi-grid .small-box,
        .operator-kpi-grid .box-widget,
        .operator-kpi-grid .card {
            min-height: auto;
        }

        .operator-kpi-grid .card {
            margin-bottom: 0;
            width: 100%;
            height: 100%;
        }

        .operator-kpi-grid .card-body {
            padding: 16px 18px;
            min-height: 100%;
            display: flex;
            align-items: center;
        }

        .operator-kpi-grid .rounded-circle {
            width: 44px !important;
            height: 44px !important;
        }

        .operator-kpi-grid .ml-5 {
            margin-left: 14px !important;
        }

        .operator-kpi-grid h5 {
            font-size: 16px;
        }

        .operator-kpi-grid .h2 {
            font-size: 18px;
            margin-bottom: 0;
        }

        .operator-kpi-grid .font-weight-bold.text-dark,
        .operator-kpi-grid .font-weight-bold.text-info,
        .operator-kpi-grid .font-weight-bold.text-primary,
        .operator-kpi-grid .font-weight-bold.text-success,
        .operator-kpi-grid .font-weight-bold.text-danger {
            font-size: 18px;
        }

        .operator-kpi-grid span.font-weight-bold {
            font-size: 14px;
        }

        .operator-goal-column .card {
            margin-bottom: 0;
            width: 100%;
            height: 100%;
        }

        .operator-goal-column .card-header,
        .operator-goal-column .card-body {
            padding-left: 16px;
            padding-right: 16px;
        }

        .operator-goal-column .card-header h5 {
            font-size: 16px;
        }

        .operator-goal-column .h3 {
            font-size: 28px;
        }

        .operator-goal-column > div {
            width: 100%;
            display: flex;
        }

        .operator-summary-box {
            margin-top: 8px;
        }

        .workstation-box {
            border: 1px solid #e6edf5;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
            height: 100%;
            width: 100%;
        }

        .workstation-box .box-header {
            background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
            border-bottom: 1px solid #d9e8f7;
        }

        .workstation-table {
            margin-bottom: 0;
        }

        .workstation-table thead th {
            background: #16324f;
            color: #fff;
            border-color: #16324f;
            font-size: 12px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .workstation-table tbody tr:nth-child(even) {
            background: #f8fbff;
        }

        .workstation-table tbody td {
            vertical-align: middle !important;
            border-color: #e8eef5;
        }

        .workstation-name {
            font-weight: 600;
            color: #16324f;
        }

        .metric-pill {
            display: inline-block;
            min-width: 52px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            text-align: center;
        }

        .metric-pill-processed {
            background: #E1F3FF;
            color: #004a99;
        }

        .metric-pill-pending {
            background: #d8f5dd;
            color: #1f8f35;
        }

        .metric-pill-rejected {
            background: #f9d2d2;
            color: #c82333;
        }

        .metric-pill-total {
            background: #c6f1f8;
            color: #117a8b;
        }

        .workstation-box.compact-workstation .box-header {
            padding-bottom: 6px;
        }

        .workstation-box.compact-workstation .box-body {
            padding-top: 8px;
        }

        .workstation-box.compact-workstation .workstation-table thead th,
        .workstation-box.compact-workstation .workstation-table tbody td {
            font-size: 11px;
            padding: 8px 6px !important;
        }

        .workstation-box.compact-workstation .metric-pill {
            min-width: 44px;
            padding: 5px 8px;
            font-size: 11px;
        }

        @media (min-width: 1200px) {
            .operator-goal-column {
                width: 21%;
            }

            .operator-kpis-column {
                width: 33%;
            }

            .operator-table-column {
                width: 46%;
            }

            .operator-kpi-grid .kpi-col {
                flex: 0 0 50%;
                max-width: 50%;
                margin-bottom: 0;
            }

            .operator-kpi-grid .kpi-col:nth-child(-n+2) {
                margin-bottom: 12px;
            }
        }

        @media (max-width: 991px) {
            .operator-overview-row {
                display: block;
            }

            .operator-overview-row>[class*="col-"] {
                display: block;
            }

            .operator-kpi-grid {
                margin-top: 12px;
            }

            .operator-kpi-grid .row {
                display: block;
                height: auto;
            }

            .operator-kpi-grid .kpi-col {
                display: block;
                margin-bottom: 12px;
            }

            .operator-kpi-grid .card,
            .operator-goal-column .card {
                height: auto;
            }

            .operator-kpi-grid .card-body {
                display: block;
                min-height: auto;
            }
        }
    </style>

    <div class="content-wrapper bg-white">
        <section class="content-header">
            {{-- <h1>
        Dashboard
      </h1> --}}
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-dashboard"></i> Inicio</li>
            </ol>
        </section>
        <div class="box-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="print">
                        <div class="text-right" style="margin-bottom: 10px;">
                            <button type="button" class="btn btn-info" id="toggleOperatorFilters">
                                <i class="fa fa-filter"></i> Filtros
                            </button>
                        </div>

                        <div class="box" id="operatorFiltersBox" style="display: none;">
                            <div class="box-body">
                                <form method="GET" action="{{ route('administrator.dashboard') }}" class="row">
                                    <div class="col-md-4">
                                        <label>Fecha inicio</label>
                                        <input type="date" class="form-control" name="date_from" value="{{ $dateFrom ?? '' }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label>Fecha fin</label>
                                        <input type="date" class="form-control" name="date_to" value="{{ $dateTo ?? '' }}">
                                    </div>
                                    <div class="col-md-4 text-right" style="padding-top: 25px;">
                                        <button type="submit" class="btn btn-primary">Aplicar filtros</button>
                                        <a href="{{ route('administrator.dashboard') }}" class="btn btn-default">Limpiar</a>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="row operator-overview-row">
                            <div class="col-lg-3 col-md-3 operator-goal-column">
                                <div class="col-md-12" style="padding-left: 0; padding-right: 0;">
                                    @include('system.administrator.dashboard.operators.goal-card', [
                                        'period' => $period,
                                        'target' => $target,
                                        'current' => $currentData,
                                        'title' => 'Ingreso de resultados'
                                    ])
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-5 operator-kpi-grid operator-kpis-column">
                                @php
                                    $safeTotal = $totalBase > 0 ? $totalBase : 1;
                                @endphp

                                <div class="row">
                                    <div class="col-sm-6 col-xs-12 kpi-col">
                                        <x-dashboard-card title="Total Muestras" value={{$total}} icon="fa fa-bar-chart"
                                            color="text-info" bg="#c6f1f8" percent="100 %" percentColor="text-info" />
                                    </div>
                                    <div class="col-sm-6 col-xs-12 kpi-col">
                                        <x-dashboard-card title="Muestras Analizadas" value={{$performed}} icon="fa fa-pie-chart"
                                        color="text-primary" bg="#E1F3FF" percent="{{ round(($performed / $safeTotal) * 100, 1) }} %" percentColor="text-primary" />
                                    </div>
                                    <div class="col-sm-6 col-xs-12 kpi-col">
                                        <x-dashboard-card title="Muestras Pendientes" value={{$pending}} icon="fa fa-user"
                                            color="text-success" bg="#d8f5dd" percent="{{ round(($pending / $safeTotal) * 100, 1) }} %" percentColor="text-success" />
                                    </div>
                                    <div class="col-sm-6 col-xs-12 kpi-col">
                                        <x-dashboard-card title="Muestras Rechazadas" value={{$rejected}} icon="fa fa-users"
                                            color="text-danger" bg="#f9d2d2" percent="{{ round(($rejected / $safeTotal) * 100, 1) }} %" percentColor="text-danger" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 col-md-4 operator-table-column">
                                <div class="box workstation-box compact-workstation">
                                    <div class="box-header">
                                        <h6 class="text-uppercase text-muted my-2">Muestras analizadas por equipo<br>
                                            <!-- <small>Puestos de trabajo</small> -->
                                        </h6>
                                    </div>
                                    <div class="box-body table-responsive">
                                        <table class="table table-bordered table-sm workstation-table">
                                            <thead>
                                                <tr>
                                                    <th>Equipo</th>
                                                    <th class="text-center">Analizadas</th>
                                                    <th class="text-center">Pendientes</th>
                                                    <th class="text-center">Rechazadas</th>
                                                    <th class="text-center">Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($equipmentBreakdown as $row)
                                                    <tr>
                                                        <td>
                                                            <span class="workstation-name">{{ $row->equipment }}</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="metric-pill metric-pill-processed">{{ $row->performed }}</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="metric-pill metric-pill-pending">{{ $row->pending }}</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="metric-pill metric-pill-rejected">{{ $row->rejected }}</span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="metric-pill metric-pill-total">{{ $row->total }}</span>
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="5" class="text-center text-muted">Sin datos para el rango seleccionado</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="box operator-summary-box">
                            <div class="box-header">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="text-uppercase text-muted my-2">Avance por fecha<br> <small
                                            class="text-right">Muestras por estado</small></h5>
                                    </div>
                                    <div class="col offset-5">
                                        <h5 class="text-uppercase text-muted my-2">Distribución del periodo<br> <small
                                            class="text-right">Participación por estado</small></h5>
                                    </div>
                                </div>

                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col">
                                        <div class="chart">
                                            <canvas id="idReportedChart" style="height:32vh;"></canvas>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="chart">
                                            <canvas id="idReportedChart2" style="height:32vh;"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
    <script src="{{ asset('assets/plugins/html2pdf/dist/html2pdf.bundle.min.js') }}"></script>
    <script type="text/javascript">
        const options = {
            margin: 0.4,
            filename: 'Sample-details',
            image: {
                type: 'jpeg',
                quality: 0.78
            },
            html2canvas: {
                scale: 2
            },
            jsPDF: {
                unit: 'in',
                format: 'letter',
                orientation: 'landscape'
            }
        }
        $('#btnPrint').click(function() {
            window.print();
        })
        $('#btnDownload').click(function() {
            console.log('hola');
            let element = document.getElementById('printElement');
            html2pdf().from(element).set(options).save();
        })

        $('#toggleOperatorFilters').click(function() {
            $('#operatorFiltersBox').slideToggle('fast');
        });

        var reportedBystatus = <br />
<b>Notice</b>:  Undefined variable: reportedBystatus in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\operators\default.blade.php</b> on line <b>465</b><br />
null;
        var labels = <br />
<b>Notice</b>:  Undefined variable: labels in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\operators\default.blade.php</b> on line <b>466</b><br />
null;
        var reportedChartData = {
            labels: labels,
            datasets: [{
                label: 'Analizadas',
                backgroundColor: '#DF1A09',
                stack: 'Stack 1',
                data: reportedBystatus['approved']
            }, {
                label: 'Rechazadas',
                backgroundColor: '#ffb22b',
                stack: 'Stack 1',
                data: reportedBystatus['rejected']
            }, {
                label: 'Pendientes',
                backgroundColor: '#0FAB0B',
                stack: 'Stack 1',
                data: reportedBystatus['ready']
            }]
        };
        var ctx = document.getElementById('idReportedChart').getContext('2d');
        var ctx2 = document.getElementById('idReportedChart2').getContext('2d');
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: reportedChartData,
            options: {
                title: false,
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                legend: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: { beginAtZero: true }
                    }]
                }
            }
        });
        var myDoughnutChart = new Chart(ctx2, {
            type: 'doughnut',
            data: {
                datasets: [{
                    backgroundColor: ['#ffb22b', '#DF1A09', '#0FAB0B'],
                    data: [{{ $approved }}, {{ $rejected }}, {{ $ready }}]
                }],

                // These labels appear in the legend and in the tooltips when hovering different arcs
                labels: [
                    '% analizadas',
                    '% rechazadas',
                    '% pendientes'
                ]
            },

        });
    </script>
@endsection