@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')

<style>
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    #upload_name {
        margin-top: -8px;
    }

    .select2-container .select2-selection--multiple {
        min-height: 58px;
    }

    .edit_box_location {

        width: 300px !important;
        height: auto !important;
    }


    .error {
        color: red;
        font-size: 13px;
        font-weight: 600;
        /* margin-top: 45px; */
    }

    .dataTables_length,
    .dataTables_filter {
        display: block;
        margin-bottom: 10px;
    }

    .filter {
        width: 51px;
    }

    tfoot {
        display: table-header-group !important;
    }

    .info {
        margin-bottom: 0rem !important;
        color: brown;
        font-size: 9px;
        font-weight: bold;
    }

    .toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    #toggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }


    ul {
        list-style-type: none;
    }

    #edittoggler {
        position: absolute;
        right: 29px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .edit_box_location {
        width: 340px !important;
        height: auto !important;
    }

    @media only screen and (min-width: 200px) and (max-width: 767px) {
        .tbl-adjust {
            width: 150%;
        }

        ul.chosen-choices {
            height: 57px !important;
            width: 250px !important;
        }

        ul.chosen-results {
            height: 75px !important;
            width: 250px !important;
            overflow-y: scroll;
        }

        #backbtn {
            display: block !important;
        }
/* 
        #web {
            display: none !important;
        }

        #mobileDevice {
            display: block !important;
        } */

        .modalpopup {
            visibility: visible !important;
        }


    }

    @media only screen and (max-width: 767px) {

        .approved_tab,
        .pending_tab,
        .dissapprove_tab {
            font-size: 12px;
            /* smaller font for mobile */
            font-weight: normal;
            padding: 2px;
            /* optional, adjust if needed */
        }
    }

    #mobileDevice {
        display: none;
    }

    .modalpopup {
        visibility: hidden;
    }



    .image-design {
        border: 1px solid;
        background: #fff;
        width: 100%;
        height: auto;
        padding: 1%;
    }

    .form-card {
        border-radius: 5px;
        /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
        border: 2px solid #eee;
    }


    .heading-block {

        background: #b19f83;
        padding: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .heading-block h5 {
        color: #fff;

    }

    .filter-tab-btn {
        border: 1px solid #963131 !important;
        color: #ffffff !important;
        background-color: transparent !important;
        font-weight: 500;
        border-radius: 0.25rem;
        padding: 7px 11px;
        letter-spacing: 1.1;

    }

    .filter-tab-btn.active-tab {
        border: 2px solid #963131 !important;
        color: #963131 !important;
        background-color: transparent !important;
        font-weight: 600;
    }

    table td,
    table th {
        border: 1px solid #dee2e6 !important;
    }

    /* table {
            border-collapse: collapse !important;
            width: 100% !important;
            background-color: transparent !important;
        } */

    th {
        /* background-color: #f8f9fa !important; */
        font-weight: 600;
    }

    .text-wrap {
        text-wrap: nowrap !important;
    }


    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

    #itemList,
    #itemList_new,
    #itemListPending {
        border-collapse: collapse !important;
    }

    #itemList th,
    #itemList_new th,
    #itemListPending th,
    #itemListApproved th {
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 2px solid #000;
        font-size: 12px;
        font-weight: bold;

        padding: 6px;

    }

    /* table th{
            text-align: center;
            white-space: nowrap !important;
        } */

    #itemListPending th {
        text-wrap: nowrap !important;
    }

    #itemList td,
    #itemList_new td,
    #itemListPending td,
    #itemListApproved td {
        border: 1px solid #ddd !important;
        font-size: 12px;
        text-align: center;
        vertical-align: middle;
        padding: 6px;
    }

    #itemListPending td {
        text-wrap: nowrap !important;
    }

    #itemList tbody tr:hover,
    #itemList_new tbody tr:hover,
    #itemListPending tbody tr:hover #itemListApproved tbody tr:hover {
        background-color: #e8e5e5ff !important;
        cursor: pointer;
    }

    /* Remove Arrows */
    #itemListPending.dataTable thead .sorting,
    #itemListPending.dataTable thead .sorting_asc,
    #itemListPending.dataTable thead .sorting_desc {
        background-image: none !important;
        background-color: transparent !important;
    }



    .dataTables_scrollHead th,
    .dataTables_scrollBody td {
        padding: 6px !important;
        white-space: nowrap;
    }

    .approved_tab {
        padding: 3px;
        background-color: #008000;
        color: white;
        border-radius: 5px;
    }

    .pending_tab {
        padding: 3px;
        background-color: #949090ff;
        border-radius: 5px;
        color: #fff;
    }

    .dissapprove_tab {
        padding: 3px;
        background-color: hsla(0, 87%, 56%, 1.00);
        border-radius: 5px;
        color: white;
    }

    .approved_icon {
        background-color: #008000;
    }

    .dissapprove_icon {
        background-color: hsla(0, 87%, 56%, 1.00);

    }

    .pending_icon {
        background-color: #949090ff;
    }

    .approved_icon,
    .dissapprove_icon,
    .pending_icon {
        padding: 3px;
        width: 90px;
        color: #fff;
        font-size: 15px;
        border-radius: 5px;
        text-align: center;
    }

    .scrollable-cell {
        display: block;
        /* width: 150px !important; */
        max-height: 80px;
        overflow-y: auto;
        overflow-x: hidden;
        white-space: normal;
        word-break: break-word;
        padding: 4px;
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);

    }

    #scroll_box {
        position: relative;
        left: 25px;
        width: 180px !important;
    }

    /* For Chrome / Edge / Safari */
    .scrollable-cell::-webkit-scrollbar {
        width: 3px;
    }

    .scrollable-cell::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 3px;
    }

    .scrollable-cell::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    /* Fix for tables that force nowrap */
    td,
    td * {
        white-space: normal !important;
    }
