Payment

'use client';
import { useState } from 'react';
import { IconShieldLockFilled, IconTagFilled } from '@tabler/icons-react';
import Heading from '@/components/ui/Heading';
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui/Card';
import { Alert, AlertTitle } from '@/components/ui/Alert';
import Divider from '@/components/ui/Divider';
import Input from '@/components/ui/Input';
import Select from '@/components/ui/Select';
import Link from '@/components/ui/Link';
import { Checkbox } from '@/components/ui/Checkbox';
import Button from '@/components/ui/Button';

const months = [
  { id: '1', label: 1, value: '1' },
  { id: '2', label: 2, value: '2' },
  { id: '3', label: 3, value: '3' },
  { id: '4', label: 4, value: '4' },
  { id: '5', label: 5, value: '5' },
  { id: '6', label: 6, value: '6' },
  { id: '7', label: 7, value: '7' },
  { id: '8', label: 8, value: '8' },
  { id: '9', label: 9, value: '9' },
  { id: '10', label: 10, value: '10' },
  { id: '11', label: 11, value: '11' },
  { id: '12', label: 12, value: '12' },
];

const years = [
  { id: '1', label: 2023, value: '2023' },
  { id: '2', label: 2024, value: '2024' },
  { id: '3', label: 2025, value: '2025' },
  { id: '4', label: 2026, value: '2026' },
  { id: '5', label: 2027, value: '2027' },
  { id: '6', label: 2028, value: '2028' },
  { id: '7', label: 2029, value: '2029' },
  { id: '8', label: 2030, value: '2030' },
  { id: '9', label: 2031, value: '2031' },
  { id: '10', label: 2032, value: '2032' },
  { id: '11', label: 2033, value: '2033' },
  { id: '12', label: 2034, value: '2034' },
];
export default function Page() {
  const [cardNum, setCardNum] = useState('1234 4567 8910 023');
  const [checked, setChecked] = useState<boolean | 'indeterminate'>(false);
  return (
    <div className="mx-auto overflow-auto px-4 py-9 md:max-w-7xl">
      <Heading as="h1" className="mb-6">
        Checkout
      </Heading>
      <div className="flex flex-col gap-6 md:flex-row">
        <div className="flex-1 space-y-6">
          <Alert state="warning" variant="light">
            <AlertTitle>Your booking is on hold</AlertTitle>
            <p>
              we will hold your booking utils <strong>May 12,12:14.</strong>
            </p>
          </Alert>
          <Card>
            <CardHeader>
              <CardTitle>Book information</CardTitle>
            </CardHeader>
            <CardBody>
              <Alert state="success" variant="light">
                Congratulation! We have sent your book details to the vehicle owner.
              </Alert>
              <Divider className="my-5" />
              <div className="grid gap-4 px-1 md:grid-cols-3">
                <div>
                  <p className="text-description mb-1 text-sm">Full Name</p>
                  <p>Ahmed Ali</p>
                </div>
                <div>
                  <p className="text-description mb-1 text-sm">Email</p>
                  <p>Ali@gmail.com</p>
                </div>
                <div>
                  <p className="text-description mb-1 text-sm">Phone Number</p>
                  <p>+1 (305) 234-5678</p>
                </div>
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader className="h-16 flex-col items-start justify-center">
              <CardTitle>Payment Detail</CardTitle>
              <p className="text-description text-sm">
                Please fill out the form below: Enter your card account details
              </p>
            </CardHeader>
            <Divider className="mb-0 px-4" />
            <CardBody>
              <form action="#" className="space-y-5">
                <div>
                  <p className="mb-2 font-semibold">Card Number</p>
                  <Input
                    value={cardNum}
                    onChange={(e) => setCardNum(e.target.value)}
                    suffix={<VisaSvg width={40} height={12} className="fill-primary" />}
                  />
                </div>
                <div className="flex gap-4">
                  <div>
                    <p className="mb-2 font-semibold">Expire Date</p>
                    <div className="grid w-45 grid-cols-2 gap-4 md:w-80">
                      <Select defaultValue="12" items={months} />
                      <Select defaultValue="2025" items={years} />
                    </div>
                  </div>
                  <div className="flex-1">
                    <p className="mb-2 font-semibold">CVC/CVV</p>
                    <Input />
                  </div>
                </div>
              </form>
            </CardBody>
          </Card>
          <Alert
            state="neutral"
            variant="bordered"
            icon={
              <div className="flex size-10 items-center justify-center rounded-full bg-amber-400/40">
                <IconShieldLockFilled size={20} className="text-amber-500" />
              </div>
            }>
            <AlertTitle>Cancellation Policy</AlertTitle>
            <div className="text-sm">
              We understand planes can change. You are free to modify or cancel your booking at any time.
            </div>
            <Link href="#" className="mt-2 text-sm">
              See more details
            </Link>
          </Alert>
        </div>
        <div className="space-y-5 md:w-100">
          <Card>
            <CardHeader>
              <CardTitle>Summary</CardTitle>
            </CardHeader>
            <Divider className="px-4" />
            <CardBody className="space-y-2">
              <SummaryCell title="Total Vehicles" content="1 Vehicle" />
              <SummaryCell title="Pickup Location" content="123 Main Street, Suite 456, New York, NY 10001" />
              <SummaryCell title="Pickup Date" content="Mon,3 May 2023 - 10:00 AM" />
              <Divider />
              <Heading as="h5">Price Details</Heading>
              <SummaryCell title="Trip Price" content="USD 100/day" />
              <SummaryCell title="Delivery Fee" content="USD 10" />
              <SummaryCell title="Duration" content="2 day" />
              <SummaryCell title="Tax" content="USD 0" />
              <Divider />
              <Heading as="h5" className="flex justify-between">
                <span>Total</span>
                <span className="flex items-center gap-1">
                  <IconTagFilled className="rotate-90" size={20} />
                  USD 1,235.00
                </span>
              </Heading>
            </CardBody>
          </Card>
          <Card>
            <CardBody>
              <Checkbox id="agreement" checked={checked} onCheckedChange={setChecked}>
                <span className="text-sm">
                  I agree to the <Link href="#">Term & conditions</Link> and <Link href="#">Privacy Policy</Link>
                </span>
              </Checkbox>
              <Button disabled={!checked} className="mt-4 w-full">
                Pay Now
              </Button>
            </CardBody>
          </Card>
        </div>
      </div>
    </div>
  );
}

