@extends('layout.administrator.index')
@section('title', isset($template) ? 'Editar Plantilla' : 'Nueva Plantilla')

@section('style')
<style>
.field-row {
    border: 1px solid #dee2e6;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #f8f9fa;
}
.field-row:hover {
    background-color: #e9ecef;
}
.sortable-handle {
    cursor: move;
}
.computation-config {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-top: 5px;
}
</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.test-templates.index') }}">Plantillas</a></li>
            <li class="breadcrumb-item active">{{ isset($template) ? 'Editar' : 'Crear' }}</li>
        </ol>
    </section>

    <section class="content">
        <form action="{{ isset($template) ? route('administrator.test-templates.update', $template->id) : route('administrator.test-templates.store') }}" 
              method="POST"
              id="templateForm">
            @csrf
            @if(isset($template))
                @method('PUT')
            @endif

            <div class="row">
                <div class="col-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h4 class="box-title">{{ isset($template) ? 'Editar Plantilla' : 'Nueva Plantilla' }}</h4>
                        </div>
                        <div class="box-body">
                            @if($errors->any())
                                <div class="alert alert-danger alert-dismissible">
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                    <ul class="mb-0">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#general" role="tab">
                                        <i class="fa fa-info-circle"></i> Información General
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#fields" role="tab">
                                        <i class="fa fa-list"></i> Mapeo de Ensayos
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#computed_fields" role="tab">
                                        <i class="fa fa-calculator"></i> Campos Computados
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#additional_fields" role="tab">
                                        <i class="fa fa-tags"></i> Campos Adicionales
                                    </a>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content mt-15">
                                <!-- General Info Tab -->
                                <div class="tab-pane active" id="general" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Nombre de la Plantilla <span class="text-danger">*</span></label>
                                                <input type="text"
                                                       name="name"
                                                       class="form-control"
                                                       value="{{ old('name', $template->name ?? '') }}"
                                                       required>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Espacio de Trabajo (Test) <span class="text-danger">*</span></label>
                                                <select name="test_id" class="form-control hg_select select2" required>
                                                    <option value="">Seleccionar...</option>
                                                    @foreach($tests as $test)
                                                        <option value="{{ $test->id }}" 
                                                                {{ old('test_id', $template->test_id ?? '') == $test->id ? 'selected' : '' }}>
                                                            {{ $test->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Tipo de Archivo <span class="text-danger">*</span></label>
                                                <select name="file_type" class="form-control hg_select select2" id="fileType" required>
                                                    <option value="csv" {{ old('file_type', $template->file_type ?? 'csv') == 'csv' ? 'selected' : '' }}>CSV</option>
                                                    <option value="txt" {{ old('file_type', $template->file_type ?? '') == 'txt' ? 'selected' : '' }}>TXT</option>
                                                    <option value="manual" {{ old('file_type', $template->file_type ?? '') == 'manual' ? 'selected' : '' }}>Manual</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4" id="delimiterGroup">
                                            <div class="form-group">
                                                <label>Delimitador</label>
                                                <select name="delimiter" class="form-control hg_select select2">
                                                    <option value=","  {{ old('delimiter', $template->delimiter ?? ',') == ',' ? 'selected' : '' }}>Coma (,)</option>
                                                    <option value="\t" {{ old('delimiter', $template->delimiter ?? '') == "\t" || old('delimiter', $template->delimiter ?? '') == '\t' ? 'selected' : '' }}>Tab (\t)</option>
                                                    <option value="|"  {{ old('delimiter', $template->delimiter ?? '') == '|' ? 'selected' : '' }}>Pipe (|)</option>
                                                    <option value=";"  {{ old('delimiter', $template->delimiter ?? '') == ';' ? 'selected' : '' }}>Punto y coma (;)</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Tipo de Alarma <span class="text-danger">*</span></label>
                                                <select name="alarm_type" class="form-control hg_select select2" required>
                                                    <option value="1" {{ old('alarm_type', $template->alarm_type ?? 1) == 1 ? 'selected' : '' }}>Tipo 1</option>
                                                    <option value="2" {{ old('alarm_type', $template->alarm_type ?? 1) == 2 ? 'selected' : '' }}>Tipo 2</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4" id="sampleIdColumnGroup">
                                            <div class="form-group">
                                                <label>Columna de ID de Muestra</label>
                                                <input type="number"
                                                       name="sample_id_column"
                                                       class="form-control"
                                                       value="{{ old('sample_id_column', $template->sample_id_column ?? 0) }}"
                                                       min="0">
                                                <small class="text-muted">Índice de columna (base 0)</small>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Saltar Filas de Encabezado</label>
                                                <input type="number"
                                                       name="header_row_index"
                                                       class="form-control"
                                                       value="{{ old('header_row_index', $template->header_row_index ?? 0) }}"
                                                       min="0">
                                                <small class="text-muted">Número de filas a omitir al inicio</small>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Acción de Archivado <span class="text-danger">*</span></label>
                                                <select name="archive_action" class="form-control hg_select select2" required>
                                                    <option value="none" {{ old('archive_action', $template->archive_action ?? 'move') == 'none' ? 'selected' : '' }}>No Archivar</option>
                                                    <option value="move" {{ old('archive_action', $template->archive_action ?? 'move') == 'move' ? 'selected' : '' }}>Mover</option>
                                                    <option value="copy" {{ old('archive_action', $template->archive_action ?? '') == 'copy' ? 'selected' : '' }}>Copiar</option>
                                                </select>
                                                <small class="text-muted">Qué hacer con los archivos procesados</small>
                                            </div>
                                        </div>

                                        {{-- <div class="col-12">
                                            <div class="alert alert-info">
                                                <i class="fa fa-info-circle"></i> <strong>Nota:</strong> La configuración de rutas (origen de archivo, patrón, etc.) se realiza en el <strong>Espacio de Trabajo</strong>, no en la plantilla. La plantilla solo define <strong>cómo</strong> se procesa el archivo.
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>

                                @include('system.administrator.test-templates._fields_tab')
                                
                                @include('system.administrator.test-templates._computed_fields_tab')
                                
                                @include('system.administrator.test-templates._additional_fields_tab')
                            </div>
                        </div>
                        <div class="box-footer">
                            <button type="submit" class="btn btn_admin">
                                <i class="fa fa-save"></i> Guardar Plantilla
                            </button>
                            <a href="{{ route('administrator.test-templates.index') }}" class="btn btn-default">
                                Cancelar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    window.testValuesUrl = '{{ route('administrator.test-templates.test-values') }}';
</script>
<script src="{{ asset('js/test-template-form.js') }}"></script>
<script src="{{ asset('js/test-template-computed-fields.js') }}"></script>
@endsection