@extends(backpack_view('blank'))

@section('content')
<div class="container py-4">
    <h2>Prescription Scanner</h2>

    {{-- Webcam preview --}}
    <div class="mb-3">
        <video id="video" autoplay 
            style="width:100%; max-width:980px; max-height:80vh; aspect-ratio: 148 / 210; border:1px solid #ccc; object-fit:cover;">
        </video>        
        <canvas id="canvas" class="d-none"></canvas>
    </div>

    {{-- Capture button --}}
    <button id="captureBtn" class="btn btn-primary mb-3">📸 Capture Photo</button>

    {{-- Form to submit photo --}}
    {{-- <form id="scanForm" action="{{ route('scan.store') }}" method="POST" enctype="multipart/form-data" class="d-none">
        @csrf
        <input type="file" name="photo" id="photoInput">
    </form> --}}


    <!-- Raw text -->
    {{-- <div class="mt-4">
        <label><strong>Raw Extracted Text</strong></label>
        <textarea id="rawText" class="form-control" rows="8" readonly></textarea>
    </div> --}}

    <!-- Return JSON -->
    <div>
        <div class="mt-4">
            <label><strong>Return Json</strong></label>
            <textarea id="retrunJson" class="form-control" rows="8" readonly></textarea>
        </div>

        {{-- Display extracted data --}}
        @isset($data)
            <div class="card mt-4">
                <div class="card-header">Extracted Prescription Details</div>
                <div class="card-body">
                    <pre>{{ json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                </div>
            </div>
        @endisset

        <!-- Extracted structured data -->
        <form id="prescriptionForm" class="mt-4" action="{{ route('scan.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="mb-3">
                <label>Prescription Barcode</label>
                <input type="text" name="prescription_barcode" class="form-control">
            </div>
            <div class="mb-3">
                <label>Patient Name</label>
                <input type="text" name="patient_name" class="form-control">
            </div>
            <div class="mb-3">
                <label>Address</label>
                <input type="text" name="address" class="form-control">
            </div>
            <div class="mb-3">
                <label>Mobile</label>
                <input type="text" name="mobile" class="form-control">
            </div>
            <div class="mb-3">
                <label>NHI Number</label>
                <input type="text" name="nhi_number" class="form-control">
            </div>
            <div class="mb-3">
                <label>Receipt Date</label>
                <input type="text" name="receipt_date" class="form-control">
            </div>

            <!-- Medicines -->
            <div>
                <label><strong>Medicines</strong></label>
                <input type="hidden" name="medicine-index" id="medicine-index" value="0" />
                <div id="medicinesWrapper">
                </div>
                <button type="button" id="addMedicine" class="btn btn-success btn-sm mt-2">+ Add Medicine</button>
            </div>
            <!-- Repeats -->
            <div>
                <input type="hidden" name="repeat-index" id="repeat-index" value="0" />
                <label class="mt-4"><strong>Repeat Medicines</strong></label>
                <div id="repeatsWrapper">
                </div>
                <button type="button" id="addRepeat" class="btn btn-success btn-sm mt-2">+ Add Repeat</button>
            </div>

            
            <input type="hidden" name="orig_file" id="orig-file" value="" />
            <input type="hidden" name="enhanced_file" id="enhanced-file" value="" />
            <div class="form-row">
                <button type="submit" id="btn-submit-prescription" class="btn btn-primary mt-4">Save to DB</button>
            </div>
        </form>
    </div>
</div>

<!-- Fullscreen Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner-border text-primary" role="status" style="width: 4rem; height: 4rem;">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="fw-semibold fs-5">Analysing picture...</div>
</div>


<script>
    const video = document.getElementById("video");
    const canvas = document.getElementById("canvas");
    const captureBtn = document.getElementById("captureBtn");
    const photoInput = document.getElementById("photoInput");
    const scanForm = document.getElementById("scanForm");

    async function startCamera() {


        try {

            const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

            const constraints = {
                video: {
                    width: { ideal: 1920 },
                    height: { ideal: 1080 },
                    frameRate: { ideal: 30 },
                    facingMode: isMobile ? { exact: "environment" } : "user"
                }
            };
            
            let stream;

            try {
                // Try preferred camera first
                stream = await navigator.mediaDevices.getUserMedia(constraints);
            } catch (e) {
                console.warn("Preferred camera not available, falling back", e);

                // Fallback: any camera
                stream = await navigator.mediaDevices.getUserMedia({ video: true });
            }

            // If successful, attach to video element
            video.srcObject = stream;

            // Now enumerate devices safely
            const devices = await navigator.mediaDevices.enumerateDevices();
            const cameras = devices.filter(d => d.kind === "videoinput");
            console.log("Available cameras:", cameras);

            // Optional: select a specific camera if desired
            // e.g., const backCamera = cameras.find(c => c.label.toLowerCase().includes("back"));
            
        } catch (err) {
            console.error("Camera start error:", err);

            // If user denied permission
            if (err.name === "NotAllowedError") {
                alert("Camera access was denied. Please allow camera permissions.");
            } else {
                alert("Unable to access camera: " + err.message);
            }
        }
    }
    startCamera();

    document.getElementById("prescriptionForm").addEventListener("submit", function (e) {
        e.preventDefault(); // stop normal form submit

        const form = this;
        const url = form.action;
        const formData = new FormData(form);

        // Disable button to prevent double-click
        const btn = document.getElementById("btn-submit-prescription");
        btn.disabled = true;
        btn.innerText = "Saving...";

        fetch(url, {
            method: "POST",
            body: formData,
            headers: {
                "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value
            }
        })
        .then(response => response.json())
        .then(data => {

            console.log(data);
            btn.disabled = false;
            btn.innerText = "Save to DB";
            let count = Array.isArray(data.matched_prescriptions) ? data.matched_prescriptions.length : 0;

            let html = "";
            if (Array.isArray(data.matched_prescriptions) && data.matched_prescriptions.length > 0) {
                html += '<ul style="text-align:left;">';
                data.matched_prescriptions.forEach((rx, index) => {

                    const date = new Date(rx.create_date);
                    const formattedCreateDate = new Intl.DateTimeFormat('en-CA').format(date); // en-CA = YYYY-MM-DD
                    html += `<li>
                                <strong>${rx.patient.name}</strong><br>
                                NHI: ${rx.patient.nhi_number}<br>
                                Create Date: ${formattedCreateDate}<br>
                                <strong>Medicines: </strong>
                                    <ul>`;

                                // Loop through medicines for this prescription
                                if (Array.isArray(rx.medicines) && rx.medicines.length > 0) {
                                    rx.medicines.forEach(med => {
                                        html += `<li>${med.name} 
                                                </li>`;
                                    });
                                } else {
                                    html += `<li>No medicines found.</li>`;   
                                }
                            html += `</ul>`;
                            html += `<button class="btn" type="button" data-new-prescription-id="${data.new_prescription_id}" data-route="{{ route('match-prescription-action') }}" data-ai_prescription-id="${rx.id}" onclick="matchPrescriptionAction(this)" >Match</button>`;
                    html += `</li><hr>`; 
                });
                html += '</ul>';
            } else {
                html = '<p>No prescriptions matched.</p>';
            }

            console.log(html);
            // Create a temporary div to hold the HTML
            let div = document.createElement('div');
            div.className = "swal-prescriptions-list";
            div.innerHTML = html;

            swal({
                title: count+" prescriptions matched",
                content: div,
                icon: "info",
                showCloseButton: true,
                showCancelButton: false,
                focusConfirm: false,
                className: "match-prescriptions-swal",
            });

        })
        .catch(error => {
            btn.disabled = false;
            btn.innerText = "Save to DB";
            alert("Error saving prescription: " + error);
            console.error(error);
        });
    });



    // ✅ Capture and send to FastAPI
    captureBtn.addEventListener("click", () => {

        document.getElementById("loadingOverlay").classList.add("show");

        const ctx = canvas.getContext("2d");
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        ctx.filter = "brightness(1.1) contrast(1.15) saturate(1.1)";
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(async (blob) => {
            const formData = new FormData();
            formData.append("file", blob, "receipt.jpg");

            try {
                const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                const response = await fetch("/admin/upload-and-analyse-image", {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": token,   // <-- add CSRF token here
                        "Accept": "application/json"
                    }
                });
                const data = await response.json();
                console.log(data);                
                const parsedOutput = JSON.parse(data.output);

                // Raw OCR text
                // var rawTextArea = data.raw_text || "";

                // Fill patient details
                // document.getElementById("rawText").value = rawTextArea;
                document.querySelector("[name='orig_file']").value = data.origFileName  || "";
                document.querySelector("[name='enhanced_file']").value = data.enhancedFileName || "";

                document.getElementById("retrunJson").value = JSON.stringify(parsedOutput, null, 2);
                document.querySelector("[name='prescription_barcode']").value = parsedOutput.prescription_barcode;
                document.querySelector("[name='patient_name']").value = parsedOutput.patient.name;
                document.querySelector("[name='address']").value = parsedOutput.patient.address || "";
                document.querySelector("[name='mobile']").value = parsedOutput.patient.mobile || "";
                document.querySelector("[name='nhi_number']").value = parsedOutput.patient.nhi_number.replace(/\bNHI\b\s*/gi, '').trim() || "";
                document.querySelector("[name='receipt_date']").value = parsedOutput.prescription.date  || "";

                // Medicines
                medicinesWrapper.innerHTML = "";
                (parsedOutput.prescription?.medicine || []).forEach(m => addMedicineField(m));

                // Repeats
                repeatsWrapper.innerHTML = "";
                (parsedOutput.prescription?.repeats || []).forEach(r => addRepeatField(r));

                document.getElementById("loadingOverlay").classList.remove("show");

            } catch (err) {
                console.error("Upload error:", err);
                
                document.getElementById("loadingOverlay").classList.remove("show");
                // alert("Failed to process receipt");
            }
        }, "image/jpeg");
    });

    
    // ✅ Helper: add medicine input
    function addMedicineField(value = "") {

        const medicineIndexHiddenElement = document.getElementById("medicine-index");
        let medicineIndex = medicineIndexHiddenElement.value;

        const div = document.createElement("div");
        div.className = "d-flex mb-2";
        div.innerHTML = `
            <input type="text" name="medicines[${medicineIndex}][name]" value="${value.name}" class="form-control me-2" placeholder="Medicine">
            <input type="text" name="medicines[${medicineIndex}][price]" value="${value.price}" class="form-control me-2" placeholder="Medicine">
            <button type="button" class="btn btn-danger remove">-</button>
        `;
        medicinesWrapper.appendChild(div);
        medicineIndexHiddenElement.value = eval(medicineIndex + '+ 1');
    }

    // ✅ Helper: add repeat input
    function addRepeatField(value = "") {

        const repeatIndexHiddenElement = document.getElementById("repeat-index");
        let repeatIndex = repeatIndexHiddenElement.value;
        const div = document.createElement("div");
        div.className = "d-flex mb-2";
        div.innerHTML = `
            <input type="text" name="repeats[${repeatIndex}][name]" value="${value.name}" class="form-control me-2" placeholder="Repeat Medicine">
            <input type="text" name="repeats[${repeatIndex}][number]" value="${value.number}" class="form-control me-2" placeholder="Number">
            <input type="text" name="repeats[${repeatIndex}][available_on_or_after]" value="${value.available_on_or_after}" class="form-control me-2" placeholder="Available">
            <input type="text" name="repeats[${repeatIndex}][expiry_date]" value="${value.expiry_date}" class="form-control me-2" placeholder="Expiry">
            <button type="button" class="btn btn-danger remove">-</button>
        `;
        repeatsWrapper.appendChild(div);
        repeatIndexHiddenElement.value = eval(repeatIndex +'+ 1');
    }

    // ✅ Event delegation for remove
    [medicinesWrapper, repeatsWrapper].forEach(wrapper => {
        wrapper.addEventListener("click", e => {
            if (e.target.classList.contains("remove")) {
                e.target.parentElement.remove();
            }
        });
    });

    // Add manually
    document.getElementById("addMedicine").addEventListener("click", () => addMedicineField());
    document.getElementById("addRepeat").addEventListener("click", () => addRepeatField());

</script>
@endsection