page.tsx
"use client"

import { useState,useEffect } from "react"
import { FaFileAlt, FaUpload, FaDollarSign, FaUser, FaHome, FaCheckCircle, FaPlus, FaSearch } from "react-icons/fa"

import Link from "next/link"

import Modal from "../../components/Modal"

import CustomerProfile from "./customer_profile"

import AsyncSelect, { type Option as AsyncOption } from "../../components/AsyncSelect"

import api from "@/lib/axios"

import { renderError } from "@/utils/renderError"

import { handleApiError } from "@/utils/handleApiError"

import { AnimatedButton } from "@/app/components/Button"

import DatePicker from "react-datepicker"
import "react-datepicker/dist/react-datepicker.css"


export default function SimpleForm() {

  const [formData, setFormData] = useState({

    // Client Details

    person: null as AsyncOption | null,

    addNew: "",

    browseClients: "",

    discount: "",



    // Property Details

    plotNoFlat: null as AsyncOption | null,

    salesDocument: "",

    openedNo: "",

    area: "",

    parking: "",

    grossArea: "",



    // Booking Details

    price: 0,

    bookingDiscount: 0,

    requiredCharacterLimit: "",

    netPrice: 0,

    requiredPercentage: 0,

    vatType: "",

    vatPercentage: 0,

    vatAmount: 0,

    extraCost: 0,

    vatPaymentTerms: "",

    netPayable: 0,

    bookingDate: null as Date | null,
    oldCharges: 0,

    adminFee: 0,



    // Reference Source

    referenceSource: "",

    uploadDocument: null,



    // Text Areas

    remarks: "",

    paymentTerm: "",



    // Internal Agents

    internalAgent: null as AsyncOption | null,
    internalAgentCommission: 0,

    others: false,

    //External Agents

    externalAgent: null as AsyncOption | null,
    externalAgentCommission: 0,

    other: false,

    // Check List (moved to separate state: checkTypes)
  })

  const [showCustomerModal, setShowCustomerModal] = useState(false)

  const [errors, setErrors] = useState<{ [key: string]: string[] }>({})

  const [unitDetails, setUnitDetails] = useState<any | null>(null)

  const [open,setOpen]=useState(false)

  const [checkTypes, setCheckTypes] = useState<Array<{ id: number; text: string; completed: boolean; status: string }>>([])
  const handleChange = (e: any) => {

    const { name, value, files, type, checked } = e.target

    setFormData({

      ...formData,

      [name]: files ? files[0] : type === "checkbox" ? checked : value,

    })

  }



  const handleCheckListChange = (id: number, field: 'completed' | 'status', value: any) => {
    setCheckTypes((prev) => prev.map((c) => (c.id === id ? { ...c, [field]: field === 'completed' ? Boolean(value) : String(value) } : c)))
  }

  // Load checklist types on first render
  useEffect(() => {
    (async () => {
      try {
        const res: any = await api.get('/bookings/checks')
        const payload = res?.data ?? res
        const arr: any[] = Array.isArray(payload?.data) ? payload.data : (Array.isArray(payload) ? payload : [])
        const normalized = arr.map((it: any) => ({ id: Number(it.id), text: String(it.text || it.checkname || ''), completed: false, status: 'NO' }))
        setCheckTypes(normalized)
      } catch (err: any) {
        handleApiError({ err, setErrors })
      }
    })()
  }, [])

  // Client-side validation for required fields
  const validateForm = () => {
    const next: { [key: string]: string[] } = {}
    const clientId = (formData.person as any)?.value
    const unitId = (formData.plotNoFlat as any)?.value
    if (!clientId) next.client_id = ["Client is required"]
    if (!unitId) next.unit_id = ["Plot/Flat is required"]
    if (!formData.bookingDate) next.booking_date = ["Booking date is required"]
    setErrors(next)
    return Object.keys(next).length === 0
  }



  const buildBookingPayload = () => {

    const payload: any = { ...formData }

    // Map select objects to backend ids

    payload.client_id = (formData.person as any)?.value

    payload.unit_id = (formData.plotNoFlat as any)?.value

    payload.booking_date = formData.bookingDate ? formData.bookingDate.toISOString().split('T')[0] : ""


    // Coerce numeric fields

    payload.sell_price = Number(unitDetails?.sale_price ?? unitDetails?.price ?? formData.price ?? 0)

    payload.net_price = Number(formData.netPrice ?? 0)

    payload.net_payable = Number(formData.netPayable ?? 0)

    payload.discount = Number((formData as any).bookingDiscount ?? (formData as any).discount ?? 0)

    payload.liability = Number(formData.requiredPercentage ?? 0)

    // Convert area fields to numbers
    payload.area = formData.area ? Number(formData.area) : null
    payload.gross_area = formData.grossArea ? Number(formData.grossArea) : null
    
    // Handle parking field (convert YES/NO to boolean or keep as string based on backend needs)
    payload.parking = formData.parking || null



    // IDs from selected unit details when available

    if (unitDetails) {

      payload.floor_id = unitDetails.floor_id ?? unitDetails.floor?.id ?? payload.floor_id

      payload.munit_id = unitDetails.munit_id ?? unitDetails.munit?.id ?? payload.munit_id

      payload.saletype_id = unitDetails.saletype_id ?? unitDetails.saletype?.id ?? payload.saletype_id

      payload.unittypedetail = unitDetails.unittypedetail ?? payload.unittypedetail

      payload.number = payload.number ?? unitDetails.number

      // Optional convenient fields

      payload.area = payload.area || unitDetails.area
      payload.gross_area = payload.gross_area || unitDetails.gross_area || unitDetails.grossArea

    }



    // Map opened number to expected key if still missing

    if (!payload.number && (formData as any).openedNo) payload.number = (formData as any).openedNo



    // Parking must be boolean

    const parkingValue: any = (formData as any).parking

    let parkingBool = false

    if (typeof parkingValue === 'boolean') parkingBool = parkingValue

    else if (typeof parkingValue === 'string') {

      const v = parkingValue.trim().toLowerCase()

      parkingBool = v === 'yes' || v === 'true' || v === '1'

    }

    payload.parking = parkingBool



    // Ensure items key exists; backend may require it

    if (payload.items === undefined) payload.items = []

    // Build required arrays
    const clientId = (formData.person as any)?.value
    if (clientId) {
      payload.items = [{ client_id: Number(clientId) }]
    }
    payload.checklistitems = (checkTypes || []).map((c) => ({
      checktype_id: Number(c.id),
      completed: Boolean(c.completed),
    }))


    // Remove frontend-only fields

    delete payload.person

    delete payload.plotNoFlat

    delete payload.bookingDate

    // UI-only keys
    delete payload.checkList
    return payload

  }



  const handleSave = async() => {

    setErrors({})

    if (!validateForm()) return
    try {

      const payload = buildBookingPayload()

      const res: any = await api.post("/bookings/store", payload)
      console.log("Saving form data:", payload)

      alert((res as any)?.message || (res as any)?.data?.message || "Saved successfully")
    } catch (err: any) {

      handleApiError({ err, setErrors })

    }

  }



  const handleSaveAndNew = async() => {

    setErrors({})

    if (!validateForm()) return
    try {

      const payload = buildBookingPayload()

      const res = await api.post("/bookings/store", payload)

    } catch (err: any) {

      handleApiError({ err, setErrors })

      return

    }

    setFormData({

      person: null,

      addNew: "",

      browseClients: "",

      discount: "",

      plotNoFlat: null,

      salesDocument: "",

      openedNo: "",

      area: "",

      parking: "",

      grossArea: "",

      price: 0,

      bookingDiscount: 0,

      requiredCharacterLimit: "",

      netPrice: 0,

      requiredPercentage: 0,

      vatType: "",

      vatPercentage: 0,

      vatAmount: 0,

      extraCost: 0,

      vatPaymentTerms: "",

      netPayable: 0,

      bookingDate: null as Date | null,
      oldCharges: 0,

      adminFee: 0,

      referenceSource: "",

      uploadDocument: null,

      remarks: "",

      paymentTerm: "",

      internalAgent: null as AsyncOption | null,
      internalAgentCommission: 0,

      others: false,

      externalAgent: null as AsyncOption | null,
      externalAgentCommission: 0,

      other: false,

    })
    setCheckTypes((prev) => prev.map((c) => ({ ...c, completed: false, status: 'NO' })))
  }



  const handleCancel = () => {

    if (confirm("Are you sure you want to cancel? All unsaved changes will be lost.")) {

      setFormData({

        person: null,

        addNew: "",

        browseClients: "",

        discount: "",

        plotNoFlat: null,

        salesDocument: "",

        openedNo: "",

        area: "",

        parking: "",

        grossArea: "",

        price: 0,

        bookingDiscount: 0,

        requiredCharacterLimit: "",

        netPrice: 0,

        requiredPercentage: 0,

        vatType: "",

        vatPercentage: 0,

        vatAmount: 0,

        extraCost: 0,

        vatPaymentTerms: "",

        netPayable: 0,

        bookingDate: null as Date | null,
        oldCharges: 0,

        adminFee: 0,

        referenceSource: "",

        uploadDocument: null,

        remarks: "",

        paymentTerm: "",

        internalAgent: null as AsyncOption | null,
        internalAgentCommission: 0,

        others: false,

        externalAgent: null as AsyncOption | null,
        externalAgentCommission: 0,

        other: false,

      })
      setCheckTypes((prev) => prev.map((c) => ({ ...c, completed: false, status: 'NO' })))
    }
  }





  return (

    <div className="min-h-screen bg-transparent p-2 sm:p-4">

      <div className="w-full">

        <div className="bg-white/10 backdrop-blur-2xl border border-white/20 rounded-xl sm:p-8 shadow-xl shadow-black/10 w-full">
          {/* Header */}

          <div className="flex items-center gap-3 mb-8 pb-6 border-b border-white/20">
            <div className="p-2 bg-gradient-to-br from-amber-400/20 to-amber-600/20 rounded-lg backdrop-blur-sm border border-amber-400/20">

              <FaFileAlt className="w-5 h-5 text-amber-300" />

            </div>

            <div>

              <h2 className="text-xl font-semibold text-white tracking-tight">Create Booking</h2>
              <p className="text-white/60 text-sm mt-1">Fill out the booking form details</p>
            </div>
            <div className="flex gap-3 mb-3 ml-auto">
              <AnimatedButton onClick={() => setShowCustomerModal(true)} variant="primary" className="px-6 py-2">
                Add New
              </AnimatedButton>
              <Link href="/customer-profile">
                {/* <AnimatedButton variant="primary" className="flex items-center gap-1 px-4 py-2">
                  <FaSearch className="w-3 h-3" />
                  Browse Clients
                </AnimatedButton> */}
              </Link>
          </div>

          </div>



          {/* Client Details */}

          <div className="mb-6">

            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-md backdrop-blur-sm border border-blue-400/20">

                <FaUser className="w-4 h-4 text-blue-300" />

              </div>

              <h3 className="text-base font-medium text-white">Client Details</h3>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Client</label>

                <div className="flex gap-2 mb-2">

                  <button

                    type="button"

                    onClick={() => setShowCustomerModal(true)}

                    className="flex items-center gap-1 px-3 py-1 bg-gradient-to-r from-amber-400 to-amber-600 text-black font-semibold rounded text-xs hover:from-amber-300 hover:to-amber-500 transition-colors"

                  >

                    <FaPlus className="w-3 h-3" />

                    Add New

                  </button>

                  <Link href="/customer-profile">

                    <button className="flex items-center gap-1 px-3 py-1 bg-white/10 text-white rounded text-xs hover:bg-white/15 border border-white/20">

                      <FaSearch className="w-3 h-3" />

                      Browse Clients

                    </button>

                  </Link>

                  <span className="text-red-300 text-xs self-center">(Required)</span>

                </div>

                <AsyncSelect

                  endpoint="/clients/search"

                  queryParam="q"
                  responsePath="data"

                  labelKey="person"

                  valueKey="id"

                  placeholder="Type or click to select"

                  value={formData.person}

                  onChange={(opt) => {

                    const option = (opt as AsyncOption) ?? null

                    setFormData({

                      ...formData,

                      person: option,

                    })

                  }}

                  minInputLength={1}

                  fetchWhenEmpty={true}

                  disableSearchRequests={false}

                  className="w-full"
                />

                {renderError("client_id", errors)}

              </div>

             
              
             
              </div>

          </div>



          {/* Property Details */}

          <div className="mb-8 mt-10">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-gradient-to-br from-emerald-400/20 to-emerald-600/20 rounded-md backdrop-blur-sm border border-emerald-400/20">

                <FaHome className="w-4 h-4 text-emerald-300" />

              </div>

              <h3 className="text-base font-medium text-white">Property Details</h3>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Plot No./Flat #</label>

                <AsyncSelect

                  endpoint="/units/search"

                  queryParam="q"
                  responsePath="data"

                  labelKey="text"

                  valueKey="id"

                  placeholder="TYPE OR CLICK TO SELECT"

                  value={formData.plotNoFlat}

                  onChange={async (opt) => {

                    const option = (opt as AsyncOption) ?? null

                    setFormData({

                      ...formData,

                      plotNoFlat: option,

                    })



                    // Fetch selected unit details and set price

                    try {

                      const id = option?.value

                      if (id) {

                        const res: any = await api.get(`/units/show/${id}`)

                        // Try common structures: {data: {...}}, or direct object
                        const payload = res?.data ?? res

                        const unit = payload?.data ?? payload

                        const price = unit?.price ?? unit?.unit_price ?? unit?.sale_price ?? 0

                        const area = unit?.area
                        const grossArea = unit?.gross_area ?? unit?.grossArea
                        const parking = unit?.parking
                        const netPrice = unit?.net_price ?? unit?.netPrice ?? price
                        const adminFee = unit?.admin_fee ?? unit?.adminFee
                        const bookingDateStr = unit?.booking_date ?? unit?.bookingDate

                        setFormData((prev) => ({
                          ...prev,
                          price: Number(price) || 0,
                          netPrice: Number(netPrice) || 0,
                          area: area != null ? String(area) : prev.area,
                          grossArea: grossArea != null ? String(grossArea) : prev.grossArea,
                          parking: typeof parking === 'number' ? (parking === 1 ? 'YES' : 'NO') : (typeof parking === 'boolean' ? (parking ? 'YES' : 'NO') : (prev.parking || '')),
                          adminFee: Number(adminFee ?? prev.adminFee) || 0,
                          bookingDate: bookingDateStr ? new Date(bookingDateStr) : prev.bookingDate,
                        }))
                        setUnitDetails(unit)

                      }

                    } catch (e) {

                      // ignore fetch error for UX; keep selection

                    }

                  }}

                  className="w-full"

                  minInputLength={1}

                  fetchWhenEmpty={true}

                  disableSearchRequests={false}

                />

                {renderError("unit_id", errors)}

              </div>

              
              
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Sales Document</label>

                <input

                  type="text"

                  name="salesDocument"

                  value={formData.salesDocument}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-black">

                  Opened No. <span className="text-gray-500 text-xs">(Optional)</span>

                </label>

                <input

                  type="text"

                  name="openedNo"

                  value={formData.openedNo}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Area</label>

                <input

                  type="text"

                  name="area"
                  disabled

                  value={formData.area}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Parking</label>

                <input

                  type="text"

                  name="parking"

                  value={formData.parking}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="YES"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Gross Area</label>

                <input

                  type="text"

                  name="grossArea"
                  disabled

                  value={formData.grossArea}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                />

              </div>

            </div>

          </div>



          {/* Booking Details */}

          <div className="mb-8 mt-10">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-md backdrop-blur-sm border border-purple-400/20">

                <FaDollarSign className="w-4 h-4 text-purple-300" />

              </div>

              <h3 className="text-base font-medium text-white">Booking Details</h3>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Price</label>

                <input

                  type="number"

                  name="price"
                  disabled

                  value={formData.price}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="AED 0.00"

                />

                {renderError("price", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Discount</label>

                <input

                  type="number"

                  name="bookingDiscount"

                  value={formData.bookingDiscount}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="AED 0.00"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Required character limit</label>

                <input

                  type="text"

                  name="requiredCharacterLimit"

                  value={formData.requiredCharacterLimit}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="AED 0.00"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Net Price</label>

                <input

                  type="number"

                  name="netPrice"
                  disabled

                  value={formData.netPrice}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Required %</label>

                <input

                  type="number"

                  name="requiredPercentage"

                  value={formData.requiredPercentage}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Vat Type</label>

                <select

                  name="vatType"

                  value={formData.vatType}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50 appearance-none cursor-pointer"

                >

                  <option value="" className="bg-slate-900/95 text-white">

                    VAT ZERO RATED 0%

                  </option>

                  <option value="standard" className="bg-slate-900/95 text-white">

                    Standard VAT

                  </option>

                  <option value="reduced" className="bg-slate-900/95 text-white">

                    Reduced VAT

                  </option>

                </select>

                {renderError("vatType", errors)}

              </div>

            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Vat Percentage</label>

                <input

                  type="number"

                  name="vatPercentage"

                  value={formData.vatPercentage}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="0"

                />

                {renderError("vatPercentage", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Vat Amount</label>

                <input

                  type="number"

                  name="vatAmount"

                  value={formData.vatAmount}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="0"

                />

                {renderError("vatAmount", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Extra Cost</label>

                <input

                  type="number"

                  name="extraCost"

                  value={formData.extraCost}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="AED 0.00"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Vat Payment Terms</label>

                <input

                  type="text"

                  name="vatPaymentTerms"

                  value={formData.vatPaymentTerms}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="WITH BOOKING AMOUNT"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Net Payable</label>

                <input

                  type="number"

                  name="netPayable"

                  value={formData.netPayable}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="AED 40.00"

                />

                {renderError("netPayable", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Booking Date</label>

                <DatePicker
                  selected={formData.bookingDate}
                  onChange={(date: Date | null) => setFormData(prev => ({ ...prev, bookingDate: date }))}
                  dateFormat="yyyy-MM-dd"
                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholderText="Select booking date"
                  showPopperArrow={false}
                />

                {renderError("booking_date", errors)}

              </div>

            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">OLD Charges</label>

                <input

                  type="number"

                  name="oldCharges"

                  value={formData.oldCharges}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="40.00"

                />

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Admin Fee</label>

                <input

                  type="number"

                  name="adminFee"

                  value={formData.adminFee}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="5000"

                />

              </div>

            </div>

          </div>



          {/* Reference Source */}

          <div className="mb-8 mt-10">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-gradient-to-br from-amber-400/20 to-amber-600/20 rounded-md backdrop-blur-sm border border-amber-400/20">

                <FaFileAlt className="w-4 h-4 text-amber-300" />

              </div>

              <h3 className="text-base font-medium text-white">Reference Source <span className="text-white/40 text-xs ml-1">(Optional)</span> <span className="text-red-300 text-xs bg-red-400/20 px-2 py-1 rounded">NEW</span></h3>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>

                <select

                  name="referenceSource"

                  value={formData.referenceSource}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50 appearance-none cursor-pointer"

                >

                  <option value="" className="bg-slate-900/95 text-white">

                    TYPE OR CLICK TO SELECT

                  </option>

                  <option value="website" className="bg-slate-900/95 text-white">

                    Website

                  </option>

                  <option value="referral" className="bg-slate-900/95 text-white">

                    Referral

                  </option>

                  <option value="advertisement" className="bg-slate-900/95 text-white">

                    Advertisement

                  </option>

                </select>

                {renderError("referenceSource", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">

                  Upload Document <span className="text-gray-500 text-xs">(Optional: Scanned App Form)</span>

                </label>

                <div className="relative">

                  <div className="w-full bg-white/5 backdrop-blur-xl border border-dashed border-white/20 p-6 rounded-lg text-center hover:bg-white/10 hover:border-amber-400/30 transition-all duration-300">

                    <div className="p-2 bg-gradient-to-br from-amber-400/20 to-amber-600/20 rounded-md backdrop-blur-sm border border-amber-400/20 w-fit mx-auto mb-2">

                      <FaUpload className="w-4 h-4 text-amber-300" />

                    </div>

                    <p className="text-white/70 mb-1 font-medium text-sm">Choose File</p>

                    <p className="text-white/40 text-sm">NO FILE CHOSEN</p>

                    <input

                      type="file"

                      name="uploadDocument"

                      onChange={handleChange}

                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"

                    />

                  </div>

                </div>

                {renderError("uploadDocument", errors)}

              </div>

            </div>

          </div>



          {/* Remarks and Payment Term */}

          <div className="mb-8 mt-10">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Remarks</label>

                <textarea

                  name="remarks"

                  value={formData.remarks}

                  onChange={handleChange}

                  rows={4}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm resize-none placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="Enter remarks..."

                />

                {renderError("remarks", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Payment Term</label>

                <textarea

                  name="paymentTerm"

                  value={formData.paymentTerm}

                  onChange={handleChange}

                  rows={4}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm resize-none placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="Enter payment terms..."

                />

                {renderError("paymentTerm", errors)}

              </div>

            </div>

          </div>



          {/* Internal Agents */}

          <div className="mb-8 mt-10">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-md backdrop-blur-sm border border-blue-400/20">

                <FaUser className="w-4 h-4 text-blue-300"  onClick={()=>setOpen(!open)} />

              </div>

              <h3 className="text-base font-medium text-white">Internal Agents</h3>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Internal Agents</label>

                <AsyncSelect

                  endpoint="agent/search/internal"

                  queryParam="q"
                  responsePath="data"

                  labelKey="name"

                  valueKey="id"

                  placeholder="Type or click to select"

                  value={formData.internalAgent}
                  onChange={(opt) => {

                    const option = (opt as AsyncOption) ?? null

                    setFormData({

                      ...formData,

                      internalAgent: option,
                    })

                  }}

                  className="w-full"

                  minInputLength={1}

                  fetchWhenEmpty={true}

                  disableSearchRequests={false}

                />

                {renderError("internalAgent", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Internal Agent Commission %</label>

                <input

                  type="number"

                  name="externalAgentCommission"

                  value={formData.externalAgentCommission}

                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="0"

                />

                {renderError("externalAgentCommission", errors)}

              </div>

            </div>
            
            

          </div>

          {/* External Agents */}

          {open &&

          <div className="mb-8 mt-10">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-md backdrop-blur-sm border border-blue-400/20">

                <FaUser className="w-4 h-4 text-blue-300"  />

              </div>

              <h3 className="text-base font-medium text-white">External Agents</h3>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">External Agent</label>

                <AsyncSelect

                  endpoint="agent/search/external"

                  queryParam="q"
                  responsePath="data"

                  labelKey="company_name"

                  valueKey="id"

                  placeholder="Type or click to select"

                  value={formData.externalAgent}

                  onChange={(opt) => {

                    const option = (opt as AsyncOption) ?? null

                    setFormData({

                      ...formData,

                      externalAgent: option,

                    })

                  }}

                  className="w-full"

                  minInputLength={1}

                  fetchWhenEmpty={true}

                  disableSearchRequests={false}

                />

                {renderError("internalAgent", errors)}

              </div>

              <div>

                <label className="block text-sm font-medium mb-2 text-white/70">Internal Agent Commission %</label>

                <input

                  type="number"

                  name="externalAgentCommission"

                  value={formData.externalAgentCommission}
                  onChange={handleChange}

                  className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-2.5 px-3 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"

                  placeholder="0"

                />

                {renderError("externalAgentCommission", errors)}

              </div>

            </div>

            <div className="flex justify-end">
              <AnimatedButton onClick={()=>setOpen(!open)} variant="danger" className="px-4 py-2">Remove</AnimatedButton>
            </div>
          </div>

          

          
          
          }

          {/* Check List */}

          <div className="mb-8 mt-10">
            <div className="flex items-center gap-3 mb-6">
              <div className="p-2 bg-gradient-to-br from-amber-400/20 to-amber-600/20 rounded-md backdrop-blur-sm border border-amber-400/20">

                <FaCheckCircle className="w-4 h-4 text-amber-300" />

              </div>

              <h3 className="text-base font-medium text-white">Check List</h3>
            </div>

            <div className="space-y-4">
              {(checkTypes || []).map((c) => (
                <div key={c.id} className="grid grid-cols-1 sm:grid-cols-3 gap-6 bg-white/5 backdrop-blur-xl border border-white/10 rounded-lg p-6 items-center">
                    <div>

                      <label className="block text-sm font-medium text-white/70">Check Type</label>

                      <input

                        type="text"

                      value={c.text}
                        disabled

                      className="w-full bg-white/5 backdrop-blur-xl border border-white/10 py-3 px-4 rounded-lg text-white/40 text-sm cursor-not-allowed"
                      />

                    </div>

                    <div>

                    <label className="block text-sm font-medium text-white/70 mb-3">Completed</label>
                    <div className="flex items-center gap-2 ml-1">
                        <input

                          type="checkbox"

                        checked={c.completed}
                        onChange={(e) => handleCheckListChange(c.id, 'completed', e.target.checked)}
                          className="w-4 h-4 accent-amber-500"

                        />

                      <span className="text-sm text-white">{c.completed ? 'Yes' : 'No'}</span>
                      </div>

                    </div>

                    <div>

                      <input

                        type="text"

                      value={c.status}
                      onChange={(e) => handleCheckListChange(c.id, 'status', e.target.value)}
                      className="w-full bg-white/10 backdrop-blur-xl border border-white/20 py-3 px-4 rounded-lg text-white text-sm placeholder-white/40 focus:outline-none focus:ring-1 focus:ring-amber-400/50 focus:border-amber-400/50"
                        placeholder="NO"

                      />

                    </div>

                  </div>

              ))}
            </div>

          </div>



          {/* Action Buttons */}

          <div className="flex flex-col sm:flex-row justify-end gap-4 pt-6 border-t border-white/10">
            <AnimatedButton onClick={handleSave} variant="primary" className="px-8 py-2">SAVE</AnimatedButton>
            <AnimatedButton onClick={handleSaveAndNew} variant="primary" className="px-8 py-2">SAVE AND NEW</AnimatedButton>
            <AnimatedButton onClick={handleCancel} variant="danger" className="px-8 py-2">CANCEL</AnimatedButton>
          </div>

          </div>

        </div>

      <Modal

        show={showCustomerModal}

        title="Create Customer Profile"

        onClose={() => setShowCustomerModal(false)}

        onSubmit={(e) => {

          e.preventDefault()

          setShowCustomerModal(false)

        }}

        dialogClassName="w-[95vw] max-w-[1280px]"

        bodyClassName="max-h-[calc(100vh-160px)]"

        showFooter={false}

      >

        <CustomerProfile

          onSaved={(client) => {

            const payload = client?.data ?? client

            const option = payload ? { value: payload?.id, label: payload?.person } : null

            setFormData((prev) => ({ ...prev, person: option }))

            setShowCustomerModal(false)

          }}

          onClose={() => setShowCustomerModal(false)}

        />

      </Modal>

    </div>

  )

}



customer
"use client"
import { useState } from "react"
import { FaUser, FaArrowLeft, FaSave, FaTimes } from "react-icons/fa"
import Link from "next/link"
import api from "@/lib/axios"
import { handleApiError } from "@/utils/handleApiError"
import AsyncSelect, { type Option as AsyncOption } from "../../components/AsyncSelect"
import { renderError } from "@/utils/renderError"

interface CustomerProfileProps {
  onSaved?: (client: any) => void
  onClose?: () => void
}

export default function CustomerProfile({ onSaved, onClose }: CustomerProfileProps) {
  const [customerData, setCustomerData] = useState({
    name: "",
    fullName: "",
    email: "",
    contactNumber: "",
    mobileNumber: "",
    workPhone: "",
    gender: "",
    fatherName: "",
    company: "",
    sowodo: "",
    residentialStatus: "",
    nationalId: "",
    nationalIdExpire: "",
    nicopNo: "",
    passport: "",
    passportExpiry: "",
    dateOfBirth: "",
    countryId: "",
    cityId: "",
    refsourceId: "",
    

    billingAddress: "",
    shippingAddress: "",
    address: "",
    fullNameUrdu: "",
    items: [
      { documentType: "", document: null as any }
    ],
    
  })

  const isResident = customerData.residentialStatus === "1"

  const handleChange = (e: any) => {
    const { name, value, files } = e.target
    setCustomerData({
      ...customerData,
      [name]: files ? files[0] : value,
    })
  }

  const handleItemTypeChange = (index: number, value: string) => {
    setCustomerData(prev => {
      const next = { ...prev }
      const items = [...(next.items || [])]
      items[index] = { ...(items[index] || { documentType: "", document: null }), documentType: value }
      ;(next as any).items = items
      return next
    })
  }

  const handleItemFileChange = (index: number, file: File | null) => {
    setCustomerData(prev => {
      const next = { ...prev }
      const items = [...(next.items || [])]
      items[index] = { ...(items[index] || { documentType: "", document: null }), document: file }
      ;(next as any).items = items
      return next
    })
  }

  const addItem = () => {
    setCustomerData(prev => ({
      ...prev,
      items: [ ...(prev as any).items, { documentType: "", document: null } ]
    }))
  }

  const removeItem = (index: number) => {
    setCustomerData(prev => {
      const items = [ ...(prev as any).items ]
      items.splice(index, 1)
      return { ...(prev as any), items }
    })
  }

  const [submitting, setSubmitting] = useState(false)
  const [errors, setErrors] = useState<{ [key: string]: string[] }>({})

  const handleSave = async () => {
    setSubmitting(true)
    setErrors({})
    try {
      const formData = new FormData()
      const residential_status = customerData.residentialStatus === 'resident' ? '1' : (customerData.residentialStatus === 'non-resident' ? '0' : String(customerData.residentialStatus ?? ''))

      const payloadMap: Record<string, any> = {
        person: customerData.name,
        person1: customerData.fullName,
        father_name: customerData.fatherName,
        gender: customerData.gender,
        company: customerData.company,
        sowodo: customerData.sowodo,
        residential_status,
        cnic: customerData.nationalId,
        national_id_expire: customerData.nationalIdExpire,
        nicop_no: customerData.nicopNo,
        dob: customerData.dateOfBirth,
        email: customerData.email,
        contact_number: customerData.contactNumber,
        mobile_number: customerData.mobileNumber,
        work_phone: customerData.workPhone,
        billing_address: customerData.billingAddress,
        shipping_address: customerData.shippingAddress,
        address: customerData.address,
        country_id: customerData.countryId,
        city_id: customerData.cityId,
        
        passport_no: customerData.passport,
        passport_expire: customerData.passportExpiry,
      }

      Object.entries(payloadMap).forEach(([key, value]) => {
        if (value !== undefined && value !== null && value !== "") formData.append(key, String(value))
      })

      if (Array.isArray((customerData as any).items)) {
        (customerData as any).items.forEach((it: any, i: number) => {
          if (it?.documentType) formData.append(`items[${i}][document_type]`, String(it.documentType))
          if (it?.document) formData.append(`items[${i}][document]`, it.document as any)
        })
      }

      const res = await api.post(`/clients/store`, formData)

      if (onSaved) onSaved(res)
    } catch (err: any) {
      handleApiError({ err, setErrors })
    } finally {
      setSubmitting(false)
    }
  }

  const handleCancel = () => {
    if (confirm("Are you sure you want to cancel? All unsaved changes will be lost.")) {
      // Reset form or navigate back
    }
  }

  return (
    <div className="min-h-screen bg-transparent p-2 sm:p-4">
      <div className="max-w-6xl mx-auto">
        <div className="p-0">
          {/* Header */}
          <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-300">
            <div className="flex items-center gap-3">
              <Link href="/">
                <button className="flex items-center gap-2 px-3 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
                  <div className="w-4 h-4">
                    <FaArrowLeft size={16} />
                  </div>
                  Back
                </button>
              </Link>
              <div className="w-5 h-5 text-gray-700">
                <FaUser size={20} />
              </div>
              <div>
                <h2 className="text-lg font-semibold text-black">CREATE CUSTOMER PROFILE</h2>
                <p className="text-gray-600 text-sm">Fill out customer information</p>
              </div>
            </div>
          </div>

          {/* Customer Information Form */}
          <div className="space-y-6">
            {/* Basic Information */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Name</label>
                <input
                  type="text"
                  name="name"
                  value={customerData.name}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter name"
                />
                {renderError("name", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Full Name</label>
                <input
                  type="text"
                  name="fullName"
                  value={customerData.fullName}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter full name"
                />
                {renderError("fullName", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Email</label>
                <input
                  type="email"
                  name="email"
                  value={customerData.email}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter email"
                />
                {renderError("email", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Contact Number</label>
                <input
                  type="text"
                  name="contactNumber"
                  value={customerData.contactNumber}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter contact number"
                />
                {renderError("contactNumber", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Mobile Number</label>
                <input
                  type="text"
                  name="mobileNumber"
                  value={customerData.mobileNumber}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter mobile number"
                />
                {renderError("mobileNumber", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Work Phone</label>
                <input
                  type="text"
                  name="workPhone"
                  value={customerData.workPhone}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter work phone"
                />
                {renderError("workPhone", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Gender</label>
                <select
                  name="gender"
                  value={customerData.gender}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black"
                >
                  <option value="">Select gender</option>
                  <option value="male">Male</option>
                  <option value="female">Female</option>
                  <option value="other">Other</option>
                </select>
                {renderError("gender", errors)}
              </div>
            
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Father Name</label>
                <input
                  type="text"
                  name="fatherName"
                  value={customerData.fatherName}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter father name"
                />
                {renderError("father_name", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">S/O W/O D/O (Son of / Wife of / Daughter of)</label>
                <input
                  type="text"
                  name="sowodo"
                  value={customerData.sowodo}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter relation detail"
                />
                {renderError("sowodo", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Residential Status</label>
                <select
                  name="residentialStatus"
                  value={customerData.residentialStatus}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black"
                >
                  <option value="">Select status</option>
                  <option value="1">Resident</option>
                  <option value="0">Non-Resident</option>
                </select>
                {renderError("residential_status", errors)}
              </div>
            </div>

            {/* Document Information */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium mb-2 text-black">National ID{isResident ? ' *' : ''}</label>
                <input
                  type="text"
                  name="nationalId"
                  value={customerData.nationalId}
                  onChange={handleChange}
                  required={isResident}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter national ID"
                />
                {renderError("cnic", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Passport</label>
                <input
                  type="text"
                  name="passport"
                  value={customerData.passport}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter passport number"
                />
                {renderError("passport_no", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Passport Expiry</label>
                <input
                  type="date"
                  name="passportExpiry"
                  value={customerData.passportExpiry}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black"
                />
                {renderError("passport_expire", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">National ID Expiry{isResident ? ' *' : ''}</label>
                <input
                  type="date"
                  name="nationalIdExpire"
                  value={customerData.nationalIdExpire}
                  onChange={handleChange}
                  required={isResident}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black"
                />
                {renderError("national_id_expire", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">NICOP No</label>
                <input
                  type="text"
                  name="nicopNo"
                  value={customerData.nicopNo}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black placeholder-gray-400"
                  placeholder="Enter NICOP number"
                />
                {renderError("nicop_no", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Date of Birth</label>
                <input
                  type="date"
                  name="dateOfBirth"
                  value={customerData.dateOfBirth}
                  onChange={handleChange}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black"
                />
                {renderError("dob", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Country</label>
                <AsyncSelect
                  endpoint="/clients/country-search"
                  queryParam="q"
                  responsePath="data"
                  labelKey="text"
                  valueKey="id"
                  placeholder="Search country"
                  value={customerData.countryId ? ({ value: Number(customerData.countryId), label: String(customerData.countryId) } as unknown as AsyncOption) : null}
                  onChange={(opt: any) => {
                    const option = Array.isArray(opt) ? opt[0] : opt
                    setCustomerData({
                      ...customerData,
                      countryId: option ? String((option as any).value ?? (option as any).id ?? "") : "",
                    })
                  }}
                  className="w-full"
                  fetchWhenEmpty={true}
                  minInputLength={1}
                />
                {renderError("country_id", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">City</label>
                <AsyncSelect
                  endpoint="/clients/city-search"
                  queryParam="q"
                  responsePath="data"
                  labelKey="text"
                  valueKey="id"
                  placeholder="Search city"
                  value={customerData.cityId ? ({ value: Number(customerData.cityId), label: String(customerData.cityId) } as unknown as AsyncOption) : null}
                  onChange={(opt: any) => {
                    const option = Array.isArray(opt) ? opt[0] : opt
                    setCustomerData({
                      ...customerData,
                      cityId: option ? String((option as any).value ?? (option as any).id ?? "") : "",
                    })
                  }}
                  className="w-full"
                  fetchWhenEmpty={true}
                  minInputLength={1}
                />
                {renderError("city_id", errors)}
              </div>
            </div>

            

            {/* Address Information */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Billing Address</label>
                <textarea
                  name="billingAddress"
                  value={customerData.billingAddress}
                  onChange={handleChange}
                  rows={3}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm resize-none bg-white text-black placeholder-gray-400"
                  placeholder="Enter billing address"
                />
                {renderError("billing_address", errors)}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2 text-black">Shipping Address</label>
                <textarea
                  name="shippingAddress"
                  value={customerData.shippingAddress}
                  onChange={handleChange}
                  rows={3}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm resize-none bg-white text-black placeholder-gray-400"
                  placeholder="Enter shipping address"
                />
                {renderError("shipping_address", errors)}
              </div>
              <div className="sm:col-span-2">
                <label className="block text-sm font-medium mb-2 text-black">Address</label>
                <textarea
                  name="address"
                  value={customerData.address}
                  onChange={handleChange}
                  rows={3}
                  className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm resize-none bg-white text-black placeholder-gray-400"
                  placeholder="Enter address"
                />
                {renderError("address", errors)}
              </div>
            </div>

            {/* Documents */}
            <div className="flex flex-col gap-3">
              <div className="flex items-center justify-between">
                <h4 className="text-black text-sm font-medium">Documents</h4>
                <button type="button" onClick={addItem} className="px-3 py-1 text-sm bg-gray-700 text-white rounded">Add Document</button>
              </div>
              {(customerData as any).items?.map((it: any, i: number) => (
                <div key={i} className="grid grid-cols-1 sm:grid-cols-2 gap-4 border border-gray-300 rounded-lg p-3">
                  <div>
                    <label className="block text-sm font-medium mb-2 text-black">Document Type</label>
                    <select
                      value={it.documentType}
                      onChange={(e: React.ChangeEvent<HTMLSelectElement>) => handleItemTypeChange(i, e.target.value)}
                      className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black"
                    >
                      <option value="">Select document type</option>
                      <option value="passport">Passport</option>
                      <option value="national-id">National ID</option>
                      <option value="visa">Visa</option>
                    </select>
                    {renderError(`items.${i}.document_type`, errors)}
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2 text-black">Document</label>
                    <input
                      type="file"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleItemFileChange(i, e.target.files?.[0] || null)}
                      className="w-full border border-gray-300 rounded-lg py-2 px-3 text-sm bg-white text-black"
                    />
                    {renderError(`items.${i}.document`, errors)}
                  </div>
                  <div className="sm:col-span-2 flex justify-end">
                    <button type="button" onClick={() => removeItem(i)} className="px-3 py-1 text-sm bg-red-600 text-white rounded">Remove</button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row justify-end gap-3 mt-8 pt-6 border-t border-gray-300">
            <button
              onClick={handleSave}
              className="flex items-center gap-2 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium"
              disabled={submitting}
            >
              <div className="w-4 h-4">
                <FaSave size={16} />
              </div>
              {submitting ? 'SAVING...' : 'SAVE'}
            </button>

            <button
              onClick={onClose ?? handleCancel}
              className="flex items-center gap-2 px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium"
            >
              <div className="w-4 h-4">
                <FaTimes size={16} />
              </div>
              CANCEL
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}