comal-pagos/src/components/App/DiscountSection.vue

<script setup>
import { ref } from "vue";
import Input from "@Holos/Form/Input.vue";

/** Eventos */
const emit = defineEmits(['discount-authorized']);

/** Refs */
const searchForm = ref({
  fineNumber: "",
  placa: "",
  curp: ""
});

const discountData = ref({
  fecha: "",
  placa: "",
  vin: "",
  licencia: "",
  tarjeta: "",
  rfc: "",
  nombre: "",
  montoOriginal: "",
  pagoMinimo: "",
  nuevoMonto: ""
});

/** Métodos */
const handleSearch = () => {
  if (!searchForm.value.fineNumber && !searchForm.value.placa && !searchForm.value.curp) {
    alert("Por favor ingresa al menos un criterio de búsqueda");
    return;
  }

  console.log("Buscando multa:", searchForm.value);

  // Simular datos encontrados (temporal)
  discountData.value = {
    fecha: "2025-11-11",
    placa: "ABC-123-DEF",
    vin: "1HGBH41JXMN109186",
    licencia: "LIC123456",
    tarjeta: "TC987654",
    rfc: "XAXX010101000",
    nombre: "Juan Pérez García",
    montoOriginal: "$1,500.00",
    pagoMinimo: "$750.00",
    nuevoMonto: ""
  };
};

const handleAuthorize = () => {
  if (!discountData.value.nuevoMonto) {
    alert("Por favor ingresa el nuevo monto autorizado");
    return;
  }

  console.log("Autorizando descuento:", discountData.value);
  emit('discount-authorized', discountData.value);
};
</script>

<template>
  <div class="p-6">
    <!-- Formulario de búsqueda -->
    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-6">
      <h3 class="text-xl font-semibold mb-6 text-gray-800">
        Buscar Multa para Autorización
      </h3>

      <form @submit.prevent="handleSearch">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
          <!-- Número de Multa -->
          <Input
            v-model="searchForm.fineNumber"
            id="Número de Multa"
            type="text"
            placeholder=""
          />

          <!-- Placa -->
          <Input
            v-model="searchForm.placa"
            id="Placa"
            type="text"
            placeholder=""
          />

          <!-- CURP -->
          <Input
            v-model="searchForm.curp"
            id="CURP"
            type="text"
            placeholder=""
          />

          <!-- Botón Buscar -->
          <button
            type="submit"
            class="py-3 px-8 rounded-lg transition-colors h-[42px] bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium"
          >
            Buscar
          </button>
        </div>
      </form>
    </div>

    <!-- Detalles para Autorización -->
    <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg">
      <h3 class="text-xl font-semibold mb-6 text-gray-800">
        Detalles para Autorización
      </h3>

      <form @submit.prevent="handleAuthorize">
        <!-- Fecha y Placa -->
        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="discountData.fecha"
            id="Fecha de Multa"
            type="text"
            disabled
          />
          <Input
            v-model="discountData.placa"
            id="Placa"
            type="text"
            disabled
          />
        </div>

        <!-- VIN y Licencia -->
        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="discountData.vin"
            id="VIN"
            type="text"
            disabled
          />
          <Input
            v-model="discountData.licencia"
            id="Licencia"
            type="text"
            disabled
          />
        </div>

        <!-- Tarjeta de Circulación y RFC -->
        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="discountData.tarjeta"
            id="Tarjeta de Circulación"
            type="text"
            disabled
          />
          <Input
            v-model="discountData.rfc"
            id="RFC"
            type="text"
            disabled
          />
        </div>

        <!-- Nombre -->
        <div class="mb-5">
          <Input
            v-model="discountData.nombre"
            id="Nombre"
            type="text"
            disabled
          />
        </div>

        <!-- Línea separadora -->
        <hr class="my-6 border-gray-300" />

        <!-- Monto Original y Pago Mínimo -->
        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="discountData.montoOriginal"
            id="Monto a Pagar (Original)"
            type="text"
            disabled
          />
          <Input
            v-model="discountData.pagoMinimo"
            id="Pago Mínimo"
            type="text"
            disabled
          />
        </div>

        <!-- Nuevo Monto a Cobrar (editable) -->
        <div class="mb-6">
          <Input
            v-model="discountData.nuevoMonto"
            id="Nuevo Monto a Cobrar (Autorizado)"
            type="text"
            placeholder="Ingrese el nuevo monto autorizado"
          />
        </div>

        <!-- Botón Autorizar -->
        <button
          type="submit"
          class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors"
        >
          Autorizar descuento
        </button>
      </form>
    </div>
  </div>
</template>