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

@section('content')
<style type="text/css">
    .kpi-card {
        border: 1px solid #ececec;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 12px;
    }
    .kpi-label {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
    }
    .kpi-value {
        font-size: 26px;
        line-height: 1;
        font-weight: bold;
        color: #2c3e50;
    }
    .chart-box {
        border: 1px solid #ececec;
        border-radius: 6px;
        padding: 10px;
        margin-bottom: 12px;
    }
    .chart-title {
        font-weight: bold;
        font-size: 13px;
        margin-bottom: 8px;
    }
    .chart-container-fixed {
        position: relative;
        height: 320px;
        width: 100%;
    }
    .chart-container-fixed canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td {
        font-size: 12px;
        padding: 0.5rem !important;
    }
</style>

<div class="content-wrapper bg-white" id="productionReports">
    <section class="content-header"></section>
    <div class="box-body">
        <div class="row">
            <div class="col-md-12">
                <div class="text-right" style="margin-bottom: 10px; display: flex; gap: 8px; justify-content: flex-end;">
                    <button class="btn btn-info" @click="showFilters = !showFilters">
                        @{{ showFilters ? 'Ocultar filtros' : 'Filtros' }}
                    </button>
                    <button class="btn btn-success" @click="downloadReport('excel')">Descargar Excel</button>
                    <button class="btn btn-danger" @click="downloadReport('pdf')">Descargar PDF</button>
                </div>
                <div class="box">
                    <div class="box-body" v-show="showFilters">
                        <div class="row">
                            <div class="col-md-2">
                                <label>Año</label>
                                <select class="form-control" v-model.number="filters.year">
                                    <option v-for="(yr, i) in years" :key="i" :value="yr">@{{ yr }}</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label>Mes</label>
                                <select class="form-control" v-model.number="filters.month">
                                    <option v-for="(month, i) in months" :key="i" :value="i">@{{ month }}</option>
                                </select>
                            </div>
                            <div class="col-md-2" v-if="canSelectOperator">
                                <label>Empleado</label>
                                <select class="form-control" v-model="filters.operator_id">
                                    <option value="">Todos</option>
                                    <option v-for="operator in operators" :key="operator.id" :value="operator.id">
                                        @{{ fullName(operator) }}
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label>Fecha inicio</label>
                                <input type="date" class="form-control" v-model="filters.date_from">
                            </div>
                            <div class="col-md-2">
                                <label>Fecha fin</label>
                                <input type="date" class="form-control" v-model="filters.date_to">
                            </div>
                            <div class="col-md-2">
                                <label>Estado</label>
                                <select class="form-control" v-model="filters.state_id">
                                    <option value="">Todos</option>
                                    <option v-for="status in statuses" :key="status.id" :value="status.id">@{{ status.name }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px;">
                            <div class="col-md-4">
                                <label>Equipo de laboratorio</label>
                                <select class="form-control" v-model="filters.test_id">
                                    <option value="">Todos</option>
                                    <option v-for="test in tests" :key="test.id" :value="test.id">@{{ test.name }}</option>
                                </select>
                            </div>
                            <div class="col-md-8 text-right" style="padding-top: 25px;">
                                <button class="btn btn-primary" @click="loadData">Aplicar filtros</button>
                                <button class="btn btn-default" @click="resetFilters">Limpiar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-2 col-sm-4" v-for="item in kpis" :key="item.key">
                <div class="kpi-card">
                    <div class="kpi-label">@{{ item.label }}</div>
                    <div class="kpi-value">@{{ item.value }}</div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="chart-box">
                    <div class="chart-title">Producción por equipo</div>
                    <div class="chart-container-fixed">
                        <canvas id="productionByEquipment"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chart-box">
                    <div class="chart-title">Realizadas vs Pendientes vs Rechazadas</div>
                    <div class="chart-container-fixed">
                        <canvas id="stackedByEquipment"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="chart-box">
                    <div class="chart-title">Tendencia de producción por mes</div>
                    <div class="chart-container-fixed">
                        <canvas id="monthlyTrend"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="box">
                    <div class="box-body">
                        <h4 style="margin-top:0;">Desglose por equipo</h4>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Equipo</th>
                                    <th>Realizadas</th>
                                    <th>Pendientes</th>
                                    <th>Rechazadas</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(row, i) in tableRows" :key="i">
                                    <td>@{{ row.equipment }}</td>
                                    <td>@{{ row.performed }}</td>
                                    <td>@{{ row.pending }}</td>
                                    <td>@{{ row.rejected }}</td>
                                    <td>@{{ row.total }}</td>
                                </tr>
                                <tr v-if="tableRows.length === 0">
                                    <td colspan="5" class="text-center">Sin datos</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-6" v-if="canSelectOperator">
                <div class="box">
                    <div class="box-body">
                        <h4 style="margin-top:0;">Desglose por operador</h4>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Operador</th>
                                    <th>Asignadas</th>
                                    <th>Realizadas</th>
                                    <th>Pendientes</th>
                                    <th>Rechazadas</th>
                                    <th>Sin datos</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(row, i) in operatorBreakdown" :key="i">
                                    <td>@{{ row.operator }}</td>
                                    <td>@{{ row.assigned }}</td>
                                    <td>@{{ row.performed }}</td>
                                    <td>@{{ row.pending }}</td>
                                    <td>@{{ row.rejected }}</td>
                                    <td>@{{ row.without_data }}</td>
                                </tr>
                                <tr v-if="operatorBreakdown.length === 0">
                                    <td colspan="6" class="text-center">Sin datos</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
    new Vue({
        el: '#productionReports',
        data() {
            return {
                charts: {
                    byEquipment: null,
                    stackedByEquipment: null,
                    trend: null
                },
                canSelectOperator: {{ (int) auth()->user()->id_role !== 4 ? 'true' : 'false' }},
                operators: @json($operators),
                tests: @json($laboratoryTests),
                statuses: [
                    { id: 1, name: 'Sin datos' },
                    { id: 2, name: 'Pendiente' },
                    { id: 3, name: 'Realizada' },
                    { id: 4, name: 'Rechazada' },
                ],
                years: [],
                months: ['Todos', 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                showFilters: false,
                filters: {
                    operator_id: '',
                    year: new Date().getFullYear(),
                    month: new Date().getMonth() + 1,
                    date_from: '',
                    date_to: '',
                    test_id: '',
                    state_id: ''
                },
                dashboard: {
                    summary: {
                        assigned: 0,
                        performed: 0,
                        pending: 0,
                        rejected: 0,
                        without_data: 0,
                    },
                    charts: {
                        by_equipment: { labels: [], data: [] },
                        by_equipment_status: { labels: [], performed: [], pending: [], rejected: [], rows: [] },
                        trend_monthly: { labels: [], data: [] }
                    },
                    operator_breakdown: []
                }
            }
        },
        computed: {
            kpis() {
                return [
                    { key: 'assigned', label: 'Muestras asignadas', value: this.dashboard.summary.assigned || 0 },
                    { key: 'performed', label: 'Muestras realizadas', value: this.dashboard.summary.performed || 0 },
                    { key: 'pending', label: 'Muestras pendientes', value: this.dashboard.summary.pending || 0 },
                    { key: 'rejected', label: 'Muestras rechazadas', value: this.dashboard.summary.rejected || 0 },
                    { key: 'without_data', label: 'Muestras sin datos', value: this.dashboard.summary.without_data || 0 },
                ];
            },
            tableRows() {
                return this.dashboard.charts.by_equipment_status.rows || [];
            },
            operatorBreakdown() {
                return this.dashboard.operator_breakdown || [];
            }
        },
        methods: {
            fullName(user) {
                return `${user.name || ''} ${user.last_name || ''}`.trim();
            },
            buildParams() {
                const params = new URLSearchParams();

                if (this.canSelectOperator && this.filters.operator_id) {
                    params.append('operator_id', this.filters.operator_id);
                }
                params.append('year', this.filters.year);
                params.append('month', this.filters.month);

                if (this.filters.date_from) {
                    params.append('date_from', this.filters.date_from);
                }
                if (this.filters.date_to) {
                    params.append('date_to', this.filters.date_to);
                }

                if (this.filters.test_id) {
                    params.append('test_ids[]', this.filters.test_id);
                }
                if (this.filters.state_id) {
                    params.append('states[]', this.filters.state_id);
                }

                return params;
            },
            async loadData() {
                const req = await fetch(`/administrator/production/report/data?${this.buildParams().toString()}`);
                const res = await req.json();

                this.dashboard = res.data;
                this.refreshCharts();
            },
            refreshCharts() {
                const chartData = this.dashboard.charts;

                this.charts.byEquipment.data = {
                    labels: chartData.by_equipment.labels,
                    datasets: [{
                        label: 'Producción',
                        data: chartData.by_equipment.data,
                        backgroundColor: '#17a2b8'
                    }]
                };
                this.charts.byEquipment.update();

                this.charts.stackedByEquipment.data = {
                    labels: chartData.by_equipment_status.labels,
                    datasets: [
                        {
                            label: 'Realizadas',
                            data: chartData.by_equipment_status.performed,
                            backgroundColor: '#28a745'
                        },
                        {
                            label: 'Pendientes',
                            data: chartData.by_equipment_status.pending,
                            backgroundColor: '#ffc107'
                        },
                        {
                            label: 'Rechazadas',
                            data: chartData.by_equipment_status.rejected,
                            backgroundColor: '#dc3545'
                        }
                    ]
                };
                this.charts.stackedByEquipment.update();

                this.charts.trend.data = {
                    labels: chartData.trend_monthly.labels,
                    datasets: [{
                        label: 'Producción',
                        data: chartData.trend_monthly.data,
                        fill: false,
                        borderColor: '#007bff',
                        backgroundColor: '#007bff',
                    }]
                };
                this.charts.trend.update();
            },
            resetFilters() {
                const now = new Date();
                this.filters.operator_id = '';
                this.filters.year = now.getFullYear();
                this.filters.month = now.getMonth() + 1;
                this.filters.date_from = '';
                this.filters.date_to = '';
                this.filters.test_id = '';
                this.filters.state_id = '';
                this.loadData();
            },
            downloadReport(format) {
                if (format === 'pdf') {
                    this.downloadPdfWithCharts();
                    return;
                }

                const params = this.buildParams();
                params.append('format', format);
                window.open(`/administrator/production/report/export?${params.toString()}`, '_blank');
            },
            appendHiddenInput(form, name, value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                input.value = value;
                form.appendChild(input);
            },
            downloadPdfWithCharts() {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/administrator/production/report/export';
                form.target = '_blank';

                this.appendHiddenInput(form, '_token', '{{ csrf_token() }}');
                this.appendHiddenInput(form, 'format', 'pdf');

                if (this.canSelectOperator && this.filters.operator_id) {
                    this.appendHiddenInput(form, 'operator_id', this.filters.operator_id);
                }
                this.appendHiddenInput(form, 'year', this.filters.year);
                this.appendHiddenInput(form, 'month', this.filters.month);

                if (this.filters.date_from) {
                    this.appendHiddenInput(form, 'date_from', this.filters.date_from);
                }
                if (this.filters.date_to) {
                    this.appendHiddenInput(form, 'date_to', this.filters.date_to);
                }
                if (this.filters.test_id) {
                    this.appendHiddenInput(form, 'test_ids[]', this.filters.test_id);
                }
                if (this.filters.state_id) {
                    this.appendHiddenInput(form, 'states[]', this.filters.state_id);
                }

                if (this.charts.byEquipment) {
                    this.appendHiddenInput(form, 'chart_images[by_equipment]', this.charts.byEquipment.toBase64Image());
                }
                if (this.charts.stackedByEquipment) {
                    this.appendHiddenInput(form, 'chart_images[by_equipment_status]', this.charts.stackedByEquipment.toBase64Image());
                }
                if (this.charts.trend) {
                    this.appendHiddenInput(form, 'chart_images[trend_monthly]', this.charts.trend.toBase64Image());
                }

                document.body.appendChild(form);
                form.submit();
                document.body.removeChild(form);
            },
            buildYears() {
                const current = new Date().getFullYear();
                for (let yr = current - 10; yr <= current + 1; yr++) {
                    this.years.push(yr);
                }
            },
            initCharts() {
                const commonOptions = {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        display: true
                    }
                };

                this.charts.byEquipment = new Chart(document.getElementById('productionByEquipment').getContext('2d'), {
                    type: 'bar',
                    data: {},
                    options: commonOptions
                });

                this.charts.stackedByEquipment = new Chart(document.getElementById('stackedByEquipment').getContext('2d'), {
                    type: 'bar',
                    data: {},
                    options: Object.assign({}, commonOptions, {
                        scales: {
                            xAxes: [{ stacked: true }],
                            yAxes: [{ stacked: true }]
                        }
                    })
                });

                this.charts.trend = new Chart(document.getElementById('monthlyTrend').getContext('2d'), {
                    type: 'line',
                    data: {},
                    options: commonOptions
                });
            },
        },
        mounted() {
            this.buildYears();
            this.initCharts();
            this.loadData();
        },
    })
</script>
@endsection