@extends('layouts.appmin')

@section('tajuk')
Pemeriksaan Tapak Permohonan Lesen Penjaja
@endsection

@section('css')

    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <link href="{{ asset('css/jsapi-template-main.css') }}" rel="stylesheet" type="text/css"/>
    <style>
    #viewDiv {
    padding: 0;
    margin: 0;
    height: 500px;
    width: 100%;
    }

    @if($show == 'dokumen')
    #preview-container {
    overflow: auto;
    background: #f9f9f9;
    text-align: center;
    }
    canvas {
    display: inline-block;
    }
    @endif

    </style>
@endsection


@section('breadcrumb')
<ul class="breadcrumbs mb-3">
    <li class="nav-home">
        <a href="#">
        <i class="icon-home"></i>
        </a>
    </li>
    <li class="separator">
        <i class="icon-arrow-right"></i>
    </li>
    <li class="nav-item">
        <a href="#">Penjaja</a>
    </li>
    <li class="separator">
        <i class="icon-arrow-right"></i>
    </li>
    <li class="nav-item">
        <a href="#">Pemeriksaan Tapak</a>
    </li>
    <li class="separator">
        <i class="icon-arrow-right"></i>
    </li>
    <li class="nav-item">
        <a href="#">Papar Permohonan</a>
    </li>
</ul>
@endsection

@section('content')
    <div class="row mb-3">
        <div class="col-md-12">
            <a href="{{route('admin.papar', [$mohon_id])}}" class="btn btn-primary mx-1 my-2">Permohonan</a>
            <a href="{{route('admin.papar-map', [$mohon_id])}}" class="btn btn-primary mx-1 my-2">Peta Lokasi</a>
            <a href="{{route('admin.papar-dokumen', [$mohon_id])}}" class="btn btn-primary mx-1 my-2">Dokumen</a>
            <a href="{{route('admin.papar-wangproses', [$mohon_id])}}" class="btn btn-primary mx-1 my-2">Wang Proses</a>
            
            @if(in_array($permohonan?->status_progress, ['lawatan tapak','ulasan pegawai','ulasan pengarah','sokong dibawa ke mesyuarat','ditangguhkan','keputusan diperolehi']))
            <a href="{{route('admin.papar-pemeriksaan', [$mohon_id])}}" class="btn btn-primary mx-1 my-2">Ulasan 
                @if(in_array($show, ['ulasan ik', 'cadangan pegawai', 'cadangan pengarah']))
                    <i class="fa fa-angle-down" aria-hidden="true"></i>
                @else
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                @endif
            </a>
            <a href="{{route('admin.papar-lesen', [$mohon_id])}}" class="btn btn-primary mx-1 my-2">Lesen </a>
            @endif
            
        </div>
    </div>
    @if($show == 'utama')
        @include('admin.penjaja.partials.pemohon_ssm')
    @elseif($show == 'lokasi')
        @include('admin.penjaja.partials.lokasi')
    @elseif($show == 'dokumen')
        @include('admin.penjaja.partials.dokumen')
    @elseif($show == 'wang proses')
        @include('admin.penjaja.partials.wangproses_nofail')
    @elseif($show == 'lesen')
        @include('admin.penjaja.partials.daftar_lesen')
    @elseif($show == 'ulasan ik')
        @include('admin.penjaja.partials.ulasan')
    @elseif($show == 'cadangan pegawai')
        @include('admin.penjaja.partials.cadangan_pegawai')
    @elseif($show == 'cadangan pengarah')
        @include('admin.penjaja.partials.ulasan_cadangan_pegawai')
    @endif
@endsection

@section('js')
  <!-- Select2 -->
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>

    @if($show == 'dokumen')

	<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist/wasm/openjpeg_nowasm_fallback.min.js"></script>
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js"></script>

    <script type="module">
    
    let currentUrl = null;
    let zoom = 1.0;

    
    $(document).ready(function() {
        $('.dokumen-item').on('click', function() {
        let url = $(this).data('url');
        currentUrl = url;
        loadFile(url);
        });

        // attach button listeners (module-safe)
        document.getElementById('btn-zoom-in').addEventListener('click', () => {
        zoom += 0.2;
        if (currentUrl) loadFile(currentUrl);
        });
        document.getElementById('btn-zoom-out').addEventListener('click', () => {
        zoom = Math.max(0.5, zoom - 0.2);
        if (currentUrl) loadFile(currentUrl);
        });
    });

    function loadFile(url) {
        const ext = url.split('.').pop().toLowerCase();
        if (['pdf'].includes(ext)) {
        loadPDF(url);
        } else if (['jpg','jpeg','png'].includes(ext)) {
        loadImage(url);
        } else {
        console.warn("Format tak disokong:", ext);
        }
    }

    // ... (sertakan semula loadPDF dan loadImage dari code kau)
    function loadPDF(url){
        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');
        const container = document.getElementById('preview-container');

        pdfjsLib.getDocument(url).promise.then(pdf => {
        pdf.getPage(1).then(page => {
            const containerWidth = container.clientWidth;
            const viewport = page.getViewport({ scale: 1 });
            const scale = (containerWidth / viewport.width) * zoom;
            const scaledViewport = page.getViewport({ scale: scale });
            const outputScale = window.devicePixelRatio || 1;

            canvas.width = Math.floor(scaledViewport.width * outputScale);
            canvas.height = Math.floor(scaledViewport.height * outputScale);
            canvas.style.width = Math.floor(scaledViewport.width) + "px";
            canvas.style.height = Math.floor(scaledViewport.height) + "px";

            const renderContext = {
            canvasContext: context,
            viewport: scaledViewport,
            transform: [outputScale, 0, 0, outputScale, 0, 0],
            };

            context.clearRect(0,0,canvas.width,canvas.height);
            page.render(renderContext);
        });
        }).catch(err => console.error("Error loading PDF:", err));
    }

    function loadImage(url) {
        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');
        const container = document.getElementById('preview-container');
        const img = new Image();
        img.crossOrigin = "anonymous";

        img.onload = function() {
            const containerWidth = container.clientWidth;
            const containerHeight = container.clientHeight;

            // ukuran asal imej
            const originalWidth = img.width;
            const originalHeight = img.height;

            // skala fit ke dalam container (hanya digunakan pada zoom = 1)
            const fitScale = Math.min(containerWidth / originalWidth, containerHeight / originalHeight);

            // guna zoom multiplier (supaya bila zoom berubah, betul-betul besar/kecil)
            const finalWidth = originalWidth * fitScale * zoom;
            const finalHeight = originalHeight * fitScale * zoom;

            // set saiz canvas ikut saiz baru
            canvas.width = finalWidth;
            canvas.height = finalHeight;

            // clear dan lukis imej
            /* context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(img, 0, 0, canvas.width, canvas.height); */
            context.save();
            context.translate(canvas.width / 2, canvas.height / 2);
            context.scale(zoom, zoom);
            context.drawImage(img, -img.width * fitScale / 2, -img.height * fitScale / 2, img.width * fitScale, img.height * fitScale);
            context.restore();
        };

        img.onerror = function() {
            console.error("Error loading image:", url);
        };

        img.src = url;
    }

    </script>
    @endif

@endsection