import { useRouter } from 'next/navigation';
import React from 'react';
import {
  Button,
  Card,
  Col,
  Form,
  InputGroup,
  Row,
  Table,
} from 'react-bootstrap';
import axios from '/api/axios';
import Alerts from '/components/common/Alerts';
import Header from '/components/common/Header';
import Loading from '/components/common/Loading';
import FormInputGroup from '/components/form/FormInputGroup';
import FormWizard from '/components/form/FormWizard';
import BorrowerGiveLoanForm from './BorrowerGiveLoanForm';
import SuretyGiveLoanForm from './SuretyGiveLoanForm';
import CorporateGiveLoanForm from './CorporateGiveLoanForm';

import { NewGiveLoanCreate } from '@/api/new-give-loan';

const CreateGiveLoan = () => {
  const router = useRouter();

  const [alerts, SetAlerts] = React.useState({
    error: [],
    success: [],
  });
  const [errorFields, SetErrorFields] = React.useState([]);
  const [isLoading, SetIsLoading] = React.useState(false);

  const [selectedBorrowerNo, SetSelectedBorrowerNo] = React.useState(0);

  const [leftView, SetLeftView] = React.useState('');
  const [isInterviewDetailListVisible, SetIsInterviewDetailListVisible] = React.useState(false);

  const [paymentSchedules, SetPaymentSchedules] = React.useState([]);

  const [eir, SetEIR] = React.useState('');
  const [irr, SetIRR] = React.useState('');

  const formRef = React.createRef();
  const inputRefs = {};

  const separatorEl = <Col xs={12} className="border-bottom mb-3" />;

  // const [paymentFrequency, SetPaymentFrequency] = React.useState(0);

  React.useEffect(() => {
    if (leftView == 'interview') {
    } else if (leftView == 'un-search') {
      OpenGoogleTab();
    }
  }, [leftView]);

  const paymentDivisors = {
    'annually': 1, //In years
    'bi-weekly': (365 / 14), //In years
    'daily': 365, //In years
    'monthly': 12, //In years
    'weekly': (365 / 7), //In years
    'payday': 365, //In years
    'quarterly': 4, //In years
    'semi-annually': 2, //In years
  };

  const CalculateEIR = (flows, paymentFrequency) => {

  };

  const CalculatePaymentSchedule = (e) => {
    setTimeout(() => { // set timeout to let the state updated
      if (
        !inputRefs.disbursement1_amount?.current ||
        !inputRefs.disbursement1_installment_count?.current ||
        !inputRefs.disbursement1_payment_frequency_id?.current ||
        !inputRefs.loan_plan1_interest_calculation_method_id?.current ||
        !inputRefs.loan_plan1_interest_frequency_id?.current ||
        !inputRefs.loan_plan1_interest_rate?.current ||
        inputRefs.disbursement1_installment_count.current.value == 0 ||
        !parseInt(inputRefs.disbursement1_payment_frequency_id?.current?.props?.value?.value) ||
        !parseInt(inputRefs.loan_plan1_interest_rate.current.value)
      ) return;
  
      const amount = inputRefs.disbursement1_amount.current.value;
      const installments = inputRefs.disbursement1_installment_count.current.value;
      let interestRate = inputRefs.loan_plan1_interest_rate.current.value;
      const paymentFrequencyLabel = inputRefs.disbursement1_payment_frequency_id.current.props.value.label;
      const interestFrequencyLabel = inputRefs.loan_plan1_interest_frequency_id.current.props?.value?.label;
      let interestCalculationMethod = inputRefs.loan_plan1_interest_calculation_method_id.current.props?.value?.label;
      if (interestCalculationMethod == 'Reducing Interest') interestCalculationMethod = 'Compound Interest';
      const biweeklyCalculationMethod = 'custom';// "<?php echo $biweeklyCalculationMethod; ?>";

      const disbursement1FirstPaymentDate = new Date(inputRefs.disbursement1_first_payment_date?.current?.value);

      const paymentFrequency = GetPaymentFrequency();
      const interestFrequency = interestFrequencyLabel == 'payday' ? 1 : (1 / paymentDivisors[interestFrequencyLabel]);

      const termInterest = amount * interestRate / 100; //Generally Annual Interest. If Principal = 5000, R = 10% monthly then I = Rs.500 monthly

      if (interestRate == 0) interestCalculationMethod = 'Simple Interest'; // for 0% loans - to divide the amount equally among installments

      let totalInterest = (termInterest * paymentFrequency * installments / interestFrequency); // 500 * 1(yearly) / (1/12) = 12000

      if (paymentFrequencyLabel == 'payday') {
        const paydayDays = (disbursement1FirstPaymentDate.getTime() - (new Date(inputRefs.application1_date.current.value)).getTime()) / 86400000;
        totalInterest *= paydayDays;
      }

      const emiInterest = totalInterest / installments;

      const tmpPaymentSchedules = [];

      //Final variables to be used
      if (interestCalculationMethod != "Compound Interest" || paymentFrequencyLabel == "payday") {
        let principal = 0;
        let lastPrincipal = amount;
        if (interestCalculationMethod != "Rest Schedule") {
          principal = Math.round(amount / installments * 100) / 100;
          const principalAdjustAdd = Math.round((amount - principal * installments) * 100) / 100;
          lastPrincipal = Math.round((principal + principalAdjustAdd) * 100) / 100;
        }

        const interest = Math.round(emiInterest * 100) / 100;
        const interestAdjustAdd = Math.round((totalInterest - interest * installments) * 100) / 100;
        const lastInterest = Math.round((interest + interestAdjustAdd) * 100) / 100;

        // Generate the payment schedule TRs
        // todo - this code is copied below too, make it a function
        for (let i = 0; i < installments; i++) {
          tmpPaymentSchedules.push({
            interest: interest,
            principal: principal,
          });
        }

        //Adjustment to round off last value to get accurate totals
        if (tmpPaymentSchedules.length > 0) {
          tmpPaymentSchedules[tmpPaymentSchedules.length - 1] = {
            interest: lastInterest,
            principal: lastPrincipal,
          };
        }
      } else {
        //this is actually reducing interest and not compound interest
        const proRatedInterestRate = interestRate * (1 / interestFrequency) * paymentFrequency;

        //needed when pay and int freqs are different. If they are same this wont do anything.
        interestRate = proRatedInterestRate;

        const annuity = (1 - 1 / (Math.pow((1 + interestRate / 100), installments))) / (interestRate / 100);

        //this below is the installment amount
        var compoundInstallment = Math.round(amount / annuity * 100) / 100;

        let osPrincipal = amount;

        // Generate the payment schedule data
        for (let i = 0; i < installments; i++) {
          const compoundInterest = Math.round(osPrincipal * interestRate / 100 * 100) / 100;
          let compoundPrincipal = Math.round((compoundInstallment - compoundInterest) * 100) / 100;
          osPrincipal -= compoundPrincipal;

          // last installment
          if (i == installments - 1) compoundPrincipal = Math.round((compoundPrincipal + osPrincipal) * 100) / 100;

          tmpPaymentSchedules.push({
            interest: compoundInterest,
            principal: compoundPrincipal,
          });
        }
      }

      if (disbursement1FirstPaymentDate) {
        let dateObject = disbursement1FirstPaymentDate;

        let disbursement1SecondPaymentDate = new Date(inputRefs.disbursement1_second_payment_date?.current?.value);
        if (!inputRefs.disbursement1_second_payment_date?.current.value) {
          disbursement1SecondPaymentDate = new Date(dateObject.getFullYear(), dateObject.getMonth(), dateObject.getDate() + 15);
          if (inputRefs.disbursement1_second_payment_date?.current) inputRefs.disbursement1_second_payment_date.current.value = (
            disbursement1SecondPaymentDate.getFullYear() + '-' +
            (disbursement1SecondPaymentDate.getMonth() + 1) + '-' +
            disbursement1SecondPaymentDate.getDate()
          );
        }

        for (let i = 0; i < installments; i++) {
          if (i % 2 != 0 && paymentFrequencyLabel == 'bi-weekly' && biweeklyCalculationMethod == 'automatic') dateObject = new Date(disbursement1SecondPaymentDate.getFullYear, disbursement1SecondPaymentDate.getMonth(), disbursement1SecondPaymentDate.getDate());
          else dateObject = new Date(disbursement1FirstPaymentDate.getFullYear(), disbursement1FirstPaymentDate.getMonth(), disbursement1FirstPaymentDate.getDate());

          if (paymentFrequencyLabel == 'monthly') {
            dateObject.setMonth(dateObject.getMonth() + i);

            const dateObject2 = new Date(disbursement1FirstPaymentDate.getFullYear(), disbursement1FirstPaymentDate.getMonth() + 1, 1);
            dateObject2.setMonth(dateObject2.getMonth() + i);

            if (dateObject.getMonth() > dateObject2.getMonth()) dateObject = new Date(dateObject.getFullYear(), dateObject.getMonth(), 0); // check if next month jumps one more month. Then adjust the next month due date; Move 1 month back and get the last day of the month
          }
          else if (paymentFrequencyLabel == 'daily') dateObject.setDate(dateObject.getDate() + i);
          else if (paymentFrequencyLabel == 'quarterly') dateObject.setMonth(dateObject.getMonth() + i * 3);
          else if (paymentFrequencyLabel == 'semi-annually') dateObject.setMonth(dateObject.getMonth() + i * 6);
          else if (paymentFrequencyLabel == 'annually') dateObject.setFullYear(dateObject.getFullYear() + i);
          else if (paymentFrequencyLabel == 'bi-weekly') {
            if (biweeklyCalculationMethod == 'automatic') dateObject.setMonth(dateObject.getMonth() + parseInt(i / 2));
            else dateObject.setDate(dateObject.getDate() + i * 14);
          }
          else if (paymentFrequencyLabel == "weekly") dateObject.setDate(dateObject.getDate() + i * 7);

          tmpPaymentSchedules[i]['date'] = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1).toString().padStart(2, '0') + '-' + dateObject.getDate().toString().padStart(2, '0');
        }
      }

      SetPaymentSchedules(tmpPaymentSchedules);
    });
  };

  const CalculatePaymentScheduleTotal = () => {
    // ceck
    const flows = [];
    flows.push(inputRefs.disbursement1_amount?.curent?.value * -1);

    const paymentFrequency = GetPaymentFrequency();
    const eirPaymentFrequency = 1 / paymentFrequency;

    // Additional Row to show the total
    // $total_row = "<tr id='ps_total_row'><th class='colspan1' style='border-top: 1px solid #000;'>Total</th><td class='colspan1' style='border-top: 1px solid #000;'>&nbsp;</td><th class='colspan1' style='border-top: 1px solid #000;'>Principal</th><td id='principalTotal' class='colspan1' style='border-top: 1px solid #000;'>&nbsp;</td><th class='colspan1' style='border-top: 1px solid #000;'>Interest</th><td id='interestTotal' class='colspan1' style='border-top: 1px solid #000; '>&nbsp;</td><th class='colspan1' style='border-top: 1px solid #000; width: 1%; min-width: 1%;'>=</th><td id='emi_total' class='colspan1' style='border-top: 1px solid #000; width: 6%; '>&nbsp;</td></tr>";
    // if(!$("#ps_total_row").length) $($total_row).appendTo($("#payment_schedule1_entry"));

    const interests = [];
    const principals = [];
    let interestTotal = 0;
    let principalTotal = 0;

    paymentSchedules.map((schedule) => {
      const principal = parseFloat(schedule.principal ?? 0);
      principalTotal += principal;
      principals.push(principal);

      const interest = parseFloat(schedule.interest ?? 0);
      interestTotal += interest;
      interests.push(interest);

      flows.push(principal + interest);
    });

    if (
      (inputRefs.disbursement1_amount?.current?.value ?? 0) > 0 &&
      (inputRefs.disbursement1_installment_count?.curent?.value ?? 0) > 0
    ) {
      const irr = IRR(flows, 0.1);

      //Prashant: commented this on 8-5-3018 as suggested by Marcus. and set to fixed 47%

      SetEIR(Math.round((Math.pow((1 + irr), paymentFrequency) - 1) * 10000) / 100);

      SetIRR(Math.round(irr * 10000) / 100);
    }

    SetPaymentSchedules([...paymentSchedules, {
      interest: Math.round(interestTotal * 100) / 100,
      principal: Math.round(principalTotal * 100) / 100,
      type: 'total',
    }]);
    /*
      $("input[name='payment_schedule1_principal[]']").each(function(){
        $principalTotal = $principalTotal + parseFloat($(this).val() || 0);
        $emi_total = $emi_total + parseFloat($(this).val());
        $principals.push($(this).val() || 0);
      })
      $("input[name='payment_schedule1_interest[]']").each(function(){
        $interestTotal = $interestTotal + parseFloat($(this).val() || 0);
        $emi_total = $emi_total + parseFloat($(this).val());
        $interests.push($(this).val() || 0);
      })
      $principalTotal = Math.round($principalTotal*100)/100;
      $interestTotal = Math.round($interestTotal*100)/100;
      $emi_total = Math.round($emi_total*100)/100;

      for(var $i = 0; $i < Math.max($principals.length, $interests.length); $i++) $flows.push(parseFloat($principals[$i])+parseFloat($interests[$i]))
      calculate_eir($flows, $eirPaymentFrequency);
      if($principalTotal) $("#principalTotal").html($principalTotal);
      if($interestTotal) $("#interestTotal").html($interestTotal);
      if($emi_total) $("#emi_total").html($emi_total);
    */
  };

  React.useEffect(() => { if (paymentSchedules.length > 0 && paymentSchedules[paymentSchedules.length - 1].type != 'total') { CalculatePaymentScheduleTotal(); } }, [paymentSchedules]); // only call CalculatePaymentScheduleTotal when latest row is not total

  const GenerateInput = (inp, i) => {
    if (inp != 'SEPARATOR' && !inp.ref) {
      const ref = React.createRef();
      inp['ref'] = ref;
      inputRefs[inp.inputName] = ref;
    }
    return inp == 'SEPARATOR' ? separatorEl : <Col xs={(inp.cols ?? {}).group ?? 6} key={'inp_' + inp.inputName}>
      <FormInputGroup { ...inp} isVertical={true} />
    </Col>
  };

  const GetPaymentFrequency = () => {
    if (!parseInt(inputRefs.disbursement1_payment_frequency_id?.current?.props?.value?.value)) return 0;
    const paymentFrequencyLabel = inputRefs.disbursement1_payment_frequency_id.current.props.value.label;
    if (!paymentDivisors[paymentFrequencyLabel]) return 0;
    return 1 / paymentDivisors[paymentFrequencyLabel];
  };

  // IRR and EIR calculation methods. Referred from http://finance.thinkanddone.com/finding_irr_with_nfv_equation_using_newton_raphson_method.html
  const IRR = (flows, seed) => {
    const steps = flows.length;
    let fx = 0;
    let fx1 = 0;
    for (let i = 0; i < steps; i++) {
      fx += flows[i] * Math.pow((1 + seed), (steps - i));
      fx1 += (steps - i) * flows[i] * Math.pow((1 + seed), (steps - i - 1));
    }
    const distraction = fx / fx1;
    let seed1 = seed - distraction;
    if (distraction > 0.000001 || distraction < 0) {
      if (seed1 < 0) {
        seed1 = Math.round(Math.random() * 100) / 100;
        return irr(flows, seed1);
      }
      else return irr(flows, seed1);
    }
    else return seed;
  }

  const OpenGoogleTab = () => window.open('https://www.google.com/search?q=');

  const currentDateTime = new Date();
  const currentDateStr = currentDateTime.getFullYear() + '-' + (currentDateTime.getMonth() + 1).toString().padStart(2, '0') + '-' + currentDateTime.getDate().toString().padStart(2, '0');

