{% extends "MasterMotoTaller/MenuTemplateMT.html.twig" %}

{% block body %}
    {{ parent() }}
    {% set aviso = fsc.getModel() %}
    {% set action = aviso.exists() ? 'edit' : 'insert' %}
    <form method="post" action="{{ fsc.url() }}" class="pt-3">
        {{ formToken() }}
        <input type="hidden" name="action" value="{{ action }}"/>
        <input type="hidden" name="activetab" value="EditAviso"/>
        <input type="hidden" name="code" value="{{ aviso.id }}"/>
        <div class="card h-100">
            <div class="card-header">
                <h4 class="text-secondary d-flex align-items-center gap-2">
                    <span class="far fa-copy" aria-hidden="true"></span>
                    <span>Aviso:</span>
                    <input type="text" name="nombre" value="{{ aviso.nombre }}" class="form-control flex-grow-1"/>
                </h4>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-12">
                        <label class="form-label">Dirección:</label>
                        <input type="text" name="direccion" value="{{ aviso.direccion }}" class="form-control"/>
                    </div>
                </div>
            </div>
            <div class="card-footer text-end">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> {{ trans('save') }}
                </button>
            </div>
        </div>
    </form>

    {% if aviso.exists() %}
    <div class="card mt-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="text-secondary mb-0">
                <i class="fas fa-clipboard"></i> Partes
            </h4>
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="offcanvas" data-bs-target="#offcanvasParteNuevo">
                <i class="fas fa-plus"></i> Nuevo
            </button>
        </div>
        <div class="card-body">
            {% if fsc.getPartes() %}
                <ul class="list-group">
                    {% for parte in fsc.getPartes() %}
                        <li class="list-group-item list-group-item-action d-flex align-items-center"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasParteNuevo"
                            data-idparte="{{ parte.id }}"
                            data-horas="{{ parte.horas }}"
                            data-horas_extra="{{ parte.horas_extra }}"
                            data-comidas="{{ parte.comidas }}"
                            data-dietas="{{ parte.dietas }}"
                            data-vehiculo="{{ parte.vehiculo }}"
                            data-kminicial="{{ parte.kminicial }}"
                            data-kmfinal="{{ parte.kmfinal }}"
                            data-material_cantidad="{{ parte.material_cantidad }}"
                            data-material_descripcion="{{ parte.material_descripcion }}">
                            <span class="me-auto link-primary" style="width: 120px;">Parte {{ parte.id }}</span>
                            <span class="text-start" style="width: 100px;">{{ parte.nick }}</span>
                            <span class="ms-auto"><i class="fas fa-edit"></i></span>
                        </li>
                        {% if settings('partessemanales', 'aviso_checklist') %}
                        <div id="checklist-parte-{{ parte.id }}" class="d-none">
                            {% include 'partessemanales/checklist_parte.html.twig' with {parte: parte} %}
                        </div>
                        {% endif %}
                    {% endfor %}
                </ul>
            {% else %}
                <p class="text-muted mb-0">No hay partes asociados.</p>
            {% endif %}
        </div>
    </div>
    
    {% if settings('partessemanales', 'aviso_checklist') %}
    <div class="card mt-3">
        <div class="card-header">
            <h4 class="text-secondary">
                <i class="fas fa-list"></i> {{ trans('checklist') }}
            </h4>
        </div>
        <div class="card-body">
            {% if fsc.getChecklists() %}
                <ul class="list-group">
                    {% for check in fsc.getChecklists() %}
                        <li class="list-group-item d-flex align-items-center">
                            <span class="me-auto link-primary" style="width: 120px;">Parte {{ check.parte.id }}</span>
                            <span class="flex-grow-1">
                                {% if check.marcado %}
                                    <i class="fas fa-check-square text-success"></i>
                                {% else %}
                                    <i class="far fa-square text-muted"></i>
                                {% endif %}
                                {{ check.descripcion }}
                            </span>
                            <span class="text-primary me-2" role="button"
                                  data-id="{{ check.id }}"
                                  data-descripcion="{{ check.descripcion|e('html_attr') }}"
                                  data-marcado="{{ check.marcado ? '1' : '0' }}"
                                  onclick="openChecklistModal(this)">
                                <i class="fas fa-edit"></i>
                            </span>
                            <span class="ms-auto text-danger" role="button" onclick="eliminarChecklist({{ check.id }})">
                                <i class="fas fa-trash"></i>
                            </span>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="text-muted mb-0">No hay checklists.</p>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% if settings('partessemanales', 'aviso_material_pendiente') %}
    <div class="card mt-3">
        <div class="card-header">
            <h4 class="text-secondary">
                <i class="fas fa-box" aria-hidden="true"></i> Material pendiente
            </h4>
        </div>
        <div class="card-body">
            {% if fsc.getMateriales() %}
                <ul class="list-group">
                    {% for material in fsc.getMateriales() %}
                        {% set files = [] %}
                        {% for f in material.files %}
                            {% set files = files|merge([{idfile: f.idfile, url: myFilesUrl(f.path), name: f.filename}]) %}
                        {% endfor %}
                        <li class="list-group-item d-flex align-items-center">
                            <span class="me-auto link-primary" style="width: 120px;">Parte {{ material.idavisoparte }}</span>
                            <span class="text-start" style="width: 100px;">{{ material.parte.nick }}</span>
                            <span class="flex-grow-1">{{ material.descripcion }} (x{{ material.cantidad }})</span>
                            <span class="text-primary me-2" role="button"
                                  data-id="{{ material.id }}"
                                  data-descripcion="{{ material.descripcion|e('html_attr') }}"
                                  data-cantidad="{{ material.cantidad }}"
                                  data-files='{{ files|json_encode|e('html_attr') }}'
                                  onclick="openMaterialModal(this)">
                                <i class="fas fa-edit"></i>
                            </span>
                            <span class="ms-auto text-danger" role="button" onclick="eliminarMaterial({{ material.id }})">
                                <i class="fas fa-trash"></i>
                            </span>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="text-muted mb-0">No hay material pendiente.</p>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% if settings('partessemanales', 'aviso_kilometraje') %}
    <div class="card mt-3">
        <div class="card-header">
            <h4 class="text-secondary">
                <i class="fas fa-tachometer-alt" aria-hidden="true"></i> Kilometraje
            </h4>
        </div>
        <div class="card-body">
            {% if fsc.getKilometrajes() %}
                <ul class="list-group">
                    {% for km in fsc.getKilometrajes() %}
                        <li class="list-group-item d-flex align-items-center">
                            <span class="me-auto link-primary" style="width: 120px;">Parte {{ km.parte.id }}</span>
                            <span class="text-start" style="width: 100px;">{{ km.vehiculo }}</span>
                            <span class="flex-grow-1">Ini: {{ km.kminicial }} km - Fin: {{ km.kmfinal }} km</span>
                            <span class="text-primary me-2" role="button"
                                  data-id="{{ km.id }}"
                                  data-vehiculo="{{ km.vehiculo }}"
                                  data-kminicial="{{ km.kminicial }}"
                                  data-kmfinal="{{ km.kmfinal }}"
                                  onclick="openKilometrajeModal(this)">
                                <i class="fas fa-edit"></i>
                            </span>
                            <span class="ms-auto text-danger" role="button" onclick="eliminarKilometraje({{ km.id }})">
                                <i class="fas fa-trash"></i>
                            </span>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="text-muted mb-0">No hay kilometrajes.</p>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% if settings('partessemanales', 'aviso_incidencias') %}
    <div class="card mt-3">
        <div class="card-header">
            <h4 class="text-secondary">
                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Incidencias
            </h4>
        </div>
        <div class="card-body">
            {% if fsc.getIncidencias() %}
                <ul class="list-group">
                    {% for incidencia in fsc.getIncidencias() %}
                        {% set files = [] %}
                        {% for f in incidencia.files %}
                            {% set files = files|merge([{idfile: f.idfile, url: myFilesUrl(f.path), name: f.filename}]) %}
                        {% endfor %}
                        <li class="list-group-item d-flex align-items-center">
                            <span class="me-auto link-primary" style="width: 120px;">Parte {{ incidencia.idavisoparte }}</span>
                            <span class="text-start" style="width: 100px;">{{ incidencia.nick }}</span>
                            <span class="flex-grow-1">{{ incidencia.creationdate|date('d/m/Y') }} - {{ incidencia.titulo }}</span>
                            <span class="text-primary me-2" role="button"
                                  data-id="{{ incidencia.id }}"
                                  data-titulo="{{ incidencia.titulo|e('html_attr') }}"
                                  data-descripcion="{{ incidencia.descripcion|e('html_attr') }}"
                                  data-files='{{ files|json_encode|e('html_attr') }}'
                                  onclick="openIncidenciaModal(this)">
                                <i class="fas fa-edit"></i>
                            </span>
                            <span class="ms-auto text-danger" role="button" onclick="eliminarIncidencia({{ incidencia.id }})">
                                <i class="fas fa-trash"></i>
                            </span>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="text-muted mb-0">No hay incidencias.</p>
            {% endif %}
        </div>
    </div>

    {% include 'partessemanales/modal/incidencia_aviso.twig' %}
    {% endif %}

    {% if settings('partessemanales', 'aviso_material_pendiente') %}
    <div class="modal fade" id="modalMaterial" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="formMaterial" class="modal-content" method="post" enctype="multipart/form-data">
                {{ formToken() }}
                <input type="hidden" name="id" id="material_id"/>
                <div class="modal-header">
                    <h5 class="modal-title">Editar Material</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Cantidad</label>
                        <input class="form-control" type="number" step="0.01" name="cantidad" id="material_cantidad"/>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descripción</label>
                        <input class="form-control" type="text" name="descripcion" id="material_descripcion"/>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Documentos</label>
                        <input class="form-control" type="file" name="files[]" id="material_files" multiple/>

                        <div id="material_existing_files" class="d-flex flex-wrap mt-2"></div>
                        <div id="material_new_files" class="d-flex flex-wrap mt-2"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarMaterial()">Guardar</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {% if settings('partessemanales', 'aviso_kilometraje') %}
    <div class="modal fade" id="modalKilometraje" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="formKilometraje" class="modal-content" method="post">
                {{ formToken() }}
                <input type="hidden" name="id" id="kilometraje_id"/>
                <div class="modal-header">
                    <h5 class="modal-title">Editar Kilometraje</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Matrícula</label>
                        <select class="form-select" name="vehiculo" id="kilometraje_vehiculo">
                            <option value=""></option>
                            {% for vehiculo in fsc.codeModel.all('oi_vehiculos', 'matricula', 'matricula') %}
                            <option value="{{ vehiculo.code }}">{{ vehiculo.description }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label">Km Inicial</label>
                            <input class="form-control" type="number" step="1" name="kminicial" id="kilometraje_kminicial"/>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Km Final</label>
                            <input class="form-control" type="number" step="1" name="kmfinal" id="kilometraje_kmfinal"/>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarKilometraje()">Guardar</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {% if settings('partessemanales', 'aviso_incidencias') %}
    <div class="modal fade" id="modalIncidencia" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="formIncidenciaEdit" class="modal-content" method="post" enctype="multipart/form-data">
                {{ formToken() }}
                <input type="hidden" name="id" id="incidencia_id"/>
                <div class="modal-header">
                    <h5 class="modal-title">Editar Incidencia</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Título</label>
                        <input class="form-control" type="text" name="titulo" id="incidencia_titulo"/>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descripción</label>
                        <textarea class="form-control" name="descripcion" id="incidencia_descripcion"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Imágenes</label>
                        <input class="form-control" type="file" name="files[]" id="incidencia_files" multiple/>
                        <div id="incidencia_existing_files" class="d-flex flex-wrap mt-2"></div>
                        <div id="incidencia_new_files" class="d-flex flex-wrap mt-2"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarIncidenciaEdit()">Guardar</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {% if settings('partessemanales', 'aviso_checklist') %}
    <div class="modal fade" id="modalChecklist" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form id="formChecklist" class="modal-content" method="post">
                {{ formToken() }}
                <input type="hidden" name="id" id="checklist_id"/>
                <div class="modal-header">
                    <h5 class="modal-title">Editar Checklist</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 form-check d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" name="marcado" id="checklist_marcado" value="1"/>
                        <input class="form-control ms-2" type="text" name="descripcion" id="checklist_descripcion" placeholder="Descripción"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarChecklist()">Guardar</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    <div class="offcanvas offcanvas-end" id="offcanvasParteNuevo" tabindex="-1" aria-labelledby="offcanvasParteNuevoLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasParteNuevoLabel">Nuevo Parte</h5>
            <button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body d-flex flex-column">
            <form method="post" action="{{ fsc.url() }}" id="formParte" enctype="multipart/form-data" class="flex-grow-1">
                {{ formToken() }}
                <input type="hidden" name="action" value="saveParte"/>
                <input type="hidden" name="code" value="{{ aviso.id }}"/>
                <input type="hidden" name="idparte" id="idparte"/>
                <div class="card mb-3">
                    <div class="card-header">
                        <h4 class="text-secondary"><span class="fas fa-clock"></span> Horas</h4>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="form-label">Horas</label>
                                <input class="form-control" type="number" step="0.1" name="horas"/>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Horas Extra</label>
                                <input class="form-control" type="number" step="0.1" name="horas_extra"/>
                            </div>
                        </div>
                        <div class="row g-3 mt-2">
                            <div class="col-6">
                                <label class="form-label">Comidas</label>
                                <input class="form-control" type="number" step="1" name="comidas"/>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Dietas</label>
                                <input class="form-control" type="number" step="0.01" name="dietas"/>
                            </div>
                        </div>
                    </div>
                </div>
                {% if settings('partessemanales', 'aviso_kilometraje') %}
                <div class="card mb-3">
                    <div class="card-header">
                        <h4 class="text-secondary"><span class="fas fa-car"></span> Vehículo</h4>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="form-label">Matrícula</label>
                                <select id="list_vehiculos" class="form-select" name="vehiculo">
                                    <option value=""></option>
                                    {% for vehiculo in fsc.codeModel.all('oi_vehiculos', 'matricula', 'matricula') %}
                                    <option value="{{ vehiculo.code }}">{{ vehiculo.description }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-3">
                                <label class="form-label">Km Inicial</label>
                                <input class="form-control" type="number" step="1" name="kminicial"/>
                            </div>
                            <div class="col-3">
                                <label class="form-label">Km Final</label>
                                <input class="form-control" type="number" step="1" name="kmfinal"/>
                            </div>
                        </div>

                    </div>
                </div>
                {% endif %}
                {% if settings('partessemanales', 'aviso_material_pendiente') %}
                  <div class="card mb-3">
                      <div class="card-header">
                          <h4 class="text-secondary"><span class="fas fa-box"></span> Material pendiente</h4>
                      </div>
                      <div class="card-body">
                          <div class="mb-3">
                              <label class="form-label">Cantidad</label>
                              <input class="form-control" type="number" step="0.01" name="material_cantidad"/>
                          </div>
                          <div class="mb-3">
                              <label class="form-label">Descripción</label>
                              <input class="form-control" type="text" name="material_descripcion"/>
                          </div>
                          <div class="mb-3">
                              <label class="form-label">Documentos</label>
                              <input class="form-control" type="file" name="material_files[]" id="material_files_new" multiple/>
                              <div id="material_files_new_preview" class="d-flex flex-wrap mt-2"></div>
                          </div>
                      </div>
                  </div>
                {% endif %}
              </form>
              {% if settings('partessemanales', 'aviso_checklist') %}
              <div id="checklistContainer"></div>
              {% endif %}
              <div class="mt-auto position-sticky bottom-0 d-grid gap-2 bg-body py-2">
                  <button class="btn btn-success" type="submit" form="formParte">
                      <i class="fas fa-save"></i> {{ trans('save') }}
                  </button>
                  {% if settings('partessemanales', 'aviso_incidencias') %}
                  <button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasIncidenciaAviso" id="btnIncidenciaParte">
                      <span class="fas fa-exclamation-circle"></span> Incidencia
                  </button>
                  {% endif %}
              </div>
          </div>
      </div>
        <script>
      function getFileIcon(filename){
          var ext = filename.split('.').pop().toLowerCase();
          switch(ext){
              case 'pdf': return 'fa-file-pdf';
              case 'doc': case 'docx': return 'fa-file-word';
              case 'xls': case 'xlsx': return 'fa-file-excel';
              default: return 'fa-file';
          }
      }

      function isImage(filename){
          var ext = filename.split('.').pop().toLowerCase();
          return ['png','jpg','jpeg','gif','bmp','webp','svg'].includes(ext);
      }

      function setupSingleFilePreview(inputId, previewId){
          var input = document.getElementById(inputId);
          var preview = document.getElementById(previewId);
          if(!input || !preview){ return; }
          input.addEventListener('change', function(){
              preview.innerHTML = '';
              var file = this.files[0];
              if(!file){ return; }
              var wrap = document.createElement('div');
              wrap.className = 'position-relative d-inline-block';
              var elem;
              if(file.type.startsWith('image/')){
                  elem = document.createElement('img');
                  elem.src = URL.createObjectURL(file);
                  elem.className = 'img-thumbnail';
                  elem.style.maxWidth = '120px';
              }else{
                  elem = document.createElement('div');
                  elem.className = 'd-flex flex-column align-items-center';
                  elem.innerHTML = '<i class="fas ' + getFileIcon(file.name) + ' fa-2x"></i><small>' + file.name + '</small>';
              }
              var rm = document.createElement('button');
              rm.type = 'button';
              rm.className = 'btn-close position-absolute top-0 end-0';
              rm.addEventListener('click', function(){ input.value=''; preview.innerHTML=''; });
              wrap.appendChild(elem);
              wrap.appendChild(rm);
              preview.appendChild(wrap);
          });
      }

      var incFiles = [];
      var incInput = document.getElementById('incFilesAviso');
      var incPreview = document.getElementById('incFilesPreview');
      if(incInput){
          incInput.addEventListener('change', function(){
              incFiles = incFiles.concat(Array.from(this.files));
              renderIncFiles();
          });
      }

      function renderIncFiles(){
          if(!incPreview){ return; }
          incPreview.innerHTML = '';
          var dt = new DataTransfer();
          incFiles.forEach(function(file, index){
              dt.items.add(file);
              var wrap = document.createElement('div');
              wrap.className = 'position-relative m-1';
              var elem;
              if(file.type.startsWith('image/')){
                  elem = document.createElement('img');
                  elem.src = URL.createObjectURL(file);
                  elem.className = 'img-thumbnail';
                  elem.style.maxWidth = '100px';
              }else{
                  elem = document.createElement('div');
                  elem.className = 'd-flex flex-column align-items-center border rounded p-2';
                  elem.style.width = '100px';
                  elem.innerHTML = '<i class="fas ' + getFileIcon(file.name) + ' fa-2x"></i><small class="text-truncate" style="max-width:90px;">' + file.name + '</small>';
              }
              var rm = document.createElement('button');
              rm.type = 'button';
              rm.className = 'btn-close position-absolute top-0 end-0';
              rm.addEventListener('click', function(){ removeIncFile(index); });
              wrap.appendChild(elem);
              wrap.appendChild(rm);
              incPreview.appendChild(wrap);
          });
          if(incInput){ incInput.files = dt.files; }
      }

      function removeIncFile(index){
          incFiles.splice(index,1);
          renderIncFiles();
      }

      var matFiles = [];
      var matInputNew = document.getElementById('material_files_new');
      var matPreviewNew = document.getElementById('material_files_new_preview');
      if(matInputNew){
          matInputNew.addEventListener('change', function(){
              matFiles = matFiles.concat(Array.from(this.files));
              renderMatFiles();
          });
      }

      function renderMatFiles(){
          if(!matPreviewNew){ return; }
          matPreviewNew.innerHTML = '';
          var dt = new DataTransfer();
          matFiles.forEach(function(file, index){
              dt.items.add(file);
              var wrap = document.createElement('div');
              wrap.className = 'position-relative m-1';
              var elem;
              if(file.type.startsWith('image/')){
                  elem = document.createElement('img');
                  elem.src = URL.createObjectURL(file);
                  elem.className = 'img-thumbnail';
                  elem.style.maxWidth = '100px';
              }else{
                  elem = document.createElement('div');
                  elem.className = 'd-flex flex-column align-items-center border rounded p-2';
                  elem.style.width = '100px';
                  elem.innerHTML = '<i class="fas ' + getFileIcon(file.name) + ' fa-2x"></i><small class="text-truncate" style="max-width:90px;">' + file.name + '</small>';
              }
              var rm = document.createElement('button');
              rm.type = 'button';
              rm.className = 'btn-close position-absolute top-0 end-0';
              rm.addEventListener('click', function(){ removeMatFile(index); });
              wrap.appendChild(elem);
              wrap.appendChild(rm);
              matPreviewNew.appendChild(wrap);
          });
          if(matInputNew){ matInputNew.files = dt.files; }
      }

      function removeMatFile(index){
          matFiles.splice(index,1);
          renderMatFiles();
      }

      var incEditExisting = [];
      var incEditRemoved = [];
      var incEditNew = [];
      var incEditInput = document.getElementById('incidencia_files');
      var incEditExistingPreview = document.getElementById('incidencia_existing_files');
      var incEditNewPreview = document.getElementById('incidencia_new_files');
      if(incEditInput){
          incEditInput.addEventListener('change', function(){
              incEditNew = incEditNew.concat(Array.from(this.files));
              renderIncEditNew();
          });
      }

      function renderIncEditExisting(){
          if(!incEditExistingPreview){ return; }
          incEditExistingPreview.innerHTML = '';
          incEditExisting.forEach(function(file, index){
              var wrap = document.createElement('div');
              wrap.className = 'position-relative m-1';
              var elem;
              if(file.url && file.name.match(/\.(png|jpe?g|gif|webp)$/i)){
                  elem = document.createElement('img');
                  elem.src = file.url;
                  elem.className = 'img-thumbnail';
                  elem.style.maxWidth = '100px';
              }else{
                  elem = document.createElement('div');
                  elem.className = 'd-flex flex-column align-items-center border rounded p-2';
                  elem.style.width = '100px';
                  elem.innerHTML = '<i class="fas ' + getFileIcon(file.name) + ' fa-2x"></i><small class="text-truncate" style="max-width:90px;">' + file.name + '</small>';
              }
              var rm = document.createElement('button');
              rm.type = 'button';
              rm.className = 'btn-close position-absolute top-0 end-0';
              rm.addEventListener('click', function(){ removeExistingIncFile(index); });
              wrap.appendChild(elem);
              wrap.appendChild(rm);
              incEditExistingPreview.appendChild(wrap);
          });
      }

      function renderIncEditNew(){
          if(!incEditNewPreview){ return; }
          incEditNewPreview.innerHTML = '';
          var dt = new DataTransfer();
          incEditNew.forEach(function(file, index){
              dt.items.add(file);
              var wrap = document.createElement('div');
              wrap.className = 'position-relative m-1';
              var elem;
              if(file.type && file.type.startsWith('image/')){
                  elem = document.createElement('img');
                  elem.src = URL.createObjectURL(file);
                  elem.className = 'img-thumbnail';
                  elem.style.maxWidth = '100px';
              }else{
                  elem = document.createElement('div');
                  elem.className = 'd-flex flex-column align-items-center border rounded p-2';
                  elem.style.width = '100px';
                  elem.innerHTML = '<i class="fas ' + getFileIcon(file.name) + ' fa-2x"></i><small class="text-truncate" style="max-width:90px;">' + file.name + '</small>';
              }
              var rm = document.createElement('button');
              rm.type = 'button';
              rm.className = 'btn-close position-absolute top-0 end-0';
              rm.addEventListener('click', function(){ removeIncEditNewFile(index); });
              wrap.appendChild(elem);
              wrap.appendChild(rm);
              incEditNewPreview.appendChild(wrap);
          });
          if(incEditInput){ incEditInput.files = dt.files; }
      }

      function removeExistingIncFile(index){
          var removed = incEditExisting.splice(index,1)[0];
          if(removed){ incEditRemoved.push(removed.idfile); }
          renderIncEditExisting();
      }

      function removeIncEditNewFile(index){
          incEditNew.splice(index,1);
          renderIncEditNew();
      }

      var matEditExisting = [];
      var matEditRemoved = [];
      var matEditNew = [];
      var matEditInput = document.getElementById('material_files');
      var matEditExistingPreview = document.getElementById('material_existing_files');
      var matEditNewPreview = document.getElementById('material_new_files');
      if(matEditInput){
          matEditInput.addEventListener('change', function(){
              matEditNew = matEditNew.concat(Array.from(this.files));
              renderMatEditNew();
          });
      }

      function renderMatEditExisting(){
          if(!matEditExistingPreview){ return; }
          matEditExistingPreview.innerHTML = '';
          matEditExisting.forEach(function(file, index){
              var wrap = document.createElement('div');
              wrap.className = 'position-relative m-1';
              var elem;
              if(file.url && file.name.match(/\.(png|jpe?g|gif|webp)$/i)){
                  elem = document.createElement('img');
                  elem.src = file.url;
                  elem.className = 'img-thumbnail';
                  elem.style.maxWidth = '100px';
              }else{
                  elem = document.createElement('div');
                  elem.className = 'd-flex flex-column align-items-center border rounded p-2';
                  elem.style.width = '100px';
                  elem.innerHTML = '<i class="fas ' + getFileIcon(file.name) + ' fa-2x"></i><small class="text-truncate" style="max-width:90px;">' + file.name + '</small>';
              }
              var rm = document.createElement('button');
              rm.type = 'button';
              rm.className = 'btn-close position-absolute top-0 end-0';
              rm.addEventListener('click', function(){ removeExistingMatFile(index); });
              wrap.appendChild(elem);
              wrap.appendChild(rm);
              matEditExistingPreview.appendChild(wrap);
          });
      }

      function renderMatEditNew(){
          if(!matEditNewPreview){ return; }
          matEditNewPreview.innerHTML = '';
          var dt = new DataTransfer();
          matEditNew.forEach(function(file, index){
              dt.items.add(file);
              var wrap = document.createElement('div');
              wrap.className = 'position-relative m-1';
              var elem;
              if(file.type && file.type.startsWith('image/')){
                  elem = document.createElement('img');
                  elem.src = URL.createObjectURL(file);
                  elem.className = 'img-thumbnail';
                  elem.style.maxWidth = '100px';
              }else{
                  elem = document.createElement('div');
                  elem.className = 'd-flex flex-column align-items-center border rounded p-2';
                  elem.style.width = '100px';
                  elem.innerHTML = '<i class="fas ' + getFileIcon(file.name) + ' fa-2x"></i><small class="text-truncate" style="max-width:90px;">' + file.name + '</small>';
              }
              var rm = document.createElement('button');
              rm.type = 'button';
              rm.className = 'btn-close position-absolute top-0 end-0';
              rm.addEventListener('click', function(){ removeMatEditNewFile(index); });
              wrap.appendChild(elem);
              wrap.appendChild(rm);
              matEditNewPreview.appendChild(wrap);
          });
          if(matEditInput){ matEditInput.files = dt.files; }
      }

      function removeExistingMatFile(index){
          var removed = matEditExisting.splice(index,1)[0];
          if(removed){ matEditRemoved.push(removed.idfile); }
          renderMatEditExisting();
      }

      function removeMatEditNewFile(index){
          matEditNew.splice(index,1);
          renderMatEditNew();
      }

      function enviarIncidenciaAviso(){
          var form = document.getElementById('formIncidenciaAviso');
          var formData = new FormData(form);
          $.ajax({
              type: 'POST',
              url: '{{ fsc.url() }}?code={{ aviso.id }}&action=guardarIncidencia',
              data: formData,
              contentType: false,
              processData: false,
              success: function(){
                  form.reset();
                  incFiles = [];
                  renderIncFiles();
                  var off = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasIncidenciaAviso'));
                  if(off){ off.hide(); }
                  location.reload(true);
              }
          });
      }

      function addChecklistItem(idParte){
          var container = document.getElementById('checklistContainer');
          if(!container){ return; }
          var input = container.querySelector('#checklist-desc-' + idParte);
          if(!input){ return; }
          var descripcion = input.value.trim();
          if(descripcion === ''){ return; }
          var list = container.querySelector('#checklist-list-' + idParte);
          if(list){
              var li = document.createElement('li');
              li.className = 'list-group-item';
              li.textContent = descripcion;
              list.appendChild(li);
          }
          var form = document.getElementById('formParte');
          if(form){
              var hidden = document.createElement('input');
              hidden.type = 'hidden';
              hidden.name = 'checklist_nuevos[]';
              hidden.value = descripcion;
              form.appendChild(hidden);
          }
          input.value = '';
      }

      document.querySelectorAll('li[data-idparte]').forEach(function (item) {
        item.addEventListener('click', function () {
            var form = document.getElementById('formParte');
            form.querySelector('[name="idparte"]').value = this.dataset.idparte;
            form.querySelector('[name="horas"]').value = this.dataset.horas || '';
            form.querySelector('[name="horas_extra"]').value = this.dataset.horas_extra || '';
            form.querySelector('[name="comidas"]').value = this.dataset.comidas || '';
            form.querySelector('[name="dietas"]').value = this.dataset.dietas || '';
            form.querySelector('[name="vehiculo"]').value = '';
            form.querySelector('[name="kminicial"]').value = '';
            form.querySelector('[name="kmfinal"]').value = '';
            form.querySelector('[name="material_cantidad"]').value = '';
            form.querySelector('[name="material_descripcion"]').value = '';
            var container = document.getElementById('checklistContainer');
            var html = document.getElementById('checklist-parte-' + this.dataset.idparte);
            if(container){
                container.innerHTML = html ? html.innerHTML : '';
            }
            document.getElementById('offcanvasParteNuevoLabel').textContent = 'Editar Parte';
        });
    });
    document.getElementById('offcanvasParteNuevo').addEventListener('hidden.bs.offcanvas', function () {
        var form = document.getElementById('formParte');
        form.reset();
        form.querySelector('[name="idparte"]').value = '';
        var checklistCont = document.getElementById('checklistContainer');
        if(checklistCont){ checklistCont.innerHTML = ''; }
        document.getElementById('offcanvasParteNuevoLabel').textContent = 'Nuevo Parte';
        form.querySelectorAll('input[name="checklist_nuevos[]"]').forEach(function(el){ el.remove(); });
        matFiles = [];
        if(matInputNew){ matInputNew.value=''; }
        renderMatFiles();
    });

    var offInc = document.getElementById('offcanvasIncidenciaAviso');
    if(offInc){
        offInc.addEventListener('hidden.bs.offcanvas', function(){
            incFiles = [];
            if(incInput){ incInput.value=''; }
            renderIncFiles();
        });
    }

    var modalMat = document.getElementById('modalMaterial');
    if(modalMat){
        modalMat.addEventListener('hidden.bs.modal', function(){
            matEditExisting = [];
            matEditNew = [];
            matEditRemoved = [];
            if(matEditInput){ matEditInput.value=''; }
            renderMatEditExisting();
            renderMatEditNew();
        });
    }

    var modalIncEdit = document.getElementById('modalIncidencia');
    if(modalIncEdit){
        modalIncEdit.addEventListener('hidden.bs.modal', function(){
            incEditExisting = [];
            incEditNew = [];
            incEditRemoved = [];
            if(incEditInput){ incEditInput.value = ''; }
            renderIncEditExisting();
            renderIncEditNew();
        });
    }

    document.getElementById('btnIncidenciaParte').addEventListener('click', function () {
        var idParte = document.getElementById('formParte').querySelector('[name="idparte"]').value;
        var inputHidden = document.getElementById('idparteAviso');
        var inputText = document.getElementById('idparteAvisoText');
        if (inputHidden) {
            inputHidden.value = idParte;
        }
        if (inputText) {
            inputText.value = 'Parte ' + idParte;
        }
    });

    function openMaterialModal(el){
        document.getElementById('material_id').value = el.dataset.id;
        document.getElementById('material_cantidad').value = el.dataset.cantidad || '';
        document.getElementById('material_descripcion').value = el.dataset.descripcion || '';
        if(matEditInput){ matEditInput.value=''; }
        matEditNew = [];
        matEditRemoved = [];
        try{
            matEditExisting = el.dataset.files ? JSON.parse(el.dataset.files) : [];
        }catch(e){ matEditExisting = []; }
        renderMatEditExisting();
        renderMatEditNew();
        var modal = new bootstrap.Modal(document.getElementById('modalMaterial'));
        modal.show();
    }

    function guardarMaterial(){
        var form = document.getElementById('formMaterial');
        var formData = new FormData(form);
        formData.append('action','editarMaterial');
        matEditRemoved.forEach(function(id){ formData.append('delete_files[]', id); });
        $.ajax({
            type:'POST',
            url:'{{ fsc.url() }}?code={{ aviso.id }}&action=editarMaterial',
            data:formData,
            contentType:false,
            processData:false,
            success:function(){ location.reload(true); }
        });
    }

    function openKilometrajeModal(el){
        document.getElementById('kilometraje_id').value = el.dataset.id;
        document.getElementById('kilometraje_vehiculo').value = el.dataset.vehiculo || '';
        document.getElementById('kilometraje_kminicial').value = el.dataset.kminicial || '';
        document.getElementById('kilometraje_kmfinal').value = el.dataset.kmfinal || '';
        var modal = new bootstrap.Modal(document.getElementById('modalKilometraje'));
        modal.show();
    }

    function guardarKilometraje(){
        var form = document.getElementById('formKilometraje');
        var formData = new FormData(form);
        formData.append('action','editarKilometraje');
        $.ajax({
            type:'POST',
            url:'{{ fsc.url() }}?code={{ aviso.id }}&action=editarKilometraje',
            data:formData,
            contentType:false,
            processData:false,
            success:function(){ location.reload(true); }
        });
    }

    function openIncidenciaModal(el){
        document.getElementById('incidencia_id').value = el.dataset.id;
        document.getElementById('incidencia_titulo').value = el.dataset.titulo || '';
        document.getElementById('incidencia_descripcion').value = el.dataset.descripcion || '';
        if(incEditInput){ incEditInput.value = ''; }
        incEditNew = [];
        incEditRemoved = [];
        try{
            incEditExisting = el.dataset.files ? JSON.parse(el.dataset.files) : [];
        }catch(e){ incEditExisting = []; }
        renderIncEditExisting();
        renderIncEditNew();
        var modal = new bootstrap.Modal(document.getElementById('modalIncidencia'));
        modal.show();
    }

    function guardarIncidenciaEdit(){
        var form = document.getElementById('formIncidenciaEdit');
        var formData = new FormData(form);
        formData.append('action','editarIncidencia');
        incEditRemoved.forEach(function(id){ formData.append('delete_files[]', id); });
        $.ajax({
            type:'POST',
            url:'{{ fsc.url() }}?code={{ aviso.id }}&action=editarIncidencia',
            data:formData,
            contentType:false,
            processData:false,
            success:function(){ location.reload(true); }
        });
    }

    function openChecklistModal(el){
        document.getElementById('checklist_id').value = el.dataset.id;
        document.getElementById('checklist_descripcion').value = el.dataset.descripcion || '';
        document.getElementById('checklist_marcado').checked = el.dataset.marcado === '1';
        var modal = new bootstrap.Modal(document.getElementById('modalChecklist'));
        modal.show();
    }

    function guardarChecklist(){
        var form = document.getElementById('formChecklist');
        var formData = new FormData(form);
        formData.append('action','guardarChecklistParte');
        $.ajax({
            type:'POST',
            url:'{{ fsc.url() }}?code={{ aviso.id }}&action=guardarChecklistParte',
            data:formData,
            contentType:false,
            processData:false,
            success:function(){ location.reload(true); }
        });
    }

    function eliminarChecklist(id){
        var formData = new FormData();
        formData.append('action', 'eliminarChecklistParte');
        formData.append('id', id);
        if(formData){
            $.ajax({
                type: 'POST',
                url: '{{ fsc.url() }}?code={{ aviso.id }}&action=eliminarChecklistParte',
                data: formData,
                contentType: false,
                processData: false,
                success: function(){
                    location.reload(true);
                }
            });
        }
    }

    function eliminarMaterial(id){
        var formData = new FormData();
        formData.append('action', 'eliminarMaterial');
        formData.append('id', id);
        $.ajax({
            type: 'POST',
            url: '{{ fsc.url() }}?code={{ aviso.id }}&action=eliminarMaterial',
            data: formData,
            contentType: false,
            processData: false,
            success: function(){
                location.reload(true);
            }
        });
    }

    function eliminarKilometraje(id){
        var formData = new FormData();
        formData.append('action', 'eliminarKilometraje');
        formData.append('id', id);
        $.ajax({
            type: 'POST',
            url: '{{ fsc.url() }}?code={{ aviso.id }}&action=eliminarKilometraje',
            data: formData,
            contentType: false,
            processData: false,
            success: function(){
                location.reload(true);
            }
        });
    }

    function eliminarIncidencia(id){
        var formData = new FormData();
        formData.append('action', 'eliminarIncidencia');
        formData.append('id', id);
        $.ajax({
            type: 'POST',
            url: '{{ fsc.url() }}?code={{ aviso.id }}&action=eliminarIncidencia',
            data: formData,
            contentType: false,
            processData: false,
            success: function(){
                location.reload(true);
            }
        });
    }
    </script>
    {% endif %}
{% endblock %}