{{define "document-orderack-view"}}
<div class="box">
    <div class="columns">
        <div class="column">
            <h1 class="title">
                Order Acknowledgement: {{.Document.CmcReference}}
            </h1>
            <p class="subtitle">
                Created {{.Document.Created.Format "2 January 2006"}}
            </p>
        </div>
        <div class="column is-narrow">
            <div class="buttons">
                <button class="button is-primary" onclick="generatePDF()">
                    <span class="icon">
                        <i class="fas fa-file-pdf"></i>
                    </span>
                    <span>Generate PDF</span>
                </button>
                <button class="button is-info" onclick="emailDocument()">
                    <span class="icon">
                        <i class="fas fa-envelope"></i>
                    </span>
                    <span>Email Order Ack</span>
                </button>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="columns">
            <div class="column is-half">
                <table class="table is-fullwidth">
                    <tbody>
                        <tr>
                            <th>Order Ack Number:</th>
                            <td>{{.Document.CmcReference}}</td>
                        </tr>
                        <tr>
                            <th>Created By:</th>
                            <td>
                                {{if and .Document.UserFirstName.Valid .Document.UserLastName.Valid}}
                                    {{.Document.UserFirstName.String}} {{.Document.UserLastName.String}}
                                {{else if .Document.UserUsername.Valid}}
                                    {{.Document.UserUsername.String}}
                                {{else}}
                                    User #{{.Document.UserID}}
                                {{end}}
                            </td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td><span class="tag is-link">Order Acknowledgement</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="column is-half">
                <div class="notification is-light">
                    <p class="has-text-weight-bold">Operations</p>
                    <div class="buttons mt-2">
                        <button class="button is-success is-small" onclick="createInvoice()">
                            <span class="icon">
                                <i class="fas fa-file-invoice"></i>
                            </span>
                            <span>Create Invoice</span>
                        </button>
                        <button class="button is-info is-small" onclick="createPackingList()">
                            <span class="icon">
                                <i class="fas fa-box"></i>
                            </span>
                            <span>Create Packing List</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Acknowledgement Details -->
    <div class="box has-background-light">
        <h3 class="title is-5">Order Acknowledgement Details</h3>
        <form>
            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Currency</label>
                        <div class="control">
                            <div class="select">
                                <select name="currency">
                                    <option>AUD</option>
                                    <option>USD</option>
                                    <option>EUR</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Issue Date</label>
                        <div class="control">
                            <input class="input" type="date" name="issue_date" value="{{.Document.Created.Format "2006-01-02"}}">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Estimated Delivery</label>
                        <div class="control">
                            <input class="input" type="date" name="delivery_date">
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Ship Via</label>
                        <div class="control">
                            <input class="input" type="text" name="ship_via" placeholder="Shipping method">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">FOB</label>
                        <div class="control">
                            <input class="input" type="text" name="fob" placeholder="FOB terms">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Signature Required</label>
                        <div class="control">
                            <div class="select">
                                <select name="signature_required">
                                    <option value="No">No</option>
                                    <option value="Yes">Yes</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label">Payment Terms</label>
                <div class="control">
                    <input class="input" type="text" name="payment_terms" readonly placeholder="From customer">
                </div>
            </div>

            <div class="field">
                <label class="label">Shipping Details</label>
                <div class="control">
                    <textarea class="textarea" name="shipping_details" rows="3">{{.Document.ShippingDetails.String}}</textarea>
                </div>
            </div>

            <div class="field">
                <div class="control">
                    <button type="submit" class="button is-primary">Save Order Ack Details</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
function createInvoice() {
    if (confirm('Create an Invoice from this order acknowledgement?')) {
        // TODO: Implement invoice creation
        alert('Invoice creation coming soon');
    }
}

function createPackingList() {
    if (confirm('Create a Packing List from this order acknowledgement?')) {
        // TODO: Implement packing list creation
        alert('Packing List creation coming soon');
    }
}
</script>
{{end}}