{"id":2,"date":"2024-12-23T12:31:42","date_gmt":"2024-12-23T12:31:42","guid":{"rendered":"https:\/\/madhu.nixelsystems.com\/?page_id=2"},"modified":"2026-02-20T11:08:18","modified_gmt":"2026-02-20T11:08:18","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/madhu.nixelsystems.com\/","title":{"rendered":"Sample Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74f44070 e-flex e-con-boxed e-con e-parent\" data-id=\"74f44070\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74bb7fe2 elementor-widget elementor-widget-text-editor\" data-id=\"74bb7fe2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi&#241;a coladas. (And gettin&#8217; caught in the rain.)<\/p><\/blockquote>\n\n\n\n<p>&#8230;or something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p><\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/madhu.nixelsystems.com\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-994340d e-flex e-con-boxed e-con e-parent\" data-id=\"994340d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-285d6c0 elementor-widget elementor-widget-shortcode\" data-id=\"285d6c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"tsm-enhanced-form-wrapper\">\n    <form id=\"tsm-enhanced-trip-form\" class=\"tsm-enhanced-form\" method=\"post\">\n        <input type=\"hidden\" id=\"tsm_nonce\" name=\"tsm_nonce\" value=\"c6393aa3db\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/2\" \/>        \n        <div class=\"tsm-form-header\">\n            <h2>Generate Trip Sheet<\/h2>\n            <p class=\"tsm-form-description\">Fill in the details below to generate your trip sheet<\/p>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-6\">\n                <label for=\"date\">Date <span class=\"required\">*<\/span><\/label>\n                <input type=\"date\" id=\"date\" name=\"date\" required value=\"2026-04-14\">\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-6\">\n                <label for=\"company_name\">Company Name<\/label>\n                <input type=\"text\" id=\"company_name\" name=\"company_name\" placeholder=\"Client Company Name\">\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-section-title\">\n            <h3>Guest Information<\/h3>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-6\">\n                <label for=\"guest_name\">Guest Name <span class=\"required\">*<\/span><\/label>\n                <input type=\"text\" id=\"guest_name\" name=\"guest_name\" required placeholder=\"Enter guest name\">\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-6\">\n                <label for=\"guest_mobile\">Guest Mobile<\/label>\n                <input type=\"tel\" id=\"guest_mobile\" name=\"guest_mobile\" placeholder=\"+1234567890\">\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-section-title\">\n            <h3>Vehicle Information<\/h3>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-4\">\n                <label for=\"vehicle_type\">Vehicle Type<\/label>\n                <select id=\"vehicle_type\" name=\"vehicle_type\">\n                    <option value=\"\">Select Vehicle Type<\/option>\n                    <option value=\"Sedan\">Sedan<\/option>\n                    <option value=\"SUV\">SUV<\/option>\n                    <option value=\"Van\">Van<\/option>\n                    <option value=\"Bus\">Bus<\/option>\n                    <option value=\"Luxury\">Luxury<\/option>\n                    <option value=\"Other\">Other<\/option>\n                <\/select>\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-4\">\n                <label for=\"vehicle_number\">Vehicle Number <span class=\"required\">*<\/span><\/label>\n                <input type=\"text\" id=\"vehicle_number\" name=\"vehicle_number\" required placeholder=\"ABC-1234\">\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-4\">\n                <label for=\"driver_name\">Driver Name <span class=\"required\">*<\/span><\/label>\n                <input type=\"text\" id=\"driver_name\" name=\"driver_name\" required placeholder=\"Enter driver name\">\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-section-title\">\n            <h3>Trip Details<\/h3>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-3\">\n                <label for=\"opening_km\">Opening KM <span class=\"required\">*<\/span><\/label>\n                <input type=\"number\" id=\"opening_km\" name=\"opening_km\" required placeholder=\"0\" min=\"0\" step=\"0.1\">\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-3\">\n                <label for=\"closing_km\">Closing KM <span class=\"required\">*<\/span><\/label>\n                <input type=\"number\" id=\"closing_km\" name=\"closing_km\" required placeholder=\"0\" min=\"0\" step=\"0.1\">\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-3\">\n                <label for=\"opening_hours\">Opening Hours<\/label>\n                <input type=\"time\" id=\"opening_hours\" name=\"opening_hours\" placeholder=\"09:00\">\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-3\">\n                <label for=\"closing_hours\">Closing Hours<\/label>\n                <input type=\"time\" id=\"closing_hours\" name=\"closing_hours\" placeholder=\"17:00\">\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-6\">\n                <label class=\"tsm-calculated-label\">\n                    Coverage KM (Auto-calculated)                <\/label>\n                <div class=\"tsm-calculated-value\" id=\"coverage_km_display\">0 KM<\/div>\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-6\">\n                <label class=\"tsm-calculated-label\">\n                    Coverage Hours (Auto-calculated)                <\/label>\n                <div class=\"tsm-calculated-value\" id=\"coverage_hours_display\">0 Hours<\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-12\">\n                <label for=\"usage_route\">Usage Route<\/label>\n                <textarea id=\"usage_route\" name=\"usage_route\" rows=\"3\" placeholder=\"Enter the route taken...\"><\/textarea>\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-12\">\n                <label for=\"feedback\">Feedback \/ Comments<\/label>\n                <textarea id=\"feedback\" name=\"feedback\" rows=\"3\" placeholder=\"Enter feedback or comments...\"><\/textarea>\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-section-title\">\n            <h3>Email Options<\/h3>\n        <\/div>\n        \n        <div class=\"tsm-form-row\">\n            <div class=\"tsm-form-group tsm-col-8\">\n                <label for=\"guest_email\">Guest Email (Optional)<\/label>\n                <input type=\"email\" id=\"guest_email\" name=\"guest_email\" placeholder=\"guest@example.com\">\n                <p class=\"tsm-field-description\">If provided, trip sheet will be emailed to this address<\/p>\n            <\/div>\n            \n            <div class=\"tsm-form-group tsm-col-4\">\n                <label for=\"send_email\">&nbsp;<\/label>\n                <label class=\"tsm-checkbox-label\">\n                    <input type=\"checkbox\" id=\"send_email\" name=\"send_email\" value=\"1\">\n                    Send Email to Guest                <\/label>\n            <\/div>\n        <\/div>\n        \n        <div class=\"tsm-form-actions\">\n            <button type=\"submit\" class=\"tsm-btn tsm-btn-primary\" id=\"tsm-submit-btn\">\n                <span class=\"tsm-btn-text\">Generate Trip Sheet<\/span>\n                <span class=\"tsm-btn-loading\" style=\"display: none;\">\n                    <span class=\"tsm-spinner\"><\/span> Generating...                <\/span>\n            <\/button>\n        <\/div>\n        \n        <div id=\"tsm-message\" class=\"tsm-message\" style=\"display: none;\"><\/div>\n    <\/form>\n<\/div>\n\n<script>\njQuery(document).ready(function($) {\n    \/\/ Auto-calculate coverage KM\n    function calculateCoverageKM() {\n        var openingKM = parseFloat($('#opening_km').val()) || 0;\n        var closingKM = parseFloat($('#closing_km').val()) || 0;\n        var coverage = Math.max(0, closingKM - openingKM);\n        $('#coverage_km_display').text(coverage.toFixed(1) + ' KM');\n    }\n    \n    \/\/ Auto-calculate coverage hours\n    function calculateCoverageHours() {\n        var openingHours = $('#opening_hours').val();\n        var closingHours = $('#closing_hours').val();\n        \n        if (openingHours && closingHours) {\n            var opening = new Date('1970-01-01 ' + openingHours);\n            var closing = new Date('1970-01-01 ' + closingHours);\n            var diff = (closing - opening) \/ 1000 \/ 3600; \/\/ Convert to hours\n            \n            if (diff > 0) {\n                $('#coverage_hours_display').text(diff.toFixed(2) + ' Hours');\n            } else {\n                $('#coverage_hours_display').text('0 Hours');\n            }\n        } else {\n            $('#coverage_hours_display').text('0 Hours');\n        }\n    }\n    \n    \/\/ Bind calculation events\n    $('#opening_km, #closing_km').on('input change', calculateCoverageKM);\n    $('#opening_hours, #closing_hours').on('input change', calculateCoverageHours);\n    \n    \/\/ Form submission\n    $('#tsm-enhanced-trip-form').on('submit', function(e) {\n        e.preventDefault();\n        \n        var $form = $(this);\n        var $submitBtn = $('#tsm-submit-btn');\n        var $message = $('#tsm-message');\n        \n        \/\/ Disable submit button\n        $submitBtn.prop('disabled', true);\n        $submitBtn.find('.tsm-btn-text').hide();\n        $submitBtn.find('.tsm-btn-loading').show();\n        $message.hide();\n        \n        \/\/ Submit via AJAX\n        $.ajax({\n            url: tsmEnhanced.ajaxUrl,\n            type: 'POST',\n            data: $form.serialize() + '&action=generate_trip_sheet&nonce=' + tsmEnhanced.nonce,\n            success: function(response) {\n                if (response.success) {\n                    $message.removeClass('tsm-error').addClass('tsm-success');\n                    $message.html('<strong>Success!<\/strong> ' + response.data.message + \n                                 '<br><br><a href=\"' + response.data.download_url + '\" class=\"tsm-btn tsm-btn-secondary\">Download Trip Sheet<\/a>');\n                    $message.show();\n                    \n                    \/\/ Reset form\n                    $form[0].reset();\n                    calculateCoverageKM();\n                    calculateCoverageHours();\n                    \n                                    } else {\n                    $message.removeClass('tsm-success').addClass('tsm-error');\n                    $message.html('<strong>Error!<\/strong> ' + response.data);\n                    $message.show();\n                }\n            },\n            error: function() {\n                $message.removeClass('tsm-success').addClass('tsm-error');\n                $message.html('<strong>Error!<\/strong> Something went wrong. Please try again.');\n                $message.show();\n            },\n            complete: function() {\n                $submitBtn.prop('disabled', false);\n                $submitBtn.find('.tsm-btn-text').show();\n                $submitBtn.find('.tsm-btn-loading').hide();\n            }\n        });\n    });\n    \n    \/\/ Show\/hide email field based on checkbox\n    $('#send_email').on('change', function() {\n        if ($(this).is(':checked')) {\n            $('#guest_email').prop('required', true);\n        } else {\n            $('#guest_email').prop('required', false);\n        }\n    });\n});\n<\/script>\n\n<style>\n.tsm-enhanced-form-wrapper {\n    max-width: 900px;\n    margin: 30px auto;\n    padding: 30px;\n    background: #fff;\n    border-radius: 8px;\n    box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.tsm-form-header {\n    margin-bottom: 30px;\n    padding-bottom: 20px;\n    border-bottom: 2px solid #4F46E5;\n}\n\n.tsm-form-header h2 {\n    margin: 0 0 10px 0;\n    color: #1e293b;\n    font-size: 28px;\n}\n\n.tsm-form-description {\n    margin: 0;\n    color: #64748b;\n    font-size: 16px;\n}\n\n.tsm-form-section-title {\n    margin: 30px 0 20px 0;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #e2e8f0;\n}\n\n.tsm-form-section-title h3 {\n    margin: 0;\n    color: #4F46E5;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.tsm-form-row {\n    display: flex;\n    gap: 20px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n}\n\n.tsm-form-group {\n    flex: 1;\n    min-width: 200px;\n}\n\n.tsm-col-3 { flex: 0 0 calc(25% - 15px); }\n.tsm-col-4 { flex: 0 0 calc(33.333% - 14px); }\n.tsm-col-6 { flex: 0 0 calc(50% - 10px); }\n.tsm-col-8 { flex: 0 0 calc(66.666% - 7px); }\n.tsm-col-12 { flex: 0 0 100%; }\n\n.tsm-form-group label {\n    display: block;\n    margin-bottom: 8px;\n    color: #334155;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.tsm-form-group label .required {\n    color: #ef4444;\n}\n\n.tsm-form-group input[type=\"text\"],\n.tsm-form-group input[type=\"email\"],\n.tsm-form-group input[type=\"tel\"],\n.tsm-form-group input[type=\"date\"],\n.tsm-form-group input[type=\"time\"],\n.tsm-form-group input[type=\"number\"],\n.tsm-form-group select,\n.tsm-form-group textarea {\n    width: 100%;\n    padding: 10px 12px;\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    font-size: 14px;\n    transition: border-color 0.2s;\n}\n\n.tsm-form-group input:focus,\n.tsm-form-group select:focus,\n.tsm-form-group textarea:focus {\n    outline: none;\n    border-color: #4F46E5;\n    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.tsm-calculated-label {\n    color: #4F46E5 !important;\n    font-weight: 600 !important;\n}\n\n.tsm-calculated-value {\n    padding: 12px 16px;\n    background: #f1f5f9;\n    border: 2px solid #4F46E5;\n    border-radius: 6px;\n    font-size: 18px;\n    font-weight: 700;\n    color: #4F46E5;\n    text-align: center;\n}\n\n.tsm-checkbox-label {\n    display: flex !important;\n    align-items: center;\n    gap: 8px;\n    margin-top: 8px;\n    font-weight: normal !important;\n}\n\n.tsm-checkbox-label input[type=\"checkbox\"] {\n    width: auto;\n}\n\n.tsm-field-description {\n    margin: 5px 0 0 0;\n    font-size: 12px;\n    color: #64748b;\n}\n\n.tsm-form-actions {\n    margin-top: 30px;\n    padding-top: 20px;\n    border-top: 1px solid #e2e8f0;\n    text-align: center;\n}\n\n.tsm-btn {\n    display: inline-block;\n    padding: 12px 32px;\n    font-size: 16px;\n    font-weight: 600;\n    text-decoration: none;\n    border-radius: 6px;\n    border: none;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.tsm-btn-primary {\n    background: #4F46E5;\n    color: #fff;\n}\n\n.tsm-btn-primary:hover {\n    background: #4338ca;\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);\n}\n\n.tsm-btn-primary:disabled {\n    background: #cbd5e1;\n    cursor: not-allowed;\n    transform: none;\n}\n\n.tsm-btn-secondary {\n    background: #10b981;\n    color: #fff;\n    margin-left: 10px;\n}\n\n.tsm-btn-secondary:hover {\n    background: #059669;\n}\n\n.tsm-spinner {\n    display: inline-block;\n    width: 14px;\n    height: 14px;\n    border: 2px solid rgba(255,255,255,0.3);\n    border-top-color: #fff;\n    border-radius: 50%;\n    animation: tsm-spin 0.6s linear infinite;\n}\n\n@keyframes tsm-spin {\n    to { transform: rotate(360deg); }\n}\n\n.tsm-message {\n    margin-top: 20px;\n    padding: 15px 20px;\n    border-radius: 6px;\n    font-size: 14px;\n}\n\n.tsm-message.tsm-success {\n    background: #d1fae5;\n    border: 1px solid #10b981;\n    color: #065f46;\n}\n\n.tsm-message.tsm-error {\n    background: #fee2e2;\n    border: 1px solid #ef4444;\n    color: #991b1b;\n}\n\n@media (max-width: 768px) {\n    .tsm-enhanced-form-wrapper {\n        padding: 20px;\n    }\n    \n    .tsm-form-row {\n        flex-direction: column;\n    }\n    \n    .tsm-col-3,\n    .tsm-col-4,\n    .tsm-col-6,\n    .tsm-col-8 {\n        flex: 0 0 100%;\n    }\n}\n<\/style>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this: Hi there! I&#8217;m a bike messenger [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":9,"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/madhu.nixelsystems.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}