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

@section('style')
<style media="screen">
    .testSystemType {
        border: 1px solid #d2d6de;
        border-radius: 5px;
        padding: 15px;
    }

    .wth100 {
        width: 100%;
    }
    
    .card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }
    
    .card:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
</style>
@endsection

@section('content')
<div class="content-wrapper">
    <section class="content-header">
        {{-- <h1>Parametros</h1> --}}
        <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 active">Parametros</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" aria-label="Close">
                <span aria-hidden="true">&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" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif
        @if($errors->any())
        <div class="alert alert-danger">
            @foreach($errors->all() as $error)
            - {{$error}} <br>
            @endforeach
        </div>
        @endif
        
        @if(Auth::user()->id_role == 1)
        {{-- Vista para Superadmin --}}
        <div class="row">
            <div class="col-md-4">
                <div class="box border">
                    <div class="box-header with-border p-4">
                        <div class="row align-items-center">
                            <div class="col-7">
                                <h5 class="box-title font-weight-bold mb-0">Espacios de Trabajo</h5>
                            </div>
                            <div class="col-5 text-right">
                                <button type="button" class="btn btn-success btn-sm" id="btnCreateWorkspace">
                                    <i class="fa fa-plus" aria-hidden="true"></i> Crear Espacio
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="box-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-center p-2">Espacio</th>
                                        <th class="text-center p-2">Referencia</th>
                                        <th class="text-center p-2">Estado</th>
                                        <th class="text-center p-2" style="width: 120px;">Acción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($laboratoryTests as $test)
                                    <tr style="cursor: pointer;" class="workspace-row" data-id="{{ $test->id }}">
                                        <td class="text-left p-2 align-content-center">
                                            <strong>{{ $test->name }}</strong>
                                            @if($test->equipmentDetail && $test->equipmentDetail->result_type)
                                                <br><small class="text-muted">
                                                    @if($test->equipmentDetail->result_type == 'automatic')
                                                        <i class="fa fa-cog"></i> Automático
                                                    @else
                                                        <i class="fa fa-hand-paper-o"></i> Manual
                                                    @endif
                                                </small>
                                            @endif
                                        </td>
                                        <td class="text-center p-2 align-content-center">
                                            {{ $test->equipmentDetail->reference ?? '-' }}
                                        </td>
                                        <td class="text-center p-2 align-content-center">
                                            <span class="badge badge-{{ $test->state == 1 ? 'success' : 'danger' }} rounded">
                                                {{ $test->state == 1 ? 'Activo' : 'Inactivo' }}
                                            </span>
                                        </td>
                                        <td class="text-center p-2 align-content-center">
                                            <button type="button" class="btn btn-primary btn-sm" onclick="loadWorkspaceDetail({{ $test->id }}, '{{ $test->name }}')">
                                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                {{-- Vista por defecto --}}
                <div class="box border" id="workspaceDefaultBox">
                    <div class="box-header with-border">
                        <h5 class="box-title font-weight-bold">Información del Espacio de Trabajo</h5>
                    </div>
                    <div class="box-body">
                        <b>Seleccione un espacio de trabajo para ver su información</b>
                    </div>
                </div>

                {{-- Detalle del Espacio de Trabajo --}}
                <div class="box border" style="display: none;" id="workspaceDetailBox">
                    <div class="box-header with-border">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <h4 class="box-title font-weight-bold mb-0" id="workspaceDetailTitle">Espacio de Trabajo</h4>
                            </div>
                            <div class="col-6 text-right">
                                <button type="button" class="btn btn-info btn-sm" id="btnEditWorkspace" title="Editar Espacio">
                                    <i class="fa fa-pencil" aria-hidden="true"></i> Editar
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <input type="hidden" id="selectedWorkspaceId">
                        
                        {{-- Información del Equipo --}}
                        <div id="equipmentInfoCard" style="background: #f8f9fa;">
                            <div class="card-body p-7">
                                <h6 class="font-weight-bold mb-2"><i class="fa fa-info-circle"></i> Información del Equipo</h6>
                                <div class="row">
                                    <div class="col-md-3">
                                        <small class="text-muted">Marca:</small>
                                        <p class="mb-1" id="equipmentBrand">-</p>
                                    </div>
                                    <div class="col-md-3">
                                        <small class="text-muted">Modelo:</small>
                                        <p class="mb-1" id="equipmentModel">-</p>
                                    </div>
                                    <div class="col-md-3">
                                        <small class="text-muted">Referencia:</small>
                                        <p class="mb-1" id="equipmentReference">-</p>
                                    </div>
                                    <div class="col-md-3">
                                        <small class="text-muted">Tipo de Resultado:</small>
                                        <p class="mb-1" id="equipmentResultType">-</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Sección de rutas solo para espacios automáticos --}}
                        <div id="pathsSection" style="display: none;">
                            <div class="row mt-15 mb-2 align-items-center">
                                <div class="col-md-6">
                                    <b class="font-weight-bold"><i class="fa fa-folder"></i> Rutas de Importación</b>
                                </div>
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-primary btn-sm float-right" id="btnAddPath">
                                        <i class="fa fa-plus" aria-hidden="true"></i> Agregar Ruta
                                    </button>
                                </div>
                            </div>
                            
                            {{-- Contenedor de cards para rutas --}}
                            <div id="pathsCardsContainer" class="row">
                                <div class="col-12 text-center py-5">
                                    <p class="text-muted">No hay rutas configuradas</p>
                                </div>
                            </div>
                            
                            {{-- Botón de guardar rutas --}}
                            <div class="text-right mt-10">
                                <button type="button" class="btn btn_admin" onclick="saveWorkspaceChanges()">
                                    <i class="fa fa-save" aria-hidden="true"></i> Guardar Rutas
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @else
        {{-- Vista para otros roles --}}
        <div class="row">
            <div class="col-md-7">
                <div class="box">
                    <div class="box-header with-border">
                        <h5 class="box-title font-weight-bold">Equipos de laboratorio</h5>
                    </div>
                    <div class="box-body p-0">
                        <div class="media-list media-list-hover media-list-divided">
                            @foreach($laboratoryTests as $test)
                            <div class="media media-single" href="javascript:;">
                                <div class="row text-center align-items-center" style="width: 100%;">
                                    <div class="col">
                                        <span class="title ftz-15">{{ $test->name }}</span>
                                    </div>
                                    <div class="col">
                                        <p class="mb-5">Cantidad de muestras</p>
                                        <span>{{$test->reference ?? 0}}</span>
                                    </div>
                                    <div class="col">
                                        <p class="mb-5">Maximo de muestras</p>
                                        <span>{{$test->extra ?? 0}}</span>
                                    </div>
                                    <div class="col">
                                        @if(Auth::user()->id_role == 1 || Auth::user()->id_role == 6)
                                        <button type="submit" class="btn btn-info btn-sm" onclick="openChangeMaxModal({{ $test->id }})">
                                            <i class="fa fa-pencil" aria-hidden="true"></i>
                                        </button>
                                        @endif
                                        <button type="submit" class="btn btn-dark btn-sm" onclick="loadTestTable({{ $test->id }})">
                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                {{-- Defaults --}}
                <div class="box boxParameters" id="defaultBox">
                    <div class="box-header with-border">
                        <h4 class="box-title font-weight-bold">Historial de calibraciones</h4>
                    </div>
                    <div class="box-body">
                        <b>Seleccione un equipo de laboratorio</b>
                    </div>
                </div>

                {{-- Lubricant Brand --}}
                <div class="box boxParameters" style="display: none;" id="history">
                    <div class="box-header with-border">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <h4 class="box-title font-weight-bold">Historial de calibraciones</h4>
                            </div>
                            <div class="col text-right">
                                <button class="btn btn_admin btnUploadCalibration" data-toggle="modal" data-target="#modalUploadFile"><i class="fa fa-upload" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <table class="table table-sm table-hover table-responsive">
                            <thead>
                                <tr>
                                    <th class="text-center">Fecha</th>
                                    <!-- <th class="text-center">Estado</th> -->
                                    <th class="text-center">Acción</th>
                                </tr>
                            </thead>
                            <tbody class="text-center" id="historyList">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </section>
