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

<script setup>
import { ref } from "vue";
import { useApi, apiURL } from "@/services/Api.js";

import Input from "@Holos/Form/Input.vue";
import QRscan from "./QRscan.vue";

/** Eventos */
const emit = defineEmits(["fine-searched"]);

const api = useApi();

/** Refs */
const fineNumber = ref("");
const fineData = ref({
  fecha: "",
  placa: "",
  vin: "",
  licencia: "",
  tarjeta: "",
  rfc: "",
  nombre: "",
  monto: "",
});

/** Métodos */
const handleSearch = async () => {
  if (!fineNumber.value.trim()) {
    window.Notify.warning("Por favor ingresa o escanea una multa");
    return;
  }

  await api.get(apiURL(`fines/search`), {
    params: {
      id: fineNumber.value.trim(),
    },
    onSuccess: (data) => {
      const model = data.model;

      if (model.payments && model.payments.length > 0) {
        const payment = model.payments[0];

        if (payment.status === "paid") {
          window.Notify.info("La multa ya ha sido pagada previamente");

          fineData.value = {
            id: model.id,
            fecha: new Date(model.created_at).toLocaleDateString("es-MX"),
            placa: model.plate || "",
            vin: model.vin || "",
            licencia: model.license || "",
            tarjeta: model.circulation || "",
            rfc: model.rfc || "",
            nombre: model.name || "",
            monto: `$${data.total_to_pay.toFixed(2)}`,
            isPaid: true,
          };

          return;
        }
      }

      fineData.value = {
        id: model.id,
        fecha: new Date(model.created_at).toLocaleDateString("es-MX"),
        placa: model.plate || "",
        vin: model.vin || "",
        licencia: model.license || "",
        tarjeta: model.circulation || "",
        rfc: model.rfc || "",
        nombre: model.name || "",
        monto: `$${data.total_to_pay.toFixed(2)}`,
        isPaid: false,
      };

      emit("fine-searched", {
        ...fineData.value,
        rawData: data,
      });
    },
    onFail: (error) => {
      window.Notify.error(error.message || "Error al buscar la multa");
      fineData.value = {
        fecha: "",
        placa: "",
        vin: "",
        licencia: "",
        tarjeta: "",
        rfc: "",
        nombre: "",
        monto: "",
      };
    },
    onError: (error) => {
      console.error("Error al buscar multa:", error);
      window.Notify.error("Ocurrió un error al buscar la multa");
    },
  });
};

const handlePayment = async () => {
  if (!fineData.value.monto) {
    window.Notify.warning("No hay multa cargada para cobrar");
    return;
  }

  await api.post(apiURL(`fines/${fineData.value.id}/mark-as-paid`), {
    onSuccess: (data) => {
      window.Notify.success("Multa cobrada exitosamente");

      emit("payment-processed", { ...fineData.value, paymentData: data });

      fineData.value = {
        id: null,
        fecha: "",
        placa: "",
        vin: "",
        licencia: "",
        tarjeta: "",
        rfc: "",
        nombre: "",
        monto: "",
      };
      fineNumber.value = "";
    },
    onFail: (error) => {
      window.Notify.error(
        error.message || "Error al procesar el pago de la multa"
      );
    },
    onError: (error) => {
      window.Notify.error("Ocurrió un error al procesar el pago de la multa");
    },
  });
};

const clearForm = () => {
  fineData.value = {
    id: null,
    fecha: "",
    placa: "",
    vin: "",
    licencia: "",
    tarjeta: "",
    rfc: "",
    nombre: "",
    monto: "",
  };
  fineNumber.value = "";
};
</script>
<template>
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
    <div class="bg-white rounded-xl p-6 shadow-lg">
      <h3 class="text-xl font-semibold mb-4 text-gray-800">Buscar Multa</h3>

      <div class="mb-6">
        <label class="block text-sm text-gray-600 font-medium mb-2">
          Escanear Código QR
        </label>
        <div
          class="w-full h-80 bg-gray-800 rounded-lg flex flex-col items-center justify-center"
        >
          <!-- QR -->
          <QRscan
            v-model:fineNumber="fineNumber"
            @fine-searched="handleSearch"
          />
        </div>
      </div>

      <div class="mb-5">
        <Input
          v-model="fineNumber"
          id="Número de Multa"
          type="text"
          placeholder="Ingrese el número de multa"
          @keyup.enter="handleSearch"
        />
      </div>

      <button
        @click="handleSearch"
        type="button"
        class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
      >
        Buscar
      </button>
    </div>
    <div class="bg-white rounded-xl p-6 shadow-lg">
      <h3 class="text-xl font-semibold mb-4 text-gray-800">
        Detalles de la Multa
      </h3>

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

        <!-- VIN y Licencia -->
        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input v-model="fineData.vin" id="VIN" type="text" disabled />
          <Input
            v-model="fineData.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="fineData.tarjeta"
            id="Tarjeta de Circulación"
            type="text"
            disabled
          />
          <Input v-model="fineData.rfc" id="RFC" type="text" disabled />
        </div>

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

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

        <!-- Monto a Pagar -->
        <div class="mb-5">
          <Input
            v-model="fineData.monto"
            id="Monto a Pagar"
            type="text"
            disabled
            class="text-lg font-semibold"
          />
        </div>
        <div class="space-y-6">
          <div v-if="fineData.isPaid">
            <button
              type="button"
              @click="clearForm"
              class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3.5 rounded-lg transition-colors flex items-center justify-center gap-2"
            >
              Limpiar y buscar otra multa
            </button>
          </div>

          <!-- Botón Cobrar -->
          <div>
            <button
              type="submit"
              :disabled="fineData.isPaid"
              :class="[
                'w-full font-medium py-3.5 rounded-lg transition-colors',
                fineData.isPaid
                  ? 'bg-gray-400 cursor-not-allowed'
                  : 'bg-green-700 hover:bg-green-600 text-white',
              ]"
            >
              Cobrar
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>