@php($user = auth()->user())
<div class="card mt-3" id="dokumen">
    <div class="card-header bg-white fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="bi bi-file-earmark-pdf"></i> Dokumen Pembeli <span class="badge text-bg-light border">{{ $pembeli->dokumen->count() }}</span></span>
        <button class="btn btn-sm btn-primary" data-bs-toggle="collapse" data-bs-target="#formDokumen"><i class="bi bi-upload"></i> Unggah PDF</button>
    </div>
    <div class="collapse @if($errors->hasAny(['dokumen', 'dokumen.*'])) show @endif" id="formDokumen">
        <form method="POST" action="{{ route('pembeli.dokumen.store', $pembeli) }}" enctype="multipart/form-data" class="card-body border-bottom bg-light">
            @csrf
            @include('pembeli._input-dokumen', ['wajib' => true])
            <button class="btn btn-primary btn-sm mt-2"><i class="bi bi-cloud-upload"></i> Simpan Dokumen</button>
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-sm align-middle mb-0">
            <thead class="table-light"><tr><th>Jenis</th><th>Berkas</th><th>Diunggah</th><th class="text-end">Aksi</th></tr></thead>
            <tbody>
            @forelse($pembeli->dokumen as $d)
                <tr>
                    <td><span class="badge text-bg-info-subtle text-info-emphasis border">{{ $d->jenis_label }}</span>
                        @if($d->keterangan)<div class="small text-muted">{{ $d->keterangan }}</div>@endif</td>
                    <td><a href="{{ route('dokumen-pembeli.show', $d) }}" target="_blank" rel="noopener" class="text-decoration-none">
                            <i class="bi bi-file-earmark-pdf text-danger"></i> {{ \Illuminate\Support\Str::limit($d->nama_asli, 40) }}</a>
                        <div class="small text-muted">{{ $d->ukuran_format }}</div></td>
                    <td class="small">{{ $d->created_at->translatedFormat('d M Y H:i') }}<br><span class="text-muted">{{ $d->pengunggah?->name ?? '-' }}</span></td>
                    <td class="text-end text-nowrap">
                        <a href="{{ route('dokumen-pembeli.show', $d) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-info" title="Lihat"><i class="bi bi-eye"></i></a>
                        <a href="{{ route('dokumen-pembeli.show', [$d, 'unduh' => 1]) }}" class="btn btn-sm btn-outline-secondary" title="Unduh"><i class="bi bi-download"></i></a>
                        <button type="button" class="btn btn-sm btn-outline-warning" title="Ubah jenis / keterangan"
                                data-bs-toggle="modal" data-bs-target="#modalDokumen" data-action="{{ route('dokumen-pembeli.update', $d) }}"
                                data-jenis="{{ $d->jenis }}" data-keterangan="{{ $d->keterangan }}"><i class="bi bi-pencil"></i></button>
                        @if($user->peran('admin', 'kasir') || $d->user_id === $user->id)
                        <form method="POST" action="{{ route('dokumen-pembeli.destroy', $d) }}" class="d-inline" data-confirm="Hapus dokumen {{ $d->jenis_label }} ini?">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger" title="Hapus"><i class="bi bi-trash"></i></button>
                        </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="4" class="text-center text-muted py-3">Belum ada dokumen. Unggah KTP, KK, NPWP, slip gaji, dll. dalam format PDF.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @php($kurang = collect(['ktp', 'kk', 'npwp'])->diff($pembeli->dokumen->pluck('jenis')))
    @if($kurang->isNotEmpty())
        <div class="card-footer bg-white small text-muted"><i class="bi bi-exclamation-circle text-warning"></i>
            Belum ada: {{ $kurang->map(fn ($j) => \App\Models\DokumenPembeli::JENIS[$j])->join(', ') }}</div>
    @endif
</div>

<div class="modal fade" id="modalDokumen" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" class="modal-content">
            @csrf @method('PUT')
            <div class="modal-header"><h6 class="modal-title">Ubah Data Dokumen</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <label class="form-label small">Jenis</label>
                <select name="jenis" class="form-select mb-2">
                    @foreach(\App\Models\DokumenPembeli::JENIS as $k => $v)<option value="{{ $k }}">{{ $v }}</option>@endforeach
                </select>
                <label class="form-label small">Keterangan</label>
                <input type="text" name="keterangan" maxlength="150" class="form-control">
            </div>
            <div class="modal-footer"><button class="btn btn-primary">Simpan</button></div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('modalDokumen').addEventListener('show.bs.modal', e => {
    const m = e.currentTarget, t = e.relatedTarget;
    m.querySelector('form').action = t.dataset.action;
    m.querySelector('[name=jenis]').value = t.dataset.jenis;
    m.querySelector('[name=keterangan]').value = t.dataset.keterangan ?? '';
});
</script>
@endpush