@extends('layouts.app')
@section('title', 'Nuevo Empleado')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0"><i class="bi bi-person-plus me-2"></i>Nuevo Empleado</h5>
    <a href="{{ route('empleados.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i> Volver
    </a>
</div>

<form action="{{ route('empleados.store') }}" method="POST">
@csrf
<div class="row g-3">

{{-- ── COLUMNA IZQUIERDA ── --}}
<div class="col-lg-8">

  {{-- Datos personales --}}
  <div class="card mb-3">
    <div class="card-header"><i class="bi bi-person me-1"></i> Datos Personales</div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">Nombre completo <span class="text-danger">*</span></label>
          <input type="text" name="nombre" class="form-control @error('nombre') is-invalid @enderror"
                 value="{{ old('nombre') }}" required>
          @error('nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">Cédula <span class="text-danger">*</span></label>
          <input type="text" name="cedula" class="form-control @error('cedula') is-invalid @enderror"
                 value="{{ old('cedula') }}" required>
          @error('cedula')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">Cargo</label>
          <input type="text" name="cargo" class="form-control" value="{{ old('cargo') }}">
        </div>
        <div class="col-md-3">
          <label class="form-label fw-semibold">Tipo contrato</label>
          <select name="tipo_contrato" class="form-select">
            <option value="indefinido" {{ old('tipo_contrato','indefinido')==='indefinido'?'selected':'' }}>Indefinido</option>
            <option value="fijo"       {{ old('tipo_contrato')==='fijo'?'selected':'' }}>Término fijo</option>
            <option value="obra"       {{ old('tipo_contrato')==='obra'?'selected':'' }}>Obra o labor</option>
            <option value="prestacion" {{ old('tipo_contrato')==='prestacion'?'selected':'' }}>Prestación servicios</option>
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label fw-semibold">Fecha ingreso</label>
          <input type="date" name="fecha_ingreso" class="form-control" value="{{ old('fecha_ingreso') }}">
        </div>
      </div>
    </div>
  </div>

  {{-- Salario y beneficios --}}
  <div class="card mb-3">
    <div class="card-header"><i class="bi bi-cash-coin me-1"></i> Salario y Beneficios</div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label fw-semibold">Salario base <span class="text-danger">*</span></label>
          <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="number" name="salario" class="form-control @error('salario') is-invalid @enderror"
                   value="{{ old('salario',0) }}" min="0" step="1000" required>
          </div>
          @error('salario')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">Medicina prepagada</label>
          <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="number" name="medicina_prepagada" class="form-control"
                   value="{{ old('medicina_prepagada',0) }}" min="0" step="1000">
          </div>
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">Auxilio alimentación</label>
          <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="number" name="alimentacion" class="form-control"
                   value="{{ old('alimentacion',0) }}" min="0" step="1000">
          </div>
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">Zafiro</label>
          <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="number" name="zafiro" class="form-control"
                   value="{{ old('zafiro',0) }}" min="0" step="1000">
          </div>
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">ARL %
            <small class="text-muted fw-normal">(Riesgo I=0.522)</small>
          </label>
          <input type="number" name="arl_porcentaje" class="form-control"
                 value="{{ old('arl_porcentaje',0.5220) }}" min="0" max="10" step="0.001">
        </div>
        <div class="col-md-4 d-flex align-items-end">
          <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" name="aux_transporte" id="auxTransporte" value="1"
                   {{ old('aux_transporte') ? 'checked' : '' }}>
            <label class="form-check-label" for="auxTransporte">
              Auxilio de transporte<br>
              <small class="text-muted">SMLV ≤ 2 ($202.100)</small>
            </label>
          </div>
        </div>
      </div>

      {{-- Costo calculado en tiempo real --}}
      <div class="alert alert-light border mt-3 mb-0 p-2" id="resumenCosto" style="font-size:.83rem">
        <div class="row text-center">
          <div class="col-4">
            <div class="fw-semibold text-primary" id="costoMensual">$ 0</div>
            <div class="text-muted">Costo real/mes</div>
          </div>
          <div class="col-4">
            <div class="fw-semibold text-success" id="valorHoraReal">$ 0</div>
            <div class="text-muted">Valor hora real</div>
          </div>
          <div class="col-4">
            <div class="fw-semibold text-secondary" id="cargaPct">51.85%</div>
            <div class="text-muted">Carga prestacional</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Acceso al sistema --}}
  <div class="card mb-3">
    <div class="card-header"><i class="bi bi-shield-lock me-1"></i> Acceso al Sistema</div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-5">
          <label class="form-label fw-semibold">Correo electrónico</label>
          <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                 value="{{ old('email') }}" placeholder="correo@gessig.com">
          <div class="form-text">Dejar vacío si no tendrá acceso al sistema.</div>
          @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">Contraseña</label>
          <input type="text" name="password" class="form-control" placeholder="Mínimo 6 caracteres">
          <div class="form-text">Vacío = usa la cédula como clave.</div>
        </div>
        <div class="col-md-3">
          <label class="form-label fw-semibold">Rol</label>
          <select name="rol" class="form-select">
            <option value="empleado"   {{ old('rol','empleado')==='empleado'?'selected':'' }}>Empleado</option>
            <option value="supervisor" {{ old('rol')==='supervisor'?'selected':'' }}>Supervisor</option>
            <option value="admin"      {{ old('rol')==='admin'?'selected':'' }}>Administrador</option>
          </select>
        </div>
      </div>
    </div>
  </div>

