<div style="display: none;">
    <div id="customerPostcodeReceiverForm">
        <div class="popup-container">
            <?php echo form_open('cart/checkPostcode', array('id' => 'checkPostcodeForm')); ?>
            <div class="tab-group keypad">
                <div class="tab-item tab-item-title">Your delivery postcode</div>
            </div>
            <div class="loader-delivery-type" style="display: none; color: #f0ff00">continue processing...</div>
            <div class="form-error" id="deliveryPostcodeErrorFromcheckPostcodeForm" style="color: #f0ff00;"></div>
            <div class="tab-group" style="padding: 0px; border: none;">
                <input type="text" name="postcode" data-error="#deliveryPostcodeErrorFromcheckPostcodeForm" class="form-control text-uppercase" placeholder="AB1 2BC" style="width: 100%;">
            </div>
            <div style=""><button type="submit" id="deleverypostcodeSubmitButton" class="btn  btn-c btn-lg btn-block text-center" onclick="checkPostcode('checkPostcodeForm')">Submit</button></div>
            <?php echo form_close() ?>
        </div>
    </div>
</div>
<script type="text/javascript">
    function setCustomerDeliveryArea() {
        $.colorbox({
            inline: true,
            scrolling: false,
            href: "#customerPostcodeReceiverForm",
            width: '420px',
            height: 'auto',
            maxWidth: "100%",
            open: true,
            closeButton: true,
            transition: 'none',
            overlayClose: false,
            className: 'transparent-overlay',
            onOpen: function () {
                $('#colorbox').colorbox.resize();
            },
            onLoad: function () {

            },
            onComplete: function () {
            },
            onCleanup: function () {

            },
            onClosed: function () {
                window.location.reload()
            }
        });
    }
    function checkPostcode(formId) {
        $('#' + formId).validate({
            submitHandler: function () {
                var myform = document.getElementById(formId);
                var formdata = new FormData(myform);
                $.ajax({
                    url: $('#' + formId).attr('action'),
                    data: formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function () {
                        $('.loader-delivery-type').show();
                        $('#colorbox').colorbox.resize();
                    },
                    success: function (response) {
                        response.status ? closePopup() : $('#deliveryPostcodeErrorFromcheckPostcodeForm').text(response.message);
                        response.status ? $('.loader-delivery-type').show() : $('.loader-delivery-type').hide();
                    }
                });
            },
            errorClass: "has-error",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
            },
            rules: {postcode: {required: true, postcodeUK: true}},
            messages: {postcode: 'Please enter valid uk postcode'},
            errorPlacement: function (error, element) {
                errorPlacement(error, element);
                $('#colorbox').colorbox.resize();
            }
        });
    }
</script>