@extends('dashboard.base')

@section('content')
<div class="container mt-4">
    <h3>Purchased Standards</h3>

    @if($purchasedStandards->isEmpty())
        <p>You have not purchased any standards yet.</p>
    @else
        <div class="row">
            @foreach($purchasedStandards as $standard)
                <div class="col-md-6 mb-4">
                    <div class="card p-3" style="background-color: #f8f9fa;">
                        <h5>{{ $standard->standard_title }}</h5>
                        <p><strong>MS Number:</strong> {{ $standard->standard_code }}</p>
                        <p><strong>Amount Paid:</strong> MWK {{ number_format($standard->amount) }}</p> {{-- removed .00 --}}
                        <p><strong>Purchased On:</strong> {{ $standard->created_at }}</p>

                        <button class="btn btn-primary"
                            onclick="viewPDF('{{ $standard->standard_code }}')">
                            View PDF
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- PDF Viewer --}}
    <div class="mt-4" id="pdfViewerContainer" style="display:none;">
        <h4>Standard PDF</h4>
        <iframe id="pdfViewer" src="" width="100%" height="600px" style="border:none;"></iframe>
    </div>
</div>

<script>
function viewPDF(standardCode) {
    const viewer = document.getElementById('pdfViewer');
    const container = document.getElementById('pdfViewerContainer');

    // Replace colon/space with underscore if Node server filenames are sanitized
    const filename = standardCode.replace(/[: ]/g, '_') + '.pdf';

    viewer.src = `http://192.168.0.5:3500/view?file=${encodeURIComponent(filename)}`;
    container.style.display = 'block';

    // Scroll to PDF viewer
    container.scrollIntoView({ behavior: 'smooth' });
}
</script>
@endsection