multi shift

import React, { Component } from 'react';
//import Icon from 'react-native-vector-icons/dist/FontAwesome';
import { AppRegistry, CheckBox, Animated, StyleSheet, FlatList, Image, TextInput, TouchableOpacity, TouchableHighlight, Text, ScrollView, SafeAreaView, View, Alert, ActivityIndicator, Platform, RefreshControl } from 'react-native';
import { ListItem, SearchBar, Avatar } from 'react-native-elements';
import moment from "moment";
import NetInfo from '@react-native-community/netinfo'
import AwesomeButtonRick from "react-native-really-awesome-button/src/themes/rick";
import Modal from "react-native-modal";
import SearchableDropdown from 'react-native-searchable-dropdown';
import DatePicker from 'react-native-datepicker'
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import TouchableScale from 'react-native-touchable-scale';
import LinearGradient from 'react-native-linear-gradient';
import { Container, Header, Button, Content, Card, Left, Right, CardItem, Item, Thumbnail, Body, Icon } from 'native-base';
import { Table, TableWrapper, Row, Rows, Col, Cell } from 'react-native-table-component';
import { Dropdown } from 'react-native-material-dropdown-v2';
import RNSmtpMailer from "react-native-smtp-mailer";
import AnimateLoadingButton from 'react-native-animate-loading-button';
import HandleBack from "./HandleBack";
import ActionButton from 'react-native-action-button';
import Config from './Config';
var tempCheckValues = [];

class FeatureManageSchedule extends Component {

  static navigationOptions = {
    title: 'Manage Schedule',
    tabBarOptions: {
      labelStyle: {
        fontSize: 16,
        color: 'red',
      },
      headerStyle: {
        backgroundColor: 'red',
        height: 80
      },
    },
  };

  constructor(props) {

    super(props);
    this.backButtonClick = this.backButtonClick.bind(this);
    this.state = {
      isLoading: false,
      search: '',
      isModalVisible: false,
      isModalVisibleList: false,
      connection_Status: "",
      isLoading: true,
      itemsatasan: '',
      bonuskota: '',
      breaktime: '',
      shiftidnya: '',
      employee_id: '',
      empId: '',
      Memo: '',
      checkBoxChecked: [],
      items: '',
      items1: '',
      items2: '',
      items3: '',
      serverData: [],
      serverDataatasan: [],
      serverData1: [],
      serverData2: [],
      serverDataBonus: [],
      ServerDatabreaktime: [],
      dataHeadnye: [],
      dataCheck: [],
      tbHead: ['Tanggal', '   SHIFT', '  BTStart', '  BTEnd', '  OTStart', '  OTEnd', '   OTBT ', '  OTBTE'],
      shiftidnya: "",
      widths: [50, 50, 50, 50, 50, 50, 50, 50],
      datestart: '--Pilih Tanggal--',
      dateend: '--Pilih Tanggal--',
      isDateTimePickerVisibleOvr: false,
      timestart: '00:00',
      timeend: '00:00',
      datas: []

    }
    this.dataSource = [];

  }


  setisModalVisible(visible) {
    this.setState({ isModalVisible: visible });

  }


  toggleModalList = (
    employee_id, employee_firts_name, fotonya, atasan_id, Division_ID, dept_name, approval1, approval2, email, email_atasan
  ) => {
    this.setState({
      isModalVisibleList: !this.state.isModalVisibleList
      , Niknya: employee_id
      , Namenya: employee_firts_name
      , Fotone: fotonya
      , depidnya: Division_ID
      , deptname: dept_name
      , approval1nya: approval1
      , approval2nya: approval2
      , email: email
      , email_atasan: email_atasan
    });

  };

  setisModalVisibleList(visible) {
    this.setState({ isModalVisibleList: visible });

  }

  toggleModalpicker = (
    employee_id, employee_firts_name, fotonya, atasan_id, Division_ID, dept_name, approval1, approval2, email, email_atasan
  ) => {
    this.setState({
      isModalVisiblepicker: !this.state.isModalVisiblepicker
      , Niknya: employee_id
      , Namenya: employee_firts_name
      , Fotone: fotonya
      , depidnya: Division_ID
      , deptname: dept_name
      , approval1nya: approval1
      , approval2nya: approval2
      , email: email
      , email_atasan: email_atasan
    });

  };

