@extends('layouts.app')
@section('titulo','Orden de trabajo')
@section('contenido')
@php $editando = (bool) $orden->id; @endphp
<h4><i class="fa fa-wrench"></i> {{ $editando?'Editar':'Nueva' }} orden ({{ ucfirst($orden->clase) }})</h4>
<form method="POST" action="{{ $editando ? route('ordenes.update',$orden) : route('ordenes.store') }}" class="card p-3">
  @csrf @if($editando) @method('PUT') @endif
  <input type="hidden" name="clase" value="{{ $orden->clase }}">
  <div class="row g-3">
    <div class="col-md-3"><label class="form-label small">Plan (opcional)</label>
      <select name="plan_id" class="form-select"><option value="">—</option>
        @foreach($planes as $p)
          <option value="{{ $p->id }}"
                  data-area="{{ $p->area_id }}"
                  data-sistema="{{ $p->sistema_id }}"
                  data-equipo="{{ $p->equipo_id }}"
                  data-responsable="{{ optional($p->items->first())->responsable_id }}"
                  @selected(old('plan_id',$orden->plan_id)==$p->id)>{{ $p->codigo }} - {{ $p->nombre }}</option>
        @endforeach
      </select></div>
    <div class="col-md-3"><label class="form-label small">Área</label>
      <select name="area_id" class="form-select"><option value="">—</option>
        @foreach($areas as $a)<option value="{{ $a->id }}" @selected(old('area_id',$orden->area_id)==$a->id)>{{ $a->nombre }}</option>@endforeach
      </select></div>
    <div class="col-md-3"><label class="form-label small">Equipo *</label>
      <select name="equipo_id" class="form-select" required><option value="">—</option>
        @foreach($equipos as $e)<option value="{{ $e->id }}" @selected(old('equipo_id',$orden->equipo_id)==$e->id)>{{ $e->codigo }} - {{ $e->nombre }}</option>@endforeach
      </select></div>
    <div class="col-md-3"><label class="form-label small">Responsable principal</label>
      <select name="responsable_id" class="form-select"><option value="">—</option>
        @foreach($usuarios as $u)<option value="{{ $u->id }}" @selected(old('responsable_id',$orden->responsable_id)==$u->id)>{{ $u->nombre_completo ?: $u->usuario }}</option>@endforeach
      </select></div>
    <div class="col-md-3"><label class="form-label small">Estado</label>
      <select name="estado_id" class="form-select"><option value="">—</option>
        @foreach($estados as $e)<option value="{{ $e->id }}" @selected(old('estado_id',$orden->estado_id)==$e->id)>{{ $e->nombre }}</option>@endforeach
      </select></div>
    <div class="col-md-3"><label class="form-label small">Prioridad</label>
      <select name="prioridad_id" class="form-select"><option value="">—</option>
        @foreach($prioridades as $p)<option value="{{ $p->id }}" @selected(old('prioridad_id',$orden->prioridad_id)==$p->id)>{{ $p->nombre }}</option>@endforeach
      </select></div>
    <div class="col-md-3"><label class="form-label small">Fecha programada</label>
      <input type="date" name="fecha_programada" value="{{ old('fecha_programada',optional($orden->fecha_programada)->format('Y-m-d')) }}" class="form-control"></div>
    <div class="col-md-3"><label class="form-label small">Vencimiento</label>
      <input type="datetime-local" name="fecha_vencimiento" value="{{ old('fecha_vencimiento',optional($orden->fecha_vencimiento)->format('Y-m-d\TH:i')) }}" class="form-control"></div>
    <div class="col-md-3"><label class="form-label small">Horómetro inicio</label>
      <input type="number" step="0.01" name="horometro_inicio" value="{{ old('horometro_inicio',$orden->horometro_inicio) }}" class="form-control"></div>
    <div class="col-md-3"><label class="form-label small">Horómetro fin</label>
      <input type="number" step="0.01" name="horometro_fin" value="{{ old('horometro_fin',$orden->horometro_fin) }}" class="form-control"></div>
    <div class="col-12"><label class="form-label small">Descripción</label>
      <textarea name="descripcion" class="form-control" rows="2">{{ old('descripcion',$orden->descripcion) }}</textarea></div>
    <div class="col-12"><label class="form-label small">Observaciones</label>
      <textarea name="observaciones" class="form-control" rows="2">{{ old('observaciones',$orden->observaciones) }}</textarea></div>
  </div>
  <div class="mt-3 text-end">
    <a href="{{ route('ordenes.index') }}" class="btn btn-outline-secondary">Cancelar</a>
    <button class="btn btn-primario"><i class="fa fa-save"></i> Guardar</button>
  </div>
</form>

@push('scripts_inline')
(function () {
  const planSel = document.querySelector('select[name="plan_id"]');
  if (!planSel) return;
  const areaSel = document.querySelector('select[name="area_id"]');
  const equipoSel = document.querySelector('select[name="equipo_id"]');
  const respSel = document.querySelector('select[name="responsable_id"]');

  const setVal = (sel, val) => {
    if (!sel || val === '' || val == null) return;
    if (sel.tomselect) sel.tomselect.setValue(String(val), true);
    else sel.value = String(val);
  };

  const llenar = () => {
    const opt = planSel.options[planSel.selectedIndex];
    if (!opt || !opt.value) return;
    setVal(areaSel, opt.dataset.area);
    setVal(equipoSel, opt.dataset.equipo);
    if (respSel && !respSel.value && opt.dataset.responsable) {
      setVal(respSel, opt.dataset.responsable);
    }
  };

  planSel.addEventListener('change', llenar);
})();
@endpush

@endsection