@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-6">
        <div class="card mb-6">
            <div class="card-body">
             <div class="d-flex justify-content-between align-items-center mb-1">
              <div class="text-uppercase text-body-secondary small">
                <i class="ti tabler-receipt me-1"></i>
                {{ __('fields.cost_calculation.detalle_Calculo_costos') }}
              </div>
              <a href="{{ route('cost-calculations.download.pdf', $costCalculation->id) }}" class="btn btn-outline-youtube waves-effect btn-sm">
                <i class="menu-icon icon-base ti tabler-file-type-pdf"></i> {{ __('fields.buttons_descargar') }}
              </a>

            </div>
            <small class="text-muted">{{ __('fields.cost_calculation.small_2') }}</small>

              <ul class="list-unstyled my-3 py-1">
                <li class="d-flex align-items-center mb-4">
                  <i class="ti tabler-cube me-1 text-info icon-lg"></i> <span
                      class="fw-medium mx-2">{{ __('fields.cost_calculation.product_name') }}:</span>
                  <span>{{ $costCalculation->product_name }}</span>
                </li>
                  <li class="row mb-4">
                    <div class="col-6 d-flex align-items-center">
                        <i class="ti tabler-category me-1 text-primary icon-lg"></i>
                        <span class="fw-medium mx-2">{{ __('fields.cost_calculation.tipo') }}:</span>
                        <span>{{ $costCalculation->type === 'product' ? 'Producto físico' : 'Servicio de impresión' }}</span>
                    </div>
                    <div class="col-6 d-flex align-items-center">
                        <i class="ti tabler-barcode me-1 text-secondary icon-lg"></i>
                        <span class="fw-medium mx-2">{{ __('fields.cost_calculation.sku') }}:</span>
                        <span>{{ $costCalculation->sku ?? '—' }}</span>
                    </div>
                </li>
                <li class="d-flex align-items-center mb-4">
                    <i class="ti tabler-clock-hour-4 me-1 text-warning  icon-lg"></i> <span
                        class="fw-medium mx-2">{{ __('fields.cost_calculation.production_time_minutes') }}:</span>
                    <span>{{ $costCalculation->production_time_minutes ? $costCalculation->production_time_minutes . ' min' : '—' }}</span>
                </li>
              </ul>
              {{-- Costos --}}
              <div class="row">
                  @foreach ($costs as $label => $value)
                      <div class="col-md-4 mb-3">
                          <label class="form-label fw-bold d-flex align-items-center">
                              <i class="ti tabler-cash me-1 text-success icon-lg"></i> {{ $label }}
                          </label>
                          <span>{{ __('fields.moneda') }}{{ number_format($value ?? 0, 2) }}</span>
                      </div>
                  @endforeach
              </div>

              <ul class="list-unstyled my-3 py-1">

                  <div class="row">
                      <div class="col-6 mb-3">
                          <li class="d-flex align-items-center">
                              <i class="ti tabler-calculator me-1 icon-lg"></i>
                              <span class="fw-medium mx-2">{{ __('fields.cost_calculation.production_time_minutes') }}:</span>
                              <span>${{ number_format($costCalculation->p_total_real_cost, 2) }}</span>
                          </li>
                      </div>
                      <div class="col-6 mb-3">
                          <li class="d-flex align-items-center">
                              <i class="ti tabler-percentage me-1 text-infoicon-lg"></i>
                              <span class="fw-medium mx-2">{{ __('fields.cost_calculation.desired_profit') }}:</span>
                              <span>{{ number_format($costCalculation->desired_profit ?? 0, 2) }}%</span>
                          </li>
                      </div>
                  </div>

                  <div class="row">
                      <div class="col-6 mb-3">
                          <li class="d-flex align-items-center">
                              <i class="ti tabler-currency-dollar me-1 icon-lg"></i>
                              <span class="fw-medium mx-2">{{ __('fields.cost_calculation.h6_precio_sugerido') }}:</span>
                              <span>${{ number_format($costCalculation->suggested_price, 2) }}</span>
                          </li>
                      </div>
                      <div class="col-6 mb-3">
                          <li class="d-flex align-items-center">
                              <i class="ti tabler-tag me-1 text-secondary icon-lg"></i>
                              <span class="fw-medium mx-2">{{ __('fields.cost_calculation.h6_prcio_actual_venta') }}:</span>
                              <span>{{ $costCalculation->current_price ? '$' . number_format($costCalculation->current_price, 2) : '—' }}</span>
                          </li>
                      </div>
                  </div>

                  <div class="row">
                      <div class="col-6 mb-3">
                          <li class="d-flex align-items-center">
                              <i class="ti tabler-trending-up me-1 text-warning icon-lg"></i>
                              <span class="fw-medium mx-2">{{ __('fields.cost_calculation.ganancia_real') }}:</span>
                              <span>{{ $costCalculation->real_profit !== null ? '$' . number_format($costCalculation->real_profit, 2) : '—' }}</span>
                          </li>
                      </div>
                      <div class="col-6 mb-3">
                          <li class="d-flex align-items-center">
                              <i class="ti tabler-graph me-1 text-muted icon-lg"></i>
                              <span class="fw-medium mx-2">{{ __('fields.cost_calculation.ganancia_real') }}</span>
                              <span>{{ $costCalculation->margin_percentage !== null ? number_format($costCalculation->margin_percentage, 2) . '%' : '—' }}</span>
                          </li>
                      </div>
                  </div>

                  <div class="row">
                      <div class="col-12">
                          <li class="d-flex align-items-center">
                              <i class="ti tabler-checklist me-1 text-success icon-lg"></i>
                              <span class="fw-medium mx-2">{{ __('fields.cost_calculation.rentabilidad') }}:</span>
                              <span>{!! $costCalculation->profitability ?? '—' !!}</span>
                          </li>
                      </div>
                  </div>

              </ul>

              <div class="mb-3">
                <div class="d-flex align-items-start">
                  <i class="ti tabler-note me-1 text-info icon-lg"></i>
                  <div class="ms-2">
                    <span class="fw-medium d-block mb-1">{{ __('fields.cost_calculation.notes') }}</span>
                    <span class="text-muted">{{ $costCalculation->notes ?? 'Sin notas adicionales.' }}</span>
                  </div>
                </div>
              </div>
              <div class="text-end">
                <a href="{{ route('cost-calculations.index') }}" class="btn btn-outline-secondary btn-sm">
                  <i class="menu-icon icon-base ti tabler-arrow-narrow-left-dashed"></i></i> {{ __('fields.buttons_volver_listado') }}
                </a>
              </div>
            </div>
        </div>
    </div>

    <div class="col-md-3 d-flex">
      <div class="card mb-3 h-100 w-100">
        <div class="card-header header-elements">
          <h5 class="card-title mb-0">{{ __('fields.cost_calculation.distribucion_costos') }}</h5>
        </div>
        <div class="card-body">
          <div class="position-relative" style="height: 400px;">
            <canvas id="polarChart" class="chartjs w-100 h-100"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-3 d-flex">
      <div class="card mb-3 h-100 w-100">
        <div class="card-header header-elements">
          <h5 class="card-title mb-0">{{ __('fields.cost_calculation.comparacion_precios_margen') }}</h5>
        </div>
        <div class="card-body">
          <div class="position-relative" style="height: 400px;">
            <canvas id="lineChart" class="chartjs w-100 h-100"></canvas>
          </div>
        </div>
      </div>
    </div>