</div>

<div class="modal fade" id="modalChangeMax" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Cambiar máximo</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Máximo de muestras</label>
                    <input type="hidden" id="idParam">
                    <input type="number" id="maxMuestras" class="form-control" placeholder="Número de muestras">
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn btn_admin btn-block btnSaveMax"><i class="fa fa-floppy-o"></i> Guardar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalUploadFile" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 100%; width: 90vw;">
        <form action="{{route('administrator.import.test.store')}}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="mySmallModalLabel">Subir soporte</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="from-group">
                        <input type="hidden" name="sample_id">
                        <input type="hidden" name="test_id" id="inputTestId">
                        <input type="hidden" name="textFileData" id="inputFileData">
                        <input type="file" name="textFile" class="form-control inputTextFile" placeholder="Archivo de muestra" required>
                    </div>
                    <div class="mt-20" style="overflow: auto;">
                        <table class="table table-sm text-center table-bordered">
                            <thead class="text-center">
                                <tr id="headerTableFile">

                                </tr>
                            </thead>
                            <tbody class="text-center">
                                <tr id="bodyTableFile">

                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer p-20">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-dark" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i> Cerrar</button>
                        </div>
                        <div class="col text-right">
                            <button type="submit" name="button" class="btn btn-danger" value="rejectedCalibrate"><i class="fa fa-trash" aria-hidden="true"></i> Rechazar</button>
                            <button type="submit" name="button" class="btn btn-success" value="approvedCalibrate"><i class="fa fa-check" aria-hidden="true"></i> Aprobar</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

