@extends('layouts.app')

@section('content')
<div class="row g-6 mb-6">
  {{-- Inicia Formulario De Edición --}}
  <div class="col-lg-6 order-md-0 order-lg-0">
    <div class="card h-100">
      <h5 class="card-header">
        {{ __('fields.cost_calculation.edit_cost_calculation') }}
      </h5>

      <form method="POST" action="{{ route('cost-calculations.update', $costCalculation) }}" class="card-body">
        @csrf
        @method('PUT')

        {{-- Tipo (solo texto, no editable) --}}
        <div class="row g-4 mb-3">
          <div class="col-md-4">
            <label 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="El tipo no se puede cambiar."></i>
            </label>

            <input type="text" class="form-control" value="{{ $costCalculation->type === 'product' ? __('fields.cost_calculation.physical_product') : __('fields.cost_calculation.printing_service') }}" disabled>
            <input type="hidden" name="type" value="{{ $costCalculation->type }}">
          </div>
        </div>

        <div id="form-content">
          @if ($costCalculation->type === 'product')
            @include('cost_calculations.partials._form-product', ['costCalculation' => $costCalculation])
          @else
            @include('cost_calculations.partials._form-service', ['costCalculation' => $costCalculation])
          @endif
        </div>

        <div class="pt-4 text-end">
          <button  type="submit" class="btn btn-outline-success waves-effect">
            <i class="menu-icon icon-base ti tabler-refresh-alert me-1"></i> {{ __('fields.buttons_actualizar') }}
          </button>
          <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>
  {{-- Termina Formulario De Edición --}}

  <!-- Resumen de Cálculo -->
  <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_datos_actuales_guardados') }}</p>
        </div>
      </div>
      <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">${{ number_format($costCalculation->total_real_cost, 2) }}</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">${{ number_format($costCalculation->suggested_price, 2) }}</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">
                  @if($costCalculation->current_price)
                    ${{ number_format($costCalculation->current_price, 2) }}
                  @else
                    {{ __('fields.cost_calculation.sin_dato') }}
                  @endif
                </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 class="text-body-secondary" id="real_profit">
                  @if(!is_null($costCalculation->real_profit))
                    ${{ number_format($costCalculation->real_profit, 2) }}
                  @else
                    {{ __('fields.cost_calculation.sin_dato') }}
                  @endif
                </small>
              </div>
            </li>
          </ul>
        </div>
        <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')

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Inicia el gráfico
    initProfitabilityChart();

    // Vincula eventos a inputs para recalcular en tiempo real
    bindEvents();
  });
</script>

  <script>
    window.costCalcI18n = {
      rentable: @json(__('fields.cost_calculation.rentable')),
      not_rentable: @json(__('fields.cost_calculation.not_rentable')),
      moneda: @json(__('fields.moneda'))
    };
  </script>
  
  <script src="{{ asset('assets/js/cost-calculation.js') }}"></script>
@endpush