<div class="container-fluid">
  <div class="row">
    <!-- Sidebar / list dokumen -->
    <div class="col-md-5">
        <div class="d-flex justify-content-end mb-2">
            <button id="btn-zoom-out" class="btn btn-sm btn-secondary me-2">-</button>
            <button id="btn-zoom-in" class="btn btn-sm btn-secondary">+</button>
        </div>
      <ul class="list-group" id="dokumen-list">
            @if(!is_null($doc_kad_pengenalan))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_kad_pengenalan->pivot->path]) }}">
                    Salinan Kad Pengenalan
                </li>
            @endif
        
     
            @if(!is_null($doc_gambar))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_gambar->pivot->path]) }}">
                    Gambar Berukuran Passport
                </li>
            @endif

            @if(!is_null($doc_lokasi))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_lokasi->pivot->path]) }}">
                    Gambar Lokasi / Pelan
                </li>
            @endif
            
            @if(!is_null($doc_kebenaran))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_kebenaran->pivot->path]) }}">
                    Surat kebenaran pemilik tanah / pemegang rezab /perjanjian yang sah
                </li>
            @endif
            
            @if(!is_null($doc_kenderaan))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_kenderaan->pivot->path]) }}">
                    Gambar Kenderaan
                </li>            
            @endif
            
            @if(!is_null($doc_kenderaan_geran))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_kenderaan_geran->pivot->path]) }}">
                    Salinan Geran Kenderaan
                </li>   
            @endif
            
            @if(!is_null($doc_suntikan_ty2))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_suntikan_ty2->pivot->path]) }}">
                    Salinan Sijil Suntikan TY2 (Pengendali makanan sahaja)
                </li>  
            @endif

            @if(!is_null($doc_kursus_makanan))
                <li class="list-group-item dokumen-item"
                    data-url="{{ route('dokumen.stream', [$permohonan?->id, $doc_kursus_makanan->pivot->path]) }}">
                    Salinan Sijil Kursus Pengendalian Makanan
                </li>  
            @endif
      </ul>
    </div>

    <!-- Pane kanan preview -->
    <div class="col-md-7">
        <div id="preview-container" style="height: 90vh; border: 1px solid #ddd; display:flex;align-items:center;justify-content:center;">
            <canvas id="pdf-canvas" style="width:100%; max-height:100%; object-fit:contain;"></canvas>
        </div>
    </div>
  </div>
</div>