import { Component, FC, useEffect, useState, createContext, useContext, cloneElement } from 'react'
import { useSearchParams } from 'react-router-dom';
import { State, DataResult } from "@progress/kendo-data-query";
import { HeaderWrapper } from '../../../../_metronic/layout/components/header';
import { SubHeader } from '../../../../_metronic/layout/components/header/SubHeader';
import { PageHeader } from '../../../../_metronic/layout/components/header/pageHeader/PageHeader';
import { IntlProvider, LocalizationProvider } from '@progress/kendo-react-intl';
import { GetTrainingPlanById, TrainingPlanSetIsCostActive } from '../../../services/TrainingPlanService';
import { PostTrainingPlanInvoiceDistribution, DeleteTrainingPlanInvoiceDistribution, GetTrainingPlanInvoiceDistributionCompanies, PutTrainingPlanInvoiceDistribution, GetTrainingPlanInvoiceDistributionList } from '../../../services/TrainingPlanInvoiceDistributionService';
import Endpoints from '../../../enums/Endpoints';
import { Grid, GridToolbar, GridColumn as Column, GridDataStateChangeEvent, GridCellProps, GridItemChangeEvent } from "@progress/kendo-react-grid";
import './Training.css'
import { SimpleGridDataLoader } from '../../../modules/grid/SimpleGridDataLoader';
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Button } from "@progress/kendo-react-buttons";
import { TrainingPlanInvoiceDistribution } from '../../../models/TrainingPlanInvoiceDistribution';
import { UpdateTrainingPlanInvoiceDistribution } from '../../../models/UpdateTrainingPlanInvoiceDistribution';
import {
    DropDownList,
    DropDownListChangeEvent,
} from "@progress/kendo-react-dropdowns";
import { GetVatList } from '../../../services/VatService';
import { GetInvoiceTypeList } from '../../../services/InvoiceTypeService';
import { UpdateTrainingPlanInvoice } from '../../../models/UpdateTrainingPlanInvoice';
import { DeleteInvoiceContentDoc, DownloadInvoiceContentTrainingPlan, GetInvoiceContentTrainingPlanUrl, GetTrainingPlanInvoiceListWithTrainingPlanId, PutTrainingPlanInvoice, UploadInvoiceContentForTrainingPlan } from '../../../services/TrainingPlanInvoiceService';
import { TrainingPlanInvoice } from '../../../models/TrainingPlanInvoice';
import { PlanWizardHeader, PlanWizardHeaderProp } from '../../../../_metronic/layout/components/wizard/PlanWizardHeader';
import { getErrorToast, getSuccessToast } from '../../ToastMessages';
import { Modal } from 'react-bootstrap';
import { Viewer } from '../../../modules/viewer/Viewer';
import { SelectActive } from '../../../models/SelectActive';
import { createRoot } from 'react-dom/client';


const rootmasterHeader = createRoot(document.getElementById('masterHeader')!);
const rootSubHeader=createRoot(document.getElementById('subHeader')!);
const rootPageHeader=createRoot(document.getElementById('pageHeader')!);


  
export const MyCommandCell = (props) => {
    const { dataItem } = props;
    const inEdit = dataItem[props.editField];
    const isNewItem = dataItem.id === 0;
    const [visible, setVisible] = useState(false);
    const onDeleteData = () => {
        props.remove(props.dataItem);
        setVisible(!visible);
    };
    const toggleDialog = () => {
        setVisible(!visible);
    };



    return (
        <td className="k-command-cell">
            <Button
                themeColor={"primary"}
                style={{ border: "none", padding: "none", background: "none" }}
                onClick={() =>
                    inEdit
                        ? isNewItem
                            ? props.add(dataItem)
                            : props.update(dataItem)
                        : props.edit(dataItem)
                }
            >
                {/* {inEdit ? (isNewItem ? "Add" : "Update") : "Edit"} */}
                {inEdit ? (isNewItem ? <><i data-mode="add" className="bi bi-send" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></> : <><i data-mode="update" className="bi bi-send" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></>) : <><i data-mode="edit" className="bi bi-pen" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></>}
            </Button>
            <Button
                themeColor={"primary"}
                style={{ border: "none", padding: "none", background: "none" }}
                onClick={() =>
                    inEdit
                        ? isNewItem
                            ? props.discard(dataItem)
                            : props.cancel(dataItem)
                        : toggleDialog()
                }
            >
                {/* {inEdit ? (isNewItem ? "Discard" : "Cancel") : "Remove"} */}
                {inEdit ? (isNewItem ? <><i data-mode="discard" className="bi bi-x-circle" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></> : <><i data-mode="cancel" className="bi bi-x-circle" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></>) : <><i data-mode="remove" className="bi bi-trash" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></>}
            </Button>
            {visible && (
                <Dialog title={"Kayıt Sil"} onClose={toggleDialog} width={350}>
                    <div>
                        Silmek istediğinize emin misiniz?
                    </div>
                    <DialogActionsBar>
                        <Button onClick={onDeleteData}>Sil</Button>
                        <Button onClick={toggleDialog}>Vazgeç</Button>
                    </DialogActionsBar>
                </Dialog>
            )}
        </td>
    );
};



