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

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddVendor" aria-labelledby="offcanvasAddVendorLabel">
    <div class="offcanvas-header border-bottom">
        <h5 id="offcanvasAddVendorLabel" class="offcanvas-title">{{ $isEditMode ? 'Edit Vendor' : 'Add Vendor' }}</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-vendor-form d-flex flex-column flex-fill" id="addVendorForm" method="POST" action="#" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" id="vendor-record-id" value="{{ $isEditMode ? ($vendor->id ?? '') : '' }}" />

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


                <!-- Sub Vendor -->
                <div class="mb-4">
                    <label class="form-label" for="add-sub-vendor">Sub Vendor <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="add-sub-vendor" name="sub_vendor" placeholder="Enter vendor name" value="" required />
                </div>

                <!-- Address -->
                <div class="mb-4">
                    <label class="form-label" for="add-address">Address</label>
                    <textarea class="form-control" id="add-address" name="address" rows="2" placeholder="Enter address"></textarea>
                </div>

                <!-- City -->
                <div class="mb-4">
                    <label class="form-label" for="add-city">City</label>
                    <input type="text" class="form-control" id="add-city" name="city" placeholder="Enter city" value="" />
                </div>

                <!-- State -->
                <div class="mb-4">
                    <label class="form-label" for="add-state">State</label>
                    <input type="text" class="form-control" id="add-state" name="state" placeholder="Enter state" value="" />
                </div>

                <!-- Zip -->
                <div class="mb-4">
                    <label class="form-label" for="add-zip">Zip</label>
                    <input type="text" class="form-control" id="add-zip" name="zip" placeholder="Enter zip code" value="" />
                </div>

                <!-- Phone Number -->
                <div class="mb-4">
                    <label class="form-label" for="add-phone-number">Phone Number</label>
                    <input type="text" class="form-control" id="add-phone-number" name="phone_number" placeholder="Enter phone number" value="" />
                </div>

                <!-- A/R Contact -->
                <div class="mb-4">
                    <label class="form-label" for="add-ar-contact">A/R Contact</label>
                    <input type="text" class="form-control" id="add-ar-contact" name="ar_contact" placeholder="Enter A/R contact" value="" />
                </div>

                <!-- Preferred Payment Method -->
                <div class="mb-4">
                    <label class="form-label" for="add-payment-method">Preferred Payment Method</label>
                    <select id="add-payment-method" name="preferred_payment_method" class="form-select">
                        <option value="">Select</option>
                        <option value="check">Check</option>
                        <option value="ach">ACH/Bank Transfer</option>
                        <option value="wire">Wire Transfer</option>
                        <option value="credit_card">Credit Card</option>
                        <option value="cash">Cash</option>
                        <option value="eft">EFT</option>
                    </select>
                </div>



            </div>

            <!-- Footer with submit button -->
            <div class="offcanvas-footer border-top p-4 mt-auto">
                <button type="submit" class="btn btn-primary w-100">Submit</button>
            </div>
        </form>
    </div>
</div>