<script setup>
import { ref } from "vue";

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

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

/** Refs */
const numero_entrega = ref("");
const fineData = ref({
  fecha: "",
  numero_entrega: "",
  nombre: "",
  monto_entrega: "",
});

/** Métodos */
const handleSearch = () => {
  if (!numero_entrega.value.trim()) {
    Notify.warning("Por favor ingresa un número de entrega");
    return;
  }

  fineData.value = {
    fecha: "2025-11-11",
    numero_entrega: numero_entrega.value,
    nombre: "Juan Pérez García",
    monto_entrega: "$1,500.00",
  };

  emit("fine-searched", fineData.value);
};
</script>

<template>
  <div class="space-y-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="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <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-64 bg-gray-800 rounded-lg overflow-hidden"
          >
            <!-- QR -->
            <QRscan
              v-model:numero_entrega="numero_entrega"
              @fine-searched="handleSearch"
            />
          </div>
        </div>
        <div class="flex flex-col justify-center">
          <div class="mb-5">
            <Input
              v-model="numero_entrega"
              id="Número de entrega"
              type="text"
              placeholder="Ingrese el número de entrega"
              @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>
    </div>

    <div class="bg-white rounded-xl p-6 shadow-lg">
      <form @submit.prevent="handlePayment">
        <!-- Fecha -->
        <div class="grid grid-cols-2 gap-4 mb-5">
          <Input
            v-model="fineData.fecha"
            id="Fecha de entrega"
            type="date"
          />
        </div>

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

        <!-- Monto a Pagar -->
        <div class="mb-5">
          <Input
            v-model="fineData.monto_entrega"
            id="Monto a entregar"
            type="text"
            class="text-lg font-semibold"
          />
        </div>

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