    <div id="freightcom-schedule-pickup-wrapper">
        <h4 class="mb-3">SCHEDULE PICKUP</h4>
        <div class="row">
            <div class="col-md-6">
                <form action="#" method="post" id="wpcc-schedule-pickup">
                    <input type="hidden" name="shipment_id" value="" />
                    <input type="hidden" name="confnum" value="" />
                    <input type="hidden" name="prefix" value="wpcfc_" />
                    <div class="row main-section">
                                                                                <section class="col-md-4 mb-3 d-none">
                                <label for="wpcfc_schedule_pickup_is_pre" class="label-required">Pre Scheduled Pickup?</label>
                                <select class="form-control _custom-select wpcfc_schedule_pickup_is_pre" id="wpcfc_schedule_pickup_is_pre" name="wpcfc_schedule_pickup_is_pre" required><option value="">-- Select --</option><option value="Yes" >Yes</option><option value="No"  selected='selected'>No</option></select>                            </section>
                                                                                <section class="col-md-4 mb-3 ">
                                <label for="wpcfc_schedule_pickup_date" class="label-required">Pickup Date</label>
                                <input class="form-control wpccf-datepicker wpcfc_schedule_pickup_date" type="text" id="wpcfc_schedule_pickup_date" name="wpcfc_schedule_pickup_date" value="" required autocomplete="on" >                            </section>
                                                                                <section class="col-md-4 mb-3 ">
                                <label for="wpcfc_schedule_pickup_ready_at" class="">Ready at</label>
                                <input class="form-control unrequire wpccf-timepicker wpcfc_schedule_pickup_ready_at" type="text" id="wpcfc_schedule_pickup_ready_at" name="wpcfc_schedule_pickup_ready_at" value=""  autocomplete="on" >                            </section>
                                                                                <section class="col-md-4 mb-3 ">
                                <label for="wpcfc_schedule_pickup_ready_until" class="">Ready until</label>
                                <input class="form-control unrequire wpccf-timepicker wpcfc_schedule_pickup_ready_until" type="text" id="wpcfc_schedule_pickup_ready_until" name="wpcfc_schedule_pickup_ready_until" value=""  autocomplete="on" >                            </section>
                                                                                <section class="col-md-4 mb-3 ">
                                <label for="wpcfc_schedule_pickup_location" class="label-required">Location</label>
                                <select class="form-control _custom-select wpcfc_schedule_pickup_location" id="wpcfc_schedule_pickup_location" name="wpcfc_schedule_pickup_location" required><option value="">-- Select --</option><option value="Office" >Office</option><option value="SideDoor" >SideDoor</option><option value="OutsideDoor" >OutsideDoor</option><option value="FrontPorch" >FrontPorch</option><option value="Basement" >Basement</option><option value="FrontDesk" >FrontDesk</option><option value="BetweenDoors" >BetweenDoors</option><option value="Security" >Security</option><option value="Counter" >Counter</option><option value="Lobby" >Lobby</option><option value="Mailbox" >Mailbox</option><option value="GateHouse" >GateHouse</option><option value="Desk" >Desk</option><option value="Kiosk" >Kiosk</option><option value="Shipping" >Shipping</option><option value="ProShop" >ProShop</option><option value="FrontDoor" >FrontDoor</option><option value="Receiving" >Receiving</option><option value="Reception" >Reception</option><option value="BackDoor" >BackDoor</option><option value="Lab" >Lab</option><option value="MailRoom" >MailRoom</option><option value="Garage" >Garage</option><option value="Pharmacy" >Pharmacy</option><option value="ServiceCounter" >ServiceCounter</option><option value="PartsDepartment" >PartsDepartment</option><option value="LoadingDock" >LoadingDock</option></select>                            </section>
                                                                                <section class="col-md-4 mb-3 ">
                                <label for="wpcfc_schedule_pickup_contact_name" class="label-required">Contact Name</label>
                                <input class="form-control wpcfc_schedule_pickup_contact_name" type="text" id="wpcfc_schedule_pickup_contact_name" name="wpcfc_schedule_pickup_contact_name" value="" required autocomplete="on" >                            </section>
                                                                                <section class="col-md-4 mb-3 ">
                                <label for="wpcfc_schedule_pickup_contact_phone" class="label-required">Contact Phone</label>
                                <input class="form-control wpcfc_phone wpcfc_schedule_pickup_contact_phone" type="text" id="wpcfc_schedule_pickup_contact_phone" name="wpcfc_schedule_pickup_contact_phone" value="" required autocomplete="on" >                            </section>
                                                <section class="col-md-12 mb-3">
                            <button type="submit" class="btn btn-primary btn-sm m-0">Submit</button>
                        </section>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        jQuery(document).ready(function($){
            let prefix = 'wpcfc_';
            let ajaxUrl = 'https://kdexpress.ca/wp-admin/admin-ajax.php';
            let timeFormat = 'H:i a';

            $(`input#${prefix}schedule_pickup_ready_until`).datetimepicker({
                datepicker:false,
                scrollInput: false,
                format:timeFormat,
                maxTime: '18:00'
            });
  
            // helper function
            const requiredSetter = (fields, set = true) => {
                fields.each(function(index) {
                let $this = $(this);
                let $label = $this.prev( 'label' );
                if(set){
                    if($label && $label.children().length == 0) {
                    $this.attr('required', set).trigger('change');
                    $label.append( `<span style="color:red;"> *</span>` );
                    } else {
                    $this.attr('required', set).trigger('change');
                    }
                } else {
                    if($label && $label.children().length > 0) {
                    $this.removeAttr('required').trigger('change');
                    $label.find('span').remove();
                    } else {
                    $this.removeAttr('required').trigger('change');
                    }
                }
                });
            }

            function showNotification(type, message, icon = "check"){
                if(type === 'danger'){
                    icon = 'times';
                }
                $('body').append(
                    '<div class="wpcfe-alert alert alert-'+type+'" role="alert">'+
                    '<span class="fa fa-'+icon+'"></span> '+
                    message+
                    '  <span class="fa fa-window-close wpcfe-close-notification"></span>'+
                    '</div>'
                );
            }

            $('div#freightcom-schedule-pickup-wrapper').on('change', `select#${prefix}schedule_pickup_is_pre`, function(){
                let val = $(this).val();
                let divWrapper = $(this).closest('.main-section');
                let divFields = divWrapper.find(`select#${prefix}schedule_pickup_location, input:not(.unrequire)`);
                if(val && val === 'Yes'){
                    requiredSetter(divFields, false);
                } else {
                    requiredSetter(divFields, true);
                }
            });

            $('body').on('submit', 'form#wpcc-schedule-pickup', function(e){
                e.preventDefault();
                let formData = $(this).serialize();
                $.ajax({
                    method: 'post',
                    url: ajaxUrl,
                    data: {
                        action: 'wpcc_schedule_pickup',
                        formData: formData
                    },
                    beforeSend: function() {
                        $( 'body' ).append(`<div class='wpcfe-spinner'></div>`);
                    },
                    success: function( response ) {
                        $( 'body .wpcfe-spinner' ).remove();
                        if(response){
                            const {status, message, redirect} = response;
                            showNotification(status, message);
                            setTimeout(() => {
                                if(status === 'success'){
                                    window.location.href = redirect;
                                }
                            }, 500);
                        }
                    }
                });
            });
        });
    </script>
    {"id":186430,"date":"2024-06-19T17:17:31","date_gmt":"2024-06-20T00:17:31","guid":{"rendered":"https:\/\/kdexpress.ca\/en\/schedule-pickup\/"},"modified":"2024-06-19T17:17:31","modified_gmt":"2024-06-20T00:17:31","slug":"schedule-pickup","status":"publish","type":"page","link":"https:\/\/kdexpress.ca\/vi\/schedule-pickup\/","title":{"rendered":"Schedule Pickup"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":76,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"dashboard.php","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-186430","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kdexpress.ca\/vi\/wp-json\/wp\/v2\/pages\/186430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kdexpress.ca\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kdexpress.ca\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kdexpress.ca\/vi\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/kdexpress.ca\/vi\/wp-json\/wp\/v2\/comments?post=186430"}],"version-history":[{"count":0,"href":"https:\/\/kdexpress.ca\/vi\/wp-json\/wp\/v2\/pages\/186430\/revisions"}],"wp:attachment":[{"href":"https:\/\/kdexpress.ca\/vi\/wp-json\/wp\/v2\/media?parent=186430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}