<%@ page title="" language="C#" masterpagefile="~/MasterFile/TimeCheck.master" autoeventwireup="true" inherits="Masters_TA_UI_Master_APIList, App_Web_gyazfx0t" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContentPH" runat="Server">
    <link href="../dist/css/bootstrap-responsive-tabs.css" rel="stylesheet" type="text/css">
    <script src="../dist/js/jquery.bootstrap-responsive-tabs.min.js"></script>
    <script>
        function div_show() {
            debugger;
            if (document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "block";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "none";

                $('#tablist a[href="#Personal"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
            else if (document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "block";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "none";

                $('#tablist a[href="#Personal"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
            else if (document.getElementById('ctl00_BodyContentPH_PH_Official').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "block";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "none";

                $('#tablist a[href="#Personal"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        }
        function div_show1() {
            debugger;

            var res = document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display;
            if (document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "block";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "none";

                $('#tablist a[href="#Official"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
            else if (document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "block";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "none";

                $('#tablist a[href="#Official"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
            else if (document.getElementById('ctl00_BodyContentPH_PH_Official').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "block";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "none";

                $('#tablist a[href="#Official"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        }

        function div_show2() {
            debugger;
            if (document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "block";

                $('#tablist a[href="#LeavePolicy"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
            else if (document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "block";

                $('#tablist a[href="#LeavePolicy"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
            else if (document.getElementById('ctl00_BodyContentPH_PH_Official').style.display == "block") {
                document.getElementById('ctl00_BodyContentPH_PH_Personal').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_Official').style.display = "none";
                document.getElementById('ctl00_BodyContentPH_PH_LeavePolicy').style.display = "block";

                $('#tablist a[href="#LeavePolicy"]').tab('show');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        }

    </script>
    <div class="content-header">
        <h1 style="background-image: url('../dist/img/API.png'); background-repeat: no-repeat; padding-left: 35px">

            <asp:Label ID="lbl_Header" runat="server"></asp:Label>
        </h1>
        <asp:SiteMapPath ID="site" runat="server" CssClass="breadcrumb">
            <NodeStyle CssClass="active" />
        </asp:SiteMapPath>
    </div>
    <div class="content">
        <div class="inr-ftr">
            <div class="row">
                <div class="col-sm-6 col-xs-5">
                </div>
                <div class="col-sm-6 col-xs-7" style="height: 33px;">
                </div>
            </div>
            <div class="row"></div>
            <div class="emp-filter" style="padding-top: 10px; padding-bottom: 10px;">
                <div class="row">
                    <div class="col-md-12">

                        <div class="form-horizontal" style="border: 1px solid #C5DFFC;">

                            <div class="col-md-3" style="background-color: #3498db; color: white;">
                                <h5>
                                    <asp:Label ID="Label1" runat="server">Employee Master Data Import API</asp:Label>
                                </h5>
                            </div>
                            <div class="col-sm-7">
                            </div>
                            <div class="col-sm-1">
                                
                                
                                <a href="#" id="toggleBtn1" onclick="toggleCard()">
                                    <i class="fa fa-download" aria-hidden="true" style="font-size: 33px;padding-left:61px"></i>
                                </a>
                                <a href="#" id="toggleBtn2" onclick="toggleCard()" style="display:none">
                                    <i class="fa fa-angle-down" aria-hidden="true" style="font-size: 33px;padding-left:61px" id="toggleIcon1"></i>
                                </a>
                            </div>
                            <div class="clearfix">
                            </div>
                        </div>
                        <div class="form-horizontal">
                            <div class="collapse" id="collapseCard">
                                <div class="card-body emp-filter" style="">
                                    <div class="respos-tab">
                                        <div id="Div2" role="tabpanel">
                                            <ul class="nav nav-tabs responsive-tabs tab-header" id="tablist">
                                                <li class="active" id="DivPersonal"><a href="#Personal" role="tab" onclick="return div_show();">Description</a></li>
                                                <li id="DivOfficial"><a href="#Official" role="tab" onclick="return div_show1();">DataType</a></li>
                                                <li id="DivLeavePolicy"><a href="#LeavePolicy" role="tab" onclick="return div_show2();">Demo URL</a></li>
                                            </ul>
                                        </div>
                                        <div class="tab-content">
                                            <div class="tab-pane active" id="Personal">
                                                <div id="PH_Personal" runat="server" enableviewstate="true" style="padding: 16px; display: block">
                                                    <div>
                                                        <%--<label id="header" runat="server">Description</label>--%>
                                                    </div>
                                                    <div>
                                                        <label id="discriptionValuse" runat="server">The provided employee data should be directly inserted into the Timecheck Application using our own Web API, which is hosted on the IIS server. This API is specifically designed to enable seamless data integration by accepting employee details and securely processing them for storage within the Timecheck system.</label>

                                                        <label id="labl2" runat="server">By leveraging this Timecheck Web API, organizations can efficiently manage employee records while ensuring data accuracy and consistency. This automated process eliminates manual data entry errors, enhances operational efficiency, and supports real-time data synchronization within the Timecheck environment.</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="Official" class="tab-pane fade">
                                                <div id="PH_Official" runat="server" enableviewstate="true" style="padding: 16px; max-height: 300px; overflow-y: auto;">
                                                    <asp:Table ID="tblEmployee" runat="server" CssClass="table"></asp:Table>
                                                    <!-- Default text while loading -->
                                                </div>
                                            </div>

                                            <div id="LeavePolicy" class="tab-pane fade" style="display:none">
                                                <div id="PH_LeavePolicy" runat="server" enableviewstate="true" style="padding: 16px">
                                                    <div class="form-horizontal">
                                                        <div class="panel-body">
                                                            <label id="lblsampleheader">Example Data</label>
                                                        </div>
                                                        <div>
                                                            <p>http://192.168.0.97/TimecheckWCF_API/TCWcfServices.svc/InsertEmployeeMasterData/json?EmpFirstName=Raghul&EmployeeMiddleName=&EmployeeLastName=Raj&FatherName=&MotherName=&DateOfBirth=&DateOfBirthInRecord=&BloodGroup
                                                                =B+ve&OfficialMailID=&ContactAddress=&PermanentAddress=&PhoneNumber=&MobileNumber=&Gender=Male&MaritalStatus=0&Nationality=Indian&
                                                                ReligionName=Hindu&PersonalMailID=&PassportNo=&PassportExpiryDate=&VisaNo=&VisaExpiryDate=&EmployeeCardID=TT004&SwipeCardNo=TT004&DateOfJoining=04/02/2022&QualificationonJoiningTime=&QualificationDuringEmployement=&
                                                                CompOffEligible=0&OTEligible=0&Hostel=0&Designation=Jr.SoftwareEngineer&GradeName=Grade8&GradeNo=8&EmployeeType=Permanent&EmployeeCategory=staff&BasicSalary=&OrganizationLevel1=TestCompany&OrganizationLevel2=Testbranch
                                                                &OrganizationLevel3=TestDepartment&OrganizationLevel4=&OrganizationLevel5=&OrganizationLevel6=&OrganizationLevel7=&OrganizationLevel8=&OrganizationLevel9=&OrganizationLevel10=&isFlag=I</p>
                                                            <label id="lblResponse" runat="server">
                                                                {
  "Message": "Sucessfully Insert",
  "ResponseCode": "1"
}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>

                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>




        <%--    <div class="col-md-12" style="background-color: #3498db; color: white;">
            <div class="col-md-9">
                <h5>
                    <asp:Label ID="lblcardheader" runat="server">Employee Master Data Import API</asp:Label>
                </h5>
            </div>
            <div class="col-md-3 text-right">
                <a href="#" id="toggleBtn2" onclick="toggleCard()">
                    <i class="fa-eye" aria-hidden="true" style="color: white; font-size: 10px" id="toggleIcon2"></i>
                </a>
            </div>

        </div>--%>
        <!-- Initially hidden, will be shown/hidden via toggle -->

    </div>

    <style>
        .card-body {
            background-color: #f8f9fa;
            padding: 20p ;
              
        ht: 300px;
            overflow-y: auto; /* Enable scrolling if content exceeds the height */
        }

        .emp-filter {
            font-size: 14px;
            line-height: 1.6;
        }
    </style>

    <script>
        function toggleCard() {
            var cardBody = document.getElementById("collapseCard");
            var icon = document.getElementById("toggleIcon1");

            if (cardBody.classList.contains("show")) {
                // Collapse the card
                cardBody.classList.remove("show");
                icon.classList.remove("fa-angle-down");
                icon.classList.add("fa-angle-up");
            } else {
                // Expand the card
                cardBody.classList.add("show");
                icon.classList.remove("fa-angle-up");
                icon.classList.add("fa-angle-down");
            }
        }

        // Populate the lblcontent with the employee data
        //window.onload = function () {
        //    var employeeData = '<strong>EmpFirstName:</strong> Raghul<br /><strong>EmployeeMiddleName:</strong> <br /><strong>EmployeeLastName:</strong> Raj<br /><strong>FatherName:</strong> <br /><strong>MotherName:</strong> <br /><strong>DateOfBirth:</strong> <br /><strong>DateOfBirthInRecord:</strong> <br /><strong>BloodGroup:</strong> B+ve<br /><strong>OfficialMailID:</strong> <br /><strong>ContactAddress:</strong> <br /><strong>PermanentAddress:</strong> <br /><strong>PhoneNumber:</strong> <br /><strong>MobileNumber:</strong> <br /><strong>Gender:</strong> Male<br /><strong>MaritalStatus:</strong> 0<br /><strong>Nationality:</strong> Indian<br /><strong>ReligionName:</strong> Hindu<br /><strong>PersonalMailID:</strong> <br /><strong>PassportNo:</strong> <br /><strong>PassportExpiryDate:</strong> <br /><strong>VisaNo:</strong> <br /><strong>VisaExpiryDate:</strong> <br /><strong>EmployeeCardID:</strong> TT004<br /><strong>SwipeCardNo:</strong> TT004<br /><strong>DateOfJoining:</strong> 04/02/2022<br /><strong>QualificationonJoiningTime:</strong> <br /><strong>QualificationDuringEmployement:</strong> <br /><strong>CompOffEligible:</strong> 0<br /><strong>OTEligible:</strong> 0<br /><strong>Hostel:</strong> 0<br /><strong>Designation:</strong> Jr.Software Engineer<br /><strong>GradeName:</strong> Grade8<br /><strong>GradeNo:</strong> 8<br /><strong>EmployeeType:</strong> Permanent<br /><strong>EmployeeCategory:</strong> staff<br /><strong>BasicSalary:</strong> <br /><strong>OrganizationLevel1:</strong> TestCompany<br /><strong>OrganizationLevel2:</strong> Testbranch<br /><strong>OrganizationLevel3:</strong> TestDepartment<br /><strong>OrganizationLevel4:</strong> <br /><strong>OrganizationLevel5:</strong> <br /><strong>OrganizationLevel6:</strong> <br /><strong>OrganizationLevel7:</strong> <br /><strong>OrganizationLevel8:</strong> <br /><strong>OrganizationLevel9:</strong> <br /><strong>OrganizationLevel10:</strong> <br /><strong>isFlag:</strong> I';
        //    // Check if lblcontent exists and is accessible
        //    //var lblContentElement = document.getElementById('');s

        //    if (lblContentElement) {
        //        // Set the data in lblcontent
        //        lblContentElement.innerHTML = employeeData;
        //    } else {
        //        console.log('lblcontent element not found');
        //    }
        //};
    </script>
    <script type="text/javascript">
        $('.responsive-tabs').responsiveTabs({
            accordionOn: ['xs', 'sm']
        });
    </script>
</asp:Content>