</style>
</head>

<body>
    @include ('layouts.loader')

    <main id="body_main_container" class="body_main_container">
        <div id="body_container">
            <div class="card" id="page_header_container">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">Attendance Rectification Status </h5>
                        </div>
                        <div class="col-md-2"></div>
                        <div class="col-md-2">
                            <a href="/attendance_rectification"
                                class="btn btn-reset align-items-center"
                                style="float: right;">
                                <i class="fa fa-arrow-left me-1" style="font-size: 10px;"></i>
                                Back
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <section class="section dashboard form-container">
                <div class="card p-0">
                    <div class="card-body p-2">
                        <div class="mt-3 p-2">
                            <!-- Web Tables -->
                            <div class="mt-3 p-2" id="web">

                                <div id="pendingTable_web" style="overflow-x:auto;">

                                    <table id="itemList" class="table table-bordered nowrap" style="width:100%;">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Applied On</th>
                                                <th class="text-center">Emp Code</th>
                                                <th class="text-center">Emp Name</th>
                                                <th class="text-center">Rectification TO Correct</th>
                                                <th class="text-center">Rectification Date</th>
                                                <th>From Time-To Time</th>
                                                <th class="text-center">Reason</th>
                                                <th class="text-center">Action ON</th>
                                                <th class="text-center">Action By</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Comments</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>

                            </div>




                            <div class="mt-3 p-2" id="mobileDevice">


                                <div id="pendingTable_mobile" class="table-responsive">


                                    <table id="itemListPending" class="table table-bordered" style="width: 100%;">
                                        <thead class="table table-bordered table-striped p-1">
                                            <tr style="font-size: 12px;">
                                                <th class="text-center">Applied On</th>
                                                <th class="text-center">Applied For</th>
                                                <th class="text-center">Action For</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">More</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>


                            </div>



                        </div>




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


            <!-- RemarksModal -->
            <div class="modal fade" id="RemarksModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Remarks by Approver</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p id="approver-remarks">No remarks available.</p>
                        </div>

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


            <!-- Model Open For the Pending Data In Mobile device -->
            <!-- Modal that will show the same content in table format -->
            <div class="modal fade modalpopup" id="ExtralargeEditPending" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title fw-bold" style="margin-left: auto !important">Attendance Application
                                Status</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="fade-overlay" id="fadeOverlay" style="display: none;"></div>

                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th style="width: 40%;"><strong>Field</strong></th>
                                            <th><strong>Details</strong></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><strong>Applied By</strong></td>
                                            <td id="applied_by">

                                            </td>
                                        </tr>

                                        <tr>
                                            <td><strong>Applied On</strong></td>
                                            <td id="applied_on">

                                            </td>
                                        </tr>

                                        <tr>
                                            <td><strong>Attendance To Correct</strong></td>
                                            <td id="attendance_correction">

                                            </td>
                                        </tr>

                                        <tr>
                                            <td><strong>Attendance Corrrection Date</strong></td>
                                            <td id="attendance_correction_date">

                                            </td>
                                        </tr>

                                        <tr style="border-bottom:2px solid #000">
                                            <td><strong>Reason</strong></td>
                                            <td id="remarks">

                                            </td>
                                        </tr>


                                        <!-- Action Status -->
                                        <tr id="action_by_column" style="display:none;">
                                            <td><strong>Action By</strong></td>
                                            <td id="action_by_data">

                                            </td>
                                        </tr>

                                        <tr id="action_on_column" style="display:none;">
                                            <td><strong>Action On</strong></td>
                                            <td id="action_on">

                                            </td>
                                        </tr>

                                        <tr>
                                            <td><strong>Status</strong></td>
                                            <td id="status_column">

                                            </td>
                                        </tr>

                                        <tr id="comments_column" style="display:none;">
                                            <td><strong>Comment's By Approver</strong></td>
                                            <td>
                                                <div id="coument_by_approver_column" class="scrollable-cell">

                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>



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

        </div>
    </main>
    @include('layouts.footer')

    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $(window).on('resize', function() {
                if ($(window).width() >= 768) {
                    $('.modal.show').each(function() {
                        $(this).modal('hide');
                    });
                }
            });


            fetchPendingData();

        });

        // mobile device end 

        // fetch Pending Data 
        function fetchPendingData() {
            $('#pageloader').show();
            var token = ' {{ csrf_token() }} ';
            $.ajax({
                url: "get_attendance_rectification_data_status_tab",
                type: "POST",
                dataType: "json",
                data: {
                    _token : token
                },
                success: function(response) {

                    $('#pageloader').hide();
                    fetchPendingDataDesktop(response);
                    fetchPendingDataMobile(response);
                },
                error: function(xhr, error) {
                    $('#pageloader').hide();
                    console.log(error);
                }
            });
        }

        //get Month
        function formatDateToDDMonYYYY(dateStr) {
            const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
            ];
            const date = new Date(dateStr);
            const day = String(date.getDate()).padStart(2, '0');
            const month = months[date.getMonth()];
            const year = date.getFullYear().toString().slice(-2);
            return `${day}-${month}-${year}`;
        }

        //Month End


        //Desktop View Show Table 
        var table1, table2;

        function translateDataTable() {
            // logic
        }
         function translateElement (el) {
            return el;
           
        }


        function fetchPendingDataDesktop(response) {
            var userRole = "{{ session('role') }}";

            let showStatusColumn = Array.isArray(response) && response.some(item =>
                item.is_approve_by_manager !== 0
            );



            let actionByActionDate = Array.isArray(response) && response.some(item =>
                item.actionby != null && item.actiondate != null
            );


            $('#itemList').DataTable().clear().destroy();
            table1 = $('#itemList').DataTable({

                data: response,
                autoWidth: true,
                responsive: true,
                paging: false,
                info: false,
                searching: false,
                lengthChange: false,
                pageLength: 100,
                scrollX: true,
                fixedColumns: false,
                columns: [{
                        data: "timestamp",
                        title: "Applied On",
                        render: function(data, type, row) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "emp_id",
                        title: "Emp Code",
                    },
                    {
                        data: "full_name",
                        title: "Emp Name",
                    },
                    {
                        data: "attendance_correction",
                        title: "Rectification To Correct",
                        render: function(data, row, type){
                            if (data === "AT1") {
                                return "Login not marked";
                            } 
                            else if (data === "AT2") {
                                return "WeekOff not marked";
                            } 
                            else if (data === "AT3") {
                                return "WeekOff exchanged to work";
                            } 
                            else if (data === "AT4") {
                               return "Work exchanged to WeekOff";
                            } else if (data == "AT5") {
                                return "Marked Absent/Work exchanged to Absent";
                            } else if (data == "AT6") {
                                return "SL/PL Consider to Work";
                            } 
                        }
                    },
                    {
                        data: "date_to_adjust",
                        title: "Rectification Date",
                        render: function(data, row, type) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: "from_time",
                        title: "From Time-To Time",
                        render: function(data, type, row) {
                            let fromTime = formatTimeTo12Hour(row.from_time);
                            let toTime = formatTimeTo12Hour(row.to_time);
                            return '<br><small>' + fromTime + ' - ' + toTime + '</small>';
                        }
                    },
                    {
                        data: "remarks",
                        title: "Reason",
                        render: function(data, row, type) {
                            if(data == undefined || data == '' || data == null) {
                                   return `
                                <textarea class="form-control" 
                                    style=" height:80px; overflow-y:auto; resize:none; 
                                        font-size:12px; background-color: transparent !important;" 
                                    readonly>No Reasons</textarea>
                            `;

                            } else {
                            return `
                                <textarea class="form-control" 
                                    style=" height:80px; overflow-y:auto; resize:none; 
                                        font-size:12px; background-color: transparent !important;" 
                                    readonly>${data}</textarea>
                            `;
                            }

                        },

                    },
                    {
                        data: null,
                        title: "Comments By Approver",
                        visible: (showStatusColumn),
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            var comment = '';
                            if (managerStatus == 1 || managerStatus == 2) {
                                comment = data['comment_by_manager'];
                            } else {
                                comment = '';
                            }

                            return `<div class="scrollable-cell" id="scroll_box">${comment ? comment : ''}</div>`;

                        }
                    },
                    {
                        data: null,
                        title: "Action On",
                        visible: (actionByActionDate),
                        render: function(data, type, xhr) {
                            return data.actiondate ? formatDateToDDMonYYYY(data.actiondate) : '';
                        }

                    },
                    {
                        data: null,
                        title: "Action By",
                        visible: (actionByActionDate),
                        render: function(data, xhr, row) {

                            return data.actionby ? data.actionby : '';

                        }
                    },
                    {
                        data: null,
                        title: "status",
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            if (managerStatus == 1) {
                                return `<div class="approved_tab">Approved</div>`;
                            } else if (managerStatus == 2) {
                                return `<div class="dissapprove_tab">Rejected</div>`;
                            } else {
                                return `<div class="pending_tab">Pending</div>`;
                            }
                        }
                    },

                ],

                initComplete: function() {
                    setTimeout(() => translateDataTable('itemList'), 300);
                    $(".sidebar").click(function() {
                        setTimeout(() => table1.columns.adjust().draw(), 300);
                    });
                },
                drawCallback: function() {
                    setTimeout(() => translateDataTable('itemList'), 300);
                },
                // columnDefs: [
                //     { width: '1%', targets: '_all' }
                // ]

            });

            setTimeout(async () => {
                const modal = document.getElementById('itemList');
                const elements = modal.querySelectorAll('td, th, label, button, input[placeholder], div');
                for (const el of elements) {
                    await translateElement(el);
                }
            }, 100);
            setTimeout(() => {
                table1.columns.adjust().draw();
            }, 300);
              

        }





        // mobile------------------------------------------------------------------------------------
        function fetchPendingDataMobile(response) {
            let showStatusColumn = Array.isArray(response) && response.some(item =>
                item.is_approve_by_manager !== 0
            );
            let actionByActionDate = Array.isArray(response) && response.some(item =>
                item.actionby != null && item.actiondate != null
            );

            $('#itemListPending').DataTable().clear().destroy();

            $('#itemListPending').DataTable({
                data: response,
                autoWidth: true,
                paging: false,
                info: false,
                ordering: true,
                searching: false,
                lengthChange: false,
                pageLength: 100,
                scrollX: false,
                columnDefs: [{
                    orderable: false,
                    targets: '_all'
                }],
                columns: [{
                        data: "timestamp",
                        title: "Applied On",
                        render: function(data) {
                            return formatDateToDDMonYYYY(data);
                        }
                    },
                    {
                        data: null,
                        title: "Applied For",
                        visible: (actionByActionDate == false),
                        render: function(data, type, row) {
                            return data.date_to_adjust ? formatDateToDDMonYYYY(data.date_to_adjust) : '';
                        }
                    },
                    {
                        data: null,
                        title: "Action On",
                        visible: (actionByActionDate),
                        render: function(data, type, row) {
                            return data.actiondate ? formatDateToDDMonYYYY(data.actiondate) : '';
                        }

                    },
                    {
                        data: null,
                        title: "Status",
                        render: function(data, type, row) {
                            var managerStatus = data.is_approve_by_manager;
                            if (managerStatus == 1) {
                                return `<div class="approved_tab">Approved</div>`;
                            } else if (managerStatus == 2) {
                                return `<div class="dissapprove_tab">Rejected</div>`;
                            } else {
                                return `<div class="pending_tab">Pending</div>`;
                            }
                        }
                    },


                    {
                        data: "id",
                        title: "More",
                        render: function(data) {
                            return `
                            <button class="btn btn-sm btn-primary px-2 py-1 more-btn" data-bs-toggle="modal"
                                data-bs-target="#ExtralargeEditPending" style="font-size: 12px;"    data-id="${data}">
                                <i class="fa-solid fa-ellipsis-vertical" style="font-size: 10px;"></i>
                            </button>`
                        }
                    }
                ],
                initComplete: function() {
                    // $('#itemListPending thead th').removeClass('sorting sorting_asc sorting_desc');
                    setTimeout(() => translateDataTable('itemListPending'), 300);
                },
                drawCallback: function() {
                    setTimeout(() => translateDataTable('itemListPending'), 300);
                },

            });

            setTimeout(async () => {
                const modal = document.getElementById('itemListPending');
                const elements = modal.querySelectorAll('td, th, label, button, input[placeholder], div');
                for (const el of elements) {
                    await translateElement(el);
                }
            }, 100);
        }


        //Click more button to open Pop up
        $(document).on('click', '.more-btn', function() {

            resetData();
            $('#commets').hide();
            $('#action_date').hide();
            $('#action_by').hide();
            var token = ' {{ csrf_token() }} ';
            const id = $(this).data('id');
            $.ajax({
                url: "get_attendance_pending_data_by_id_Status_Tab",
                type: "POST",
                dataType: "json",
                data: {
                    _token: token,
                    id: id,
                },
                success: function(response) {

                    if (response && response.length > 0) {
                        var data = response[0];

                        $('#applied_by').text(data.fullName);
                        $('#applied_on').text(formatDateToDDMonYYYY(data.timestamp));
                        $('#attendance_correction').text(data.attendance_correction);
                        $('#attendance_correction_date').text(formatDateToDDMonYYYY(data.date_to_adjust));
                        $('#remarks').text(data.remarks);


                        var managerStatus = data.is_approve_by_manager;

                        if (managerStatus != 0) {
                            $('#action_by_column').show();
                            $('#action_on_column').show();
                            $('#comments_column').show();
                            var actionByData = data.actionby;
                            $('#action_by_data').text(actionByData ? actionByData : '');
                            $('#action_on').text(formatDateToDDMonYYYY(data.actiondate))
                        }
                        var successIcon = `<div class="approved_icon">Approved</div>`;
                        var dangericon = `<div class="dissapprove_icon">Rejected</div>`;
                        var pendingIcon = `<div class="pending_icon">Pending</div>`;
                        if (managerStatus == 1) {
                            $('#status_column').html(successIcon);
                            $('#coument_by_approver_column').text(data.comment_by_management);
                        } else if (managerStatus == 2) {
                            $('#status_column').html(dangericon);
                            $('#coument_by_approver_column').text(data.comment_by_management);
                        } else {
                            $('#status_column').html(pendingIcon);
                            $('#coument_by_approver_column').hide();
                            $('#action_by_column').hide();
                            $('#action_on_column').hide();
                            $('#comments_column').hide();
                        }


                        setTimeout(async () => {
                            const modal = document.getElementById('ExtralargeEditPending');
                            const elements = modal.querySelectorAll('td, th, label, button, input[placeholder],div');
                            for (const el of elements) {
                                await translateElement(el);
                            }
                        }, 100);

                    }
                }
            })

        });
        function formatTimeTo12Hour(timeStr) {
            if (!timeStr) return '';

            let timeParts = timeStr.split(':');
            let hours = parseInt(timeParts[0], 10);
            let minutes = timeParts[1];
            let ampm = hours >= 12 ? 'PM' : 'AM';

            hours = hours % 12;
            hours = hours ? hours : 12; // 0 becomes 12

            return (hours < 10 ? '0' + hours : hours) + ':' + minutes + ' ' + ampm;
        }

    </script>


</body>

</html>