</div>{{-- fin col-lg-8 --}}

{{-- ── COLUMNA DERECHA — Centros de costo ── --}}
<div class="col-lg-4">
  <div class="card mb-3 h-auto">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span><i class="bi bi-diagram-3 me-1"></i> Centros de Costo</span>
      <div class="d-flex gap-1">
        <button type="button" class="btn btn-xs btn-outline-secondary" onclick="toggleCC(true)" style="font-size:11px;padding:1px 6px">Todos</button>
        <button type="button" class="btn btn-xs btn-outline-secondary" onclick="toggleCC(false)" style="font-size:11px;padding:1px 6px">Ninguno</button>
      </div>
    </div>
    <div class="card-body p-2" style="max-height:500px;overflow-y:auto">
      <div class="form-text mb-2 px-1">Todos vienen seleccionados. Desmarque los que NO apliquen para este empleado.</div>
      {{-- Marcador: permite distinguir primer cargue vs reenvío tras error de validación --}}
      <input type="hidden" name="cc_enviado" value="1">
      @php
        // Primer cargue: todos marcados. Si el formulario se reenvió por un
        // error de validación, se respeta lo que el usuario dejó marcado.
        $ccSeleccionados = old('cc_enviado') ? (array) old('centros_costo', []) : null;
      @endphp
      @foreach($centrosCosto->groupBy('area') as $area => $ccs)
      <div class="mb-2">
        <div style="font-size:11px;font-weight:600;text-transform:uppercase;color:#999;padding:4px 4px 2px">{{ $area ?? 'General' }}</div>
        @foreach($ccs as $cc)
        <div class="form-check form-check-sm" style="padding-left:1.5rem">
          <input class="form-check-input cc-check" type="checkbox"
                 name="centros_costo[]" value="{{ $cc->id }}"
                 id="cc_{{ $cc->id }}"
                 {{ is_null($ccSeleccionados) || in_array($cc->id, $ccSeleccionados) ? 'checked' : '' }}>
          <label class="form-check-label" for="cc_{{ $cc->id }}" style="font-size:13px">
            {{ $cc->nombre }}
            @if($cc->es_exento)<span class="badge badge-exento" style="font-size:10px">ex</span>@endif
          </label>
        </div>
        @endforeach
      </div>
      @endforeach
    </div>
  </div>

  {{-- Estado --}}
  <div class="card">
    <div class="card-body">
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" name="activo" id="activo" value="1"
               {{ old('activo', '1') ? 'checked' : '' }}>
        <label class="form-check-label fw-semibold" for="activo">Empleado activo</label>
      </div>
    </div>
  </div>
</div>

</div>{{-- fin row --}}

<div class="d-flex gap-2 mt-2 mb-4">
  <button type="submit" class="btn btn-primary">
    <i class="bi bi-check-lg me-1"></i> Crear Empleado
  </button>
  <a href="{{ route('empleados.index') }}" class="btn btn-outline-secondary">Cancelar</a>
</div>
</form>

@push('scripts')
<script>
function toggleCC(check) {
    document.querySelectorAll('.cc-check').forEach(c => c.checked = check);
}

// Cálculo en tiempo real del costo laboral
const TASA = 0.5185; // 51.85% fijo + ARL variable
const HORAS_MES = 190;

function calcularCosto() {
    const salario = parseFloat(document.querySelector('[name=salario]').value) || 0;
    const medicina = parseFloat(document.querySelector('[name=medicina_prepagada]').value) || 0;
    const alim = parseFloat(document.querySelector('[name=alimentacion]').value) || 0;
    const zafiro = parseFloat(document.querySelector('[name=zafiro]').value) || 0;
    const arl = parseFloat(document.querySelector('[name=arl_porcentaje]').value) || 0.522;
    const auxTrans = document.getElementById('auxTransporte').checked ? 202100 : 0;

    const prestaciones = salario * (TASA - 0.0052 + arl/100); // reemplaza ARL base con el ingresado
    const total = salario + prestaciones + medicina + alim + zafiro + auxTrans;
    const horaReal = HORAS_MES > 0 ? total / HORAS_MES : 0;
    const pct = salario > 0 ? ((prestaciones / salario) * 100).toFixed(1) : '0.0';

    const fmt = v => '$ ' + Math.round(v).toLocaleString('es-CO');
    document.getElementById('costoMensual').textContent = fmt(total);
    document.getElementById('valorHoraReal').textContent = fmt(horaReal);
    document.getElementById('cargaPct').textContent = pct + '%';
}

document.querySelectorAll('[name=salario],[name=medicina_prepagada],[name=alimentacion],[name=zafiro],[name=arl_porcentaje]')
    .forEach(el => el.addEventListener('input', calcularCosto));
document.getElementById('auxTransporte').addEventListener('change', calcularCosto);
calcularCosto();
</script>
@endpush
@endsection