</div>

@push('scripts')
 {{-- 
    Traducciones JS para etiquetas de rentabilidad
    Se inyectan como variables globales para uso en cost-calculation.js
  --}}
<script>

  window.costCalcI18nShow = {
      base_cost: @json(__('fields.cost_calculation.base_cost')),
      paper_cost: @json(__('fields.cost_calculation.paper_cost')),
      print_cost: @json(__('fields.cost_calculation.print_cost')),
      labor_cost: @json(__('fields.cost_calculation.labor_cost')),
      electricity_cost: @json(__('fields.cost_calculation.electricity_cost')),
      transport_cost: @json(__('fields.cost_calculation.transport_cost')),
      seller_commission: @json(__('fields.cost_calculation.seller_commission')),
      distribucion_costos: @json(__('fields.cost_calculation.distribucion_costos')),

      precio_sugerido: @json(__('fields.cost_calculation.h6_precio_sugerido')),
      prcio_actual_venta: @json(__('fields.cost_calculation.h6_prcio_actual_venta')),
      costo_real: @json(__('fields.cost_calculation.costo_real')),
      moneda: @json(__('fields.moneda')),

      inicio: @json(__('fields.cost_calculation.inicio')),
      mes_1: @json(__('fields.cost_calculation.mes_1')),
      mes_2: @json(__('fields.cost_calculation.mes_2')),
      mes_3: @json(__('fields.cost_calculation.mes_3')),
      mes_4: @json(__('fields.cost_calculation.mes_4'))
    };

  const polarChartData = @json($polarChartData);

  const lineChartLabels = [
      window.costCalcI18nShow.inicio,
      window.costCalcI18nShow.mes_1,
      window.costCalcI18nShow.mes_2,
      window.costCalcI18nShow.mes_3,
      window.costCalcI18nShow.mes_4
  ];

  const suggestedData = @json($suggestedValues);
  const currentData = @json($currentValues);
  const costData = @json($costValues);
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ asset('assets/js/cost_calculations/show.js') }}"></script>
@endpush

@endsection