{{-- Modal para agregar nueva ruta --}}
<div class="modal fade" id="modalAddPath" role="dialog" aria-labelledby="modalAddPathLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header p-20">
                <h5 class="modal-title" id="modalAddPathLabel">Nueva Ruta de Importación</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="pathName">Nombre: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="pathName" placeholder="Ej: Importación Automática">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="pathTemplate">Plantilla a usar: <span class="text-danger">*</span></label>
                            <select class="form-control hg_select select2" id="pathTemplate">
                                <option value="">Seleccione una plantilla</option>
                                @foreach($templates as $template)
                                    <option value="{{ $template->id }}">{{ $template->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="pathValue">Ruta del directorio: <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="pathValue" placeholder="Ej: /var/www/uploads/lab1">
                    <small class="form-text text-muted">Ingrese la ruta completa del directorio donde se encuentran los archivos</small>
                </div>

                <hr>
                <h6 class="font-weight-bold">Configuración de Archivo</h6>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="pathFileSource">Origen del archivo: <span class="text-danger">*</span></label>
                            <select class="form-control hg_select select2" id="pathFileSource">
                                <option value="directory_latest">Último archivo del directorio (automático)</option>
                                <option value="specific_file">Archivo específico (nombre fijo)</option>
                            </select>
                            <small class="form-text text-muted" id="fileSourceHint">
                                <strong>Último archivo:</strong> Busca automáticamente el archivo más reciente en el directorio (ideal para FTIR).
                            </small>
                        </div>
                    </div>
                </div>
                
                <div class="row" id="specificFileConfig" style="display: none;">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="pathFilePattern">Nombre del archivo: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="pathFilePattern" placeholder="Ej: results_2024.txt, data_export.csv">
                            <small class="form-text text-muted">Ingrese el nombre exacto del archivo (sin comodines)</small>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="pathArchiveTemplate">Carpeta de archivado (archivos procesados):</label>
                    <input type="text" class="form-control" id="pathArchiveTemplate" placeholder="Ej: /var/www/uploads/history">
                    <small class="form-text text-muted">Ingrese la ruta completa de la carpeta donde se archivarán los archivos procesados</small>
                </div>
            </div>
            <div class="modal-footer p-20">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn_admin" id="btnSavePath">
                    <i class="fa fa-plus"></i> <span id="btnSavePathText">Añadir Ruta</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para crear/editar espacio de trabajo -->
<div class="modal fade" id="modalWorkspace" role="dialog" aria-labelledby="modalWorkspaceLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header p-20">
                <h5 class="modal-title" id="modalWorkspaceLabel">Crear Espacio de Trabajo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="workspaceId">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="workspaceName">Nombre del Espacio: <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="workspaceName" placeholder="Ej: Laboratorio Principal">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="workspaceResultType">Tipo de Resultado: <span class="text-danger">*</span></label>
                            <select class="form-control" id="workspaceResultType">
                                <option value="">Seleccione un tipo</option>
                                <option value="automatic">Automático</option>
                                <option value="manual">Manual</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="workspaceState">Estado: <span class="text-danger">*</span></label>
                            <select class="form-control" id="workspaceState">
                                <option value="1">Activo</option>
                                <option value="0">Inactivo</option>
                            </select>
                        </div>
                    </div>
                </div>

                <hr>
                <h6 class="font-weight-bold">Información del Equipo</h6>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="workspaceBrand">Marca:</label>
                            <input type="text" class="form-control" id="workspaceBrand" placeholder="Ej: PerkinElmer">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="workspaceModel">Modelo:</label>
                            <input type="text" class="form-control" id="workspaceModel" placeholder="Ej: Spectrum Two">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="workspaceReference">Referencia:</label>
                            <input type="text" class="form-control" id="workspaceReference" placeholder="Ej: LAB-001">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer p-20">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fa fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn_admin" id="btnSaveWorkspace">
                    <i class="fa fa-save"></i> <span id="btnSaveWorkspaceText">Crear Espacio</span>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection
@section('js')

<!-- Superadmin workspace management -->
<script type="text/javascript">
    // Variables globales para rutas temporales
    let tempPaths = [];
    let currentWorkspaceId = null;
    let currentWorkspaceName = '';
    let editingPathIndex = null; // Variable para saber si estamos editando

    // Manejar cambio de file_source
    $('#pathFileSource').on('change', function() {
        const fileSource = $(this).val();
        
        if (fileSource === 'specific_file') {
            // Mostrar campo de nombre de archivo
            $('#specificFileConfig').show();
            $('#pathFilePattern').prop('required', true);
            $('#fileSourceHint').html('<strong>Archivo específico:</strong> El sistema buscará un archivo con el nombre exacto que especifiques.');
        } else if (fileSource === 'directory_latest') {
            // Ocultar campo de nombre de archivo
            $('#specificFileConfig').hide();
            $('#pathFilePattern').prop('required', false);
            $('#pathFilePattern').val(''); // Limpiar valor
            $('#fileSourceHint').html('<strong>Último archivo:</strong> Busca automáticamente el archivo más reciente en el directorio (ideal para FTIR).');
        }
    });

    // Cargar detalle del espacio de trabajo
    function loadWorkspaceDetail(workspaceId, workspaceName) {
        currentWorkspaceId = workspaceId;
        currentWorkspaceName = workspaceName;
        
        $.ajax({
            type: 'get',
            url: '{{route("administrator.laboratoryTest.test")}}',
            data: { "id": workspaceId },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
                $(".content_loading").fadeOut("slow");
                
                // Mostrar box de detalle
                $('#workspaceDefaultBox').hide();
                $('#workspaceDetailBox').show();
                
                // Actualizar título
                $('#workspaceDetailTitle').text(workspaceName);
                $('#selectedWorkspaceId').val(workspaceId);
                
                // Cargar rutas existentes desde el campo data
                if (response.data && response.data.data) {
                    try {
                        // Si data es un string JSON, parsearlo
                        tempPaths = typeof response.data.data === 'string' ?
                                    JSON.parse(response.data.data) :
                                    response.data.data;
                        
                        // Asegurar que tempPaths sea un array
                        if (!Array.isArray(tempPaths)) {
                            tempPaths = [];
                        }
                    } catch (e) {
                        console.error('Error parsing data field:', e);
                        tempPaths = [];
                    }
                } else {
                    tempPaths = [];
                }
                
                // Cargar información del equipo si existe
                loadEquipmentDetail(workspaceId);
                
                renderPathsTable();
            },
            error: function(xhr) {
                $(".content_loading").fadeOut("slow");
                swal("Oops!", "Error al cargar información del espacio de trabajo", "warning");
            }
        });
    }

    // Cargar información del equipo
    function loadEquipmentDetail(workspaceId) {
        $.ajax({
            type: 'GET',
            url: '{{ route("administrator.laboratoryTest.getEquipmentDetail") }}',
            data: { id: workspaceId },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.code == 200 && response.data && response.data.equipment_detail) {
                    const eq = response.data.equipment_detail;
                    $('#equipmentBrand').text(eq.brand || '-');
                    $('#equipmentModel').text(eq.model || '-');
                    $('#equipmentReference').text(eq.reference || '-');
                    
                    // Mostrar tipo de resultado con badge
                    let resultTypeBadge = '';
                    if (eq.result_type === 'automatic') {
                        resultTypeBadge = '<span class="badge badge-success"><i class="fa fa-cog"></i> Automático</span>';
                    } else if (eq.result_type === 'manual') {
                        resultTypeBadge = '<span class="badge badge-warning"><i class="fa fa-hand-paper-o"></i> Manual</span>';
                    }
                    $('#equipmentResultType').html(resultTypeBadge);
                    
                    $('#equipmentInfoCard').show();
                    
                    // Mostrar/ocultar sección de rutas según result_type
                    if (eq.result_type === 'automatic') {
                        $('#pathsSection').show();
                    } else {
                        $('#pathsSection').hide();
                    }
                } else {
                    $('#equipmentInfoCard').hide();
                    $('#pathsSection').hide();
                }
            },
            error: function(xhr) {
                console.error('Error loading equipment detail:', xhr);
                $('#equipmentInfoCard').hide();
            }
        });
    }

    // Botón crear espacio de trabajo
    $('#btnCreateWorkspace').on('click', function() {
        // Limpiar campos
        $('#workspaceId').val('');
        $('#workspaceName').val('');
        $('#workspaceResultType').val('');
        $('#workspaceState').val('1'); // Por defecto activo
        $('#workspaceBrand').val('');
        $('#workspaceModel').val('');
        $('#workspaceReference').val('');
        
        // Cambiar título y botón
        $('#modalWorkspaceLabel').text('Crear Espacio de Trabajo');
        $('#btnSaveWorkspaceText').text('Crear Espacio');
        
        // Mostrar modal
        $('#modalWorkspace').modal('show');
    });

    // Botón editar espacio de trabajo
    $(document).on('click', '#btnEditWorkspace', function() {
        const workspaceId = currentWorkspaceId;
        
        if (!workspaceId) {
            swal("Oops!", "No hay espacio de trabajo seleccionado", "warning");
            return;
        }
        
        // Cargar datos del espacio de trabajo
        $.ajax({
            type: 'GET',
            url: '{{ route("administrator.laboratoryTest.getEquipmentDetail") }}',
            data: { id: workspaceId },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
                $(".content_loading").fadeOut("slow");
                
                if (response.code == 200) {
                    // Llenar campos del modal
                    $('#workspaceId').val(workspaceId);
                    $('#workspaceName').val(response.data.name || '');
                    $('#workspaceState').val(response.data.state || '1');
                    
                    if (response.data.equipment_detail) {
                        $('#workspaceResultType').val(response.data.equipment_detail.result_type || '');
                        $('#workspaceBrand').val(response.data.equipment_detail.brand || '');
                        $('#workspaceModel').val(response.data.equipment_detail.model || '');
                        $('#workspaceReference').val(response.data.equipment_detail.reference || '');
                    }
                    
                    // Cambiar título y botón
                    $('#modalWorkspaceLabel').text('Editar Espacio de Trabajo');
                    $('#btnSaveWorkspaceText').text('Actualizar Espacio');
                    
                    // Mostrar modal
                    $('#modalWorkspace').modal('show');
                } else {
                    swal("Oops!", response.message || "Error al cargar datos", "warning");
                }
            },
            error: function(xhr) {
                $(".content_loading").fadeOut("slow");
                swal("Oops!", "Error al cargar información del espacio de trabajo", "warning");
            }
        });
    });

    // Guardar espacio de trabajo (crear o actualizar)
    $('#btnSaveWorkspace').on('click', function() {
        const workspaceId = $('#workspaceId').val();
        const workspaceName = $('#workspaceName').val().trim();
        const workspaceState = $('#workspaceState').val();
        const resultType = $('#workspaceResultType').val();
        const brand = $('#workspaceBrand').val().trim();
        const model = $('#workspaceModel').val().trim();
        const reference = $('#workspaceReference').val().trim();
        
        // Validar campos requeridos
        if (!workspaceName) {
            swal("Oops!", "El nombre del espacio es requerido", "warning");
            return;
        }
        
        if (!resultType) {
            swal("Oops!", "El tipo de resultado es requerido", "warning");
            return;
        }
        
        const data = {
            name: workspaceName,
            state: workspaceState,
            result_type: resultType,
            brand: brand,
            model: model,
            reference: reference
        };
        
        let url, method;
        if (workspaceId) {
            // Actualizar - agregar id al data
            data.id = workspaceId;
            url = '{{ route("administrator.laboratoryTest.updateEquipmentDetail") }}';
            method = 'PUT';
        } else {
            // Crear
            url = '{{ route("administrator.laboratoryTest.store") }}';
            method = 'POST';
        }
        
        $.ajax({
            type: method,
            url: url,
            data: data,
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
                $(".content_loading").fadeOut("slow");
                
                if (response.code == 200 || response.success) {
                    swal("¡Éxito!", response.message || "Espacio guardado correctamente", "success");
                    
                    // Cerrar modal
                    $('#modalWorkspace').modal('hide');
                    
                    // Recargar página para actualizar tabla
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                } else {
                    swal("Oops!", response.message || "Error al guardar espacio de trabajo", "warning");
                }
            },
            error: function(xhr) {
                $(".content_loading").fadeOut("slow");
                let errorMsg = "Error al guardar espacio de trabajo";
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                swal("Oops!", errorMsg, "warning");
            }
        });
    });

    // Renderizar cards de rutas
    function renderPathsTable() {
        $('#pathsCardsContainer').empty();
        
        if (tempPaths.length === 0) {
            $('#pathsCardsContainer').html(`
                <div class="col-12 text-center py-5">
                    <p class="text-muted">No hay rutas configuradas</p>
                </div>
            `);
            return;
        }
        
        tempPaths.forEach((path, index) => {
            let pathName = path.name || path[0] || 'Sin nombre';
            let pathValue = path.path || path[2] || 'Sin ruta';
            let config = path.config || {};
            let fileSource = config.file_source || 'directory_latest';
            
            // Construir descripción del origen
            let sourceDescription = '';
            if (fileSource === 'directory_latest') {
                sourceDescription = '<span class="badge badge-info"><i class="fa fa-clock-o"></i> Último archivo automático</span>';
            } else if (fileSource === 'specific_file') {
                let fileName = config.file_pattern || 'Sin nombre';
                sourceDescription = '<span class="badge badge-primary"><i class="fa fa-file-o"></i> Archivo: ' + fileName + '</span>';
            }
            
            $('#pathsCardsContainer').append(`
                <div class="col-12">
                    <div class="card my-2" style="border-left: 4px solid #007bff;">
                        <div class="card-body p-12">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1">
                                    <h6 class="font-weight-bold mb-1">${pathName}</h6>
                                    <p class="mb-1 text-muted small"><i class="fa fa-folder-o"></i> ${pathValue}</p>
                                    <div class="mt-1">${sourceDescription}</div>
                                </div>
                                <div class="ml-3 gap-1">
                                    <button type="button" class="btn btn-dark btn-sm" onclick="editPath(${index})" title="Editar">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button type="button" class="btn btn-dark btn-sm" onclick="deletePath(${index})" title="Eliminar">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `);
        });
    }

    // Mostrar modal para agregar ruta
    $('#btnAddPath').on('click', function() {
        editingPathIndex = null; // No estamos editando
        
        // Limpiar campos
        $('#pathName').val('');
        $('#pathTemplate').val('').trigger('change.select2');
        $('#pathValue').val('');
        $('#pathFileSource').val('directory_latest').trigger('change'); // Trigger para actualizar UI
        $('#pathFilePattern').val('');
        $('#pathArchiveTemplate').val('');
        
        // Ocultar configuración de archivo específico
        $('#specificFileConfig').hide();
        
        // Cambiar título y botón
        $('#modalAddPathLabel').text('Nueva Ruta de Importación');
        $('#btnSavePathText').text('Agregar Ruta');
        
        // Mostrar modal
        $('#modalAddPath').modal('show');
    });

    // Editar ruta existente
    function editPath(index) {
        editingPathIndex = index;
        let path = tempPaths[index];
        let config = path.config || path[3] || {};
        
        // Llenar campos con datos existentes
        $('#pathName').val(path.name || path[0] || '');
        $('#pathTemplate').val(path.template_id || path[1] || '').trigger('change.select2');
        $('#pathValue').val(path.path || path[2] || '');
        
        const fileSource = config.file_source || 'directory_latest';
        $('#pathFileSource').val(fileSource).trigger('change'); // Trigger para actualizar UI
        
        // Solo llenar file_pattern si es specific_file
        if (fileSource === 'specific_file') {
            $('#pathFilePattern').val(config.file_pattern || '');
        }
        
        $('#pathArchiveTemplate').val(config.archive_path_template || '');
        
        // Cambiar título y botón
        $('#modalAddPathLabel').text('Editar Ruta de Importación');
        $('#btnSavePathText').text('Actualizar Ruta');
        
        // Mostrar modal
        $('#modalAddPath').modal('show');
    }

    // Cancelar agregar ruta
    function cancelAddPath() {
        $('#modalAddPath').modal('hide');
        editingPathIndex = null;
    }

    // Guardar o actualizar ruta
    $('#btnSavePath').on('click', function() {
        let pathName = $('#pathName').val().trim();
        let pathTemplate = $('#pathTemplate').val();
        let pathValue = $('#pathValue').val().trim();
        let pathFileSource = $('#pathFileSource').val();
        let pathFilePattern = $('#pathFilePattern').val().trim();
        let pathArchiveTemplate = $('#pathArchiveTemplate').val().trim();
        
        // Validaciones
        if (!pathName) {
            swal("Oops!", "Debe ingresar un nombre para la ruta", "warning");
            return;
        }
        
        if (!pathTemplate) {
            swal("Oops!", "Debe seleccionar una plantilla", "warning");
            return;
        }
        
        if (!pathValue) {
            swal("Oops!", "Debe ingresar una ruta", "warning");
            return;
        }
        
        // Validar que si es specific_file, debe tener file_pattern
        if (pathFileSource === 'specific_file' && !pathFilePattern) {
            swal("Oops!", "Debe ingresar el nombre del archivo para origen específico", "warning");
            return;
        }
        
        // Estructura del objeto
        let pathData = {
            name: pathName,
            template_id: parseInt(pathTemplate),
            path: pathValue,
            config: {
                file_source: pathFileSource
            }
        };
        
        // Solo agregar file_pattern si es specific_file
        if (pathFileSource === 'specific_file') {
            pathData.config.file_pattern = pathFilePattern;
        }
        
        // Agregar archive path si existe
        if (pathArchiveTemplate) {
            pathData.config.archive_path_template = pathArchiveTemplate;
        }
        
        if (editingPathIndex !== null) {
            // Actualizar ruta existente
            tempPaths[editingPathIndex] = pathData;
            swal("Éxito", "Ruta actualizada. Recuerde guardar los cambios.", "success");
        } else {
            // Agregar nueva ruta
            tempPaths.push(pathData);
            swal("Éxito", "Ruta agregada. Recuerde guardar los cambios.", "success");
        }
        
        // Cerrar modal y limpiar
        $('#modalAddPath').modal('hide');
        editingPathIndex = null;
        
        // Re-renderizar cards
        renderPathsTable();
    });

    // Eliminar ruta
    function deletePath(index) {
        swal({
            title: "¿Está seguro?",
            text: "Esta ruta será eliminada al guardar los cambios",
            icon: "warning",
            buttons: {
                cancel: {
                    text: "Cancelar",
                    value: null,
                    visible: true,
                    className: "",
                    closeModal: true,
                },
                confirm: {
                    text: "Sí, eliminar",
                    value: true,
                    visible: true,
                    className: "",
                    closeModal: true
                }
            },
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                tempPaths.splice(index, 1);
                renderPathsTable();
                swal("Éxito", "Ruta eliminada. Recuerde guardar los cambios.", "success");
            }
        });
    }

    // Guardar todos los cambios
    function saveWorkspaceChanges() {
        if (!currentWorkspaceId) {
            swal("Oops!", "No hay un espacio de trabajo seleccionado", "warning");
            return;
        }
        
        $.ajax({
            type: 'put',
            url: '{{route("administrator.laboratoryTest.update")}}',
            data: {
                "id": currentWorkspaceId,
                "paths": JSON.stringify(tempPaths)
            },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
                $(".content_loading").fadeOut("slow");
                swal("Éxito", "Cambios guardados correctamente", "success");
            },
            error: function(xhr) {
                $(".content_loading").fadeOut("slow");
                swal("Oops!", "Error al guardar los cambios", "warning");
            }
        });
    }

    $('.inputTextFile').on('change', function() {
        let fr = new FileReader();
        fr.onload = function() {
            // let lines = this.result.split("\n")[0]
            let line = this.result.split("\n")[0]
            let results = line.split('\t').reduce(function(result, value, index, array) {
                if (index % 2 === 0)
                    result.push(array.slice(index, index + 2));
                return result;
            }, []);
            console.log(results)
            $('#inputTestId').val($('.btnUploadCalibration').attr('id'))
            $('#inputFileData').val(JSON.stringify(results))
            results.map(r => {
                $('#headerTableFile').append(`<th>${r[0]}</th>`)
                $('#bodyTableFile').append(`<td>${r[1]}</td>`)
            })
        };
        fr.readAsText(this.files[0]);
    })

    function loadTestTable(id) {
        $.ajax({
            type: 'get',
            url: '{{route("administrator.laboratoryTest.history")}}',
            data: {
                "id": id
            },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
                $(".content_loading").fadeOut("slow");
                $('#defaultBox').hide()
                $('#history').show()
                $('.btnUploadCalibration').attr('id', id)
                $('#historyList').empty()

                let data = response.data
                if (data.length > 0) {

                    data.map(h => {
                        let date = new Date(h.created_at)
                        $('#historyList').append(
                            `
                        <tr>
                            <td>${date.getDate() + '/' + (date.getMonth()+1) + '/' + date.getFullYear()}</td>

                            <td>
                                <a href="{{asset('storage/')}}/${h.file}" class="btn btn-info btn-sm" download>
                                    <i class="fa fa-download" aria-hidden="true"></i>
                                </a>
                            </td>
                        </tr>
                        `
                        )
                    })
                }
            },
            error: function(xhr) {
                $(".content_loading").fadeOut("slow");
                swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
        });
    }

    function openChangeMaxModal(id) {
        $.ajax({
            type: 'get',
            url: '{{route("administrator.laboratoryTest.test")}}',
            data: {
                "id": id
            },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
                $(".content_loading").fadeOut("slow");
                $('#maxMuestras').val(response.data.extra ? response.data.extra : 0)
                $('#idParam').val(response.data.id)
                $('#modalChangeMax').modal()
            },
            error: function(xhr) {
                $(".content_loading").fadeOut("slow");
                swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
        });

    }

    $('.btnSaveMax').on('click', function(e) {
        e.preventDefault()
        let id = $('#idParam').val()
        let max = $('#maxMuestras').val()
        $.ajax({
            type: 'put',
            url: '{{route("administrator.laboratoryTest.update")}}',
            data: {
                "id": id,
                "max": +max
            },
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
                // $(".content_loading").fadeOut("slow");
                $('#modalChangeMax').modal('hide')
                $('#maxMuestras').val('')
                // swal("Bien", "Actualizado correctamente", "success");
                window.location.reload()
            },
            error: function(xhr) {
                $(".content_loading").fadeOut("slow");
                swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
        });
    })
</script>
<!-- End Lubricant Brand -->
@endsection