@extends('layout.administrator.index')
@section('title', 'Configuración de tendencias')

@section('css')
    <style>
        .dataTables_wrapper .dataTables_filter { display: none; }
        .scope-hint { font-size: 12px; color: #aaa; margin-top: 4px; }
        .modal .select2-container { z-index: 9999; }
        .modal .select2-dropdown { z-index: 10000; }
        #trendSettingsTable thead th,
        #trendSettingsTable tbody td {
            text-align: center;
            vertical-align: middle;
        }
        #trendSettingsTable tbody td .btn,
        #trendSettingsTable tbody td form {
            vertical-align: middle;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i> Inicio</a></li>
                <li class="breadcrumb-item"><a href="{{ route('administrator.notifications.index') }}">Notificaciones</a></li>
                <li class="breadcrumb-item active">Configuración de tendencias</li>
            </ol>
        </section>

        <section class="content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif
            @if (session('danger'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('danger') }}
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif

            @php
                $hasFilters = request()->filled('test_value_id')
                    || request()->filled('component_id')
                    || request()->filled('equipment_id')
                    || request()->filled('enabled');
            @endphp

            <div class="row">
                <div class="col-lg-12">
                    <div id="idContentFilter" class="box box-solid bg_dark {{ $hasFilters ? '' : 'hide' }}">
                        <div class="box-header with-border">
                            <h4 class="box-title">Búsqueda avanzada</h4>
                        </div>
                        <div class="box-body">
                            <form action="{{ route('administrator.trend-detection-settings.index') }}" method="get">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Elemento</label>
                                        <select name="test_value_id" class="form-control trend-select2" data-placeholder="Todos los elementos">
                                            <option value="">Todos</option>
                                            @foreach ($testValues as $tv)
                                                <option value="{{ $tv->id }}" {{ request('test_value_id') == $tv->id ? 'selected' : '' }}>
                                                    {{ $tv->name ?: $tv->reference }} (ID {{ $tv->id }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Componente</label>
                                        <select name="component_id" class="form-control trend-select2" data-placeholder="Todos los componentes">
                                            <option value="">Todos</option>
                                            @foreach ($components as $c)
                                                <option value="{{ $c->id }}" {{ request('component_id') == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Equipo</label>
                                        <select name="equipment_id" class="form-control trend-select2" data-placeholder="Todos los equipos">
                                            <option value="">Todos</option>
                                            @foreach ($equipments as $eq)
                                                <option value="{{ $eq->id }}" {{ request('equipment_id') == $eq->id ? 'selected' : '' }}>
                                                    {{ $eq->unit_id }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Estado</label>
                                        <select name="enabled" class="form-control">
                                            <option value="">Todos</option>
                                            <option value="1" {{ request('enabled') === '1' ? 'selected' : '' }}>Activo</option>
                                            <option value="0" {{ request('enabled') === '0' ? 'selected' : '' }}>Inactivo</option>
                                        </select>
                                    </div>
                                    <div class="col-md-12 mt-3">
                                        <div class="row">
                                            <div class="col-md-6 text-left">
                                                <a href="{{ route('administrator.trend-detection-settings.index') }}" class="btn btn-danger">
                                                    <i class="fa fa-refresh"></i> Limpiar
                                                </a>
                                            </div>
                                            <div class="col-md-6 text-right">
                                                <button type="submit" class="btn btn-info">
                                                    <i class="fa fa-search"></i> Buscar
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="box">
                <div class="box-header with-border">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <h4 class="box-title">Configuración de detección de tendencias</h4>
                            <p class="scope-hint mb-0">Prioridad: equipo+componente → componente → equipo → global</p>
                        </div>
                        <div class="col-6">
                            <div class="box-controls pull-right">
                                <div class="box-header-actions">
                                    <button type="button" class="btn btn-sm btn-info" id="idBtnFilter">
                                        <i class="fa fa-filter"></i> Filtro
                                    </button>
                                    &nbsp;
                                    <a href="{{ route('administrator.trend-detection-settings.manual') }}"
                                        class="btn btn-sm btn-warning"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        title="Abrir manual en una pestaña nueva">
                                        <i class="fa fa-book"></i> Manual
                                    </a>
                                    &nbsp;
                                    <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modalCreateSetting">
                                        <i class="fa fa-plus"></i> Nueva configuración
                                    </button>
                                    &nbsp;
                                    <a href="{{ route('administrator.notifications.index') }}" class="btn btn-sm btn-default">
                                        <i class="fa fa-bell"></i> Notificaciones
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table class="table table-sm table-hover" id="trendSettingsTable">
                        <thead>
                            <tr class="text-center">
                                <th>Elemento</th>
                                <th>Alcance</th>
                                <th>Componente</th>
                                <th>Equipo</th>
                                <th>Dir.</th>
                                <th>Var. %</th>
                                <th>Precaución</th>
                                <th>Alerta</th>
                                <th>Crítico</th>
                                <th>Ratio mín.</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            @forelse ($settings as $setting)
                                <tr>
                                    <td>{{ $setting->element_display_name }}</td>
                                    <td>{{ $setting->scope_label }}</td>
                                    <td>{{ optional($setting->component)->name ?? '—' }}</td>
                                    <td>{{ optional($setting->equipment)->unit_id ?? '—' }}</td>
                                    <td>{{ $setting->direction }}</td>
                                    <td>{{ $setting->variation_percent_threshold }}%</td>
                                    <td>{{ $setting->caution_limit ?? '—' }}</td>
                                    <td>{{ $setting->alert_limit ?? '—' }}</td>
                                    <td>{{ $setting->critical_limit ?? '—' }}</td>
                                    <td>{{ $setting->min_critical_ratio_for_trend_alarm }}</td>
                                    <td>
                                        @if ($setting->enabled)
                                            <span class="badge badge-success">Activo</span>
                                        @else
                                            <span class="badge badge-danger">Inactivo</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-xs btn-warning btn-edit-setting"
                                            data-id="{{ $setting->id }}"
                                            data-json-url="{{ route('administrator.trend-detection-settings.json', $setting->id) }}"
                                            data-update-url="{{ route('administrator.trend-detection-settings.update', $setting->id) }}">
                                            <i class="fa fa-pencil"></i>
                                        </button>
                                        <form action="{{ route('administrator.trend-detection-settings.destroy', $setting->id) }}" method="post" class="d-inline" onsubmit="return confirm('¿Eliminar esta configuración?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="12" class="text-center text-muted">
                                        No hay configuraciones. Los analistas pueden crear una por elemento; si no hay filas, se usan valores por defecto del sistema (20%).
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    @include('system.administrator.trend-detection-settings.partials.form-modal', [
        'modalId' => 'modalCreateSetting',
        'title' => 'Nueva configuración de tendencia',
        'formAction' => route('administrator.trend-detection-settings.store'),
        'method' => 'POST',
        'prefix' => 'create',
    ])

    @include('system.administrator.trend-detection-settings.partials.form-modal', [
        'modalId' => 'modalEditSetting',
        'title' => 'Editar configuración',
        'formAction' => '#',
        'method' => 'PUT',
        'prefix' => 'edit',
    ])
@endsection

@section('js')
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <script>
        function initTrendSelect2($container) {
            $container.find('select.trend-select2').each(function () {
                var $el = $(this);
                if ($el.data('select2')) {
                    $el.select2('destroy');
                }
                var $modal = $el.closest('.modal');
                $el.select2({
                    width: '100%',
                    allowClear: !$el.prop('required'),
                    placeholder: $el.data('placeholder') || 'Seleccione',
                    minimumResultsForSearch: 0,
                    dropdownParent: $modal.length ? $modal : $(document.body),
                    language: {
                        noResults: function () { return 'Sin resultados'; },
                        searching: function () { return 'Buscando...'; }
                    }
                });
            });
        }

        $(function () {
            initTrendSelect2($('#idContentFilter'));

            $('#idBtnFilter').click(function () {
                $('#idContentFilter').slideToggle('slow', function () {
                    if ($('#idContentFilter').is(':visible')) {
                        initTrendSelect2($('#idContentFilter'));
                    }
                });
            });

            $('#modalCreateSetting').on('shown.bs.modal', function () {
                initTrendSelect2($(this));
            });

            $('#trendSettingsTable').DataTable({
                paging: true,
                columnDefs: [
                    { targets: '_all', className: 'text-center' }
                ],
                language: {
                    lengthMenu: 'Mostrar _MENU_ registros',
                    info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
                    zeroRecords: 'Sin resultados',
                    search: 'Buscar:',
                    paginate: { next: 'Siguiente', previous: 'Anterior' }
                }
            });
        });

        document.querySelectorAll('.btn-edit-setting').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var jsonUrl = this.dataset.jsonUrl;
                var updateUrl = this.dataset.updateUrl;

                fetch(jsonUrl, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(function (r) {
                        if (!r.ok) {
                            throw new Error('No se pudo cargar la configuración (HTTP ' + r.status + ')');
                        }
                        return r.json();
                    })
                    .then(function (data) {
                        document.getElementById('formEditSetting').action = updateUrl;

                        var $modal = $('#modalEditSetting');
                        $modal.off('shown.bs.modal.trendEdit').on('shown.bs.modal.trendEdit', function () {
                            initTrendSelect2($modal);
                            $('#edit_test_value_id').val(data.test_value_id).trigger('change');
                            $('#edit_component_id').val(data.component_id || '').trigger('change');
                            $('#edit_equipment_id').val(data.equipment_id || '').trigger('change');
                            $('#edit_direction').val(data.direction).trigger('change');
                            document.getElementById('edit_variation_percent_threshold').value = data.variation_percent_threshold;
                            document.getElementById('edit_trend_points_required').value = data.trend_points_required;
                            document.getElementById('edit_std_dev_factor').value = data.std_dev_factor;
                            document.getElementById('edit_min_absolute_delta').value = data.min_absolute_delta || '';
                            document.getElementById('edit_min_critical_ratio_for_trend_alarm').value = data.min_critical_ratio_for_trend_alarm;
                            document.getElementById('edit_caution_limit').value = data.caution_limit || '';
                            document.getElementById('edit_alert_limit').value = data.alert_limit || '';
                            document.getElementById('edit_critical_limit').value = data.critical_limit || '';
                            document.getElementById('edit_enabled').checked = !!data.enabled;
                        });

                        $modal.modal('show');
                    })
                    .catch(function (err) {
                        alert(err.message || 'Error al cargar la configuración para editar.');
                    });
            });
        });
    </script>
@endsection