function SummaryCell({ title, content }: { title: string; content: string }) {
  return (
    <li className="flex list-none justify-between">
      <p className="text-description mr-6 shrink-0">{title}</p>
      <p className="text-end font-semibold">{content}</p>
    </li>
  );
}

function VisaSvg({
  width,
  height,
  color,
  className,
}: {
  className?: string;
  color?: string;
  width: number;
  height: number;
}) {
  return (
    <svg
      width={width}
      height={height}
      className={className}
      viewBox="0 0 100 33"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M37.9686 0.570831L24.8764 31.8071H16.3348L9.89214 6.87913C9.50099 5.34372 9.16089 4.78123 7.97131 4.13435C6.02913 3.08071 2.82186 2.09218 0 1.47864L0.191665 0.570831H13.9411C15.6937 0.570831 17.2692 1.73749 17.6671 3.75571L21.0697 21.8306L29.479 0.57031H37.9686V0.570831ZM71.4361 21.6087C71.4705 13.3645 60.0361 12.9103 60.1148 9.22755C60.1393 8.10673 61.2065 6.91507 63.5424 6.6109C64.7002 6.45934 67.8903 6.34372 71.5085 8.00881L72.9277 1.38489C70.9835 0.679161 68.4819 0 65.3694 0C57.3825 0 51.7617 4.24581 51.7143 10.3255C51.6628 14.8223 55.7263 17.3317 58.7877 18.8259C61.9372 20.3561 62.9939 21.3395 62.982 22.7082C62.9596 24.8035 60.47 25.7285 58.1434 25.765C54.082 25.8275 51.7252 24.666 49.8466 23.7926L48.382 30.6358C50.27 31.5019 53.7549 32.2576 57.3679 32.2957C65.8569 32.2957 71.41 28.1025 71.4361 21.6087ZM92.5266 31.8071H100L93.4766 0.570831H86.5787C85.0277 0.570831 83.7194 1.47395 83.1402 2.86249L71.0147 31.8071H79.4996L81.1839 27.1415H91.5511L92.5266 31.8071ZM83.5105 20.7395L87.7636 9.01141L90.2115 20.7395H83.5105ZM49.5138 0.570831L42.8321 31.8071H34.7519L41.4362 0.570831H49.5138Z"
        fill={color}
      />
    </svg>
  );
}

