@php
    $isEditMode = isset($po) && !empty($po);
@endphp

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddPo" aria-labelledby="offcanvasAddPoLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddPoLabel" class="offcanvas-title">{{ $isEditMode ? 'Edit Purchase Order' : 'Add Purchase Order' }}</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body d-flex flex-column p-0">
        <form class="add-purchase-order-form d-flex flex-column flex-fill" id="addPurchaseOrderForm" method="POST" action="#" enctype="multipart/form-data">

            <div class="flex-fill overflow-auto px-4 pt-4 pb-3">
                <div class="mb-4">
                    <label class="form-label" for="add-rfq-number">RFQ Number</label>
                    <input type="text" class="form-control" id="rfq-number" name="" value=""  placeholder="Enter RFQ Number"/>
                </div>


                <!-- Sub / Vendor -->
                <div class="mb-4">
                    <label class="form-label" for="add-sub-vendor">Sub / Vendor <span class="text-danger">*</span></label>
                    <select id="add-sub-vendor" name="sub_vendor" class="form-select" required>
                        <option value="">Select</option>
                        <option value="1" >DOORWAY INTERIORS INC</option>
                        <option value="2" >LAZER MAINTENANCE INC</option>
                        <option value="3" >WPS</option>
                        <option value="4" >WINDOHR</option>
                        <option value="5" >ABC Electric Co.</option>
                        <option value="6" >FlowMaster Plumbing</option>
                        <option value="7" >CoolAir Systems</option>
                        <option value="8" >Precision Woodworks</option>
                        <option value="9" >PowerGrid Solutions</option>
                        <option value="10" >SolidBase Concrete</option>
                    </select>
                </div>

                <!-- Trade -->
                <div class="mb-4">
                    <label class="form-label" for="add-trade">Trade <span class="text-danger">*</span></label>
                    <select id="add-trade" name="trade" class="form-select" required>
                        <option value="">Select</option>
                        <option value="1" >Doors & trim</option>
                        <option value="2" >Convectors</option>
                        <option value="3" >Plumbing</option>
                        <option value="4" >Drainage</option>
                        <option value="5" >Temp toilet</option>
                        <option value="6" >Electrical</option>
                        <option value="7" >HVAC</option>
                        <option value="8" >Carpentry</option>
                        <option value="9" >Concrete</option>
                        <option value="10" >Roofing</option>
                        <option value="11" >Painting</option>
                        <option value="12" >Landscaping</option>
                    </select>
                </div>




                <!-- Job -->
                <div class="mb-4">
                    <label class="form-label" for="add-job">Job <span class="text-danger">*</span></label>
                    <select id="add-job" name="job" class="form-select" required>
                        <option value="">Select</option>
                        <option value="1" >Fr-L1</option>
                        <option value="2" >Fr-L2</option>
                        <option value="3" >Fr-L3</option>
                        <option value="4" >Krula</option>
                    </select>
                </div>

                <!-- Budget Amount -->
                <div class="mb-4">
                    <label class="form-label" for="add-budget-amount">Budget Amount</label>
                    <input type="number" step="0.01" class="form-control" id="add-budget-amount" name="budget_amount" placeholder="Enter budget amount" value="" />
                </div>

                <!-- Requested By -->
                {{--<div class="mb-4">
                    <label class="form-label" for="add-requested-by">RFQ Requested By</label>
                    <select id="add-requested-by" name="requested_by" class="form-select">
                        <option value="">Select</option>
                        <option value="1" >John Smith</option>
                        <option value="2" >Sarah Williams</option>
                        <option value="3" >David Miller</option>
                        <option value="4" >Emily Davis</option>
                        <option value="5" >Robert Brown</option>
                        <option value="6" >Lisa Wilson</option>
                        <option value="7" >Michael Johnson</option>
                        <option value="8" >Amanda Martinez</option>
                        <option value="9" >James Taylor</option>
                    </select>
                </div>

                <!-- Ordered By -->
                <div class="mb-4">
                    <label class="form-label" for="add-ordered-by">Ordered By </label>
                    <select id="add-ordered-by" name="ordered_by" class="form-select">
                        <option value="">Select</option>
                        <option value="1">John Smith</option>
                        <option value="2" >Sarah Williams</option>
                        <option value="3" >David Miller</option>
                        <option value="4" >Emily Davis</option>
                        <option value="5" >Robert Brown</option>
                        <option value="6" >Lisa Wilson</option>
                        <option value="7" >Michael Johnson</option>
                        <option value="8" >Amanda Martinez</option>
                        <option value="9" >James Taylor</option>
                    </select>
                </div>

                <div class="mb-4 select-full">
                    <label class="form-label" for="add-approved-by">Approved By <span class="text-danger">*</span></label>
                    <select id="add-approved-by" name="approved-by" class="selectpicker form-select" data-style="btn-default" data-live-search="true" style="width:100%" required>
                        <option value="">Approved By</option>
                        <option value="1" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>DI</span><div><div>DOORWAY INTERIORS INC</div><span class='text-muted'>Ny, New York</span></div></div>" >DOORWAY INTERIORS INC</option>
                        <option value="2" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>LM</span><div><div>LAZER MAINTENANCE INC</div><span class='text-muted'>Ny, New York</span></div></div>">LAZER MAINTENANCE INC</option>
                        <option value="3" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>WP</span><div><div>WPS</div><span class='text-muted'>Ny, New York</span></div></div>" >WPS</option>
                        <option value="4" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>WI</span><div><div>WINDOHR</div><span class='text-muted'>Ny, New York</span></div></div>" >WINDOHR</option>
                        <option value="5" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>AE</span><div><div>ABC Electric Co.</div><span class='text-muted'>Ny, New York</span></div></div>" >ABC Electric Co.</option>
                        <option value="6" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>FM</span><div><div>FlowMaster Plumbing</div><span class='text-muted'>Ny, New York</span></div></div>" >FlowMaster Plumbing</option>
                        <option value="7" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>CS</span><div><div>CoolAir Systems</div><span class='text-muted'>Ny, New York</span></div></div>" >CoolAir Systems</option>
                        <option value="8" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>PW</span><div><div>Precision Woodworks</div><span class='text-muted'>Ny, New York</span></div></div>" >Precision Woodworks</option>
                        <option value="9" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>PS</span><div><div>PowerGrid Solutions</div><span class='text-muted'>Ny, New York</span></div></div>" >PowerGrid Solutions</option>
                        <option value="10" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-info me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>SC</span><div><div>SolidBase Concrete</div><span class='text-muted'>Ny, New York</span></div></div>" >SolidBase Concrete</option>
                    </select>
                </div>--}}

                <!-- Vendor Proposal # -->
                <div class="mb-4">
                    <label class="form-label" for="add-vendor-proposal">Vendor Proposal # <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="add-vendor-proposal" name="vendor_proposal" placeholder="Enter vendor proposal number" value="" required }} />
                </div>

                <!-- Bid Amount -->
                <div class="mb-4">
                    <label class="form-label" for="add-bid-amount">Bid Amount <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" class="form-control" id="add-bid-amount" name="bid_amount" placeholder="Enter bid amount" value="" required }} />
                </div>

                <!-- Expense Account -->
                <div class="mb-4">
                    <label class="form-label" for="add-expense-account">Expense Account <span class="text-danger">*</span></label>
                    <select id="add-expense-account" name="expense_account" class="form-select" required>
                        <option value="">Select</option>
                        <option value="1" >Construction Materials</option>
                        <option value="2" >Plumbing Services</option>
                        <option value="3" >HVAC Systems</option>
                        <option value="4" >Carpentry & Millwork</option>
                        <option value="5" >Concrete Work</option>
                        <option value="6" >Roofing Materials</option>
                        <option value="7" >Painting Services</option>
                        <option value="8" >Landscaping</option>
                    </select>
                </div>

                <!-- Invoice Created -->
                <div class="mb-4">
                    <label class="form-label">Invoice Created <span class="text-danger">*</span></label>
                    <div class="d-flex gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="invoice_created" id="invoice-created-yes" value="yes" required>
                            <label class="form-check-label" for="invoice-created-yes">
                                Yes
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="invoice_created" id="invoice-created-no" value="no" required>
                            <label class="form-check-label" for="invoice-created-no">
                                No
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Company -->
                <div class="mb-4">
                    <label class="form-label" for="add-company">Company <span class="text-danger">*</span></label>
                    <select id="add-company" name="company" class="form-select" required>
                        <option value="">Select</option>
                        <option value="1">Company A</option>
                        <option value="2">Company B</option>
                        <option value="3">Company C</option>
                        <option value="4">Company D</option>
                    </select>
                </div>

                <!-- Memo -->
                <div class="mb-4">
                    <label class="form-label" for="add-memo">Memo</label>
                    <textarea class="form-control" id="add-memo" name="memo" rows="3" placeholder="Enter memo"></textarea>
                </div>

            </div>

            <div class="offcanvas-footer border-top px-4 py-3">
                <button type="submit" class="btn btn-primary me-3 data-submit">Save</button>
                <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
            </div>
        </form>
    </div>
</div>