{{-- Khối "Đổi thẻ cào": Đổi nhanh / Đổi nhiều thẻ + bảng phí --}}
<div class="exchange-head">
    <h2 class="section-title red" style="color:#7f1d1d;">Đổi thẻ cào</h2>
    <div class="pill-tabs">
        <button type="button" class="pill active" id="tabQuick" onclick="switchExchangeTab('quick')">&#10697; Đổi nhanh</button>
        <button type="button" class="pill" id="tabBulk" onclick="switchExchangeTab('bulk')">&#9783; Đổi nhiều thẻ</button>
    </div>
</div>

@if(!empty($showNotice))
    <div class="notice-box">
        - Mua mã thẻ điện thoại, thẻ game online<br>
        - Nạp topup điện thoại giá rẻ tại đây. Nạp topup vào game Teamobi tại đây. Link nạp mã thẻ Carot (Giftcode) tại đây<br>
        - Mua thẻ thông báo Chờ xử lý tức là giao dịch thất bại hệ thống sẽ hoàn lại tiền vào tài khoản Quý khách sau<br>
        - Kết nối API mua thẻ, toup game team, topup tiền điện thoại giá gốc
    </div>
@endif

<form method="POST" action="{{ route('doi-the.submit') }}" id="exchangeForm">
    @csrf

    {{-- Đổi nhanh: các dòng thẻ --}}
    <div class="card-panel exchange-panel" id="quickPanel">
        <div id="cardRows">
            <div class="card-row">
                <div class="field">
                    <label>Loại thẻ</label>
                    <select class="select" name="cards[0][telco]">
                        @foreach($telcos as $telco)
                            <option value="{{ $telco }}">{{ $telco }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>Mã nạp</label>
                    <input class="input" name="cards[0][code]" placeholder="Nhập mã thẻ...">
                </div>
                <div class="field">
                    <label>Serial</label>
                    <input class="input" name="cards[0][serial]" placeholder="Nhập mã serial...">
                </div>
                <div class="field">
                    <label>Mệnh giá</label>
                    <select class="select" name="cards[0][amount]">
                        <option value="">-- Mệnh giá --</option>
                        @foreach($denominations as $d)
                            <option value="{{ $d }}">{{ number_format($d, 0, ',', '.') }}đ</option>
                        @endforeach
                    </select>
                </div>
                <div class="field no-label">
                    <label>&nbsp;</label>
                    <button type="button" class="btn btn-dark" onclick="addCardRow()">+ Thêm</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Đổi nhiều thẻ: textarea --}}
    <div class="card-panel exchange-panel" id="bulkPanel" style="display:none;">
        <div class="field">
            <label>Nhập danh sách thẻ</label>
            <textarea class="input" name="bulk" rows="4" placeholder="Nhập theo định dạng: Loại thẻ | Mệnh giá | Số Serial | Mã thẻ (Mỗi thẻ 1 dòng)"></textarea>
        </div>
    </div>

    <div style="text-align:center; margin-top:26px;">
        <button type="submit" class="btn btn-green">&#10148; Gửi thẻ ngay</button>
    </div>
</form>

<div class="home-section">
    <h2 class="section-title red" style="color:#7f1d1d;">Bảng phí đổi thẻ</h2>
    <div class="fee-table-wrap card-panel" style="box-shadow:none;border:none;">
        <table class="fee-table">
            <thead>
                <tr>
                    <th>Nhóm</th>
                    @foreach($denominations as $d)
                        <th>{{ number_format($d, 0, ',', '.') }}đ</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($feeTable as $group => $fees)
                    <tr>
                        <td>{{ $group }}</td>
                        @foreach($fees as $fee)
                            <td>{{ $fee }}</td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@once
@push('scripts')
<script>
var cardRowIndex = 1;
function addCardRow() {
    var rows = document.getElementById('cardRows');
    var first = rows.querySelector('.card-row');
    var clone = first.cloneNode(true);
    clone.querySelectorAll('select, input').forEach(function (el) {
        el.name = el.name.replace(/cards\[\d+\]/, 'cards[' + cardRowIndex + ']');
        if (el.tagName === 'INPUT') el.value = '';
        else el.selectedIndex = 0;
    });
    var last = clone.querySelector('.field.no-label');
    last.innerHTML = '<label>&nbsp;</label><button type="button" class="btn btn-red" onclick="this.closest(\'.card-row\').remove()">&#128465; Loại bỏ</button>';
    rows.appendChild(clone);
    cardRowIndex++;
}
function switchExchangeTab(tab) {
    var quick = tab === 'quick';
    document.getElementById('tabQuick').classList.toggle('active', quick);
    document.getElementById('tabBulk').classList.toggle('active', !quick);
    document.getElementById('quickPanel').style.display = quick ? '' : 'none';
    document.getElementById('bulkPanel').style.display = quick ? 'none' : '';
}
</script>
@endpush
@endonce