<!-- templates/shipping_form.html -->
{#context = {shipment }#}
{% block head %}
    <script src="{{ url_for('static', path='ship.js') }}"></script>
    <link href="{{ url_for('static', path='ship.css') }}" rel="stylesheet">
{% endblock %}
<!--suppress HtmlFormInputWithoutLabel -->
<form id="main-form"
      hx-post="order_summary/"
      hx-target=#content_top
      hx-swap="innerHTML"
>
    <input type="hidden" name="context_json" value="">
    <div class="wrapper wrapper__booking">
        <section class="inputs inputs__ship">
            <h1>Shipment</h1>
            <label for="ship_date">Date:</label>
            <input type="date" id="ship_date" name="shipping_date" required>

            <label for="boxes">Boxes:</label>
            <select id="boxes" name="boxes">
                {% for i in range(1,13) %}
                    <option value="{{ i }}">{{ i }}</option>
                {% endfor %}
            </select>

            <label for="provider_name">Provider:</label>
            <select name="provider_name" id="provider_name">
                <option value="PARCELFORCE" selected>Parcelforce</option>
                <option value="APC">APC</option>
            </select>

            <label for="service">Service:</label>
            <select id="service" name="service">
                <option value="NEXT_DAY" selected>Next Day</option>
                <option value="NEXT_DAY_12">Next Day by Noon</option>
                <option value="NEXT_DAY_9">Next Day by 9AM</option>
                <option value="SATURDAY">Saturday</option>
            </select>

            <label for="direction">Direction:</label>
            <select id="direction" name="direction" onchange="toggleOwnLabel()">
                <option value="out" selected>Outbound</option>
                <option value="in">Inbound Collection</option>
                <option value="dropoff">Inbound Dropoff</option>
            </select>

            <div id="own_label">
                <label>Label Printing:
                    <select name="own_label">
                        <option value="True" selected>We Print Labels</option>
                        <option value="False">Driver Brings Labels</option>
                    </select>
                </label>
            </div>
        </section>

        <section class="inputs inputs__contact">
            <h1>Contact</h1>
            <label for="business_name">Business Name:</label>
            <input type="text" id="business_name" name="business_name" required>

            <label for="contact_name">Contact Name:</label>
            <input type="text" id="contact_name" name="contact_name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email_address" required>

            <label for="mobile_phone">Mobile Phone:</label>
            <input type="tel" id="mobile_phone" name="mobile_phone" required>
            <button type="button"
                    hx-get="/ship/home_mobile_phone"
                    hx-target="#mobile_phone"
                    hx-swap="outerHTML"
                    {#                    hx-on="htmx:afterRequest: document.querySelector('#mobile_phone').value = event.detail.xhr.responseText;"#}
            >
                Use Home Base Mobile
            </button>
        </section>

        <section class="inputs inputs__address">
            <div id="score-span" data-score=""></div>
            <h1>
                <label for="address_line1">Address:</label>
            </h1>
            <input type="text" id="address_line1" name="address_line1" required>
            <!--suppress HtmlFormInputWithoutLabel -->
            <input type="text" id="address_line2" name="address_line2" aria-labelledby="address_line1">
            <!--suppress HtmlFormInputWithoutLabel -->
            <input type="text" id="address_line3" name="address_line3" aria-labelledby="address_line1">
            <label for="town">Town:</label>
            <input type="text" id="town" name="town" required>
            <label for="postcode">Postcode:</label>
            <input type="text" id="postcode" name="postcode" required>

            <button type="button" class="update-address-btn" onclick="loadAddrChoices()">Update Addresses From
                Postcode
            </button>
            <label for="address-select">Choose Address</label>
            <select id="address-select" name="address" onchange="updateAddressFromSelect()">
            </select>
        </section>

        <section class="inputs inputs__notes">
            <label for="reference">Reference:</label>
            <input type="text" id="reference" name="reference" maxlength="120">
        </section>

        <section class="inputs inputs__submit">
            <button type="submit" class="submit-request">Submit</button>
        </section>
    </div>
</form>


<script>
    shipment = {{ shipment.model_dump(mode='json', by_alias=True) | tojson }};
    console.log('shipment', shipment);
    initShipForm(shipment);


</script>
