Untitled

import React, { useState } from 'react';
import api from '../api';
import { createMuiTheme, makeStyles, MuiThemeProvider, Paper, Switch, TableCell, Tabs, Tab, Typography, withStyles, InputAdornment, Tooltip } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
import AddDokterCuti from '../MasterData/addDokterCuti';
import Loader from 'react-loader-spinner'
import Autocomplete from '@material-ui/lab/Autocomplete';
import { TextField } from '@material-ui/core';
import { Link, useHistory, useLocation } from 'react-router-dom';
import search from '../../assets/search.png';
import back from '../../assets/ic_back.png';
import next from '../../assets/ic_next.png';
import ic_detail from '../../assets/ic_detail.png';
import ic_search from '../../assets/ic_search.png';
import { format } from 'date-fns';
import CloseIcon from '@material-ui/icons/Close';

const ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptions()

const LightTooltip = withStyles((theme) => ({
    tooltip: {
        backgroundColor: theme.palette.common.white,
        color: 'rgba(0, 0, 0, 0.87)',
        boxShadow: theme.shadows[1],
        fontSize: 11,
    },
}))(Tooltip);


const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        width: "100%",
        backgroundColor: theme.palette.background.paper
    },
    tabsIndicator: {
        backgroundColor: "#2a9c6c"
    },
    tabRoot: {
        "&:hover": {
            color: "red",
            opacity: 1
        },
        "&$tabSelected": {
            color: "red",
            fontWeight: theme.typography.fontWeightMedium
        },
        "&:focus": {
            color: "red"
        }
    },
    tabSelected: {},
    fab: {
        '& > *': {
            margin: theme.spacing(1),
        },
        position: 'fixed',
        right: 25,
        top: 65
    },
    extendedIcon: {
        marginRight: theme.spacing(1),
    },
}))