  setisModalVisiblepicker(visible) {
    this.setState({ isModalVisiblepicker: visible });

  }


  showDateTimePickerOvr = () => {
    this.setState({ isDateTimePickerVisibleOvr: true });
  };

  hideDateTimePickerOvr = () => {
    this.setState({ isDateTimePickerVisibleOvr: false });
    this.setisModalVisiblepicker(false)
  };
  handleDatePickedOvr = time => {
    console.log("A date has been picked: ", time);



    let hours = time.getHours();
    let minutes = time.getMinutes();
    let seconds = time.getSeconds();
    console.log(`${hours}:${minutes}:${seconds}`)
    this.setState({ timestart: `${hours}:${minutes}:${seconds}` })

    this.hideDateTimePickerOvr();
    this.setisModalVisiblepicker(false)

  };


















  CekNet = () => {

    const unsubscribe = NetInfo.addEventListener(state => {
      console.log("Connection type", state.type);
      console.log("Is connected?", state.isConnected);
      if (state.isConnected == true) {
        this.setState({ connection_Status: "Online" })
      }
      else {
        this.setState({ connection_Status: "Offline" })

      }
    });

    unsubscribe();
  }

  GetData = () => {
    NetInfo.fetch().then(state => {
      console.log("Connection type", state.type);
      console.log("Is connected?", state.isConnected);
      if (state.isConnected == true) {
        this.setState({ connection_Status: "Online" })


      }
      else {
        this.setState({ connection_Status: "Offline" })

      }
    });
    this.CekNet();

    if (this.state.connection_Status == "Offline") {
      alert('Not Internet Connection')
    } else {

      const { navigation } = this.props;
      ///your fetch

    }
  };
  componentDidMount() {


    NetInfo.fetch().then(state => {
      console.log("Connection type", state.type);
      console.log("Is connected?", state.isConnected);
      if (state.isConnected == true) {
        this.setState({ connection_Status: "Online" })


      }
      else {
        this.setState({ connection_Status: "Offline" })

      }
    });
    this.CekNet();

    if (this.state.connection_Status == "Offline") {
      alert('Not Internet Connection')
    } else {

      // BackHandler.addEventListener("hardwareBackPress", this.BacktoHome);
      const { navigation } = this.props;
      const sales = navigation.getParam('idSales', 'NO-Pass');

      fetch(Config.api_path + 'charis_view_subordinate.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          sales: navigation.getParam('fpnya', 'NO-User'),

        })
      })

        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            dataSource: responseJson,
            isLoading: false



          }, function () {
            this.dataSource = responseJson;
          });
        })
        .catch((error) => {
          console.error(error);
        });

      fetch(Config.api_path + 'AA_list_unitORG_Divisi.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          // sales: id_sales1,

        })
      })
        .then(response => response.json())
        .then(responseJson => {
          if (responseJson != []) {
            this.setState({
              serverData: responseJson,

              //adding the new data in Data Source of the SearchableDropdown
            });
          } else {
            alert("Not Have Customers");
          }
        })
        .catch(error => {
          console.error(error);
        });


      fetch(Config.api_path + 'AA_list_shift.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({


        })
      })
        .then(response => response.json())
        .then(responseJson => {
          if (responseJson != []) {

            this.setState({

              serverData2: responseJson,


            });
          } else {
            alert("Not Have Customers");
          }
        })
        .catch(error => {
          console.error(error);
        });
      fetch(Config.api_path + 'AA_list_bonus_kota.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          //sales: id_sales1,

        })
      })
        .then(response => response.json())
        .then(responseJson => {
          if (responseJson != []) {
            this.setState({
              serverDataBonus: responseJson,

            });
          } else {
            alert("Not Have Customers");
          }
        })
        .catch(error => {
          console.error(error);
        });


      fetch(Config.api_path + 'AA_list_break_time.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          // sales: id_sales1,

        })
      })
        .then(response => response.json())
        .then(responseJson => {
          if (responseJson != []) {
            this.setState({
              ServerDatabreaktime: responseJson,
              //adding the new data in Data Source of the SearchableDropdown
            });
          } else {
            alert("Not Have Customers");
          }
        })
        .catch(error => {
          console.error(error);
        });


    }

  }



  backButtonClick() {
    if (this.props.navigation && this.props.navigation.goBack) {
      this.props.navigation.goBack(null);
      return true;
    }
    return false;
  }

  handleConnectivityChange = (isConnected) => {
    if (isConnected == true) {
      this.setState({ connection_Status: "Online" })

    }
    else {
      this.setState({ connection_Status: "Offline" })
      alert('Offline Mode No Internet Connection')
    }
  };


  onRefresh() {

    this.setState({ dataSource: [] });

    this.GetData();
  }


  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }



  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '86%',
          backgroundColor: '#CED0CE',
          marginLeft: '12%',
        }}
      />
    );
  };

  search = text => {
    console.log(text);
  };
  clear = () => {
    this.search.clear();
  };

  SearchFilterFunction(text) {

    const newData = this.dataSource.filter(function (item) {

      const itemData = `${item.employee_id.toUpperCase()}  ${item.employee_firts_name.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({

      dataSource: newData,
      search: text,
    });
  }

  showDateTimePickerOver = () => {
    this.setState({
      isDateTimePickerVisibleOver: true,

    });
  };
  hideDateTimePickerOver = () => {
    this.setState({ isDateTimePickerVisible: false });
  };

  showDateTimePicker = () => {
    this.setState({
      isDateTimePickerVisible: true,

    });
  };

  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };
  handleDatePicked = time => {
    console.log("A date has been picked: ", time);



    let years = time.getFullYear();
    let month = time.getMonth() + 1;
    let date = time.getDate();
    console.log("A date has been picked:===== ", `${years}-${month}-${date}`);

    this.setState({ datestart: `${years}-${month}-${date}` }, () => {
      this.setDateRange(this.state.checkBoxChecked);
    })

    this.hideDateTimePicker();


  };


  showDateTimePickerAkhir = () => {
    this.setState({
      isDateTimePickerVisibleAkhir: true,

    });
  };

  hideDateTimePickerAkhir = () => {
    this.setState({ isDateTimePickerVisibleAkhir: false });
  };



  checkBoxChanged(employee_id, employee_first_name, value) {
    console.log(employee_id, employee_first_name);
    this.setState({
      checkBoxChecked: tempCheckValues
    })
    var tempCheckBoxChecked = this.state.checkBoxChecked;
    tempCheckBoxChecked[employee_id] = !value;
    this.setState({
      checkBoxChecked: tempCheckBoxChecked
    })
  }

  setDateRange = (checkBoxChecked) => {
    console.log("employee terpilih", checkBoxChecked)

    const arrdatestart = this.state.datestart.split("-");
    const arrdateend = this.state.dateend.split("-");
    const dateend = new Date()
    dateend.setDate(arrdateend[2]);
    dateend.setMonth(arrdateend[1] - 1);
    dateend.setFullYear(arrdateend[0]);
    const datestart = new Date()
    datestart.setDate(arrdatestart[2]);
    datestart.setMonth(arrdatestart[1] - 1);
    datestart.setFullYear(arrdatestart[0]);
    // var empID = this.state.checkBoxChecked;
    // console.log("ye",empID);
    var now = new Date();
    var datas = [];

    for (var d = datestart; d <= dateend; d.setDate(d.getDate() + 1)) {

      const newdate = new Date()
      newdate.setDate(d.getDate());
      newdate.setMonth(d.getMonth());
      newdate.setFullYear(d.getFullYear());
      datas.push({ date: newdate, shiftName: this.state.nameshiftnya, shiftId: this.state.shiftidnya });

    }
    this.setState({ datas: datas });
    console.log(datas);
  }
  handleDatePickedAkhir = time => {
    console.log("A date has been picked: ", time);



    let years = time.getFullYear();
    let month = time.getMonth() + 1;
    let date = time.getDate();
    console.log("A date has been picked:===== ", `${years}-${month}-${date}`);

    this.setState({ dateend: `${years}-${month}-${date}` }, () => {
      this.setDateRange(this.state.checkBoxChecked);
    })

    this.hideDateTimePickerAkhir();


  };




  showalert = () => {

    Alert.alert(
      "INFO",
      "Data Request Lembur Tersimpan",
      [
        { text: "OK", onPress: () => this.gotorefresh() }
      ])
  }


  gotorefresh = () => {
    NetInfo.fetch().then(state => {
      console.log("Connection type", state.type);
      console.log("Is connected?", state.isConnected);
      if (state.isConnected == true) {
        this.setState({ connection_Status: "Online" })


      }
      else {
        this.setState({ connection_Status: "Offline" })

      }
    });
    this.CekNet();

    if (this.state.connection_Status == "Offline") {
      alert('Not Internet Connection')
    } else {

      // BackHandler.addEventListener("hardwareBackPress", this.BacktoHome);
      const { navigation } = this.props;
      const sales = navigation.getParam('idSales', 'NO-Pass');

      fetch(Config.api_path + 'charis_view_subordinate.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          sales: navigation.getParam('fpnya', 'NO-User'),

        })
      })

        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            dataSource: responseJson,
            isLoading: false


          }, function () {

          });
        })
        .catch((error) => {
          console.error(error);
        });

      fetch(Config.api_path + 'AA_list_unitORG_Divisi.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          // sales: id_sales1,

        })
      })
        .then(response => response.json())
        .then(responseJson => {
          if (responseJson != []) {
            this.setState({
              serverData: responseJson,
              //adding the new data in Data Source of the SearchableDropdown
            });
          } else {
            alert("Not Have Customers");
          }
        })
        .catch(error => {
          console.error(error);
        });

    }


  }

  carinextatasan = () => {

    if (this.state.connection_Status == "Offline") {
      alert('No Internet Connection')

    } else {

      this.setState({

        nikatasan: '',
        namaatasanneee: ''
      });

      fetch(Config.api_path + 'AA_list_AtasanId.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          idunitorgDivisi: this.state.shiftidnya,

        })
      })
        .then(response => response.json())
        .then(responseJson => {
          if (responseJson != []) {
            this.setState({
              serverDataatasan: responseJson,
              //adding the new data in Data Source of the SearchableDropdown
            });
          } else {
            alert("Not Have Customers");
          }
        })
        .catch(error => {
          console.error(error);
        });

    }
  }




  sendEmail = (
    Niknya, Namenya, email, email_atasan, datestar, timestar, timeend, DeptId, Destination, breaktime, Customer, DONumebr, Memo
  ) => {
    RNSmtpMailer.sendMail({
      mailhost: Config.mailhost,
      port: Config.port,
      ssl: true, //if ssl: false, TLS is enabled,**note:** in iOS TLS/SSL is determined automatically, so either true or false is the same
      username: Config.username,
      password: Config.password,
      from: "" + email + "",
      recipients: "" + email_atasan + "",
      recipients: "eko.it@taysbakers.com",
      subject: "Pengajuan Overtime " + Niknya + " " + Namenya + "  ",
      htmlBody: "<h3>Notifikasi Pengajuan Overtime</h3><p> Pengajuan Overtime  pada tanggal " + datestar + " jam " + timestar + " sampai " + timeend + " dengan istirahat " + breaktime + " jam" + Memo + "Note </p><p>  Mohon melakukan approval di charis app bagian Menu Approval --> Overtime</p>",


      //  attachmentPaths: ["pathToFile1.png","pathToFile2.txt","pathToFile3.csv"],
      // attachmentNames: ["image.jpg", "firstFile.txt", "secondFile.csv"],//only used in android, these are renames of original files. in ios filenames will be same as specified in path. In ios-only application, leave it empty: attachmentNames:[]
      // attachmentTypes: ["img", "txt", "csv"]//needed for android, in ios-only application, leave it empty: attachmentTypes:[]
    })
      .then(success =>
        this.setState({
          isLoading: false
        }),
        alert("Request dan Email Pengajuan Overtime telah dikirim"))
      .catch(err =>
        alert(err));
  };


  AmbilArray() {

    alert('dapet gk?');

  }




  render() {

    // items1 = this.state.serverData1
    const format1 = "YYYY-MM-DD HH:mm:ss"
    const breaktime = this.state.ServerDatabreaktime
    const bonuskota = this.state.serverDataBonus
    const dataCheck = this.state.checkBoxChecked;

    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }








    // const datas = [];
    // for (let i = 0; i < 2; i += 1) {
    //   const totlatRows = [];
    //   for (let j = 0; j < 9; j += 1) {
    //     totlatRows.push(`${i}${j}`);
    //   }
    //   datas.push(totlatRows);
    // }

    const state = this.state;

    const { navigation } = this.props;
    const fpnya = navigation.getParam('fpnya', 'NO-fpnya');
    const nik = navigation.getParam('nik', 'NO-nik');
    const nama = navigation.getParam('nama', 'NO-nama');
    const tgllahir = navigation.getParam('tgllahir', 'NO-tgllahir');
    const tempatlahir = navigation.getParam('tempatlahir', 'NO-tgllahir');
    const nomerktp = navigation.getParam('nomerktp', 'NO-nomerktp');
    const statusktp = navigation.getParam('statusktp', 'NO-statusktp');
    const jneiskelamin = navigation.getParam('jneiskelamin', 'NO-jneiskelamin');
    const agama = navigation.getParam('agama', 'NO-agama');
    const nikah = navigation.getParam('nikah', 'NO-nikah');
    const negara = navigation.getParam('negara', 'NO-negara');
    const atasan = navigation.getParam('atasan', 'NO-atasan');
    const namaatasan = navigation.getParam('namaatasan', 'NO-namaatasan');
    const telpon = navigation.getParam('telpon', 'NO-telpon');
    const nopajak = navigation.getParam('nopajak', 'NO-nopajak');
    const bpjskes = navigation.getParam('bpjskes', 'NO-bpjskes');
    const bpjstku = navigation.getParam('bpjstku', 'NO-bpjstku');
    const norek = navigation.getParam('norek', 'NO-norek');
    const alamat = navigation.getParam('alamat', 'NO-alamat');
    const nokk = navigation.getParam('nokk', 'NO-nokk');
    const noskck = navigation.getParam('noskck', 'NO-noskck');
    const departemenkerja = navigation.getParam('departemenkerja', 'NO-departemenkerja');
    const tanggalgabung = navigation.getParam('tanggalgabung', 'NO-tanggalgabung');
    const npwp = navigation.getParam('npwp', 'NO-npwp');
    const pendidikan = navigation.getParam('pendidikan', 'NO-pendidikan');
    const foto = navigation.getParam('foto', 'NO-foto');
    const statukerja = navigation.getParam('statukerja', 'NO-statukerja');
    const email = navigation.getParam('email', 'NO-email');
    const emailatasan = navigation.getParam('emailatasan', 'NO-emailatasan');
    const levelposisi = navigation.getParam('levelposisi', 'NO-levelposisi');
    const akhirkontrak = navigation.getParam('akhirkontrak', 'NO-akhirkontrak');
    const levelkerja = navigation.getParam('levelkerja', 'NO-levelkerja');
    items = this.state.serverData
    items2 = this.state.serverData2
    var datazg = this.state.datas
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn2}>
          <Text style={styles.btnText}>button</Text>
        </View>
      </TouchableOpacity>
    );


    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      );



    } else {

      return (
        <Container>

          <Content style={{ flex: 1, }}>
            <View style={{ paddingVertical: 10 }} />
            {/* {(this.state.dataHeadnye !== []) && ( */}
            <Item>
              <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center' }}>
                <View style={{ padding: 10 }}><Image style={{ width: 35, height: 35 }} source={require('../assets/customers.png')} /></View>

                <View style={{ marginLeft: 20 }}>
                  <Text style={{ fontSize: 12, fontWeight: 'bold', fontWeight: 'bold' }}>Employee</Text>
                  <Text
                    onPress={() => {
                      this.toggleModalList(false)
                    }}
                    placeholder="Masukkan Employee"
                  >Masukkan Employee</Text>
                  {dataCheck.map((item, employee_id) => (
                    <View style={{ width: '100%', flexDirection: 'row' }}>
                      <Text style={{ fontSize: 12, fontWeight: 'bold', fontWeight: 'bold' }}>{employee_id}</Text>
                    </View>
                  ))}

                </View>
              </View>
            </Item>
            <Item>

              <View style={{ width: '100%', flexDirection: 'row' }}>
                <View style={{ padding: 10 }}><Image style={{ width: 35, height: 35 }} source={require('../assets/customers.png')} /></View>
                <View style={{ marginLeft: 20 }}>
                  <Text style={{ fontSize: 12, fontWeight: 'bold', fontWeight: 'bold' }}>Tanggal Awal</Text>
                  {this.state.datestart !== '' && (<Text style={{ fontSize: 12, fontStyle: 'normal' }} onPress={this.showDateTimePicker}>{this.state.datestart}</Text>)}

                  <DateTimePickerModal
                    isVisible={this.state.isDateTimePickerVisible}
                    placeholder="select date"
                    mode="date"
                    locale="en_GB" // Use "en_GB" here
                    onConfirm={this.handleDatePicked}
                    onCancel={this.hideDateTimePicker}
                  />
                </View>
                <View style={{ alignItems: 'center' }}>
                  <Text style={{ fontSize: 12, fontWeight: 'bold', fontWeight: 'bold' }}>                s/d</Text>
                </View>
                <View style={{ marginLeft: 50 }}>
                  <Text style={{ fontSize: 12, fontWeight: 'bold', fontWeight: 'bold' }}>Tanggal Akhir</Text>
                  {this.state.dateend !== '' && (<Text style={{ fontSize: 12, fontWeight: 'normal' }} onPress={this.showDateTimePickerAkhir}>{this.state.dateend}</Text>)}

                  <DateTimePickerModal
                    isVisible={this.state.isDateTimePickerVisibleAkhir}
                    placeholder="select date"
                    mode="date"
                    locale="en_GB" // Use "en_GB" here
                    onConfirm={this.handleDatePickedAkhir}
                    onCancel={this.hideDateTimePickerAkhir}
                  />
                </View>
              </View>
            </Item>

            <Item>
              <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center' }}>
                <View style={{ padding: 10 }}><Image style={{ width: 35, height: 35 }} source={require('../assets/customers.png')} /></View>
                <View style={{ marginLeft: 20 }}>
                  <Text style={{ fontSize: 12, fontWeight: 'bold', fontWeight: 'bold' }}>Pilih Shift</Text>
                  <SearchableDropdown
                    onItemSelect={(item) => {

                      this.setState({
                        selectedItems: items,
                        shiftidnya: item.id,
                        nameshiftnya: item.name,

                      }, () => {
                        this.setDateRange(this.state.checkBoxChecked);
                      });

                    }}
                    containerStyle={{ padding: 5 }}
                    onRemoveItem={(item, index) => {
                      const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
                      this.setState({ selectedItems: items });
                    }}

                    itemStyle={{
                      padding: 10,
                      marginTop: 2,
                      backgroundColor: '#ddd',
                      borderColor: '#000',
                      borderWidth: 1,
                      borderRadius: 5,
                    }}
                    itemTextStyle={{ color: '#222' }}
                    itemsContainerStyle={{ maxHeight: 1400 }}
                    items={items2}
                    defaultIndex={2}
                    resetValue={false}
                    textInputProps={
                      {
                        placeholder: "Select Shift",
                        underlineColorAndroid: "transparent",
                        style: {
                          padding: 10,
                          borderWidth: 1,
                          borderColor: '#ccc',
                          // borderRadius: 5,
                          width: "100%",
                        },
                      }
                    }
                    listProps={
                      {
                        // nestedScrollEnabled: true,
                      }
                    }
                  />
                  {/* <Text style={{ fontSize: 10, fontWeight: 'bold', fontWeight: 'bold' }}>Pilih Shift {this.state.nameshiftnya}</Text> */}
                </View>
              </View>
            </Item>
            {/* )} */}
            <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <View style={{ flexDirection: 'row' }}>
                {/* <Right>
                  <View style={{ marginHorizontal: 17, paddingTop: 15 }}>
                    <Button small rounded primary onPress={this.AmbilArray}>
                      <Text style={{ color: '#fff' }}>   Next    </Text>
                    </Button>
                  </View>
                </Right> */}
              </View>
            </SafeAreaView>


            <View style={styles.container}>


              {this.state.datas == '[]' && (
                <View>
                  <Text style={{ fontSize: 14, fontWeight: 'bolt', textAlign: 'center', marginTop: 50 }}>Tidak ada Data</Text>
                </View>
              )}

              {this.state.datas !== [] && (
                <View>
                  <ScrollView
                    horizontal={true}
                  >
                    <FlatList
                      data={this.state.datas}
                      ItemSeparatorComponnt={this.renderSeparator}
                      ListHeaderComponent={this.renderHeader}
                      renderItem={({ item }) => (
                        <ListItem style={styles.list}
                          badge={{ value: item.STATUS, textStyle: { textAlign: 'center', fontSize: 12, width: 80, fontWeight: 'bold', color: '#fff' }, containerStyle: { marginTop: -20 }, status: item.STATUS == "PRS" ? "success" : "error" }}
                          // title={`${moment(item.date).format("DD/MM/YYYY")}  ${item.shiftName} ${<TouchableHighlight><Button onPress={this.showDateTimePickerOvr} />
                          //   <Text style={{ color: 'red' }}>{this.state.timestart}</Text>
                          //   <DateTimePickerModal
                          //     isVisible={this.state.isDateTimePickerVisibleOvr}
                          //     placeholder="select date"
                          //     mode="time"
                          //     locale="en_GB" // Use "en_GB" here
                          //     onConfirm={this.handleDatePickedOvr}
                          //     onCancel={this.hideDateTimePickerOvr}
                          //   />
                          // </TouchableHighlight>
                          //   }  ${`00:00`}  ${`00:00`}  ${`00:00`}`}
                          subtitle={
                            <View style={{ flexDirection: 'row' }}>


                              {this.state.datestart !== '' && (
                                <TouchableHighlight onPress={this.toggleModalpicker}>

                                  <Text style={{ fontSize: 18 }} >akulahku</Text>
                                </TouchableHighlight>
                              )}

                              <DateTimePickerModal
                                isVisible={this.state.isDateTimePickerVisible}
                                placeholder="select date"
                                mode="date"
                                locale="en_GB" // Use "en_GB" here
                                onConfirm={this.handleDatePicked}
                                onCancel={this.hideDateTimePicker}
                              />



                            </View>



                          }

                        />
                      )}
                      keyExtractor={(item) => item.no_doc}
                      refreshControl={
                        <RefreshControl

                          refreshing={this.state.isLoading}
                          onRefresh={this.onRefresh.bind(this)}
                        />
                      }

                    />
                  </ScrollView>


                </View>

              )}
              <View>
                {/* {(this.state.dataSource !== []) && ( */}
                {/* <View style={styles.lowerSection}> */}
                <View style={{ paddingVertical: 10 }} />
                <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                  <View style={{ width: '100%', flexDirection: 'row' }}>
                    <Right>
                      <AnimateLoadingButton
                        ref={c => (this.loadingButton = c)}
                        width={70}
                        height={40}
                        marginTop={80}
                        title="Submit"
                        titleFontSize={18}
                        titleColor="rgb(255,255,255)"
                        backgroundColor="#FE001C"
                        borderRadius={10}
                      // onPess={this.rSubmitAddEmp.bind(this)}
                      />
                    </Right>

                  </View>
                </SafeAreaView>

                <View style={{ flex: 1, backgroundColor: '#f3f3f3' }}>
                  {/* Rest of the app comes ABOVE the action button component !*/}
                </View>
                <View style={{ paddingVertical: 20 }} />
              </View>
              {/* )} */}

              {/* </View> */}
            </View>



            <View style={styles.container}>
              <Modal style={{ flex: 1, boderRadius: 2 }} isVisible={this.state.isModalVisibleList} animationType="slide" onRequestClose={() => {
                this.setisModalVisibleList(false)
              }}>
                <ScrollView>
                  {/* <ScrollView keyboardShouldPersistTaps="handled"> */}
                  <Button full style={styles.btn}>
                    <Text style={{ color: 'white' }}>Pilih Employee</Text>
                  </Button>

                  <View style={styles.lowerSection}>
                    <View style={styles.centerDatePIcker}>

                      <SearchBar
                        placeholder="Cari Dengan NIK / Nama "
                        lightTheme
                        round
                        searchIcon={{ size: 24 }}
                        color='#ffffff'
                        onChangeText={text => this.SearchFilterFunction(text)}
                        onClear={text => this.SearchFilterFunction('')}
                        autoCorrect={false}
                        value={this.state.search}

                        containerStyle={{ backgroundColor: '#ffffff' }}
                        inputStyle={{ backgroundColor: '#ffffff' }}
                      />

                    </View>
                    {this.state.dataSource == '[]' && (
                      <View>
                        <Text style={{ fontSize: 14, fontWeight: 'bolt', textAlign: 'center', marginTop: 50 }}>Tidak ada Data</Text>
                      </View>
                    )}

                    {this.state.dataSource !== [] && (

                      <View>

                        <FlatList

                          data={this.state.dataSource}

                          //    ItemSeparatorComponnt={this.renderSeparator}
                          //  ListHeaderComponent={this.renderHeader}


                          renderItem={({ item }) => (


                            // <TouchableHighlight
                            //   activeOpacity={0.5}
                            //   onPress={() => this.toggleModal(item.employee_id, item.employee_firts_name, item.fotonya, item.atasan_id, item.dept_id, item.approval1, item.approval2, item.jatah_sisa, item.pindahan_sisa, item.jatah_digunakan, item.pindahan_digunakan)}
                            // >
                            <ListItem style={styles.list}
                              leftAvatar={{ source: { uri: item.fotonya } }}
                              title={item.employee_firts_name}
                              subtitle={`${item.employee_id}`}

                              rightSubtitle={<CheckBox
                                value={this.state.checkBoxChecked[item.employee_id]}
                                onValueChange={() =>
                                  this.checkBoxChanged(item.employee_id, item.employee_firts_name, this.state.checkBoxChecked[item.employee_id])
                                }
                              //      onPress={this._onPressHandler}
                              />
                              }


                            />
                            // </TouchableHighlight>
                          )}
                          keyExtractor={(item) => item.employee_id}



                          refreshControl={
                            <RefreshControl

                              refreshing={this.state.isLoading}
                              onRefresh={this.onRefresh.bind(this)}
                            />
                          }

                        />

                        {/* </View> */}

                      </View>



                    )}



                    <View style={{ paddingTop: 30 }}>
                      <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                        <View style={{ flexDirection: 'row' }}>

                          {/* <Left>
                            <View style={{ marginHorizontal: 17, paddingTop: 15 }}>
                              {(this.state.dataSource !== []) && (
                                <Button small rounded success onPress={this.SubmitAddEmp.bind(this)}>
                                  <Text style={{ color: '#fff' }}>   Save    </Text>
                                </Button>
                              )}
                            </View>
                          </Left> */}
                          <Right>
                            <View style={{ marginHorizontal: 17, paddingTop: 15 }}>
                              <Button small rounded danger onPress={() => {
                                this.setisModalVisibleList(false)

                              }}>
                                <Text style={{ color: '#fff' }}>   Proses    </Text>
                              </Button>
                            </View>

                          </Right>
                        </View>
                      </SafeAreaView>
                    </View>

                    <View style={{ paddingVertical: 15 }} />

                  </View>
                </ScrollView>
                {/* </ScrollView> */}
              </Modal>
            </View>

            <View style={styles.container}>
              <Modal style={{ flex: 1, boderRadius: 2 }} isVisible={this.state.isModalVisiblepicker} animationType="slide" onRequestClose={() => {
                this.setisModalVisiblepicker(false)
              }}>
                <DateTimePickerModal
                              isVisible={true}
                              placeholder="select date"
                              mode="time"
                              locale="en_GB" // Use "en_GB" here
                              onConfirm={this.handleDatePickedOvr}
                              onCancel={this.hideDateTimePickerOvr}
                            />
              </Modal>
            </View>
          </Content>
        </Container>

      )
    }
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  header: { height: 50, backgroundColor: '#537791' },
  text: { textAlign: 'center', fontWeight: '100' },
  text2: { textAlign: 'center', backgroundColor: '#ffffff' },
  dataWrapper: { marginTop: -1 },
  row: { height: 40, backgroundColor: '#E7E6E1' },
  list: { fontSize: 12, fontWeight: 'bold' },
  HeadStyle: {
    height: 50,
    alignContent: "center",
    backgroundColor: '#686868'
  },
  TableText: {
    margin: 10,
    color: '#fff'
  },
  headerWrapper: {
    height: 50,
    backgroundColor: '#686868',
  },
  viewjam: {
    backgroundColor: 'red',
    height: 30,
    width: 70,
    // borderRadius: 10,
  },
  lowerSection: {
    paddingVertical: 30,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  btnText: { textAlign: 'center', color: '#fff' },
  btn2: { width: 58, height: 18, backgroundColor: '#78B7BB', borderRadius: 2 },
  btn: {
    backgroundColor: 'red'
  },
  label: {
    position: 'absolute',
    backgroundColor: 'white',
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  textStyle: {
    color: '#fff'
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  textArea: {
    height: 150,
    justifyContent: "flex-start"
  },

  textAreaContainer: {
    borderColor: 'grey',
    width: "90%",

  },

});
export default FeatureManageSchedule;