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

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddRfq" aria-labelledby="offcanvasAddRfqLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddRfqLabel" class="offcanvas-title">{{ $isEditMode ? 'Edit Request Quote' : 'Add Request Quote' }}</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-request-quote-form d-flex flex-column flex-fill" id="addRequestQuoteForm" method="POST" action="#" enctype="multipart/form-data">

            <div class="flex-fill overflow-auto px-4 pt-4 pb-3">

                <div class="mb-4 select-full">
                    <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="selectpicker form-select" data-style="btn-default" data-live-search="true" style="width:100%" required>
                        <option value="">Select Sub / Vendor</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>

                <!-- Trade -->
                <div class="mb-4">
                    <label for="trade" class="form-label">Trade <span class="text-danger">*</span></label>
                    <select id="trade" name="trade" class="selectpicker w-100" data-style="btn-default" data-live-search="true" required>
                        <option value="">Select Trade</option>
                        <option value="electrical" >Electrical</option>
                        <option value="plumbing" >Plumbing</option>
                        <option value="hvac" >HVAC</option>
                        <option value="carpentry">Carpentry</option>
                        <option value="concrete" >Concrete</option>
                        <option value="roofing" >Roofing</option>
                        <option value="painting" >Painting</option>
                        <option value="landscaping" >Landscaping</option>
                    </select>
                </div>

                <!-- Job -->
                <div class="mb-4 select-full">
                    <label class="form-label" for="add-job">Job <span class="text-danger">*</span></label>
                    <select id="add-job" name="job" class="selectpicker form-select" data-style="btn-default" data-live-search="true" required>
                        <option value="">Select Job</option>
                        <option value="1" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F1</span><div><div>Fraser Lot 1 (Fr-L1)</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>" >Fraser Lot 1 (Fr-L1)</option>
                        <option value="2" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F2</span><div><div>Fraser Lot 2 (Fr-L2)</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>" >Fraser Lot 2 (Fr-L2)</option>
                        <option value="3" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>F3</span><div><div>Fraser Lot 3 (Fr-L3)</div><span class='text-muted'>81 Fraser ave Monticello NY 12701</span></div></div>" >Fraser Lot 3 (Fr-L3)</option>
                        <option value="4" data-content="<div class='d-flex align-items-center'><span class='avatar-initial rounded-circle bg-label-warning me-2' style='width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;'>KR</span><div><div>Krula</div><span class='text-muted'>Krula Project Address</span></div></div>" >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">Requested By <span class="text-danger">*</span></label>
                    <select id="add-requested-by" name="requested_by" class="form-select" data-live-search="true" required>
                        <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 <span class="text-danger">*</span></label>
                    <select id="add-ordered-by" name="ordered_by" class="form-select" data-live-search="true" required>
                        <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">
                    <label class="form-label" for="add-vendor-proposal">Vendor Proposal #</label>
                    <input type="text" class="form-control" id="add-vendor-proposal" name="vendor_proposal" placeholder="Enter vendor proposal number" value="{{ $rfq['vendor_proposal'] ?? '' }}" />
                </div>

                <!-- Bid Amount (Edit Mode Only) -->
                <div class="mb-4">
                    <label class="form-label" for="add-bid-amount">Bid Amount</label>
                    <input type="number" step="0.01" class="form-control" id="add-bid-amount" name="bid_amount" placeholder="Enter bid amount" value="{{ $rfq['bid_amount'] ?? '' }}" />
                </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" data-live-search="true" 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>

                <!-- Ordered By -->
                <div class="mb-4">
                    <label class="form-label" for="add-ordered-by">Ordered By <span class="text-danger">*</span></label>
                    <select id="add-ordered-by" name="ordered_by" class="form-select" data-live-search="true" required>
                        <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>



                <!-- 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>