{{define "document-purchase-order-view"}}
<div class="box">
    <div class="columns">
        <div class="column">
            <h1 class="title">
                Purchase Order: {{.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 PO</span>
                </button>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="columns">
            <div class="column is-half">
                <table class="table is-fullwidth">
                    <tbody>
                        <tr>
                            <th>PO 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-warning">Purchase Order</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Purchase Order Details -->
    <div class="box has-background-light">
        <h3 class="title is-5">Purchase Order Details</h3>
        <form>
            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Principle</label>
                        <div class="control">
                            <div class="select">
                                <select name="principle_id">
                                    <option value="">Select Principle</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Principle Reference</label>
                        <div class="control">
                            <input class="input" type="text" name="principle_reference" placeholder="Reference number">
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label">Description</label>
                <div class="control">
                    <input class="input" type="text" name="description" placeholder="PO Description">
                </div>
            </div>

            <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">Dispatch Date</label>
                        <div class="control">
                            <input class="input" type="date" name="dispatch_date">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Arrival Date</label>
                        <div class="control">
                            <input class="input" type="date" name="arrival_date">
                        </div>
                    </div>
                </div>
            </div>

            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Ordered From</label>
                        <div class="control">
                            <input class="input" type="text" name="ordered_from">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Dispatch By</label>
                        <div class="control">
                            <input class="input" type="text" name="dispatch_by">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Deliver To</label>
                        <div class="control">
                            <input class="input" type="text" name="deliver_to">
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label">Freight Forwarder</label>
                <div class="control">
                    <div class="select is-fullwidth">
                        <select name="freight_forwarder">
                            <option value="">Select Freight Forwarder</option>
                            <option>DHL</option>
                            <option>FedEx</option>
                            <option>TNT</option>
                            <option>Other</option>
                        </select>
                    </div>
                </div>
            </div>

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

            <div class="field">
                <div class="control">
                    <button type="submit" class="button is-primary">Save PO Details</button>
                </div>
            </div>
        </form>
    </div>
</div>
{{end}}