@extends('layouts.app')
@section('title', '領取登記 - 閱讀卡管理平台')
@section('content')
<div class="card">
    <div class="card-header"><h5 class="mb-0"><i class="bi bi-box-arrow-in-down me-1"></i>領取登記</h5></div>
    <div class="card-body">
        <form method="POST" action="{{ route('card.receive') }}">
            @csrf
            <input type="hidden" name="category" value="{{ $category }}">
            <div id="receiveList">
                <div class="row g-3 mb-2 receive-item">
                    <div class="col-md-4">
                        <input type="text" class="form-control" name="applies[0][apply_id]" placeholder="申請編號">
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-outline-success" onclick="addRow()"><i class="bi bi-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="mt-3 d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>確認領取</button>
                <a href="{{ route('card.index', ['category' => $category]) }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
let rowCount = 1;
function addRow() {
    const div = document.createElement('div');
    div.className = 'row g-3 mb-2 receive-item';
    div.innerHTML = '<div class="col-md-4"><input type="text" class="form-control" name="applies['+rowCount+'][apply_id]" placeholder="申請編號"></div><div class="col-auto"><button type="button" class="btn btn-outline-danger" onclick="this.closest(\'.receive-item\').remove()"><i class="bi bi-dash"></i></button></div>';
    document.getElementById('receiveList').appendChild(div);
    rowCount++;
}
</script>
@endpush
@endsection