import { Card, List } from "flowbite-react";
import { FC } from "react";
import { TSclientSchema } from "../forms/schema/client";

type props = {
  client: TSclientSchema;
};

const ClientBasicView: FC<props> = ({ client }) => {
  return (
    <>
      <div className="p-">
        <Card className="rounded-none">
          <div className="grid grid-cols-1 gap-0 p-2 relative md:grid-cols-2 lg:grid-cols-2 mb-5">
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">
                    Basic Information
                  </h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Client Id
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.client_id}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Client Name
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Phone Number
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.phone}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Client Email
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.email}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Zone
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.zone?.name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Network
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.network?.name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Billing Type
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.billing_type}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        IP Address
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.ip_address}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Discount
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.discount}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        NID
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.nid}</span>
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">&nbsp;</h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Package
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.package?.name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        PPPoE Id
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.pppoe_username}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Mobile Number
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.phone}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Payment D/A
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.payment_deadline}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Billing Deadline
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.billing_deadline}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Current Address
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.current_address}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Flat
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.flat_number}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        House
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.house_number}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Road
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.road_number}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Send Login SMS
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>
                        {client?.login_sms_notification === 1 ? "Yes" : "No"}
                      </span>
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
          </div>
          <hr />
          <div className="grid grid-cols-1 gap-0 p-2 relative md:grid-cols-2 lg:grid-cols-2 mt-5 mb-5">
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">
                    Connectivity Info
                  </h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Cable type
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>
                        {client?.cable_type === "1" ? "UTP" : "FIBER"}
                      </span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Cable Length
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.cable_length}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Connection Mode
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>
                        {client?.connection_mode === "1"
                          ? "Active"
                          : "Inactive"}
                      </span>
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">&nbsp;</h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Client Type
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      {client?.cable_type === "1" && <span>Home</span>}
                      {client?.cable_type === "2" && <span>Corporate</span>}
                      {client?.cable_type === "3" && <span>Others</span>}
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Connectivity Type
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      {client?.connection_type === "1" && <span>Shared</span>}
                      {client?.connection_type === "2" && (
                        <span>Dedicated</span>
                      )}
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Termination Date
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.termination_date}</span>
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
          </div>
          <hr />
          <div className="grid grid-cols-1 gap-0 p-2 relative md:grid-cols-2 lg:grid-cols-2 mt-5">
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">
                    Advance Info
                  </h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Upazila / Thana
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.upazila?.name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Father's Name
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.father_name}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Alternative Phone 1
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.alternate_phone1}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Alternative Phone 2
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.alternate_phone2}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Email
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.email}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Occupation
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.occupation}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Permanent Address
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.permanent_address}</span>
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
            <div>
              <List className="list-none">
                <List.Item>
                  <h2 className="font-bold text-xl text-gray-800">&nbsp;</h2>
                  <List ordered nested className="list-none p-0">
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Agent
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{"N/A"}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Signup Fee
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.signup_fee}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Payment Method
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.payment_method}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Bill Man
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{"N/A"}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Technician
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{"N/A"}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Connection Date
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      <span>{client?.connection_date}</span>
                    </List.Item>
                    <List.Item>
                      <span className="label text-md font-medium text-gray-800 w-36 inline-block">
                        Status
                      </span>
                      <span className="font-bold text-gray-900 mr-2">:</span>
                      {client?.status === 1 && <span>Active</span>}
                      {client?.status === 0 && <span>Inactive</span>}
                    </List.Item>
                  </List>
                </List.Item>
              </List>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
};

export default ClientBasicView;