import { IconPlus, IconWallet, IconHeadset } from '@tabler/icons-react';
import Button from '@/components/ui/Button';
import Divider from '@/components/ui/Divider';
import Heading from '@/components/ui/Heading';
import Input from '@/components/ui/Input';
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui/Card';
import ToolTip from '@/components/ui/Tooltip';
export default function Page() {
  return (
    <div className="mx-auto px-4 py-10 md:max-w-xl md:py-20">
      <Heading as="h2">Payment info</Heading>
      <Divider />
      <div className="flex items-center gap-3 py-1">
        <Button className="gap-1 md:w-80" colors="neutral" variant="solid">
          <IconPlus size={20} />
          Payment method
        </Button>
        <div className="grid flex-1 grid-cols-2 gap-2">
          <ToolTip
            trigger={
              <Button variant="bordered" colors="neutral">
                <IconWallet size={20} />
              </Button>
            }>
            Check wallet
          </ToolTip>
          <ToolTip
            trigger={
              <Button variant="bordered" colors="neutral">
                <IconHeadset size={20} />
              </Button>
            }>
            Contact CS
          </ToolTip>
        </div>
      </div>
      <Divider />
      <div className="flex flex-col gap-4 md:grid md:grid-cols-2">
        <div className="w-full space-y-2">
          <p className="text-sm font-semibold">First Name</p>
          <Input />
        </div>
        <div className="w-full space-y-2">
          <p className="text-sm font-semibold">Last Name</p>
          <Input />
        </div>
        <div className="w-full space-y-2">
          <p className="text-sm font-semibold">Card Number</p>
          <Input
            placeholder="**** **** **** ****"
            suffix={<VisaSvg width={40} height={12} className="fill-primary" />}
          />
        </div>
        <div className="grid w-full grid-cols-2 gap-2">
          <div className="space-y-2">
            <p className="text-sm font-semibold">Expired Date</p>
            <Input placeholder="12/32" />
          </div>
          <div className="space-y-2">
            <p className="text-sm font-semibold">CV/CVC</p>
            <Input placeholder="456" />
          </div>
        </div>
      </div>
      <Divider />
      <Card className="mx-2 bg-neutral-500/10">
        <CardHeader>
          <CardTitle>Billing address</CardTitle>
        </CardHeader>
        <CardBody className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <p className="text-sm font-semibold">Email Address</p>
              <Input type="email" placeholder="email@example.com" />
            </div>
            <div className="space-y-2">
              <p className="text-sm font-semibold">Phone Number</p>
              <Input type="phone" placeholder="+1 (555) 555-5555" />
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <p className="text-sm font-semibold">Country</p>
              <Input />
            </div>
            <div className="space-y-2">
              <p className="text-sm font-semibold">State</p>
              <Input />
            </div>
            <div className="space-y-2">
              <p className="text-sm font-semibold">Postal Code</p>
              <Input />
            </div>
          </div>
        </CardBody>
      </Card>
      <div className="mt-8 grid grid-cols-2 gap-2">
        <Button variant="bordered" colors="neutral">
          Cancel
        </Button>
        <Button variant="solid" colors="primary">
          Continue
        </Button>
      </div>
    </div>
  );
}

function VisaSvg({
  width,
  height,
  color,
  className,
}: {
  className?: string;
  color?: string;
  width: number;
  height: number;
}) {
  return (
    <svg
      width={width}
      height={height}
      className={className}
      viewBox="0 0 100 33"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M37.9686 0.570831L24.8764 31.8071H16.3348L9.89214 6.87913C9.50099 5.34372 9.16089 4.78123 7.97131 4.13435C6.02913 3.08071 2.82186 2.09218 0 1.47864L0.191665 0.570831H13.9411C15.6937 0.570831 17.2692 1.73749 17.6671 3.75571L21.0697 21.8306L29.479 0.57031H37.9686V0.570831ZM71.4361 21.6087C71.4705 13.3645 60.0361 12.9103 60.1148 9.22755C60.1393 8.10673 61.2065 6.91507 63.5424 6.6109C64.7002 6.45934 67.8903 6.34372 71.5085 8.00881L72.9277 1.38489C70.9835 0.679161 68.4819 0 65.3694 0C57.3825 0 51.7617 4.24581 51.7143 10.3255C51.6628 14.8223 55.7263 17.3317 58.7877 18.8259C61.9372 20.3561 62.9939 21.3395 62.982 22.7082C62.9596 24.8035 60.47 25.7285 58.1434 25.765C54.082 25.8275 51.7252 24.666 49.8466 23.7926L48.382 30.6358C50.27 31.5019 53.7549 32.2576 57.3679 32.2957C65.8569 32.2957 71.41 28.1025 71.4361 21.6087ZM92.5266 31.8071H100L93.4766 0.570831H86.5787C85.0277 0.570831 83.7194 1.47395 83.1402 2.86249L71.0147 31.8071H79.4996L81.1839 27.1415H91.5511L92.5266 31.8071ZM83.5105 20.7395L87.7636 9.01141L90.2115 20.7395H83.5105ZM49.5138 0.570831L42.8321 31.8071H34.7519L41.4362 0.570831H49.5138Z"
        fill={color}
      />
    </svg>
  );
}