const ExternalTrainerCost: FC = () => {

    const [showTopUpdateButton, setShowTopUpdateButton] = useState(false);
    const [clickedToTopUpdateButton, setClickedToTopUpdateButton] = useState(false);
    const [trainingName,setTrainingName]=useState("");
    const [trainerCompanyName,setTrainerCompanyName]=useState("");

    const subHeaderDataX: SubHeader = {
        icon: '~/../media/icons/masterDataManagement.svg',
        title: 'YYXXCC',

    };


    const subHeaderData: SubHeader = {
        icon: '/media/icons/layout-text-sidebar-reverse.svg',
        title: trainingName,
        menu: [
            {title:trainerCompanyName}
        ],
    };




    const GridContext = createContext<any>({});
    const CommandCell = (props: GridCellProps) => {
        const { add, editField, enterEdit, update, cancel, discard, remove } = useContext(GridContext);

        return (
            <MyCommandCell
                {...props}
                add={add}
                editField={editField}
                update={update}
                edit={enterEdit}
                cancel={cancel}
                discard={discard}
                remove={remove}
            />
        );
    };


    const pageHeaderData: PageHeader = {
        title: 'Maliyet',
        menu: [
            { icon: '', title: 'İşlem Geçmişi', path: '/trainingManagement/PlanList/CostHistory?sourceid={id}' },
            showTopUpdateButton ? {
                icon: '', title: 'Güncelle', path: '',
                onClick: () => {
                    setClickedToTopUpdateButton(true);
                    setShowTopUpdateButton(false);
                    getSuccessToast("Maliyetler güncellenebilir duruma geldi");
                }
            } : { title: '' }
        ]
    };

    
    class MasterDataManagement extends Component {
        componentDidMount() {

            /**ReacDOM.render adds components into div in MasterLayout */
            rootmasterHeader.render(
                /**HeaderWrapper is for top header on pages. It gets 2 parameters (title, back icon visibility) */
                <HeaderWrapper title='Eğitim Listesi' isBackIconVisible={true} />,
                
            );

            rootSubHeader.render(
                <SubHeader {...subHeaderDataX} />,
            );

        }

        render() {
            return (
                <>
                </>
            );
        }
    }


    class ExternalTrainerCostPage extends Component {

        componentDidMount() {

            rootSubHeader.render(
                <SubHeader {...subHeaderData} />,
            );


            rootPageHeader.render(
                <PageHeader {...pageHeaderData} />,

            );


        }
        render() {
            return (
                <>
                </>
            );
        }

    }

    const [searchParams] = useSearchParams();
    const [id, setId] = useState(searchParams.get("id"));
    const endpoint = `${Endpoints.TrainingPlanInvoiceDistribution}/WithTrainingPlanId/${id}`;
    const trainingPlanInvoiceEndpoint = `${Endpoints.TrainingPlanInvoice}/WithTrainingPlanId/${id}`;

    const [result, setResult] = useState<DataResult>({
        data: [],
        total: 0,
    });

    const [trainingPlanInvoiceResult, setTrainingPlanInvoiceResult] = useState<DataResult>({
        data: [],
        total: 0,
    });

    const refreshGrid = () => {

        const dataResult = GetTrainingPlanInvoiceDistributionList(Number(id));

        dataResult.then((response) => {
            const dataResult = {
                data: response.data,
                total: response.data.length
            };

            setResult(dataResult);
            refreshTrainingPlanInvoiceGrid();
            equalityIndicator();


        }).catch((error) => {
            console.error("Update failed:", error);
        });


    };

    const refreshTrainingPlanInvoiceGrid = () => {
        const dataResult = GetTrainingPlanInvoiceListWithTrainingPlanId(Number(id));

        dataResult.then((response) => {

            const dataResult = {
                data: response.data,
                total: response.data.length
            };

            setTrainingPlanInvoiceResult(dataResult);

        }).catch((error) => {
            console.error("Update failed:", error);
        });


    };

    const add = (dataItem: TrainingPlanInvoiceDistribution) => {
        if(!allowPageEdit())
                return;

        dataItem.inEdit = true;
        dataItem.TrainingPlanId = Number(id);
        dataItem["attendeeCompany"] = null;
        dataItem["distributionCompany"] = null;


        if (result.data.find((item) => item.id > 0 && item.attendeeCompanyId === dataItem["attendeeCompanyId"] && item.distributionCompanyId === dataItem["distributionCompanyId"])) {
            getErrorToast("Seçilen katılım ve dağıtım şirketi zaten tabloda var!");
            return;
        }


        setLoading(true);
        const insertion = PostTrainingPlanInvoiceDistribution(dataItem);

        insertion.then(() => {
            refreshGrid();
            setLoading(false);

        }).catch((error) => {
            console.error("Insert failed:", error);
        });


    };

    const update = (dataItem: UpdateTrainingPlanInvoiceDistribution) => {
        if(!allowPageEdit())
                return;

        dataItem.inEdit = false;
        setLoading(true);
        const updatePromise = PutTrainingPlanInvoiceDistribution(dataItem.id, dataItem);

        updatePromise.then(() => {
            refreshGrid();
            setLoading(false);
        })
            .catch((error) => {
                console.error("Update failed:", error);
            });

    };

    const cancel = () => {
        refreshGrid();
    };

    const trainingPlanInvoiceUpdate = (dataItem: UpdateTrainingPlanInvoice) => {
        if(!allowPageEdit())
                return;

        dataItem.inEdit = false;
        setLoading(true);
        const updatePromise = PutTrainingPlanInvoice(dataItem.id, dataItem);

        updatePromise.then(() => {
            refreshTrainingPlanInvoiceGrid();
            setLoading(false);
        })
            .catch((error) => {
                console.error("Update failed:", error);
            });

    };

    const trainingPlanInvoiceCancel = () => {
        refreshTrainingPlanInvoiceGrid();
    };



    const remove = (dataItem: UpdateTrainingPlanInvoiceDistribution) => {
        if(!allowPageEdit())
                return;
        
        setLoading(true);
        const deletePromise = DeleteTrainingPlanInvoiceDistribution(dataItem.id);

        deletePromise.then(() => {
            refreshGrid();
            setLoading(false);
        })
            .catch((error) => {
                console.error("Update failed:", error);
            });
    };

    const discard = () => {
        const newData = [...result.data];
        newData.splice(newData.findIndex((item) => item.id === 0), 1);

        const dataResult = {
            data: newData,
            total: newData.length
        };
        setResult(dataResult);
    };

    const trainingPlanInvoiceDiscard = () => {
        const newData = [...result.data];
        newData.splice(newData.findIndex((item) => item.id === 0), 1);

        const dataResult = {
            data: newData,
            total: newData.length
        };
        setTrainingPlanInvoiceResult(dataResult);
    };

    const editField = "inEdit";

    const enterEdit = (dataItem: TrainingPlanInvoiceDistribution) => {

        if(!allowPageEdit())
            return;

        if( result.data.some(item=>item.inEdit)) {
            getErrorToast("Duzenlenebilir durumda olan diger satiri tamamlayiniz");
            return;
        }

        const newData = result.data.map((item) => {
            return item.id === dataItem.id ? { ...item, inEdit: true } : item
        }
        );

        const dataResult = {
            data: newData,
            total: newData.length
        };

        setResult(dataResult);
    };

    const trainingPlanInvoiceEnterEdit = (dataItem: TrainingPlanInvoice) => {
        if(!allowPageEdit())
            return;

        const newData = trainingPlanInvoiceResult.data.map((item) => {
            return item.id === dataItem.id ? { ...item, inEdit: true } : item
        }
        );

        const dataResult = {
            data: newData,
            total: newData.length
        };

        setTrainingPlanInvoiceResult(dataResult);
    };

    const itemChange = (event: GridItemChangeEvent) => {

        const field = event.field || "";

        const newData = result.data.map((item) => {

            return item.id === event.dataItem.id
                ? { ...item, [field]: event.value }
                : item
        });
        const dataResult = {
            data: newData,
            total: newData.length
        };
        setResult(dataResult);

    };

    const trainingPlanInvoiceItemChange = (event: GridItemChangeEvent) => {

        const field = event.field || "";

        const newData = trainingPlanInvoiceResult.data.map((item) => {

            return item.id === event.dataItem.id
                ? { ...item, [field]: event.value }
                : item
        });
        const dataResult = {
            data: newData,
            total: newData.length
        };
        setTrainingPlanInvoiceResult(dataResult);

    };

    const [dataState, setDataState] = useState<State>({
        take: 100,
        skip: 0
    });

    const [trainingPlanInvoiceDataState, setTrainingPlanInvoiceDataState] = useState<State>({
        take: 100,
        skip: 0
    });



    const trainingPlanInvoiceDataReceived = (result: DataResult) => {
        setTrainingPlanInvoiceResult(result);
    };

    const dataReceived = (result: DataResult) => {
        setResult(result);
    };

    let firstRender = true;

    const dataItemKey = "id";
    const selectedField = "selected";

    const trainingPlanInvoiceDataItemKey = "id";
    const trainingPlanInvoiceSelectedField = "selected";


    const dataStateChange = (e: GridDataStateChangeEvent) => {
        setDataState(e.dataState);
    };

    const trainingPlanInvoiceDataStateChange = (e: GridDataStateChangeEvent) => {
        setTrainingPlanInvoiceDataState(e.dataState);
    };

    const addNew = () => {
        if(!allowPageEdit())
            return;

        if( result.data.some(item=>item.inEdit)) {
            getErrorToast("Duzenlenebilir durumda olan diger satiri tamamlayiniz");
            return;
        }

        setResult({
            data: [...result.data, { attendeeCompany: { name: '' }, distributionCompany: { name: '' }, ratio: 0, id: 0, inEdit: true }],
            total: result.total + 1
        });
    };

    const equalityIndicator = () => {

        const invoiceSum = trainingPlanInvoiceResult.data.reduce((a, b) => a + b.amount, 0);

        return (
            invoiceSum === trainingData?.proposalCost ?
                <span className="badge text-bg-success">&nbsp;</span> :
                <span className="badge text-bg-danger">&nbsp;</span>
        )
    }



    const turkishLiraFormat = new Intl.NumberFormat('tr-TR', {
        style: 'currency',
        currency: 'TRY',
        maximumFractionDigits: 0

    });

    const [dropdownCompanyData, setDropdownCompanyData] = useState([])
    const [dropdownVatData, setDropdownVatData] = useState([])
    const [dropdownInvoiceTypeData, setDropdownInvoiceTypeData] = useState([])

    useEffect(() => {
        const fetchData = async () => {

            try {
                const trainingPlanData=await GetTrainingPlanById(id!);
                setTrainingName(trainingPlanData.data.trainingName);
                setTrainerCompanyName(trainingPlanData.data.trainerCompany);

                const dropdownDatas = await GetTrainingPlanInvoiceDistributionCompanies(Number(id));
                setDropdownCompanyData(dropdownDatas.data);

                const dropdownVatDatas = await GetVatList();
                setDropdownVatData(dropdownVatDatas.data);

                const dropdownInvoiceTypeDatas = await GetInvoiceTypeList();
                setDropdownInvoiceTypeData(dropdownInvoiceTypeDatas.data);

            } catch (error) {
                console.error('Error fetching GetTrainingPlanInvoiceDistributionCompanies data', error);
            }
        };

        fetchData();
    }, []);

    const DropDownCellVat = (props: GridCellProps) => {

        const handleChange = (e: DropDownListChangeEvent) => {
            if (props.onChange) {

                props.onChange({
                    dataIndex: 0,
                    dataItem: props.dataItem,
                    field: props.field,
                    syntheticEvent: e.syntheticEvent,
                    value: e.target.value.id,
                });

            }
        };


        const { dataItem } = props;
        const field = props.field || "";
        const dataValue = dataItem[field] === null ? "" : dataItem[field];
        const selected = dataItem["vat"]["value"];

        return (
            <td>
                {dataItem.inEdit ? (
                    <DropDownList
                        onChange={handleChange}
                        value={dropdownVatData.find((c) => c["id"] === dataValue)}
                        data={dropdownVatData}
                        textField="value"
                    />
                ) : selected}
            </td>
        );
    };

    const DropDownCellInvoiceType = (props: GridCellProps) => {

        const handleChange = (e: DropDownListChangeEvent) => {
            if (props.onChange) {

                props.onChange({
                    dataIndex: 0,
                    dataItem: props.dataItem,
                    field: props.field,
                    syntheticEvent: e.syntheticEvent,
                    value: e.target.value.id,
                });

            }
        };


        const { dataItem } = props;
        const field = props.field || "";
        const dataValue = dataItem[field] === null ? "" : dataItem[field];
        const selected = dataItem["invoiceType"]["name"];

        return (
            <td>
                {dataItem.inEdit ? (
                    <DropDownList
                        onChange={handleChange}
                        value={dropdownInvoiceTypeData.find((c) => c["id"] === dataValue)}
                        data={dropdownInvoiceTypeData}
                        textField="name"
                    />
                ) : selected}
            </td>
        );
    };

    const DropDownCellDistributionCompanies = (props: GridCellProps) => {

        const handleChange = (e: DropDownListChangeEvent) => {
            if (props.onChange) {

                props.onChange({
                    dataIndex: 0,
                    dataItem: props.dataItem,
                    field: props.field,
                    syntheticEvent: e.syntheticEvent,
                    value: e.target.value.id,
                });

            }
        };


        const { dataItem } = props;
        const field = props.field || "";
        const dataValue = dataItem[field] === null ? "" : dataItem[field];
        const selected = dataItem["distributionCompany"] !== null ? dataItem["distributionCompany"]["name"] : "";

        return (
            <td>
                {dataItem.inEdit ? (
                    <DropDownList
                        onChange={handleChange}
                        value={dropdownCompanyData.find((c) => c["id"] === dataValue)}
                        data={dropdownCompanyData}
                        textField="name"
                    />
                ) : selected}
            </td>
        );
    };


    const DropDownCellAttendeeCompanies = (props: GridCellProps) => {

        const handleChange = (e: DropDownListChangeEvent) => {
            if (props.onChange) {

                props.onChange({
                    dataIndex: 0,
                    dataItem: props.dataItem,
                    field: props.field,
                    syntheticEvent: e.syntheticEvent,
                    value: e.target.value.id,
                });

            }
        };

        const { dataItem } = props;
        const field = props.field || "";
        const dataValue = dataItem[field] === null ? "" : dataItem[field];
        const selected = dataItem["attendeeCompany"] !== null ? dataItem["attendeeCompany"]["name"] : "";
        return (
            <td>
                {dataItem.inEdit ? (
                    <DropDownList
                        onChange={handleChange}
                        value={dropdownCompanyData.find((c) => c["id"] === dataValue)}
                        data={dropdownCompanyData}
                        textField="name"
                    />
                ) : selected}
            </td>
        );
    };

    const allowPageEdit=function():boolean{
        if(trainingPlanIsCostActive===false || clickedToTopUpdateButton)
            return true;
        
        getErrorToast(
            `Maliyetler güncellenebilir durumda değil`
        );
        return false;
    }

    const topBoxes = (proposalCost: number, vatCost: number, attendeeCount: number, serviceCost: number, invoiceCost: number) => {

        return (
            <div className="row row-cols-1 row-cols-md-5 g-4">
                <div className="col">
                    <div className="card border-dark-subtle h-100">
                        <div className="card-body">
                            <h5 className="card-title">Teklif Tutarı</h5>
                            <h2 className="card-text">{turkishLiraFormat.format(proposalCost || 0)} {equalityIndicator()}</h2>

                            <p className="card-text"><small className="text-muted">Onaylanan teklif tutarıdır.</small></p>
                        </div>
                    </div>
                </div>
                <div className="col">
                    <div className="card border-dark-subtle h-100">

                        <div className="card-body">
                            <h5 className="card-title">Hizmet Tutarı</h5>
                            <h2 className="card-text">{turkishLiraFormat.format(serviceCost || 0)}</h2>
                            <p className="card-text"><small className="text-muted">Faturada yer alan hizmet tutarlarının toplamıdır.</small></p>
                        </div>

                    </div>
                </div>
                <div className="col">
                    <div className="card border-dark-subtle h-100">

                        <div className="card-body">
                            <h5 className="card-title">Vergi Tutarı</h5>
                            <h2 className="card-text">{turkishLiraFormat.format(vatCost || 0)}</h2>
                            <p className="card-text"><small className="text-muted">Faturada yer alan vergi tutarlarının toplamıdır.</small></p>
                        </div>

                    </div>
                </div>
                <div className="col">
                    <div className="card border-dark-subtle h-100">

                        <div className="card-body">
                            <h5 className="card-title">Fatura Tutarı</h5>
                            <h2 className="card-text">{turkishLiraFormat.format(invoiceCost || 0)}</h2>
                            <p className="card-text"><small className="text-muted">Faturanın toplam tutarıdır.</small></p>
                        </div>

                    </div>
                </div>
                <div className="col">
                    <div className="card border-dark-subtle h-100">

                        <div className="card-body">
                            <h5 className="card-title">Kişi Başı Ödenecek Tutar</h5>
                            <h2 className="card-text">{turkishLiraFormat.format((proposalCost / attendeeCount)||0)}</h2>
                            <p className="card-text text-wrap"><small className="text-muted">Hizmet tutarının kişi başına düşen tutarıdır.</small></p>
                        </div>

                    </div>
                </div>
            </div>
        );
    };
    const rowRender = (trElement, props) => {
        let sum = 0;

        const filterSameCompanyAttendees = result.data.filter(item => item.attendeeCompanyId === props.dataItem.attendeeCompanyId);

        filterSameCompanyAttendees.forEach(num => {
            sum += num.ratio;
        })

        const rowColor = sum !== 100 && props.dataItem.id != 0 ? 'lightpink' : 'white';
        const rowProps = {
            ...trElement.props,
            style: { backgroundColor: rowColor },
        };
        return cloneElement(trElement, { ...rowProps }, trElement.props.children);
    };

    const [trainingData, setTrainingData] = useState<any>();
    const [trainingPlanIsCostActive, setTrainingPlanIsCostActive] = useState<boolean | null>(false);
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        firstRender = false;
        setLoading(true);
        GetTrainingPlanById(id!).then(function (response) {
            if (response.status === 200) {
                setId(id)
                setTrainingData(response.data);
                setTrainingPlanIsCostActive(response.data.isCostActive);
                setShowTopUpdateButton(response.data.isCostActive === null || response.data.isCostActive === false ? false : true);
            }
            setLoading(false);
        });

    }, [firstRender])



    const [wizardProp, setWizardProp] = useState<PlanWizardHeaderProp>({ id: Number(id)!,stateChanger:false });
    

    const TrainingPlanUpdateActivation = (activate: boolean) => (event: React.MouseEvent<HTMLButtonElement>) => {

        event.preventDefault();

        interface AttendeeCompanyData {
            Id: number;
            Ratio: number;
        }


        const resultForCheck: AttendeeCompanyData[] = [];
        result.data.reduce(function (res, value) {
            if (!res[value.attendeeCompanyId]) {
                res[value.attendeeCompanyId] = { Id: value.attendeeCompanyId, Ratio: 0 };
                resultForCheck.push(res[value.attendeeCompanyId])
            }

            res[value.attendeeCompanyId].Ratio += value.ratio;
            return res;
        }, {});


        if (resultForCheck.some(value => value.Ratio != 100)) {
            getErrorToast(
                `Dağılımları %100 olmamış olan kayıtlar mevcut`
            );
            return;
        }

        const invoiceSum = trainingPlanInvoiceResult.data.reduce((a, b) => a + b.amount, 0);
        if(invoiceSum !== trainingData?.proposalCost){
            getErrorToast(
                `Faturalandırılan tutar teklif tutarı ile aynı değil`
            );
            return;
        }
        

        const trainingPlanActivationModel: SelectActive = {
            id: Number(id),
            active: activate
        }
        setLoading(true);
        TrainingPlanSetIsCostActive(Number(id), trainingPlanActivationModel).then(function (response) {
            if (response.status === 202) {
                setTrainingPlanIsCostActive(activate);
                setShowTopUpdateButton(true);
                setClickedToTopUpdateButton(false);
                setWizardProp( { id: Number(id)!,stateChanger:!wizardProp.stateChanger })
                setLoading(false);
                getSuccessToast(
                    `Maliyet aktivasyonu güncellendi`
                );
            }
        });

        return;
    };




    const handleTrainingPlanInvoiceContentUpload = (Id) => {
        const fileContentInput = document.createElement('input');
        fileContentInput.type = 'file';
        fileContentInput.onchange = (inputChangeEvent: Event) => {
            const inputElement = inputChangeEvent.target as HTMLInputElement;
            const file = inputElement.files ? inputElement.files[0] : null;
            if (file) {
                const formData = new FormData();
                formData.append("File", file);
                formData.append("Id", Id.toString());
                setLoading(true);
                UploadInvoiceContentForTrainingPlan(Id, formData)
                    .then((response) => {
                        if (response.status === 202) {

                            const uploadDate = new Date().toLocaleString();
                            const fileName = file.name;
                            getSuccessToast(
                                `Fatura içeriği başarıyla yüklendi. Yükleme Tarihi: ${uploadDate}, Dosya Adı: ${fileName}`
                            );
                            setLoading(false);
                            refreshTrainingPlanInvoiceGrid();
                        }
                    })
                    .catch(() => {

                        getErrorToast("Fatura içeriği yüklenirken bir hata oluştu");
                    });
            }
        };

        fileContentInput.click(); // Dosya seçim penceresini aç
    }
    const CommandCellTrainingPlanInvoice = (props: GridCellProps) => {
        const { editField, trainingPlanInvoiceEnterEdit, trainingPlanInvoiceUpdate, trainingPlanInvoiceCancel, trainingPlanInvoiceDiscard } = useContext(GridContext);

        return (
            <MyCommandTrainingPlanInvoiceCell
                {...props}
                editField={editField}
                update={trainingPlanInvoiceUpdate}
                edit={trainingPlanInvoiceEnterEdit}
                cancel={trainingPlanInvoiceCancel}
                discard={trainingPlanInvoiceDiscard}
            />
        );
    };
    const MyCommandTrainingPlanInvoiceCell = (props) => {
        const { dataItem } = props;
        const inEdit = dataItem[props.editField];
        const isNewItem = dataItem.id === 0;
        const [visible, setVisible] = useState(false);
        const [viewerIsOpen, setViewerIsOpen] = useState(false);
        const [viewerFileUrl, setViewerFileUrl] = useState("");

        const openViewer = (fileName: string) => {
            setViewerFileUrl(GetInvoiceContentTrainingPlanUrl(fileName));
            setViewerIsOpen(true);
        }

        const closeViewer = () => {
            setViewerIsOpen(false);
        }


        const DeleteInvoiceContent = (id: number) => {
            if(!allowPageEdit())
                return;

            DeleteInvoiceContentDoc(id).then((response) => {
                if (response.status === 204) {
                    refreshTrainingPlanInvoiceGrid();
                    getSuccessToast(
                        `Dosya başarıyla silindi`
                    );
                }
            })
                .catch(() => {

                    getErrorToast("Dosya silinirken bir hata oluştu");
                });
        }



        const toggleDialog = () => {
            setVisible(!visible);
        };

        const isLoading = false;
        return (
            <td className="k-command-cell">
                {props.dataItem.invoiceUrl !== null ?
                    (<>

                        <button className='iconButton' onClick={() => {
                            openViewer(props.dataItem.invoiceUrl);
                        }} title='Önizle' ><i className="bi bi-zoom-in" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></button>

                        <button className='iconButton pe-1' onClick={() => {
                            DownloadInvoiceContentTrainingPlan(props.dataItem.invoiceUrl);
                        }} title='İndir' ><i className="bi bi-download" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></button>

                        {allowPageEdit() && (<button className='iconButton pe-1' onClick={() => {
                            DeleteInvoiceContent(props.dataItem.id);
                        }} title='Sil' ><i className="bi bi-trash" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></button>)}
                    </>) :
                    (<><label className='selectFileHeader'>
                        Dosya Seç &nbsp;
                        {isLoading ? <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> : <></>}
                        <button type="button" className="iconButton pe-1" onClick={() => handleTrainingPlanInvoiceContentUpload(props.dataItem.id)}><i className="bi bi-upload" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></button><input
                            type="file"
                            accept=".pdf"
                            id={`fileInputContent-${props.dataItem.id}`}
                            style={{ display: "none" }} />
                    </label></>)}
                &nbsp;&nbsp;<div style={{ height: "20px" }} className="vr"></div>
                <Button
                    themeColor={"primary"}
                    style={{ border: "none", padding: "none", background: "none" }}
                    onClick={() =>
                        inEdit
                            ? isNewItem
                                ? props.add(dataItem)
                                : props.update(dataItem)
                            : props.edit(dataItem)
                    }
                >
                    {/* {inEdit ? (isNewItem ? "Add" : "Update") : "Edit"} */}
                    {inEdit && allowPageEdit() ? (isNewItem ? <><i data-mode="add" className="bi bi-send" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></> : <><i data-mode="update" className="bi bi-send" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></>) : <><i data-mode="edit" className="bi bi-pen" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></>}
                </Button>
                <Button
                    themeColor={"primary"}
                    style={{ border: "none", padding: "none", background: "none" }}
                    onClick={() =>
                        inEdit
                            ? isNewItem
                                ? props.discard(dataItem)
                                : props.cancel(dataItem)
                            : toggleDialog()
                    }
                >
                    {/* {inEdit ? (isNewItem ? "Discard" : "Cancel") : "Remove"} */}
                    {inEdit && allowPageEdit() && (isNewItem ? <><i data-mode="discard" className="bi bi-x-circle" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></> : <><i data-mode="cancel" className="bi bi-x-circle" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i></>)}
                </Button>
                <Modal
                    className='modal fade'
                    id='modal-file-viewer'
                    data-backdrop='static'
                    tabIndex={-1}
                    role='dialog'
                    show={viewerIsOpen}
                    dialogClassName='modal-xl'
                    aria-hidden='true'
                    keyboard={true}
                    onRequestClose={closeViewer}
                >
                    <div className='modal-content'>
                        <div className='modal-header'>
                            <div
                                className='btn btn-icon btn-sm btn-active-light-primary ms-2 float-end'
                                onClick={closeViewer}
                            >
                                <i className='bi bi-x-lg'></i>
                            </div>
                        </div>
                        <div className='modal-body'>
                            <Viewer url={viewerFileUrl} />
                        </div>
                    </div>
                </Modal>
            </td>


        );
    };

    
    return (
        <>
            <MasterDataManagement></MasterDataManagement>
            <ExternalTrainerCostPage></ExternalTrainerCostPage>
            <PlanWizardHeader prop={wizardProp} />
            <><br></br><br></br></>
            {(loading &&
                <div className="spinner-container" style={{ position: "fixed", top: "55%", left: "60%", zIndex: 10, transform: "translate(-50%, -50%)" }}>
                    <div className="spinner-border" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>
                </div>
            )}
            {topBoxes(trainingData?.proposalCost, trainingData?.vatCost, trainingData?.attendees.length, trainingData?.serviceCost, trainingData?.invoiceCost)}
            <><br></br><br></br>
            </>
            <LocalizationProvider language="tr-TR">
                <IntlProvider locale="tr">
                    <div className="d-flex justify-content-center">
                        <GridContext.Provider value={{ add, editField, enterEdit, update, cancel, discard, remove }}>
                            <Grid
                                style={{ width: 985 }}
                                className="gridTable"
                                filterable={false}
                                sortable={false}
                                pageable={false}
                                {...dataState}
                                data={result}
                                rowRender={rowRender}
                                onItemChange={itemChange}
                                editField={editField}
                                onDataStateChange={dataStateChange}
                                resizable={true}
                                size='small'
                                selectable={{
                                    enabled: true,
                                    mode: 'multiple'
                                }}
                                dataItemKey={dataItemKey}
                                selectedField={selectedField}
                            >
                                <GridToolbar className='ms-auto'>
                                    <div>
                                        <button
                                            title="Add new"
                                            onClick={addNew}
                                            style={{ border: "none", padding: "none", background: "none" }}
                                        >
                                            <i className="bi bi-file-plus" style={{ color: "#0F62FE", fontSize: "1.5rem" }}></i>
                                        </button>
                                    </div>
                                </GridToolbar>
                                <Column field="attendeeCompanyId" cell={DropDownCellAttendeeCompanies} title="Katılımcı Şirketi" width={300} />
                                <Column field="distributionCompanyId" cell={DropDownCellDistributionCompanies} title="Dağıtım Şirketi" width={300} />
                                <Column field="ratio" editor="numeric" title="Oran" width={150} format='%{0:#.##}' />
                                <Column field="attendeeCount" editable={false} title="Katılımcı Sayısı" width={120} />
                                <Column cell={CommandCell} width="100px" />
                            </Grid>
                        </GridContext.Provider>
                        <SimpleGridDataLoader dataState={dataState} onDataReceived={dataReceived} path={endpoint} />
                    </div>
                    <>
                        <hr />
                        <GridContext.Provider value={{ editField, trainingPlanInvoiceEnterEdit, trainingPlanInvoiceUpdate, trainingPlanInvoiceCancel, trainingPlanInvoiceDiscard }}>
                            <Grid
                                className="gridTableInvoice"
                                filterable={false}
                                sortable={false}
                                pageable={false}
                                {...trainingPlanInvoiceDataState}
                                data={trainingPlanInvoiceResult}
                                onItemChange={trainingPlanInvoiceItemChange}
                                editField={editField}
                                onDataStateChange={trainingPlanInvoiceDataStateChange}
                                resizable={true}
                                size='small'
                                selectable={{
                                    enabled: true,
                                    mode: 'multiple'
                                }}
                                dataItemKey={trainingPlanInvoiceDataItemKey}
                                selectedField={trainingPlanInvoiceSelectedField}
                            >

                                <Column field="trainingPlanId" editable={false} title="Eğitim Plan Id" width={100} />
                                <Column field="invoiceNo" title="Fatura No" width={150} />
                                <Column field="invoiceTypeId" cell={DropDownCellInvoiceType} title="Fatura Kalemi" width={110} />
                                <Column field="vatId" cell={DropDownCellVat} editor="numeric" title="Vergi Tutarı" width={100} />
                                <Column field="invoicedCompany.name" editable={false} title="Dağıtım Şirketi" width={300} />
                                <Column field="attendeeCount" editable={false} title="Katılımcı Sayısı" width={100} />
                                <Column field="amount" editable={false} title="Hizmet Tutarı" width={100} />
                                <Column cell={CommandCellTrainingPlanInvoice} width="240px" />
                            </Grid>
                        </GridContext.Provider>
                        <SimpleGridDataLoader dataState={trainingPlanInvoiceDataState} onDataReceived={trainingPlanInvoiceDataReceived} path={trainingPlanInvoiceEndpoint} />
                    </>

                </IntlProvider>
            </LocalizationProvider>
            <><br></br></>
            <div className="d-flex justify-content-end button-container">
                {(trainingPlanIsCostActive === null || trainingPlanIsCostActive === false) && !showTopUpdateButton && (<button type="button" onClick={TrainingPlanUpdateActivation(true)} className="btn btn-primary">Tamam</button>)}
                {clickedToTopUpdateButton && (<button type="button" onClick={TrainingPlanUpdateActivation(true)} className="btn btn-primary">Güncelle</button>)}
            </div>
            <><br></br></>
        </>
    );
}

export default ExternalTrainerCost