{{-- 
  Vista principal del módulo "Cálculo de Costos"
  Renderiza una tarjeta con una tabla DataTables vacía (el cuerpo se llena vía AJAX)
  Las traducciones de los encabezados se manejan en resources/lang/{locale}/fields.php
--}}

@extends('layouts.app') {{-- Extiende el layout principal de la app (con navbar, sidebar, etc.) --}}

@section('content')
<div class="card">
  <div class="card-datatable table-responsive pt-0">
    {{-- 
      Tabla interactiva (DataTables).
      El <thead> define las columnas, pero el <tbody> se llena dinámicamente desde el JS con datos vía AJAX.
      Para el usuario es una tabla completamente funcional (paginada, filtrable, ordenable).
    --}}
    <table class="datatables-basic table">
      <thead>
        <tr>
          <th></th> {{-- Icono para expandir detalle en móvil (funcionalidad responsive de DataTables) --}}
          <th></th> {{-- Checkbox para selección múltiple de filas --}}
          <th>{{ __('fields.cost_calculation.th_sku') }}</th> {{-- SKU del producto o servicio, clave única en inventario --}}
          <th>{{ __('fields.cost_calculation.th_producto_servicio') }}</th> {{-- Nombre del producto o servicio --}}
          <th>{{ __('fields.cost_calculation.th_tipo') }}</th> {{-- Tipo de ítem (Producto o Servicio) --}}
          <th>{{ __('fields.cost_calculation.th_costo_total') }}</th> {{-- Costo total del ítem (resultado del cálculo de costos) --}}
          <th>{{ __('fields.cost_calculation.th_precio_sugerido') }}</th>  {{-- Precio sugerido basado en margen objetivo --}}
          <th>{{ __('fields.cost_calculation.th_precio_actual') }}</th> {{-- Precio actual cargado en sistema --}}
          <th>{{ __('fields.cost_calculation.th_margen') }}</th> {{-- Margen de ganancia (%) usado o calculado --}}
          <th>{{ __('fields.cost_calculation.th_rentabilidad') }}</th> {{-- Rentabilidad estimada o calculada --}}
          <th>{{ __('fields.cost_calculation.th_acciones') }}</th> {{-- Acciones disponibles (editar, eliminar, ver) --}}
        </tr>
      </thead>
    </table>
  </div>
</div>
@endsection

@push('scripts')
 {{-- 
    Incluye el bloque de traducciones para DataTables.
    Este include Blade genera un script que define los textos de DataTables (Search, Next, etc.) en el idioma seleccionado.
    Se pasa el título de la tabla desde las traducciones centralizadas.
  --}}
  @include('components.datatables.translations', [
    'tableTitle' => __('fields.cost_calculation.tableTitle')
  ])
{{-- 
    Incluye el script específico para inicializar esta tabla.
    Ubicado en public/vuexy-assets/js/pages/cost-calculations-table.js
    Define columnas, endpoint AJAX, formateo de datos y callbacks de interacción.
  --}}
<script src="{{ asset('vuexy-assets/js/pages/cost-calculations-table.js') }}"></script>
@endpush