<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="PortalPeople_ShippingFields::css/shipping-fields.css"/>
    </head>
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <!-- Shipping Information Section - Always visible -->
                                                <item name="shipping-information" xsi:type="array">
                                                    <item name="component" xsi:type="string">uiComponent</item>
                                                    <item name="displayArea" xsi:type="string">shipping-information</item>
                                                    <item name="sortOrder" xsi:type="string">100</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="template" xsi:type="string">PortalPeople_ShippingFields/shipping-information</item>
                                                    </item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-fields-fieldset" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shipping-fields-fieldset</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="shipping-date" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="customScope" xsi:type="string">shippingFields</item>
                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
                                                                    </item>
                                                                    <item name="dataScope" xsi:type="string">shippingFields.shipping_date</item>
                                                                    <item name="label" xsi:type="string" translate="true">Preferred Shipping Date</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="sortOrder" xsi:type="string">10</item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="boolean">false</item>
                                                                    </item>
                                                                    <item name="options" xsi:type="array">
                                                                        <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                                                                        <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
                                                                        <item name="showsTime" xsi:type="boolean">false</item>
                                                                        <item name="minDate" xsi:type="string">0</item>
                                                                    </item>
                                                                </item>
                                                                <item name="shipping-message" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/textarea</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="customScope" xsi:type="string">shippingFields</item>
                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/textarea</item>
                                                                    </item>
                                                                    <item name="dataScope" xsi:type="string">shippingFields.shipping_message</item>
                                                                    <item name="label" xsi:type="string" translate="true">Shipping Instructions</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="sortOrder" xsi:type="string">20</item>
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="boolean">false</item>
                                                                        <item name="max_text_length" xsi:type="number">255</item>
                                                                    </item>
                                                                    <item name="rows" xsi:type="number">3</item>
                                                                    <item name="placeholder" xsi:type="string" translate="true">Any special shipping instructions...</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
