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

@section('css')
<link href="{{ asset('assets/minimalpro/vendor_components/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
<style>
    .conditions-builder { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #fafafa; }
    .conditions-table { width: 100%; border-collapse: collapse; margin: 0; background: #fff; }
    .conditions-table thead tr { background: #f0f4f8; }
    .conditions-table thead th { padding: 7px 10px; font-size: 11px; color: #555; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border-bottom: 2px solid #dde1e7; white-space: nowrap; }
    .conditions-table tbody tr { border-bottom: 1px solid #f0f0f0; }
    .conditions-table tbody tr:last-child { border-bottom: none; }
    .conditions-table tbody tr:hover { background: #f9fbff; }
    .conditions-table tbody td { padding: 5px 6px; vertical-align: middle; }
    .conditions-table select.form-control { font-size: 13px; height: 30px; padding: 3px 8px; border-radius: 3px; }
    .conditions-table .operator-col { width: 80px; }
    .conditions-table .refval-col { width: 90px; }
    .conditions-table .connector-col { width: 110px; }
    .conditions-table .action-col { width: 40px; text-align: center; }
    .conditions-builder-add { padding: 8px 10px; background: #f7f7f7; border-top: 1px solid #eee; }
    .badge-priority { display: inline-block; min-width: 28px; text-align: center; }
    .dataTables_wrapper .dataTables_filter { display: none; }
    .modal .select2-container { z-index: 9999; }
    .modal .select2-dropdown { z-index: 10000; }
</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.comments.index') }}">Comentarios</a>
                </li>
                <li class="breadcrumb-item active">Causas</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

            <div class="row">
                <div class="col-lg-12">
                    <div class="row mb-4 text-center">
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <h6 class="text-muted mb-1">Total Causas</h6>
                                    <h3 class="fw-bold mb-0">{{ $causes_all }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <h6 class="text-muted mb-1">Activas</h6>
                                    <h3 class="fw-bold mb-0">{{ $causes_active }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Filtro --}}
                    <form action="{{ route('administrator.causes.index') }}" method="get" class="mb-3">
                        <div class="row g-2 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label">Categoría</label>
                                <input type="text" name="category" class="form-control" value="{{ request()->category }}" placeholder="Filtrar por categoría">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Estado</label>
                                <select name="status" class="form-control">
                                    <option value="">Todos</option>
                                    <option value="1" {{ request()->status === '1' ? 'selected' : '' }}>Activo</option>
                                    <option value="0" {{ request()->status === '0' ? 'selected' : '' }}>Inactivo</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-info btn-sm"><i class="fa fa-search"></i> Buscar</button>
                                <a href="{{ route('administrator.causes.index') }}" class="btn btn-danger btn-sm"><i class="fa fa-refresh"></i></a>
                            </div>
                        </div>
                    </form>

                    <div class="box">
                        <div class="box-header with-border">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h4 class="box-title">Causas</h4>
                                </div>
                                <div class="col-6">
                                    <div class="box-controls pull-right">
                                        <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#idAddCause">
                                            <i class="fa fa-plus"></i> Nueva causa
                                        </button>
                                        &nbsp;
                                        <a href="{{ route('administrator.consequences.index') }}" class="btn btn-sm btn-warning">
                                            <i class="fa fa-list"></i> Consecuencias
                                        </a>
                                        &nbsp;
                                        <a href="{{ route('administrator.comments.index') }}" class="btn btn-sm btn-default">
                                            <i class="fa fa-comments"></i> Comentarios
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <table class="table table-sm table-hover" id="causesTable">
                                <thead>
                                    <tr>
                                        <th class="text-center">Prioridad</th>
                                        <th class="text-center">Código</th>
                                        <th class="text-center">Causa</th>
                                        <th class="text-center">Categoría</th>
                                        <th class="text-center">Subcategoría</th>
                                        <th class="text-center">Condiciones</th>
                                        <th class="text-center">Comentario estándar</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @forelse ($causes as $causa)
                                        <tr>
                                            <td>
                                                <span class="badge badge-primary badge-priority">{{ $causa->priority }}</span>
                                            </td>
                                            <td><strong>{{ $causa->code }}</strong></td>
                                            <td>{{ $causa->cause }}</td>
                                            <td>{{ $causa->category }}</td>
                                            <td>{{ $causa->subcategory }}</td>
                                            <td style="max-width:260px;font-size:12px;">
                                                @if (!empty($causa->conditions))
                                                    @foreach ($causa->conditions as $i => $cond)
                                                        <span class="badge badge-light border">{{ $cond['test_name'] ?? '?' }} @if(!empty($cond['operator']))<strong>{{ $cond['operator'] }}</strong> {{ $cond['ref_value'] ?? '' }} @endif <em>{{ $cond['level'] ?? '' }}</em></span>
                                                        @if (!empty($cond['connector']))
                                                            <strong class="text-muted">{{ $cond['connector'] }}</strong>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td style="max-width:200px;">{{ Str::limit($causa->standard_comment, 80) }}</td>
                                            <td>
                                                @if ($causa->status == 1)
                                                    <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 btnEditCause" data-id="{{ $causa->id }}">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="9" class="text-center text-muted">Sin resultados</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    {{-- =================== Modal Crear =================== --}}
    <div class="modal fade" id="idAddCause" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Nueva Causa</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('administrator.causes.store') }}" method="post" id="formAddCause">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label">Causa *</label>
                                <input type="text" name="cause" class="form-control" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Código *</label>
                                <input type="text" name="cause_code" class="form-control" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Categoría *</label>
                                <input type="text" name="category" class="form-control" required>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Subcategoría *</label>
                                <input type="text" name="subcategory" class="form-control" required>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Comentario estándar *</label>
                                <textarea name="standard_comment" class="form-control" rows="2" required></textarea>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Prioridad *</label>
                                <input type="number" name="priority" class="form-control" min="1" max="999" value="1" required>
                            </div>
                            <div class="col-md-9">
                                <label class="form-label">Consecuencia asociada</label>
                                <select name="consequence_id" class="form-control">
                                    <option value="">— Sin consecuencia —</option>
                                    @foreach($consequences as $cons)
                                        <option value="{{ $cons->id }}">{{ $cons->code }} – {{ $cons->technical_consequence }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">System Type <small class="text-muted">(vacío = todos)</small></label>
                                <select name="system_type_ids[]" class="form-control cause-scope-select" data-placeholder="Todos los system types" multiple>
                                    @foreach($systemTypes as $systemType)
                                        <option value="{{ $systemType->id }}">{{ $systemType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Componente activo <small class="text-muted">(vacío = todos)</small></label>
                                <select name="component_location_ids[]" class="form-control cause-scope-select" data-placeholder="Todos los componentes" multiple>
                                    @foreach($componentLocations as $comp)
                                        <option value="{{ $comp->id }}">{{ $comp->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Constructor de condiciones --}}
                            <div class="col-md-12">
                                <label class="form-label font-weight-bold">Condiciones</label>
                                <div id="conditionsBuilderNew" class="conditions-builder">
                                    <table class="conditions-table">
                                        <thead>
                                            <tr>
                                                <th>Test de laboratorio</th>
                                                <th>Nivel</th>
                                                <th class="operator-col operator-th" style="display:none">Operador</th>
                                                <th class="refval-col refval-th" style="display:none">Valor ref.</th>
                                                <th class="connector-col">Conector</th>
                                                <th class="action-col"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="conditionsBodyNew"></tbody>
                                    </table>
                                    <div class="conditions-builder-add">
                                        <button type="button" id="btnAddCondNew" class="btn btn-xs btn-default" onclick="addConditionRow('new')">
                                            <i class="fa fa-plus"></i> Agregar condición
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 text-right">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-info">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- =================== Modal Editar =================== --}}
    <div class="modal fade" id="idEditCause" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Causa</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="formEditCause" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label">Causa *</label>
                                <input type="text" id="edit_cause" name="cause" class="form-control" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Código *</label>
                                <input type="text" id="edit_cause_code" name="cause_code" class="form-control" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Categoría *</label>
                                <input type="text" id="edit_category" name="category" class="form-control" required>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">Subcategoría *</label>
                                <input type="text" id="edit_subcategory" name="subcategory" class="form-control" required>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Comentario estándar *</label>
                                <textarea id="edit_standard_comment" name="standard_comment" class="form-control" rows="2" required></textarea>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Prioridad *</label>
                                <input type="number" id="edit_priority" name="priority" class="form-control" min="1" max="999" required>
                            </div>
                            <div class="col-md-9">
                                <label class="form-label">Consecuencia asociada</label>
                                <select id="edit_consequence_id" name="consequence_id" class="form-control">
                                    <option value="">— Sin consecuencia —</option>
                                    @foreach($consequences as $cons)
                                        <option value="{{ $cons->id }}">{{ $cons->code }} – {{ $cons->technical_consequence }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">System Type <small class="text-muted">(vacío = todos)</small></label>
                                <select id="edit_system_type_ids" name="system_type_ids[]" class="form-control cause-scope-select" data-placeholder="Todos los system types" multiple>
                                    @foreach($systemTypes as $systemType)
                                        <option value="{{ $systemType->id }}">{{ $systemType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Componente activo <small class="text-muted">(vacío = todos)</small></label>
                                <select id="edit_component_location_ids" name="component_location_ids[]" class="form-control cause-scope-select" data-placeholder="Todos los componentes" multiple>
                                    @foreach($componentLocations as $comp)
                                        <option value="{{ $comp->id }}">{{ $comp->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Constructor de condiciones --}}
                            <div class="col-md-12">
                                <label class="form-label font-weight-bold">Condiciones</label>
                                <div id="conditionsBuilderEdit" class="conditions-builder">
                                    <table class="conditions-table">
                                        <thead>
                                            <tr>
                                                <th>Test de laboratorio</th>
                                                <th>Nivel</th>
                                                <th class="operator-col operator-th" style="display:none">Operador</th>
                                                <th class="refval-col refval-th" style="display:none">Valor ref.</th>
                                                <th class="connector-col">Conector</th>
                                                <th class="action-col"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="conditionsBodyEdit"></tbody>
                                    </table>
                                    <div class="conditions-builder-add">
                                        <button type="button" id="btnAddCondEdit" class="btn btn-xs btn-default" onclick="addConditionRow('edit')">
                                            <i class="fa fa-plus"></i> Agregar condición
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 mt-2">
                                <div class="form-check">
                                    <input type="checkbox" id="edit_cause_status" name="status" class="form-check-input" value="1">
                                    <label for="edit_cause_status" class="form-check-label">Activo</label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 text-right">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-info">Actualizar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script src="{{ asset('assets/minimalpro/vendor_components/select2/dist/js/select2.js') }}"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script>
    function initCauseScopeSelects($modal) {
        if (!$.fn.select2) return;
        var $parent = $modal && $modal.length ? $modal : $(document.body);
        $parent.find('.cause-scope-select').each(function() {
            var $el = $(this);
            if ($el.data('select2')) {
                $el.select2('destroy');
            }
            $el.select2({
                width: '100%',
                allowClear: true,
                placeholder: $el.attr('data-placeholder') || 'Seleccione',
                minimumResultsForSearch: 0,
                dropdownParent: $parent,
                language: {
                    noResults: function() { return 'No se encontraron resultados'; },
                    searching: function() { return 'Buscando...'; }
                }
            });
        });
    }

    $(function () {
        $('#idAddCause').on('shown.bs.modal', function() {
            initCauseScopeSelects($(this));
        });
        $('#idEditCause').on('shown.bs.modal', function() {
            initCauseScopeSelects($(this));
        });

        $('#causesTable').DataTable({
            language: {
                lengthMenu: 'Mostrar _MENU_ registros',
                info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
                infoEmpty: 'Mostrando 0 a 0 de 0 registros',
                zeroRecords: 'Sin resultados',
                search: 'Buscar:',
                paginate: {
                    first: 'Primero',
                    last: 'Último',
                    next: 'Siguiente',
                    previous: 'Anterior'
                }
            },
            columnDefs: [{ orderable: false, targets: [5, 8] }]
        });
    });
</script>
<script>
    const testValues = {!! json_encode($testValues) !!};

    const LEVELS = ['Alto', 'Normal', 'Bajo', 'Presente', 'Positivo', 'Negativo', 'Anormal', 'Muy alto', 'Ausente'];
    const LEVELS_WITH_OPERATOR = ['Alto', 'Normal', 'Bajo', 'Anormal', 'Muy alto'];
    const CONNECTORS = ['AND', 'OR'];

    function toggleOperatorCols(tr, level) {
        const show = LEVELS_WITH_OPERATOR.includes(level);
        const opTd  = tr.querySelector('.operator-td');
        const refTd = tr.querySelector('.refval-td');
        if (opTd)  opTd.style.display  = show ? '' : 'none';
        if (refTd) refTd.style.display = show ? '' : 'none';
        if (!show) {
            if (opTd)  { const s = opTd.querySelector('select');  if (s) s.value = ''; }
            if (refTd) { const i = refTd.querySelector('input');   if (i) i.value = ''; }
        }
        // Mostrar u ocultar las columnas del encabezado
        const body  = tr.closest('tbody');
        const table = body ? body.closest('table') : null;
        if (table) {
            const anyVisible = Array.from(body.querySelectorAll('.operator-td'))
                .some(function(td) { return td.style.display !== 'none'; });
            table.querySelectorAll('.operator-th').forEach(function(th) { th.style.display = anyVisible ? '' : 'none'; });
            table.querySelectorAll('.refval-th').forEach(function(th)   { th.style.display = anyVisible ? '' : 'none'; });
        }
    }

    function buildTestSelect(prefix, index, selectedId) {
        let html = `<select name="${prefix}[${index}][test_value_id]" class="form-control" required>
            <option value="">— Seleccione test —</option>`;
        testValues.forEach(function(tv) {
            const sel = tv.id == selectedId ? 'selected' : '';
            html += `<option value="${tv.id}" ${sel}>${tv.name}${tv.reference ? ' (' + tv.reference + ')' : ''}</option>`;
        });
        html += '</select>';
        return html;
    }

    function buildLevelSelect(prefix, index, selectedLevel) {
        let html = `<select name="${prefix}[${index}][level]" class="form-control" required>
            <option value="">— Nivel —</option>`;
        LEVELS.forEach(function(lv) {
            const sel = lv === selectedLevel ? 'selected' : '';
            html += `<option value="${lv}" ${sel}>${lv}</option>`;
        });
        html += '</select>';
        return html;
    }

    function buildOperatorSelect(prefix, index, selectedOp) {
        const ops = ['>', '<', '>=', '<=', '=', '!='];
        let html = `<select name="${prefix}[${index}][operator]" class="form-control">
            <option value="">—</option>`;
        ops.forEach(function(op) {
            const sel = op === selectedOp ? 'selected' : '';
            html += `<option value="${op}" ${sel}>${op}</option>`;
        });
        html += '</select>';
        return html;
    }

    function buildConnectorSelect(prefix, index, selectedConn) {
        let html = `<select name="${prefix}[${index}][connector]" class="form-control">
            <option value="">— fin —</option>`;
        CONNECTORS.forEach(function(cn) {
            const sel = cn === selectedConn ? 'selected' : '';
            html += `<option value="${cn}" ${sel}>${cn}</option>`;
        });
        html += '</select>';
        return html;
    }

    function updateAddButton(context) {
        const bodyId = context === 'new' ? 'conditionsBodyNew' : 'conditionsBodyEdit';
        const btnId  = context === 'new' ? 'btnAddCondNew'      : 'btnAddCondEdit';
        const body = document.getElementById(bodyId);
        const rows = body.querySelectorAll('tr');
        const btn  = document.getElementById(btnId);
        if (!btn) return;
        if (rows.length === 0) {
            btn.disabled = false;
            return;
        }
        const lastConnector = rows[rows.length - 1].querySelector('select[name*="[connector]"]');
        btn.disabled = lastConnector && lastConnector.value === '';
    }

    function addConditionRow(context, cond) {
        const bodyId = context === 'new' ? 'conditionsBodyNew' : 'conditionsBodyEdit';
        const body = document.getElementById(bodyId);
        const rows = body.querySelectorAll('tr');

        // Bloquear si el último conector es fin
        if (rows.length > 0) {
            const lastConn = rows[rows.length - 1].querySelector('select[name*="[connector]"]');
            if (lastConn && lastConn.value === '') return;
        }

        const index = rows.length;
        const tr = document.createElement('tr');
        const refVal = cond ? (cond.ref_value !== undefined ? cond.ref_value : '') : '';
        tr.innerHTML =
            `<td>${buildTestSelect('conditions', index, cond ? cond.test_value_id : '')}</td>` +
            `<td>${buildLevelSelect('conditions', index, cond ? cond.level : '')}</td>` +
            `<td class="operator-col operator-td" style="display:none">${buildOperatorSelect('conditions', index, cond ? cond.operator : '')}</td>` +
            `<td class="refval-col refval-td" style="display:none"><input type="number" name="conditions[${index}][ref_value]" class="form-control" style="height:30px;font-size:13px;padding:3px 6px" value="${refVal}" step="any" placeholder="0"></td>` +
            `<td class="connector-col">${buildConnectorSelect('conditions', index, cond ? cond.connector : '')}</td>` +
            `<td class="action-col">
                <button type="button" class="btn btn-xs btn-danger" onclick="this.closest('tr').remove(); reindexConditions('${context}'); updateAddButton('${context}')">
                    <i class="fa fa-trash"></i>
                </button>
            </td>`;
        body.appendChild(tr);

        // Inicializar Select2 en el select de test
        const modalEl = tr.closest('.modal');
        $(tr).find('select[name*="[test_value_id]"]').select2({
            placeholder: 'Seleccione test',
            allowClear: true,
            width: '100%',
            minimumResultsForSearch: 0,
            dropdownParent: modalEl ? $(modalEl) : $(document.body),
            language: {
                noResults: function() { return 'No se encontraron resultados'; },
                searching: function() { return 'Buscando...'; }
            }
        });

        // Visibilidad inicial de operador/valor ref según nivel
        const levelSel = tr.querySelector('select[name*="[level]"]');
        toggleOperatorCols(tr, levelSel ? levelSel.value : '');
        levelSel && levelSel.addEventListener('change', function() {
            toggleOperatorCols(tr, this.value);
        });

        // Escuchar cambios en el conector recién agregado
        tr.querySelector('select[name*="[connector]"]').addEventListener('change', function() {
            updateAddButton(context);
        });

        updateAddButton(context);
    }

    function reindexConditions(context) {
        const bodyId = context === 'new' ? 'conditionsBodyNew' : 'conditionsBodyEdit';
        const body = document.getElementById(bodyId);
        body.querySelectorAll('tr').forEach(function(row, i) {
            row.querySelectorAll('select, input[name]').forEach(function(el) {
                el.name = el.name.replace(/\[\d+\]/, '[' + i + ']');
            });
        });
    }

    document.querySelectorAll('.btnEditCause').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            fetch(`/administrator/causes/${id}/json`)
                .then(function(res) { return res.json(); })
                .then(function(data) {
                    document.getElementById('edit_cause').value = data.cause || '';
                    document.getElementById('edit_cause_code').value = data.code;
                    document.getElementById('edit_category').value = data.category;
                    document.getElementById('edit_subcategory').value = data.subcategory;
                    document.getElementById('edit_standard_comment').value = data.standard_comment;
                    document.getElementById('edit_priority').value = data.priority;
                    document.getElementById('edit_cause_status').checked = data.status == 1;
                    const consSelect = document.getElementById('edit_consequence_id');
                    if (consSelect) consSelect.value = data.consequence_id || '';

                    const sysSelect = document.getElementById('edit_system_type_ids');
                    if (sysSelect) {
                        const sysValues = data.system_type_ids && data.system_type_ids.length > 0
                            ? data.system_type_ids
                            : (data.system_type_id ? [data.system_type_id] : []);
                        $(sysSelect).val(sysValues).trigger('change');
                    }

                    const compSelect = document.getElementById('edit_component_location_ids');
                    if (compSelect) {
                        const compValues = data.component_location_ids && data.component_location_ids.length > 0
                            ? data.component_location_ids
                            : (data.component_location_id ? [data.component_location_id] : []);
                        $(compSelect).val(compValues).trigger('change');
                    }

                    const body = document.getElementById('conditionsBodyEdit');
                    // Destruir instancias Select2 antes de limpiar
                    $(body).find('select[name*="[test_value_id]"]').each(function() {
                        if ($(this).data('select2')) $(this).select2('destroy');
                    });
                    body.innerHTML = '';
                    if (data.conditions && data.conditions.length > 0) {
                        data.conditions.forEach(function(cond) {
                            addConditionRow('edit', cond);
                        });
                    }
                    updateAddButton('edit');

                    document.getElementById('formEditCause').action = `/administrator/causes/update/${id}`;
                    $('#idEditCause').modal('show');
                });
        });
    });

    document.getElementById('idAddCause').addEventListener('show.bs.modal', function() {
        const body = document.getElementById('conditionsBodyNew');
        if (body.querySelectorAll('tr').length === 0) {
            addConditionRow('new');
        }
        updateAddButton('new');
    });
</script>
@endsection