@extends('layouts.app')

@section('content')
 {{-- 
    COLUMNA IZQUIERDA: Formulario principal para crear un cálculo
    Incluye selección de tipo y carga dinámica de campos adicionales
  --}}
<div class="row g-6 mb-6">
  <div class="col-lg-6 order-md-0 order-lg-0">
    <div class="card h-100">
      <h5 class="card-header">{{ __('fields.cost_calculation.new_cost_calculation') }}</h5>

      <form method="POST" action="{{ route('cost-calculations.store') }}" class="card-body">
        @csrf

        <div class="row g-4 mb-3">
            @if ($errors->any())
              <div class="alert alert-danger">
                <h6 class="mb-2">{{ __('fields.cost_calculation.Hay errores en el formulario') }}</h6>
                <ul class="mb-0">
                  @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                  @endforeach
                </ul>
              </div>
            @endif

          <div class="col-md-5">
            {{-- Selección de tipo: Producto o Servicio --}}
            <label for="type" class="form-label d-flex justify-content-between align-items-center">
              <span>
                {{ __('fields.cost_calculation.what_are_you_calculating') }}
                <span class="text-danger">*</span>
              </span>
              <i class="ti tabler-info-circle text-info"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                data-bs-custom-class="tooltip-info"
                title="{{ __('fields.cost_calculation.tootip_1') }}"></i>
            </label>

            <select id="type" name="type" class="form-select" required>
              <option value="">{{ __('fields.select_an_option') }}</option>
              <option value="product" {{ old('type') == 'product' ? 'selected' : '' }}>
                {{ __('fields.cost_calculation.physical_product') }}
              </option>
              <option value="service" {{ old('type') == 'service' ? 'selected' : '' }}>
                {{ __('fields.cost_calculation.printing_service') }}
              </option>
            </select>
            {{-- Muestra errores de validación --}}
            @error('type') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
          </div>
        </div>
        {{-- Aquí se inyecta dinámicamente el formulario parcial según el tipo elegido --}}
        <div id="form-content">
          {{-- Aquí se cargará dinámicamente el formulario según el tipo --}}
        </div>
        {{-- Botones de acción: Guardar o Volver --}}
        <div class="pt-4 text-end">
          {{-- Botón guardar, inicialmente oculto hasta que se selecciona tipo y se carga el formulario --}}
          <button id="save-btn" type="submit" class="btn btn-outline-success waves-effect me-2 d-none">
            <i class="menu-icon icon-base ti tabler-device-floppy me-1"></i> {{ __('fields.buttons_save') }}
          </button>
          {{-- Botón para volver al listado --}}
          <a href="{{ route('cost-calculations.index') }}" class="btn btn-outline-secondary ">
            <i class="menu-icon icon-base ti tabler-arrow-narrow-left-dashed"></i></i> {{ __('fields.buttons_volver_listado') }}
          </a>
        </div>
      </form>
    </div>
  </div>

  {{-- 
    COLUMNA DERECHA: Resumen dinámico del cálculo
    Muestra en tiempo real:
    - Costo total calculado
    - Precio sugerido
    - Precio actual
    - Ganancia neta
    - Gráfica de rentabilidad
  --}}
  <div class="col-md-6 order-md-3 order-lg-0">
    <div class="card h-100">
      <div class="card-header d-flex justify-content-between">
        <div class="card-title mb-0">
          <h5 class="mb-1">{{ __('fields.cost_calculation.h5_resumen_calculo') }}</h5>
          <p class="card-subtitle">{{ __('fields.cost_calculation.p_resultado_timpo_real') }}</p>
        </div>
      </div>
      {{-- Indicadores principales --}}
      <div class="card-body row">
        <div class="col-12 col-sm-4 col-md-12 col-lg-4">
          <div class="mt-lg-4 mt-lg-2 mb-lg-6 mb-2">
            <h2 class="mb-0" id="total_real_cost">{{ __('fields.cost_calculation.h2_0') }}</h2>
            <p class="mb-0">{{ __('fields.cost_calculation.p_total_real_cost') }}</p>
          </div>
          <ul class="p-0 m-0">
            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
              <div class="badge rounded bg-label-primary p-1_5">
                <i class="icon-base ti tabler-ticket icon-md"></i>
              </div>
              <div>
                <h6 class="mb-0 text-nowrap">{{ __('fields.cost_calculation.h6_precio_sugerido') }}</h6>
                <small class="text-body-secondary" id="suggested_price">{{ __('fields.cost_calculation.small_0') }}</small>
              </div>
            </li>
            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
              <div class="badge rounded bg-label-info p-1_5">
                <i class="icon-base ti tabler-circle-check icon-md"></i>
              </div>
              <div>
                <h6 class="mb-0 text-nowrap">{{ __('fields.cost_calculation.h6_prcio_actual_venta') }}</h6>
                <small class="text-body-secondary" id="current_price_display">{{ __('fields.cost_calculation.small_0') }}</small>
              </div>
            </li>
            <li class="d-flex gap-4 align-items-center pb-1">
              <div class="badge rounded bg-label-warning p-1_5">
                <i class="icon-base ti tabler-clock icon-md"></i>
              </div>
              <div>
                <h6 class="mb-0 text-nowrap">{{ __('fields.cost_calculation.h6_ganancia_neta') }}</h6>
                <small id="real_profit" class="text-body-secondary">{{ __('fields.cost_calculation.small_0') }}</small>
              </div>
            </li>
          </ul>
        </div>
        {{-- Gráfica de rentabilidad en tiempo real --}}
        <div class="col-12 col-sm-8 col-md-12 col-lg-8">
          <div id="profitabilityChart"></div>
          <small class="text-muted d-block mt-1">
            {{ __('fields.cost_calculation.small_1') }}
          </small>
        </div>
      </div>
    </div>
</div>
</div>
@endsection
@push('scripts')
 {{-- 
    Traducciones JS para etiquetas de rentabilidad
    Se inyectan como variables globales para uso en cost-calculation.js
  --}}
  <script>
    window.costCalcI18n = {
      rentable: @json(__('fields.cost_calculation.rentable')),
      not_rentable: @json(__('fields.cost_calculation.not_rentable')),
      ganancia_real: @json(__('fields.cost_calculation.ganancia_real')),
      moneda: @json(__('fields.moneda')),
      ganancia_invalida: @json(__('fields.cost_calculation.ganancia_inválida')),
      porcentaje_permitido: @json(__('fields.cost_calculation.porcentaje_permitido')),
      ganancia_negativa: @json(__('fields.cost_calculation.ganancia_negativa'))
    };
  </script>
   {{-- Script principal de la página
     - Maneja carga dinámica del formulario parcial según tipo
     - Calcula totales en tiempo real
     - Renderiza la gráfica de rentabilidad
  --}}
  <script src="{{ asset('assets/js/cost-calculation.js') }}"></script>
@endpush