{{-- Step 4: Products & Services --}}

{{-- ── Additional Card Types ── --}}
<h6 class="text-muted small fw-semibold mb-3">Additional Card Types</h6>
<div class="row g-3 mb-4">
    <div class="col-12 d-flex gap-4 flex-wrap">
        <div class="custom-control custom-checkbox project-checkbox">
            <input class="custom-control-input form-check-input" type="checkbox" id="ct_amex">
            <label class="custom-control-label" for="ct_amex">Amex</label>
        </div>
        <div class="custom-control custom-checkbox project-checkbox">
            <input class="custom-control-input form-check-input" type="checkbox" id="ct_debit">
            <label class="custom-control-label" for="ct_debit">PIN Debit</label>
        </div>
        <div class="custom-control custom-checkbox project-checkbox">
            <input class="custom-control-input form-check-input" type="checkbox" id="ct_ebt">
            <label class="custom-control-label" for="ct_ebt">EBT</label>
        </div>
        <div class="custom-control custom-checkbox project-checkbox">
            <input class="custom-control-input form-check-input" type="checkbox" id="ct_debit_cashback">
            <label class="custom-control-label" for="ct_debit_cashback">Debit/EBT Cashback</label>
        </div>
        <div class="custom-control custom-checkbox project-checkbox">
            <input class="custom-control-input form-check-input" type="checkbox" id="ct_amex_mktg">
            <label class="custom-control-label" for="ct_amex_mktg">Amex Marketing Materials</label>
        </div>
    </div>

    {{-- EBT fields (shown when EBT is checked) --}}
    <div id="ebtOptions" class="d-none col-12">
        <div class="row g-2">
            <div class="col-md-6">
                <div class="project-form">
                    <label class="form-label mb-0">EBT Service</label>
                    <select id="ct_ebt_service" class="form-control form-control-lg no-search select2">
                        <option value="">Select</option>
                        <option value="CASH_BENEFIT">Cash Benefit</option>
                        <option value="FOOD_STAMP">Food Stamp</option>
                        <option value="CASH_AND_FOOD">Cash &amp; Food</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="project-form">
                    <label class="form-label mb-0">EBT FNS / FCS Number</label>
                    <input type="text" id="ct_ebt_fns" class="form-control form-control-lg only-numeric" maxlength="7" placeholder="7-digit number">
                </div>
            </div>
        </div>
    </div>

    {{-- Amex limit (shown when Amex is checked) --}}
    <div id="amexOptions" class="d-none col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">Amex Annual Volume Limit ($)</label>
            <input type="number" id="ct_amex_limit" class="form-control form-control-lg" min="0" step="0.01">
        </div>
    </div>
</div>

<hr class="my-3">

{{-- ── Product Selection ── --}}
<h6 class="text-muted small fw-semibold mb-1">Product Selection</h6>
<p class="text-muted small mb-3">Minimum one POS is required to transmit an application.</p>
<div class="d-flex gap-2 flex-wrap mb-3">
    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnAddIntegrated">
        <i class="bx bx-plus me-1"></i> Add Integrated
    </button>
    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnAddStandalone">
        <i class="bx bx-plus me-1"></i> Add Standalone
    </button>
    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnAddWebPass">
        <i class="bx bx-plus me-1"></i> Add WebPass
    </button>
    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnAddGenius">
        <i class="bx bx-plus me-1"></i> Add Genius
    </button>
</div>
<div id="productsContainer"></div>

<hr class="my-3">

{{-- ── Add Ons ── --}}
<h6 class="text-muted small fw-semibold mb-1">Add Ons</h6>
<p class="text-muted small mb-3">Additional information is based on your product selection.</p>
<div class="row g-3 mb-4">
    <div class="col-12"><label class="fw-semibold small mb-0">Unsupported POS</label></div>
    <div class="col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">Unsupported POS Monthly Fee ($0&ndash;$50)</label>
            <input type="number" id="ao_unsupported_pos_monthly_fee" class="form-control form-control-lg" min="0" max="50" step="0.01">
        </div>
    </div>
    <div class="col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">Unsupported POS Setup Fee ($0&ndash;$250)</label>
            <input type="number" id="ao_unsupported_pos_setup_fee" class="form-control form-control-lg" min="0" max="250" step="0.01">
        </div>
    </div>

    <div class="col-12"><label class="fw-semibold small mb-0">Data Protection</label></div>
    <div class="col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">Data Protection Per Item Fee <span class="text-danger">*</span> ($0.00000&ndash;$0.01000)</label>
            <input type="number" id="ao_data_protection_per_item_fee" class="form-control form-control-lg required" min="0" max="0.01" step="0.00001">
        </div>
    </div>

    <div class="col-12"><label class="fw-semibold small mb-0">P2PE</label></div>
    <div class="col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">P2PE Per Item Fee (optional, $0.00000&ndash;$0.06000)</label>
            <input type="number" id="ao_p2pe_per_item_fee" class="form-control form-control-lg" min="0" max="0.06" step="0.00001">
        </div>
    </div>
</div>

<hr class="my-3">

{{-- ── Training & Activation Information ── --}}
<h6 class="text-muted small fw-semibold mb-3">Training &amp; Activation Information</h6>
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">Merchant Trained by <span class="text-danger">*</span></label>
            <select id="ta_merchant_trained_by" class="form-control form-control-lg no-search select2" required>
                <option value="">Select</option>
                <option value="AGENT">Agent</option>
                <option value="TRANSFIRST">TransFirst</option>
            </select>
        </div>
    </div>
    <div class="col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">Welcome Kit Emailed to <span class="text-danger">*</span></label>
            <select id="ta_welcome_kit_emailed_to" class="form-control form-control-lg no-search select2" required>
                <option value="">Select</option>
                <option value="AGENT">Agent</option>
                <option value="DBA">DBA</option>
                <option value="LEGAL">Legal</option>
                <option value="NA">N/A</option>
                <option value="OTHER">Other</option>
            </select>
        </div>
    </div>
    <div class="col-md-4">
        <div class="project-form">
            <label class="form-label mb-0">Equipment Shipped to <span class="text-danger">*</span></label>
            <select id="ta_equipment_shipped_to" class="form-control form-control-lg no-search select2" required>
                <option value="">Select</option>
                <option value="AGENT">Agent</option>
                <option value="DBA">DBA</option>
                <option value="LEGAL">Legal</option>
                <option value="NA">N/A</option>
                <option value="OTHER">Other</option>
            </select>
        </div>
    </div>
</div>