@extends('admin.layout')
@section('title', 'Loại tiền thanh toán')
@section('heading', 'Loại tiền / phương thức thanh toán')

@section('content')
    <div class="pkg-grid">
        <div class="admin-panel" style="flex:1;">
            <div class="panel-head"><h2>Phương thức đang có ({{ $methods->count() }})</h2></div>
            <div class="table-wrap">
                <table class="admin-table">
                    <thead>
                        <tr><th>#</th><th>Mã</th><th>Tên hiển thị</th><th>Loại</th><th>Trạng thái</th><th></th></tr>
                    </thead>
                    <tbody>
                        @php $kinds = ['fiat' => 'Tiền pháp định', 'crypto' => 'Tiền ảo (crypto)', 'balance' => 'Số dư tài khoản']; @endphp
                        @forelse($methods as $m)
                            <tr>
                                <td>{{ $m->id }}</td>
                                <td><code>{{ $m->code }}</code></td>
                                <td>{{ $m->name }}</td>
                                <td>{{ $kinds[$m->kind] ?? $m->kind }}</td>
                                <td>{!! $m->active ? '<span class="status-pill st-success">Bật</span>' : '<span class="status-pill st-failed">Tắt</span>' !!}</td>
                                <td class="row-actions">
                                    <button type="button" class="btn-ghost sm" onclick='editPay(@json($m))'>Sửa</button>
                                    <form method="POST" action="{{ route('admin.payments.delete', $m) }}" onsubmit="return confirm('Xóa phương thức này?')">
                                        @csrf @method('DELETE')
                                        <button class="btn-ghost sm danger">Xóa</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="empty">Chưa có phương thức nào.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="pkg-form card-panel">
            <h3 id="payTitle">Thêm phương thức</h3>
            <form method="POST" action="{{ route('admin.payments.store') }}" id="payForm" data-store="{{ route('admin.payments.store') }}">
                @csrf
                <input type="hidden" name="_method" value="POST" id="payMethod">
                <label class="fld" id="codeFld"><span>Mã (vd: bank, binance, momo)</span>
                    <input type="text" name="code" class="input" required placeholder="binance">
                </label>
                <label class="fld"><span>Tên hiển thị</span>
                    <input type="text" name="name" class="input" required placeholder="Ví Binance (USDT)">
                </label>
                <label class="fld"><span>Loại tiền</span>
                    <select name="kind" class="input">
                        <option value="fiat">Tiền pháp định (VND, chuyển khoản)</option>
                        <option value="crypto">Tiền ảo (crypto)</option>
                        <option value="balance">Số dư tài khoản</option>
                    </select>
                </label>
                <label class="chk"><input type="checkbox" name="active" value="1" checked> Cho phép sử dụng</label>
                <button type="submit" class="btn-install" style="margin-top:12px;">Lưu</button>
                <button type="button" class="btn-ghost" style="width:100%;margin-top:8px;display:none;" id="payCancel" onclick="resetPay()">Hủy sửa</button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
var payForm = document.getElementById('payForm');
function editPay(m) {
    payForm.action = '{{ url('admin/payments') }}/' + m.id;
    document.getElementById('payMethod').value = 'PUT';
    document.getElementById('codeFld').style.display = 'none';
    payForm.querySelector('[name=name]').value = m.name;
    payForm.querySelector('[name=kind]').value = m.kind;
    payForm.querySelector('[name=active]').checked = !!m.active;
    document.getElementById('payTitle').textContent = 'Sửa: ' + m.code;
    document.getElementById('payCancel').style.display = '';
}
function resetPay() {
    payForm.reset();
    payForm.action = payForm.dataset.store;
    document.getElementById('payMethod').value = 'POST';
    document.getElementById('codeFld').style.display = '';
    document.getElementById('payTitle').textContent = 'Thêm phương thức';
    document.getElementById('payCancel').style.display = 'none';
}
</script>
@endpush