export default function JadwalTransaksiDokter(props) {
    const history = useHistory();
    const location = useLocation();
    const classes = useStyles()
    const [jadwal, setJadwal] = React.useState(null);
    const [visibleDetail, setVisibleDetail] = React.useState(false)
    const [value, setValue] = React.useState(null);
    const [valueID, setValueID] = React.useState(0);
    const [list, setList] = React.useState(null);
    const [limitDate, setLimitDate] = React.useState([])
    const [selectedSchedule, setSelectedSchedule] = React.useState([])
    const [loading, setLoading] = React.useState(false);
    const date = new Date()
    const [displayStartDate, setDisplayStartDate] = React.useState("");
    const [displayEndDate, setDisplayEndDate] = React.useState("")
    const [startDate, setStartDate] = React.useState("")
    const [endDate, setEndDate] = React.useState("")
    const [name, setName] = React.useState("")
    const [dayBeforeWeek, setDayBeforeWeek] = React.useState("")
    const [visibleSearch, setVisibleSearch] = React.useState(false)
    const [searchName, setSearchName] = React.useState(null)
    const [create, setCreate] = React.useState(false);
    const [read, setRead] = React.useState(false);
    const [update, setUpdate] = React.useState(false);
    const [deleted, setDeleted] = React.useState(false);
    const [DokterID, setDokterID] = React.useState(null)
    const [visibleJadwalCuti, setVisibleJadwalCuti] = React.useState(false);
    const [dataRefresh, setDataRefresh] = React.useState(null)
    const [range, setRange] = React.useState(0)
    const [updateRange, setUpdateRange] = React.useState(0)
    const [disableNext, setDisableNext] = React.useState(false)
    function changeDate(startDate, endDate) {

    }

    const handleChange = (event) => {
        console.log(event);
        setValue(event)
        setValueID(event.polyclinic_id)
        let temp = []
        event.schedule.map((el, idx) => {
            el["no"] = idx + 1
            temp.push(el.date)
        })
        setLimitDate(temp)
        forceUpdate()
    };

    const handleSeeDetail = (data) => {
        // setVisibleDetail(true)
        console.log(data.rowData);
        const id = data.rowData[data.rowData.length - 2];
        // console.log(id);
        let tanggal = data.rowData[1]
        let schedules = value.schedule
        // console.log(schedules);
        let arr = []
        let tempData;
        let sentData;
        history.push({
            pathname: '/schedule/edit-jadwal-dokter',
            name: 'Detail Jadwal Dokter',
            state: {
                id,
                list,
                value,
                jadwal,
                update,
                deleted,
                valueID,
                startDate,
                endDate,
                displayStartDate,
                displayEndDate,
                searchName,
                rowData: data.rowData
            }
        })
    }
    // console.log(jadwal);
    // console.log(value);

    const getDayByDate = (date) => {
        var a = new Date(date);
        var weekdays = new Array(7);
        weekdays[0] = "Minggu";
        weekdays[1] = "Senin";
        weekdays[2] = "Selasa";
        weekdays[3] = "Rabu";
        weekdays[4] = "Kamis";
        weekdays[5] = "Jumat";
        weekdays[6] = "Sabtu";
        var r = weekdays[a.getDay()];
        return r
    }

    const columns = [
        {
            name: "no",
            label: "No",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{}}>
                            {tableMeta.rowIndex + 1}
                        </div>
                    )
                }
            }
        },
        {
            name: "date",
            label: "Tanggal Jadwal"
        },
        {
            name: "day",
            label: "Hari",
            options: {
                customBodyRender: (val, { rowData }) => {
                    return (
                        <div style={{}}>
                            {getDayByDate(rowData[1])}
                        </div>
                    )
                }
            }
        },
        {
            name: "time_start",
            label: "Jam Mulai"
        },
        {
            name: "time_end",
            label: "Jam Selesai"
        },
        {
            name: "remarks",
            label: "Catatan",
            options: {
                customBodyRender: (val, { rowData }) => {
                    return (
                        <div style={{}}>
                            {rowData[14] === null ? val : rowData[14]}
                        </div>
                    )
                }
            }
        },
        {
            name: "deleted_at",
            label: "Status",
            options: {
                customBodyRender: (val, { rowData }) => {
                    return (
                        <div style={{ color: val === null ? 'black' : '#ff5b5b' }}>
                            {val === null ? "Tersedia" : "Dibatalkan"}
                        </div>
                    )
                }
            }
        },
        {
            name: "Aksi",
            options: {
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex' }}>
                            <LightTooltip title={"Edit"} arrow>
                                <button
                                    onClick={() => handleSeeDetail(tableMeta)}
                                    style={{
                                        backgroundColor: "transparent",
                                        fontSize: 20,
                                        outline: 'none',
                                        borderColor: 'transparent',
                                        marginRight: 20
                                    }}>
                                    <img src={ic_detail} style={{ height: 30, width: 30 }} />
                                </button>
                            </LightTooltip>
                        </div>
                    )
                }
            }
        },
        {
            name: "service_type",
            options: {
                display: false,
                filter: false
            }
        },
        {
            name: "time",
            options: {
                display: false,
                filter: false
            }
        },
        {
            name: "quota",
            options: {
                display: false,
                filter: false
            }
        },
        {
            name: "time_type",
            options: {
                display: false,
                filter: false
            }
        },
        {
            name: "room",
            options: {
                display: false,
                filter: false
            }
        },
        {
            name: "id",
            options: {
                display: false,
                filter: false
            }
        },
        {
            name: "notes",
            options: {
                display: false,
                filter: false
            }
        },
    ];

    const getDateNow = (s, e) => {
        let tanggal = format(s, 'dd')
        let month = format(s, 'MM')
        let year = format(s, 'yyyy')
        switch (month) {
            case '01':
                month = "Januari"
                break;
            case '02':
                month = "Februari"
                break;
            case '03':
                month = "Maret"
                break;
            case '04':
                month = "April"
                break;
            case '05':
                month = "Mei"
                break;
            case '06':
                month = "Juni"
                break;
            case '07':
                month = "Juli"
                break;
            case '08':
                month = "Agustus"
                break;
            case '09':
                month = "September"
                break;
            case '10':
                month = "October"
                break;
            case '11':
                month = "November"
                break;
            default:
                month = "Desember"
                break;
        }

        let formatPlusWeek = new Date(s).setDate(new Date(s).getDate() + 7);
        console.log(format(formatPlusWeek, 'dd MMM yyyy'));
        let tanggalAfterWeek = format(formatPlusWeek, 'dd')
        let monthAfterWeek = format(formatPlusWeek, 'MM')
        let yearAfterWeek = format(formatPlusWeek, 'yyyy')
        switch (monthAfterWeek) {
            case '01':
                monthAfterWeek = "Januari"
                break;
            case '02':
                monthAfterWeek = "Februari"
                break;
            case '03':
                monthAfterWeek = "Maret"
                break;
            case '04':
                monthAfterWeek = "April"
                break;
            case '05':
                monthAfterWeek = "Mei"
                break;
            case '06':
                monthAfterWeek = "Juni"
                break;
            case '07':
                monthAfterWeek = "Juli"
                break;
            case '08':
                monthAfterWeek = "Agustus"
                break;
            case '09':
                monthAfterWeek = "September"
                break;
            case '10':
                monthAfterWeek = "October"
                break;
            case '11':
                monthAfterWeek = "November"
                break;
            default:
                monthAfterWeek = "Desember"
                break;
        }

        let startDate = `${tanggal} ${month} ${year}`
        let endDate = `${tanggalAfterWeek} ${monthAfterWeek} ${yearAfterWeek}`
        let realStart = `${year}-${new Date(s).getMonth() + 1}-${tanggal}`
        let realEnd = `${yearAfterWeek}-${new Date(formatPlusWeek).getMonth() + 1}-${tanggalAfterWeek}`
        setStartDate(String(realStart))
        setEndDate(String(realEnd))
        setDisplayStartDate(String(startDate))
        setDisplayEndDate(String(endDate))
        getNextPrev(String(realStart), String(realEnd))
        forceUpdate()
    }

    const refreshDate = (s) => {
        let tanggal = format(s, 'dd')
        let month = format(s, 'MM')
        let year = format(s, 'yyyy')
        switch (month) {
            case '01':
                month = "Januari"
                break;
            case '02':
                month = "Februari"
                break;
            case '03':
                month = "Maret"
                break;
            case '04':
                month = "April"
                break;
            case '05':
                month = "Mei"
                break;
            case '06':
                month = "Juni"
                break;
            case '07':
                month = "Juli"
                break;
            case '08':
                month = "Agustus"
                break;
            case '09':
                month = "September"
                break;
            case '10':
                month = "October"
                break;
            case '11':
                month = "November"
                break;
            default:
                month = "Desember"
                break;
        }

        let formatPlusWeek = new Date(s).setDate(new Date(s).getDate() + 7);
        console.log(format(formatPlusWeek, 'dd MMM yyyy'));
        let tanggalAfterWeek = format(formatPlusWeek, 'dd')
        let monthAfterWeek = format(formatPlusWeek, 'MM')
        let yearAfterWeek = format(formatPlusWeek, 'yyyy')
        switch (monthAfterWeek) {
            case '01':
                monthAfterWeek = "Januari"
                break;
            case '02':
                monthAfterWeek = "Februari"
                break;
            case '03':
                monthAfterWeek = "Maret"
                break;
            case '04':
                monthAfterWeek = "April"
                break;
            case '05':
                monthAfterWeek = "Mei"
                break;
            case '06':
                monthAfterWeek = "Juni"
                break;
            case '07':
                monthAfterWeek = "Juli"
                break;
            case '08':
                monthAfterWeek = "Agustus"
                break;
            case '09':
                monthAfterWeek = "September"
                break;
            case '10':
                monthAfterWeek = "October"
                break;
            case '11':
                monthAfterWeek = "November"
                break;
            default:
                monthAfterWeek = "Desember"
                break;
        }

        let startDate = `${tanggal} ${month} ${year}`
        let endDate = `${tanggalAfterWeek} ${monthAfterWeek} ${yearAfterWeek}`
        let realStart = `${year}-${new Date(s).getMonth() + 1}-${tanggal}`
        let realEnd = `${yearAfterWeek}-${new Date(formatPlusWeek).getMonth() + 1}-${tanggalAfterWeek}`
        setStartDate(String(realStart))
        setEndDate(String(realEnd))
        setDisplayStartDate(String(startDate))
        setDisplayEndDate(String(endDate))
        forceUpdate()
    }


    const getNextPrev = (start, end) => {
        setLoading(true)
        let param = `"start:${start}`
        if (end) {
            param = `"start":"${start}","end":"${end}"`
        }
        api.create().getScheduleTransactionFilter(param).then(response => {
            setLoading(true)
            if (response.data) {
                if (response.data.status === true) {
                    if (response.data.data != false) {
                        setLoading(false)
                        let valID = location.state ? location.state.data.value.polyclinic_id : valueID
                        let jadwalID = dataRefresh !== null ? dataRefresh.id : props.reservasi !== null ? props.reservasi.id : location.state ? location.state.data.jadwal.id : 0
                        let idxVal = response.data.data.findIndex((val) => val.id == jadwalID)
                        console.log(response, jadwalID, valID);
                        if (idxVal > -1) {
                            let idxPoli = response.data.data[idxVal].polyclinic.findIndex((val) => val.polyclinic_id === valID)
                            console.log(idxPoli, response.data.data[idxVal].polyclinic[idxPoli]);
                            if (idxPoli > -1) {
                                let poliID = props.reservasi !== null ? props.reservasi.polyclinic[0].polyclinic_id : valID
                                let idxJadwal = response.data.data[idxVal].polyclinic.findIndex((val) => val.polyclinic_id === poliID)
                                console.log(idxJadwal);
                                if (idxJadwal > -1) {
                                    // console.log(response.data.data[idxVal].polyclinic[idxJadwal]);
                                    setValueID(response.data.data[idxVal].polyclinic[idxPoli].polyclinic_id)
                                    setValue(response.data.data[idxVal].polyclinic[idxPoli])
                                    setJadwal(response.data.data[idxVal])
                                    forceUpdate()
                                }

                            }
                            // } else {
                            //     response.data.data.map((el) => {
                            //         if (jadwal !== null) {
                            //             if (el.name === jadwal.name) {
                            //                 if (el.polyclinic.length >= 1) {
                            // el.polyclinic.map(item => {
                            //     item.schedule.map((element, idx) => {
                            //         element["no"] = idx + 1
                            //     })
                            // })
                            //                 }
                            //                 setValue(el.polyclinic[0])
                            //                 setLoading(false)
                            //                 setJadwal(el)
                            //             }
                            //         }
                            //     })
                        }
                    } else {
                        setList([])
                        setValue(0)
                    }
                }
            }
            setLoading(false)
        })
    }

    React.useEffect(() => {
        props.setShowNotif(true)
        console.log(location.state);
        if (location.state !== undefined) {
            setValue(location.state.data.value)
            setJadwal(location.state.data.jadwal)
            setList(location.state.data.list)
            setDokterID(location.state.data.jadwal)
            setValueID(location.state.data.value.polyclinic_id)
            setStartDate(location.state.data.startDate)
            setEndDate(location.state.data.endDate)
            setSearchName(location.state.data.searchName)
            setDisplayStartDate(location.state.data.displayStartDate)
            setDisplayEndDate(location.state.data.displayEndDate)
            getNextPrev(location.state.data.startDate, location.state.data.endDate)
            forceUpdate()
        } else {
            getJadwalFilter()
            getDateNow(new Date())
        }
        setLoading(true)
        getPermission(props)
        getParameter()
    }, [])

    const getParameter = () => {
        api.create().getParameter().then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    response.data.data.map((item) => {
                        if (item.param_code === "MAX_DATE_RANGE") {
                            setRange(Number(item.param_value))
                            setUpdateRange(Number(item.param_value))
                        }
                    })
                }
            }
        })
    }

    const refreshData = () => {
        getDateNow(new Date())
        setLoading(true)
        getJadwalFilter()
    }

    const getPermission = (e) => {
        api.create().getPermission(e.menuid).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    let data = response.data.data
                    setCreate(data.create)
                    setUpdate(data.update)
                    setRead(data.read)
                    setDeleted(data.delete)
                }
            }
        })
    }

    const convertDateToEnglish = (date) => {
        let dateSplit = date.split(" ");
        console.log(dateSplit);
        let dateIndo = dateSplit[1];
        let dateEng = "";
        switch(dateIndo) {
          case "Januari":
            dateEng = "January";
            break;
          case "Februari":
            dateEng = "February";
            break;
          case "Maret":
            dateEng = "March";
            break;
          case "April":
            dateEng = "April";
            break;
          case "Mei":
            dateEng = "May";
            break;
          case "Juni":
            dateEng = "June";
            break;
          case "Juli":
            dateEng = "July";
            break;
          case "Agustus":
            dateEng = "August";
            break;
          case "September":
            dateEng = "September";
            break;
          case "Oktober":
            dateEng = "October";
            break;
          case "November":
            dateEng = "November";
            break;
          case "Desember":
            dateEng = "December";
            break;
          default:
            dateEng = "";
        }
        
        let resolveDate = date.replace(dateIndo, dateEng);
        return resolveDate;
    }

    const getJadwalFilter = (start, end) => {
        var dateEnd = new Date();
        dateEnd.setDate(date.getDate() + 7);
        let startDate = location.state?.data.displayStartDate
        let endDate = location.state?.data.displayEndDate

        startDate = convertDateToEnglish(startDate)
        endDate = convertDateToEnglish(endDate)

        console.log(startDate, endDate);

        let param = `"start":"${startDate ? format(new Date(startDate), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd')}","end":"${endDate ? format(new Date(endDate), 'yyyy-MM-dd') : format(new Date(dateEnd), 'yyyy-MM-dd')}"`
        console.log(param);
        api.create().getScheduleTransactionFilter(param).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    if (response.data.data != false) {
                        setList(response.data.data)
                        let jadwalID = dataRefresh !== null ? dataRefresh.id : props.reservasi !== null ? props.reservasi.id : location.state ? location.state.data.jadwal.id : 0
                        let idxVal = response.data.data.findIndex((val) => val.id == jadwalID)
                        if (idxVal > -1 && props.reservasi.polyclinic.length > 0) {
                            console.log(props.reservasi);
                            let poliID = props.reservasi !== null ? props.reservasi.polyclinic[0].polyclinic_id : location.state.data.value.polyclinic_id
                            let idxJadwal = response.data.data[idxVal].polyclinic.findIndex((val) => val.polyclinic_id === poliID)
                            // console.log(idxJadwal);
                            if (idxJadwal > -1) {
                                setValue(response.data.data[idxVal].polyclinic[idxJadwal])
                                forceUpdate()
                            }
                        } else {
                            response.data.data.map((el) => {
                                if (jadwal !== null) {
                                    if (el.name === jadwal.name) {
                                        if (el.polyclinic.length >= 1) {
                                            el.polyclinic.map(item => {
                                                item.schedule.map((element, idx) => {
                                                    element["no"] = idx + 1
                                                })
                                            })
                                        }
                                        setValue(el.polyclinic[0])
                                        setLoading(false)
                                        setJadwal(el)
                                    }
                                }
                            })
                        }

                    } else {
                        setList([])
                        setValue(0)
                    }
                }
            }
            setLoading(false)
        })
    }

    const handleClick = (e) => {
        getParameter()
        setDisableNext(false)
        setLoading(true)
        setDataRefresh(e)
        setJadwal(e)
        setDokterID(e)
        props.setDataReservasi(e)
        refreshDate(new Date())
        // let temp = []
        console.log(e);
        getScheduleByDoctorID(e)
        // e.polyclinic.length > 0 && e.polyclinic[0].schedule.map((el, idx) => {
        //     el["no"] = idx + 1
        //     temp.push(el.date)
        // })
        // setValue(e.polyclinic[0])
        // setValueID(e.polyclinic[0].polyclinic_id)
        // forceUpdate()
    }

    const getScheduleByDoctorID = (e) => {
        var dateEnd = new Date();
        dateEnd.setDate(date.getDate() + 7);
        let param = `"start":"${format(new Date(), 'yyyy-MM-dd')}","end":"${format(new Date(dateEnd), 'yyyy-MM-dd')}"`
        api.create().getScheduleTransactionFilterByDoctorID(e.id, param).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    let data = response.data.data[0]
                    setValue(data.polyclinic[0])
                    setValueID(data.polyclinic[0].polyclinic_id)
                    forceUpdate()
                }
                setLoading(false)
            }
        })
    }

    const forceUpdate = React.useReducer(bool => !bool)[1];

    const handleBack = (val) => {
        let fixRange = updateRange + val
        setUpdateRange(fixRange)
        console.log(val);
        let a = new Date(startDate).setDate(new Date(startDate).getDate() - val);
        console.log(a);
        let b = new Date(a).getDate()
        let c = new Date(a).getMonth()
        let d = new Date(a).getFullYear()
        let date = `${d}-${c + 1}-${b}`
        console.log(date);
        getDateNow(new Date(date))
        setDisableNext(false)
    }
    const handleNext = (val) => {
        console.log('tes');
        let fixRange = updateRange - val
        console.log(fixRange, updateRange);
        if (fixRange <= 7) {
            // console.log(val);
            let a = new Date(startDate).setDate(new Date(startDate).getDate() + val);
            let b = new Date(a).getDate()
            let c = new Date(a).getMonth()
            let d = new Date(a).getFullYear()
            let date = `${d}-${c + 1}-${b}`
            getDateNow(new Date(date))
            setDisableNext(true)
        } else {
            // console.log(val);
            let a = new Date(startDate).setDate(new Date(startDate).getDate() + val);
            let b = new Date(a).getDate()
            let c = new Date(a).getMonth()
            let d = new Date(a).getFullYear()
            let date = `${d}-${c + 1}-${b}`
            getDateNow(new Date(date))
            setDisableNext(false)
        }
        setUpdateRange(fixRange)
    }
    const onClose = () => {
        setVisibleDetail(false)
    }

    const loadingComponent = (
        <div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
            <Loader
                type="Puff"
                color="#2a9c6c"
                height={100}
                width={100}
            />
        </div>
    );

    React.useEffect(() => {
        doFilter(searchName)
    }, [searchName])

    const doFilter = (name) => {
        setList([])
        if (name === null || name === "") {
            getJadwalFilter()
        } else {
            var dateEnd = new Date();
            dateEnd.setDate(date.getDate() + 7);
            let param = `"start":"${format(new Date(), 'yyyy-MM-dd')}","end":"${format(new Date(dateEnd), 'yyyy-MM-dd')}"`
            api.create().getScheduleTransactionFilterNameAndDate(name, param).then(response => {
                console.log(response);
                if (response.data.data.length > 0) {
                    let data = []
                    response.data.data.map((el) => {
                        if (el.deleted_at === null) {
                            let fix = []
                            el.polyclinic.map((i) => {
                                if (i.deleted_at === null) {
                                    fix.push(i)
                                }
                            })
                            el.polyclinic = fix
                            data.push(el)
                            if (jadwal !== null) {
                                if (el.name === jadwal.name) {
                                    if (el.polyclinic.length > 0) {
                                        el.polyclinic.sort((a, b) => a.polyclinic_id - b.polyclinic_id).map(item => {
                                            item.schedule.map((element, idx) => {
                                                element["no"] = idx + 1
                                            })
                                        })
                                    }
                                    setValue(el.polyclinic[0])
                                    setJadwal(el)
                                    setLoading(false)
                                }
                            }
                        }
                    })
                    setList(data)
                } else {
                    setList([])
                    setValue(0)
                }
                setLoading(false)
            })
        }
    }
    // console.log(jadwal);

    return (
        <div style={{ display: 'flex', justifyContent: 'space-between', height: props.height - 100, overflow: 'auto' }}>
            {loading ? loadingComponent : null}
            <div style={{ paddingTop: 20, paddingLeft: 0, width: "20%", backgroundColor: 'transparent', marginTop: 10, borderRadius: 10, overflow: 'auto', height: props.height - 140 }}>
                <Typography style={{ color: '#278863' }}>List Nama Dokter</Typography>
                <hr style={{ marginTop: 0 }} />
                {
                    !visibleSearch && (searchName === "" || searchName === null) ?
                        <img title="cari dokter" onClick={() => setVisibleSearch(true)} src={ic_search} style={{ marginBottom: 10, cursor: 'pointer' }} />
                        :
                        <div style={{ marginTop: -10, marginBottom: 10 }}>
                            <TextField
                                label="Pencarian Dokter"
                                placeholder="input nama dokter"
                                value={searchName}
                                onChange={(e) => {
                                    setSearchName(e.target.value)
                                    // forceUpdate()
                                }}
                                InputProps={{
                                    endAdornment:
                                        <InputAdornment position="end" style={{ marginRight: '5%' }}>
                                            <CloseIcon
                                                titleAccess="batal"
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => {
                                                    doFilter(null)
                                                    setVisibleSearch(false)
                                                    setSearchName("")
                                                }}
                                            />
                                        </InputAdornment>
                                }}
                            />
                        </div>
                }
                {
                    list !== null && list != false ? list.map((el, idx) => {
                        return (
                            <div style={{ cursor: "pointer" }} onClick={() => handleClick(el)}>
                                <Typography style={{ fontSize: 14, padding: 3, color: jadwal !== null && jadwal != false && jadwal.name === el.name ? '#278863' : '#c8c8c8', borderLeft: jadwal !== null && jadwal != false && jadwal.name === el.name ? '3px solid green' : null, borderSpacing: jadwal !== null && jadwal != false && jadwal.name === el.name ? "0, 0, 0, 370" : null, }}>{el.name}</Typography>
                            </div>
                        )
                    }) :
                        <div>
                            <Typography>Jadwal Belum Ada</Typography>
                        </div>
                }
            </div>
            <div style={{ paddingTop: 20, width: "75%", marginTop: -3 }}>
                <div style={{ display: 'flex' }}>
                    {
                        jadwal !== null && value !== null && jadwal.polyclinic && jadwal.polyclinic.sort((a, b) => a.polyclinic_id - b.polyclinic_id).map((el, idx) => {
                            // let no = el.effective_date
                            // no.map((item, id) => {
                            //     item["no"] = id + 1
                            // })
                            // console.log(el, value);
                            return (
                                <Tabs
                                    value={el.polyclinic_id}
                                    indicatorColor="primary"
                                    textColor="#2a9c6c"
                                    onChange={() => handleChange(el)}
                                    aria-label="disabled tabs example"
                                    style={{ outline: 'null', display: 'flex' }}
                                    classes={{ indicator: classes.tabsIndicator }}
                                >
                                    {el.deleted_at === null && (
                                        <Tab label={`Klinik ${el.polyclinic_name}`} style={{ color: value.polyclinic_id === el.polyclinic_id ? '#2a9c6c' : 'black', borderBottom: value.polyclinic_id === el.polyclinic_id ? '3px solid #2a9c6c' : null, borderBottomWidth: "10%" }} />
                                    )}
                                </Tabs>
                            )
                        })
                    }
                </div>
                <div>
                    {list && list ?
                        <Paper style={{ borderRadius: 20, boxShadow: '5px 5px 10px 0 #999999', scrollBehavior: true, margin: '10px 10px 10px 0' }} >
                            <div style={{ display: 'flex', paddingLeft: 25, paddingTop: 30 }}>
                                <img src={back} style={{ cursor: 'pointer', width: 16, height: 16, marginTop: 5, marginRight: 15 }} onClick={() => handleBack(7)} />
                                <img src={next} style={{ cursor: disableNext ? 'default' : 'pointer', width: 16, height: 16, marginTop: 5, marginRight: 10 }} onClick={() => !disableNext && handleNext(7)} />
                                {/* {
                                    updateRange < 7 ?
                                        <img src={next} style={{ cursor: 'default', width: 16, height: 16, marginTop: 5, marginRight: 10 }} />
                                        :
                                } */}
                                {startDate ?
                                    <Typography> {displayStartDate} - {displayEndDate}  </Typography>
                                    : null
                                }
                            </div>
                            {
                                value && value.schedule && value.deleted_at === null ?
                                    create && (
                                        <div style={{ marginLeft: 23, marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
                                            <button
                                                style={{ backgroundColor: 'transparent', border: 'transparent', borderColor: 'transparent', outline: 'none' }}
                                                onClick={() => history.push({
                                                    pathname: '/schedule/tambah-jadwal-dokter',
                                                    name: 'Tambah Jadwal Dokter',
                                                    search: '?update=true',  // query string
                                                    state: {  // location state
                                                        idDokter: jadwal.id,
                                                        jadwal,
                                                        value,
                                                        list,
                                                    },
                                                })}
                                            >
                                                <div style={{ display: 'flex', height: 30, width: 150, backgroundColor: '#2a9c6c', borderRadius: 70 }}>
                                                    <img style={{ margin: 'auto', width: 25, marginTop: 3, marginRight: 3 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" />
                                                    <Typography style={{ fontSize: 13, margin: 'auto', marginRight: 10, color: 'white' }}>Tambah Jadwal</Typography>
                                                </div>
                                            </button>
                                            {deleted && (
                                                <button
                                                    style={{ backgroundColor: 'transparent', border: 'transparent', borderColor: 'transparent', outline: 'none' }}
                                                    onClick={() => setVisibleJadwalCuti(true)}
                                                >
                                                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 30, padding: '0 10px', backgroundColor: '#a8a8a8', borderRadius: 70 }}>
                                                        {/* <img style={{ margin: 'auto', width: 25, marginTop: 3, marginRight: 3 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */}
                                                        <Typography style={{ fontSize: 13, color: 'white' }}>Tambah Jadwal Cuti</Typography>
                                                    </div>
                                                </button>
                                            )}

                                        </div>
                                    )
                                    : null
                            }
                            {value && value.schedule && value.deleted_at === null ?
                                read && (
                                    <MuiThemeProvider theme={getMuiTheme()}>
                                        <MUIDataTable
                                            data={value.schedule}
                                            columns={columns}
                                            options={options}
                                        />
                                    </MuiThemeProvider>
                                )
                                :
                                <Paper style={{ width: '100%', height: '380px', margin: 'auto', justifyContent: 'center', textAlign: 'center', borderRadius: 20, marginTop: 0, paddingTop: 50 }} >
                                    <h1 style={{ margin: 'auto' }}>Silahkan pilih Dokter</h1>
                                </Paper>
                            }
                        </Paper>
                        :
                        <Paper style={{ width: '100%', height: '380px', margin: 'auto', justifyContent: 'center', textAlign: 'center', borderRadius: 20, marginTop: 0, paddingTop: 50 }} >
                            <h1 style={{ margin: 'auto' }}>Silahkan pilih Dokter</h1>
                        </Paper>
                    }
                </div>
                {visibleJadwalCuti && (
                    <AddDokterCuti
                        onClose={() => setVisibleJadwalCuti(false)}
                        detail={DokterID}
                        refresh={() => refreshData()}
                    />
                )}
            </div>
        </div>
    )
}