@extends('layouts.app')
@section('title', '閱讀卡申請列表 - 閱讀卡管理平台')
@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="bi bi-credit-card me-1"></i>閱讀卡申請列表</h5>
    </div>
    <div class="card-body">
        {{-- 狀態分頁標籤 --}}
        <ul class="nav nav-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link {{ $category == 'all' ? 'active' : '' }}" href="{{ route('card.index', ['category' => 'all']) }}">全部</a>
            </li>
            @foreach(config('ilccard.status') as $key => $label)
            <li class="nav-item">
                <a class="nav-link {{ (string)$category === (string)$key ? 'active' : '' }}" href="{{ route('card.index', ['category' => $key]) }}">{{ $label }}</a>
            </li>
            @endforeach
        </ul>

        {{-- 功能按鈕列 --}}
        <div class="d-flex gap-2 mb-3">
            <button type="button" class="btn btn-sm btn-info text-white" onclick="batchAction('{{ route('card.export') }}')">
                <i class="bi bi-download me-1"></i>閱讀卡製卡
            </button>
            <button type="button" class="btn btn-sm btn-info text-white" onclick="batchAction('{{ route('report.receipt.pdf') }}')">
                <i class="bi bi-printer me-1"></i>收據列印
            </button>
            <button type="button" class="btn btn-sm btn-success" onclick="batchAction('{{ route('card.activation') }}')">
                <i class="bi bi-key me-1"></i>開卡
            </button>
            <button type="button" class="btn btn-sm btn-warning" onclick="batchAction('{{ route('card.notice') }}')">
                <i class="bi bi-envelope me-1"></i>通知
            </button>
            <a href="{{ route('card.receive', ['category' => $category]) }}" class="btn btn-sm btn-primary">
                <i class="bi bi-box-arrow-in-down me-1"></i>閱讀卡領取
            </a>
        </div>

        <form method="POST" id="batchForm">
            @csrf
            <div class="table-responsive">
                <table class="table table-bordered table-hover table-sm align-middle" id="cardTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 40px;" data-dt-order="disable"><input type="checkbox" id="selectAll" class="form-check-input"></th>
                            <th>編號</th>
                            <th>申請者</th>
                            <th>學校名稱</th>
                            <th>申請時間</th>
                            <th>申請狀態</th>
                            <th>製卡原因</th>
                            <th data-dt-order="disable">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
var statusBadgeMap = {
    '-2': 'neg2', '-1': 'neg1', '0': '0', '1': '1', '2': '2', '3': '3', '4': '4'
};

var cardTable = $('#cardTable').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ route("card.index", ["category" => $category]) }}',
    order: [[4, 'desc']],
    columns: [
        {
            data: 'apply_id',
            orderable: false,
            searchable: false,
            render: function(data) {
                return '<input type="checkbox" name="apply[]" value="' + data + '" class="form-check-input row-check">';
            }
        },
        { data: 'apply_id' },
        { data: 'applicant' },
        { data: 'school' },
        { data: 'timestamp' },
        {
            data: 'status',
            render: function(data, type, row) {
                var cls = statusBadgeMap[String(row.status_code)] || '0';
                return '<span class="badge status-badge-' + cls + '">' + data + '</span>';
            }
        },
        { data: 'type' },
        {
            data: 'apply_id',
            orderable: false,
            searchable: false,
            render: function(data, type, row) {
                var html = '<div class="d-flex gap-1">';
                html += '<a href="/card/view/' + data + '?category={{ $category }}" class="btn btn-sm btn-info text-white"><i class="bi bi-list-ul me-1"></i>檢視</a>';
                html += '<div class="btn-group btn-group-sm"><button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"><i class="bi bi-gear me-1"></i>操作</button>';
                html += '<ul class="dropdown-menu">';
                html += '<li><a class="dropdown-item" href="#" onclick="singleAction(' + data + ', \'{{ route("card.activation") }}\'); return false;"><i class="bi bi-key me-1"></i>開卡</a></li>';
                html += '<li><a class="dropdown-item" href="#" onclick="singleAction(' + data + ', \'{{ route("report.receipt.pdf") }}\'); return false;"><i class="bi bi-printer me-1"></i>收據列印</a></li>';
                html += '<li><a class="dropdown-item" href="#" onclick="singleAction(' + data + ', \'{{ route("card.notice") }}\'); return false;"><i class="bi bi-envelope me-1"></i>通知</a></li>';
                html += '</ul></div>';
                html += '<div class="btn-group btn-group-sm"><button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown"><i class="bi bi-arrow-right-circle me-1"></i>狀態</button>';
                html += '<ul class="dropdown-menu">';
                html += '<li><a class="dropdown-item" href="#" onclick="submitFinish(' + data + ', -1); return false;"><i class="bi bi-x-circle me-1"></i>取消</a></li>';
                html += '<li><a class="dropdown-item" href="#" onclick="submitFinish(' + data + ', 2); return false;"><i class="bi bi-gear me-1"></i>製卡中</a></li>';
                html += '<li><a class="dropdown-item" href="#" onclick="submitFinish(' + data + ', 3); return false;"><i class="bi bi-check-circle me-1"></i>完成</a></li>';
                html += '<li><a class="dropdown-item" href="#" onclick="submitFinish(' + data + ', 4); return false;"><i class="bi bi-box-arrow-in-down me-1"></i>已領取</a></li>';
                html += '</ul></div></div>';
                return html;
            }
        }
    ]
});

$('#cardTable').on('draw.dt', function() {
    document.getElementById('selectAll').checked = false;
});
document.getElementById('selectAll').addEventListener('change', function() {
    document.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
});

function batchAction(url) {
    var form = document.getElementById('batchForm');
    var checked = form.querySelectorAll('.row-check:checked');
    if (checked.length === 0) {
        alert('請先勾選要處理的申請紀錄！');
        return;
    }
    form.action = url;
    form.submit();
}

function singleAction(id, url) {
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = url;
    form.innerHTML = '@csrf<input name="apply[]" value="' + id + '"><input name="category" value="{{ $category }}">';
    document.body.appendChild(form);
    form.submit();
}

function submitFinish(id, status) {
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = '/card/finish/' + id;
    form.innerHTML = '@csrf<input name="status" value="' + status + '"><input name="category" value="{{ $category }}">';
    document.body.appendChild(form);
    form.submit();
}
</script>
@endpush
@endsection