/* React.useEffect(() => {
  [
    ['disbursement1_amount', 1000],
    ['disbursement1_installment_count', 10],
    ['disbursement1_first_payment_date', '2024-06-30'],
    ['loan_plan1_interest_rate', 10],
  ].map((data) => {
    if (inputRefs[data[0]]?.current) inputRefs[data[0]].current.value = data[1];
  });
}, []); */

const GiveLoanCreateSubmit = async () => {
  SetIsLoading(true);
  const res = await NewGiveLoanCreate(formRef.current);
  console.log(res);
  if (res.data?.success) {
  } else if (res.response?.status == 422) { // validation error
    const formErrors = res.response.data?.errors ?? {};
    const formErrorFields = Object.keys(formErrors);
    const formErrorMsgs = [];
    formErrorFields.map((attr) => {
      formErrorMsgs.push(formErrors[attr]);
    });
    SetAlerts({
      error: formErrorMsgs,
      success: [],
    });
    SetErrorFields(formErrorFields);
  } else {
    SetAlerts({ error: res.response.message ?? 'There was an error while processing the request' })
  }
  window.scrollTo({ top: 0 });
  SetIsLoading(false);
};

  return <>
    <style>{'#form-wizard * { font-size: 9px !important; }'}</style>
    <Header
      title="New Give Loan"
      paths={[
        { title: 'New Give Loan' },
      ]}
    />
    <Row className=" row-sm">
      <Col lg={12}>
        <Card className="custom-card overflow-hidden">
          <Card.Body>
            <Alerts alerts={alerts} />
            <Row>
              <Col xs="auto">
                <FormInputGroup
                  inputOptions={[{ label: 'Select MLCB Application' }, {}]}
                  inputType="select"
                  isVertical={true}
                  label={{ className: "d-none" }}
                  layouts={{ input: (input) => <InputGroup className="input-group mb-3">
                    <span className="bg-warning border-warning input-group-text">
                      1
                    </span>
                    {input}
                    <Button
                      className="input-group-button"
                    >
                      <i className="fa fa-search"></i>
                    </Button>
                  </InputGroup> }}
                />
              </Col>
              <Col xs="auto">
                <InputGroup className="input-group mb-3">
                  <span className="bg-warning border-warning input-group-text">
                    2
                  </span>
                  <Button
                    className="input-group-button"
                    onClick={() => { SetLeftView('interview'); }}
                  >
                    INTERVIEW
                  </Button>
                </InputGroup>
              </Col>
              <Col xs="auto">
                <FormInputGroup
                  inputOptions={[{ label: 'Select Loan Plan' }, {}]}
                  inputType="select"
                  isVertical={true}
                  label={{ className: "d-none" }}
                  layouts={{ input: (input) => <InputGroup className="input-group mb-3">
                    <span className="bg-warning border-warning input-group-text">
                      3
                    </span>
                    {input}
                  </InputGroup> }}
                />
              </Col>
            </Row>
            <Form
              className="border"
              id="form-wizard"
              ref={formRef}
            >
              {[
                {
                  "inputName": "submitted",
                  "inputType": "hidden",
                },
                {
                  "defaultValue": "oct2015",
                  "inputName": "regs",
                  "inputType": "hidden",
                },
              ].map((inp) => <FormInputGroup { ...inp} />)}
              <Row className="row-sm">
                <Col lg={3} className={leftView == 'interview' ? '' : 'd-none'}>
                  <Card>
                    <Card.Body>
                      <div class="text-end">
                        <Button
                          className="btn-primary me-4"
                        >
                          PRINT
                        </Button>
                        <Button
                          className="btn-light"
                          onClick={() => SetLeftView('')}
                        >
                          <i className="fa fa-times" />
                        </Button>
                      </div>
                      <InputGroup className="input-group mb-3">
                        <span className="bg-light input-group-text text-dark">
                          Demo Server
                        </span>
                        <Button
                          className="input-group-button"
                        >
                          Fetch
                        </Button>
                      </InputGroup>
                      Total number of loans = 0<br />
                      Disbursements:
                      <Table className="table table-bordered mg-b-0 text-md">
                        <thead>
                          <tr>
                            <th className="bg-light">Who</th>
                            <th className="bg-light">Date</th>
                            <th className="bg-light">Account</th>
                            <th className="bg-light">Owner</th>
                            <th className="bg-light">Amount</th>
                            <th className="bg-light">Late Fee</th>
                            <th className="bg-light">Rmrks</th>
                            <th className="bg-light">Status</th>
                            <th className="bg-light">Profit</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                            <td className="bg-light"></td>
                          </tr>
                        </tbody>
                      </Table>
                      <br />
                      <InputGroup className="input-group mb-3">
                        <span className="bg-light input-group-text text-dark">
                          MLAS
                        </span>
                        <Button
                          className="input-group-button"
                        >
                          Fetch
                        </Button>
                      </InputGroup>
                      <div>
                        Failed to log your request<br />
                        <br />
                        1 Previous Searches
                      </div>
                      <Table className={'table table-bordered mg-b-0 text-md' + (isInterviewDetailListVisible ? '' : ' d-none')}>
                        <thead>
                          <tr>
                            <th className="bg-light">Date</th>
                            <th className="bg-light">Member</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </Table>
                      <br />
                      <Button
                        className="input-group-button"
                        onClick={() => { SetIsInterviewDetailListVisible(!isInterviewDetailListVisible); }}
                      >
                        DETAILED LIST
                      </Button>
                      <br />
                      <Table className="table table-bordered mg-b-0 text-md">
                        <thead>
                          <tr>
                            <th className="bg-light">Member</th>
                            <th className="bg-light">Count</th>
                            <th className="bg-light">Latest Search</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </Table>
                      Loans:
                      <Table className="table table-bordered mg-b-0 text-md">
                        <thead>
                          <tr>
                            <th className="bg-light">Date</th>
                            <th className="bg-light">Borrower</th>
                            <th className="bg-light">Loan Status Description</th>
                            <th className="bg-light">Banned By Family</th>
                            <th className="bg-light">Amount</th>
                            <th className="bg-light">Status</th>
                            <th className="bg-light">Owner</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </Table>
                      Ban Requests:
                      <Table className="table table-bordered mg-b-0 text-md">
                        <thead>
                          <tr>
                            <th className="bg-light">Borrower</th>
                            <th className="bg-light">Reason</th>
                            <th className="bg-light">Other Reason</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </Table>
                    </Card.Body>
                  </Card>
                </Col>
                <Col lg={3} className={leftView == 'un-search' ? '' : 'd-none'}>
                  <Card>
                    <Card.Body>
                      <div class="text-end">
                        <Button
                          className="btn-light"
                          onClick={() => SetLeftView('')}
                        >
                          <i className="fa fa-times" />
                        </Button>
                      </div>
                      <InputGroup className="input-group mb-3">
                        <span className="bg-light input-group-text text-dark">
                          UN Records
                        </span>
                        <Button
                          className="input-group-button"
                        >
                          Fetch
                        </Button>
                      </InputGroup>
                      <Button>
                        Print
                      </Button><br />
                      <br />
                      <Button
                        className="btn-danger"
                        onClick={OpenGoogleTab}
                      >
                        Click here to search {'[NAME]'} on Google
                      </Button><br />
                      <br />
                      <h1 className="text-primary">"{'[NAME]'}" - Exact Search ({'[X]'} entries) - </h1>
                      <Table className="table table-bordered mg-b-0 text-md">
                        <thead>
                          <tr>
                            <th className="bg-light">ID</th>
                            <th className="bg-light">Name</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </Table>
                      <br />
                      <h1 className="text-danger">"{'[NAME]'}" - Similarity Search ({'[X]'} entries) - </h1>
                      <Table className="table table-bordered mg-b-0 text-md">
                        <thead>
                          <tr>
                            <th className="bg-light">ID</th>
                            <th className="bg-light">Name</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </Table>
                    </Card.Body>
                  </Card>
                </Col>
                <Col lg={3}>
                  <Card>
                    <Card.Header>
                      <h4 className="card-title mb-1">
                        BORROWER DETAILS
                      </h4>
                    </Card.Header>
                    <Card.Body>
                      <FormWizard step={selectedBorrowerNo} onChange={(step) => SetSelectedBorrowerNo(step)}>
                        {Array.from(Array(7).keys()).map((i) => {
                          const opts = {
                            formNo: (i < 2 ? i + 1 : (i < 7 ? i - 1 : 0)),
                            key: ('wiz-step-' + i),
                            number: (i + 1),
                            SetLeftView: SetLeftView,
                            title: (i < 2 ? ('B' + (i + 1)) : (i < 6 ? ('S' + (i - 1)) : 'Corp Borr')),
                          };
                          if (i < 2) return <BorrowerGiveLoanForm {...opts} />;
                          else if (i < 6) return <SuretyGiveLoanForm {...opts} />;
                          return <CorporateGiveLoanForm {...opts} />;
                        })}
                      </FormWizard>
                    </Card.Body>
                  </Card>
                </Col>
                <Col lg={3}>
                  <Card>
                    <Card.Header>
                      <h4 className="card-title mb-1">
                        LOAN DETAILS
                      </h4>
                    </Card.Header>
                    <Card.Body>
                      <Row className="row-xs">
                        {[
                          {
                            "cols": { "group": 12 },
                            "inputLabel": "Branch",
                            "inputName": "disbursement1_branch_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select Branch",
                                "value": ""
                              },
                              {
                                "label": "Main",
                                "value": "1"
                              },
                              {
                                "label": "Branch 1",
                                "value": "2"
                              },
                              {
                                "label": "Branch 2",
                                "value": "3"
                              }
                            ]
                          },
                          {
                            "cols": { "group": 12 },
                            "inputLabel": "MLCB Application No.",
                            "inputName": "disbursement1_mlcb_application_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select MLCB Application",
                                "value": ""
                              },
                            ]
                          },
                          {
                            "inputLabel": "Account No.",
                            "inputName": "application1_account_number"
                          },
                          {
                            // "defaultValue": (new Date).toLocaleString(),
                            // "defaultValue": "01-01-2000",
                            // "defaultValue": "2000-01-01",
                            "defaultValue": currentDateStr,
                            "inputLabel": "Date",
                            "inputName": "application1_date",
                            "inputType": "date",
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            "inputLabel": "Type of Loan Product",
                            "inputName": "LonPro",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select",
                                "value": ""
                              },
                              {
                                "label": "INDIVIDUAL",
                                "value": "I"
                              },
                              {
                                "label": "NON-INDIVIDUAL",
                                "value": "C"
                              }
                            ]
                          },
                          {
                            "defaultValue": 7,
                            "inputLabel": "Purpose",
                            "inputName": "application1_loan_purpose_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select",
                                "value": ""
                              },
                              {
                                "label": "Business",
                                "value": "1"
                              },
                              {
                                "label": "Personal - Education",
                                "value": "2"
                              },
                              {
                                "label": "Personal - Medical",
                                "value": "3"
                              },
                              {
                                "label": "Personal - Others",
                                "value": "6"
                              },
                              {
                                "label": "Personal - Pay Day",
                                "value": "7"
                              }
                            ]
                          },
                          {
                            "defaultValue": 2,
                            "inputLabel": "Loan Type",
                            "inputName": "application1_loan_type_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select",
                                "value": ""
                              },
                              {
                                "label": "Secured",
                                "value": "1"
                              },
                              {
                                "label": "Unsecured",
                                "value": "2"
                              }
                            ]
                          },
                          {
                            "inputLabel": "Security Details",
                            "inputName": "disbursement1_security_details",
                            "inputType": "textarea"
                          },
                          {
                            "inputLabel": "Amount",
                            "inputName": "disbursement1_amount",
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            "inputLabel": "Installments ",
                            "inputName": "disbursement1_installment_count",
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            "cols": { "group": 12 },
                            "defaultValue": 2,
                            "inputLabel": "Language",
                            "inputName": "disbursement1_language_code",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select",
                                "value": ""
                              },
                              {
                                "label": "Afrikaans",
                                "value": "af"
                              },
                              {
                                "label": "Arabic",
                                "value": "ar"
                              },
                              {
                                "label": "Azerbaijani",
                                "value": "az"
                              },
                              {
                                "label": "Belarusian",
                                "value": "be"
                              },
                              {
                                "label": "Bulgarian",
                                "value": "bg"
                              },
                              {
                                "label": "Catalan",
                                "value": "ca"
                              },
                              {
                                "label": "Czech",
                                "value": "cs"
                              },
                              {
                                "label": "Welsh",
                                "value": "cy"
                              },
                              {
                                "label": "Danish",
                                "value": "da"
                              },
                              {
                                "label": "German",
                                "value": "de"
                              },
                              {
                                "label": "Greek",
                                "value": "el"
                              },
                              {
                                "label": "English",
                                "value": "en"
                              },
                              {
                                "label": "Spanish",
                                "value": "es"
                              },
                              {
                                "label": "Estonian",
                                "value": "et"
                              },
                              {
                                "label": "Basque",
                                "value": "eu"
                              },
                              {
                                "label": "Persian",
                                "value": "fa"
                              },
                              {
                                "label": "Finnish",
                                "value": "fi"
                              },
                              {
                                "label": "French",
                                "value": "fr"
                              },
                              {
                                "label": "Irish",
                                "value": "ga"
                              },
                              {
                                "label": "Galician",
                                "value": "gl"
                              },
                              {
                                "label": "Hindi",
                                "value": "hi"
                              },
                              {
                                "label": "Croatian",
                                "value": "hr"
                              },
                              {
                                "label": "Haitian Creole",
                                "value": "ht"
                              },
                              {
                                "label": "Hungarian",
                                "value": "hu"
                              },
                              {
                                "label": "Armenian",
                                "value": "hy"
                              },
                              {
                                "label": "Indonesian",
                                "value": "id"
                              },
                              {
                                "label": "Icelandic",
                                "value": "is"
                              },
                              {
                                "label": "Italian",
                                "value": "it"
                              },
                              {
                                "label": "Hebrew",
                                "value": "iw"
                              },
                              {
                                "label": "Japanese",
                                "value": "ja"
                              },
                              {
                                "label": "Georgian",
                                "value": "ka"
                              },
                              {
                                "label": "Korean",
                                "value": "ko"
                              },
                              {
                                "label": "Latin",
                                "value": "la"
                              },
                              {
                                "label": "Lithuanian",
                                "value": "lt"
                              },
                              {
                                "label": "Latvian",
                                "value": "lv"
                              },
                              {
                                "label": "Macedonian",
                                "value": "mk"
                              },
                              {
                                "label": "Malay",
                                "value": "ms"
                              },
                              {
                                "label": "Maltese",
                                "value": "mt"
                              },
                              {
                                "label": "Dutch",
                                "value": "nl"
                              },
                              {
                                "label": "Norwegian",
                                "value": "no"
                              },
                              {
                                "label": "Polish",
                                "value": "pl"
                              },
                              {
                                "label": "Portuguese",
                                "value": "pt"
                              },
                              {
                                "label": "Romanian",
                                "value": "ro"
                              },
                              {
                                "label": "Russian",
                                "value": "ru"
                              },
                              {
                                "label": "Slovak",
                                "value": "sk"
                              },
                              {
                                "label": "Slovenian",
                                "value": "sl"
                              },
                              {
                                "label": "Albanian",
                                "value": "sq"
                              },
                              {
                                "label": "Serbian",
                                "value": "sr"
                              },
                              {
                                "label": "Swedish",
                                "value": "sv"
                              },
                              {
                                "label": "Swahili",
                                "value": "sw"
                              },
                              {
                                "label": "Thai",
                                "value": "th"
                              },
                              {
                                "label": "Filipino",
                                "value": "tl"
                              },
                              {
                                "label": "Turkish",
                                "value": "tr"
                              },
                              {
                                "label": "Ukrainian",
                                "value": "uk"
                              },
                              {
                                "label": "Urdu",
                                "value": "ur"
                              },
                              {
                                "label": "Vietnamese",
                                "value": "vi"
                              },
                              {
                                "label": "Yiddish",
                                "value": "yi"
                              },
                              {
                                "label": "Chinese",
                                "value": "zh"
                              }
                            ]
                          },
                          'SEPARATOR',
                          {
                            "inputLabel": "1st Pay Date",
                            "inputName": "disbursement1_first_payment_date",
                            "inputType": "date",
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            // "className": "d-none",
                            "inputLabel": "2nd Pay Date",
                            "inputName": "disbursement1_second_payment_date",
                            "inputType": "date",
                            "onChange": CalculatePaymentSchedule
                          },
                          'SEPARATOR',
                          {
                            "inputLabel": "Book 1",
                            "inputName": "disbursement1_book_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Newcashbook2",
                                "value": "1"
                              },
                              {
                                "label": "bank",
                                "value": "2"
                              },
                              {
                                "label": "Test 123",
                                "value": "10"
                              },
                              {
                                "label": "john",
                                "value": "13"
                              },
                              {
                                "label": "Test1 cash",
                                "value": "14"
                              },
                              {
                                "label": "Test book",
                                "value": "15"
                              },
                              {
                                "label": "testbook",
                                "value": "17"
                              },
                              {
                                "label": "Newbook2",
                                "value": "18"
                              },
                              {
                                "label": "Book1",
                                "value": "28"
                              },
                              {
                                "label": "pktest",
                                "value": "29"
                              },
                              {
                                "label": "Select",
                                "value": "0"
                              }
                            ]
                          },
                          {
                            "inputLabel": "Amount 1",
                            "inputName": "disbursement1_book_amount"
                          },
                          {
                            "inputLabel": "Payment Type 1",
                            "inputName": "disbursement1_payment_type_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select",
                                "value": ""
                              },
                              {
                                "label": "Cash",
                                "value": "1"
                              },
                              {
                                "label": "Cheque",
                                "value": "2"
                              },
                              {
                                "label": "Transfer",
                                "value": "3"
                              },
                              {
                                "label": "Demand Draft",
                                "value": "4"
                              },
                              {
                                "label": "Money Order",
                                "value": "5"
                              },
                              {
                                "label": "Postal Order",
                                "value": "6"
                              },
                              {
                                "label": "Giro",
                                "value": "7"
                              },
                              {
                                "label": "Nets",
                                "value": "8"
                              },
                              {
                                "label": "Goodwill",
                                "value": "9"
                              },
                              {
                                "label": "DBS Paynow",
                                "value": "10"
                              }
                            ]
                          },
                          {
                            "inputLabel": "Txn No. 1",
                            "inputName": "disbursement1_transaction_number"
                          },
                          'SEPARATOR',
                          {
                            "inputLabel": "Pay Frequency",
                            "inputName": "disbursement1_payment_frequency_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Select",
                                "value": ""
                              },
                              {
                                "label": "daily",
                                "value": "1"
                              },
                              {
                                "label": "weekly",
                                "value": "2"
                              },
                              {
                                "label": "bi-weekly",
                                "value": "3"
                              },
                              {
                                "label": "monthly",
                                "value": "4"
                              },
                              {
                                "label": "annually",
                                "value": "5"
                              },
                              {
                                "label": "payday",
                                "value": "6"
                              },
                              {
                                "label": "quarterly",
                                "value": "7"
                              },
                              {
                                "label": "semi-annually",
                                "value": "8"
                              }
                            ],
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            "inputLabel": "Administrative Fees",
                            "inputName": "disbursement1_acceptance_fee"
                          },
                          {
                            "inputLabel": "Late Fee",
                            "inputName": "disbursement1_late_fee"
                          },
                          {
                            "className": "d-none",
                            "inputLabel": "Contract Var Fee",
                            "inputName": "disbursement1_contract_variation_fee",
                            "readOnly": "readonly"
                          },
                          {
                            "className": "d-none",
                            "inputLabel": "Cheque/GIRO Fee",
                            "inputName": "disbursement1_cheque_dishonour_fee",
                            "readOnly": "readonly"
                          },
                          {
                            "className": "d-none",
                            "inputLabel": "Termination Fee",
                            "inputName": "disbursement1_termination_fee",
                            "readOnly": "readonly"
                          },
                          { // hidden on !get_option('show_eir_in_glf')
                            "group": { "className": "d-none" },
                            "inputLabel": "EIR",
                            "inputName": "disbursement1_eir",
                            "value": eir
                          },
                          {
                            "inputName": "disbursement1_irr",
                            "inputType": "hidden",
                            "value": irr
                          },
                          {
                            "cols": { "group": 12 },
                            "inputLabel": "Remarks",
                            "inputName": "disbursement1_Remarks",
                            "inputType": "textarea"
                          },
                          {
                            "cols": { "group": 12 },
                            "inputLabel": "UN Search Remarks",
                            "inputName": "disbursement1_un_search_remarks",
                            "inputType": "textarea",
                            "readOnly": "readonly"
                          },
                          {
                            "group": { "className": "d-none" },
                            "inputLabel": "UN Search DateTime",
                            "inputName": "disbursement1_un_search_datetime"
                          },
                          'SEPARATOR',
                        ].map(GenerateInput)}
                      </Row>
                    </Card.Body>
                  </Card>
                </Col>
                <Col lg={3}>
                  <Card>
                    <Card.Header>
                      <h4 className="card-title mb-1">
                        LOAN PLAN
                      </h4>
                    </Card.Header>
                    <Card.Body className="pb-0">
                      <Row className="row-xs">
                        {[
                          {
                            "inputLabel": "Interest(%)",
                            "inputName": "loan_plan1_interest_rate",
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            "inputLabel": "Interest Freq",
                            "inputName": "loan_plan1_interest_frequency_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "monthly",
                                "value": "4"
                              },
                              {
                                "label": "annually",
                                "value": "5"
                              },
                              {
                                "label": "Select",
                                "value": "0"
                              }
                            ],
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            "inputLabel": "Late Interest(%)",
                            "inputName": "loan_plan1_late_interest_rate"
                          },
                          {
                            "inputLabel": "Interest Calc Method",
                            "inputName": "loan_plan1_interest_calculation_method_id",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": "Rest Schedule",
                                "value": "3"
                              },
                              {
                                "label": "Reducing Interest",
                                "value": "4"
                              }
                            ],
                            "onChange": CalculatePaymentSchedule
                          },
                          {
                            "inputLabel": "Administrative Fee(%)",
                            "inputName": "loan_plan1_acceptance_fee_percent"
                          },
                          {
                            "group": { "className": "d-none "},
                            "inputLabel": "Late Fee(%)",
                            "inputName": "loan_plan1_late_fee_percent"
                          },
                          {
                            "group": { "className": "d-none "},
                            "inputLabel": "Legal Fee(%)",
                            "inputName": "loan_plan1_legal_fee_percent"
                          },
                          {
                            "group": { "className": "d-none "},
                            "inputLabel": "Contract Var Fee(%)",
                            "inputName": "loan_plan1_contract_variation_fee_percent"
                          },
                          {
                            "group": { "className": "d-none "},
                            "inputLabel": "Cheque Dis Fee(%)",
                            "inputName": "loan_plan1_cheque_dishonour_fee_percent"
                          },
                          {
                            "group": { "className": "d-none "},
                            "inputLabel": "Termination Fee(%)",
                            "inputName": "loan_plan1_termination_fee_percent"
                          },
                          'SEPARATOR',
                        ].map(GenerateInput)}
                      </Row>
                    </Card.Body>
                  </Card>
                  <Card>
                    <Card.Header>
                      <h4 className="card-title mb-1">
                        PAYMENT SCHEDULE
                      </h4>
                    </Card.Header>
                    <Card.Body className="pb-0">
                      <Table className="table table-bordered mg-b-0 text-md">
                        <thead>
                          <tr>
                            <th className="bg-light">Date</th>
                            <th className="bg-light">Principal</th>
                            <th className="bg-light">Interest</th>
                            <th className="bg-light">Total</th>
                          </tr>
                        </thead>
                        <tbody>
                          {paymentSchedules.map((schedule, i) => ((schedule.type ?? '') != 'total' ?
                            <tr>
                              <td><input type="date" name="payment_schedule1_date[]" value={schedule.date ?? ''} /></td>
                              <td><input name="payment_schedule1_principal[]" value={schedule.principal ?? ''} readOnly="readonly" /></td>
                              <td><input name="payment_schedule1_interest[]" value={schedule.interest ?? ''} readOnly="readonly" /></td>
                              <td>{Math.round(((Math.round((schedule.principal ?? 0) * 100) / 100) + (Math.round((schedule.interest ?? 0) * 100) / 100)) * 100) / 100}</td>
                            </tr> :
                          <tr className="bg-light">
                            <td>Total</td>
                            <td>{schedule.principal ?? ''}</td>
                            <td>{schedule.interest ?? ''}</td>
                            <td>{Math.round(((Math.round((schedule.principal ?? 0) * 100) / 100) + (Math.round((schedule.interest ?? 0) * 100) / 100)) * 100) / 100}</td>
                          </tr>
                          ))}
                        </tbody>
                      </Table>
                      <div className="d-none">
                        {[
                          { "inputName": "payment_schedule1_date[]" },
                          { "inputName": "payment_schedule1_principal[]" },
                          { "inputName": "payment_schedule1_interest[]" },
                        ].map((inp) => <FormInputGroup { ...inp} />)}
                      </div>
                    </Card.Body>
                  </Card>
                  <Card>
                    <Card.Header>
                      <h4 className="card-title mb-1">
                        DBS PARAMETERS
                      </h4>
                    </Card.Header>
                    <Card.Body>
                      <Row className="row-xs">
                        {[
                          {
                            "inputLabel": " TxnType ",
                            "inputName": "borrower1_txntype",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": " Please Select Txn Type ",
                                "value": "No"
                              },
                              {
                                "label": " GPP - Payments ",
                                "value": "GPP"
                              },
                              {
                                "label": " PPP - PayNow Payment ",
                                "value": "PPP"
                              }
                            ]
                          },
                          {
                            "inputLabel": " ProxyType ",
                            "inputName": "borrower1_proxyType",
                            "inputType": "select",
                            "inputOptions": [
                              {
                                "label": " Please Select Proxy Type ",
                                "value": "No"
                              },
                              {
                                "label": " NRIC ",
                                "value": "N"
                              },
                              {
                                "label": " MOBILE ",
                                "value": "M"
                              },
                              {
                                "label": " UEN ",
                                "value": "U"
                              }
                            ]
                          },
                          {
                            "inputName": "source",
                            "inputType": "hidden",
                          },
                          'SEPARATOR',
                        ].map(GenerateInput)}
                      </Row>
                    </Card.Body>
                  </Card>
                </Col>
              </Row>
              <div className="text-center py-2">
                <Button
                  className="btn btn-primary"
                  name="submit_save_back"
                  onClick={GiveLoanCreateSubmit}
                >
                  Submit
                </Button>
              </div>
            </Form>
            <Loading isShown={isLoading} />
          </Card.Body>
        </Card>
      </Col>
    </Row>
  </>;
};

CreateGiveLoan.layout = "Contentlayout";

export default CreateGiveLoan;