@{
    ViewData["Title"] = "PDF Editor";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container-fluid mt-3">
    <!-- Previous HTML remains the same until the pdfCanvasArea div -->
        <div class="row">
        <div class="col-12 text-center">
            <h2 class="fw-bold">Professional PDF Editor</h2>
        </div>
    </div>

    <div class="row mt-3 justify-content-center">
        <div class="col-md-8 text-center">
            <label for="pdfUpload" class="btn btn-primary">
                <i class="fas fa-upload"></i> Upload PDF
            </label>
            <form asp-controller="Home" asp-action="UploadPdf" method="post" enctype="multipart/form-data">
                <input type="file" id="pdfUpload" name="pdfFile" accept="application/pdf" hidden />
                <button type="submit" class="btn btn-success mt-2">Upload</button>
            </form>
            <button id="downloadPdf" class="btn btn-info mt-2" disabled>
                <i class="fas fa-download"></i> Download Edited PDF
            </button>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-2 bg-light border-end" id="toolbar">
            <h5 class="text-center">Tools</h5>
            <div class="btn-group-vertical w-100 mb-3">
                <button class="btn btn-outline-secondary btn-add-text" data-tool="text"><i class="fas fa-font"></i> Text</button>
                <button class="btn btn-outline-secondary btn-add-drawing" data-tool="draw"><i class="fas fa-pencil-alt"></i> Draw</button>
                <button class="btn btn-outline-secondary btn-add-image" data-tool="image"><i class="fas fa-image"></i> Image</button>
                <button class="btn btn-outline-secondary btn-add-shape" data-tool="shape"><i class="fas fa-square"></i> Shape</button>
                <button class="btn btn-outline-secondary btn-add-signature" data-tool="sign"><i class="fas fa-signature"></i> Sign</button>
                <button class="btn btn-outline-secondary btn-add-pagenumber" data-tool="pagenumber"><i class="fas fa-hashtag"></i> Page No.</button>
                <button class="btn btn-outline-danger mt-2 btn-clear" data-tool="clear"><i class="fas fa-times-circle"></i> Clear</button>
            </div>

            <div id="textOptions">
                <label class="form-label">Font Family</label>
                <select id="fontFamily" class="form-select form-select-sm">
                    <option value="Arial">Arial</option>
                    <option value="Times New Roman">Times New Roman</option>
                    <option value="Verdana">Verdana</option>
                    <option value="Courier New">Courier New</option>
                    <option value="Georgia">Georgia</option>
                </select>

                <label class="form-label mt-2">Font Size</label>
                <input type="number" id="fontSize" class="form-control form-control-sm" value="16" min="8" max="72" />

                <label class="form-label mt-2">Font Color</label>
                <input type="color" id="fontColor" class="form-control form-control-sm" value="#000000" />

                <div class="form-check mt-2">
                    <input class="form-check-input" type="checkbox" id="boldText">
                    <label class="form-check-label" for="boldText">Bold</label>
                </div>

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="italicText">
                    <label class="form-check-label" for="italicText">Italic</label>
                </div>
            </div>

            <div id="drawOptions" class="mt-3" style="display: none;">
                <label class="form-label">Pen Color</label>
                <input type="color" id="penColor" class="form-control form-control-sm" value="#000000" />

                <label class="form-label mt-2">Pen Width</label>
                <input type="range" id="penWidth" class="form-range" min="1" max="10" value="2" />
            </div>

            <div id="shapeOptions" class="mt-3" style="display: none;">
                <label class="form-label">Shape Type</label>
                <select id="shapeType" class="form-select form-select-sm">
                    <option value="rectangle">Rectangle</option>
                    <option value="circle">Circle</option>
                    <option value="line">Line</option>
                    <option value="arrow">Arrow</option>
                </select>

                <label class="form-label mt-2">Fill Color</label>
                <input type="color" id="shapeFillColor" class="form-control form-control-sm" value="#ffffff" />

                <label class="form-label mt-2">Border Color</label>
                <input type="color" id="shapeBorderColor" class="form-control form-control-sm" value="#000000" />

                <label class="form-label mt-2">Border Width</label>
                <input type="range" id="shapeBorderWidth" class="form-range" min="1" max="5" value="1" />
            </div>
        </div>

    <div class="col-md-10" id="pdfCanvasArea">
        <div class="border rounded p-2 position-relative" style="min-height: 500px; background-color: #f9f9f9;">
            @if (ViewBag.FilePath != null)
            {
                <div id="pdf-container" style="position: relative; display: inline-block;">
                    <iframe id="pdfViewer" src="@ViewBag.FilePath" width="100%" height="600px"></iframe>
                    <div id="pdfOverlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></div>
                    <canvas id="drawingCanvas" style="position: absolute; top: 0; left: 0; pointer-events: auto;"></canvas>
                </div>
            }
            else
            {
                  <div class="d-flex justify-content-center align-items-center" style="height: 500px;">
      <div class="text-center">
          <i class="fas fa-file-pdf fa-5x text-muted"></i>
          <p class="mt-3">Upload a PDF file to start editing</p>
      </div>
  </div>
            }
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {
            // Variables to track PDF dimensions
            let pdfWidth = 0;
            let pdfHeight = 0;
            let pdfOffset = { top: 0, left: 0 };
            
            // Initialize PDF dimensions when loaded
            $('#pdfViewer').on('load', function() {
                const iframe = this;
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                
                // Wait for PDF to render
                setTimeout(() => {
                    const pdfElement = iframeDoc.querySelector('embed') || iframeDoc.querySelector('object') || iframeDoc.querySelector('div');
                    if (pdfElement) {
                        const rect = pdfElement.getBoundingClientRect();
                        pdfWidth = rect.width;
                        pdfHeight = rect.height;
                        
                        // Get PDF container position
                        const containerRect = $('#pdf-container')[0].getBoundingClientRect();
                        pdfOffset = {
                            left: containerRect.left,
                            top: containerRect.top
                        };
                        
                        // Set drawing canvas size to match PDF
                        $('#drawingCanvas').attr({
                            width: pdfWidth,
                            height: pdfHeight
                        });
                        
                        // Initialize other canvases if needed
                    }
                }, 1000);
            });
            
            // Modified text tool implementation with PDF boundary check
            $('#pdf-container').on('click', function(e) {
                if (activeTool !== 'text') return;
                
                // Calculate position relative to PDF
                const x = e.clientX - pdfOffset.left;
                const y = e.clientY - pdfOffset.top;
                
                // Check if click is within PDF bounds
                if (x < 0 || y < 0 || x > pdfWidth || y > pdfHeight) {
                    return; // Outside PDF bounds
                }
                
                const textDiv = $('<div class="pdf-annotation draggable-text" contenteditable="true">Edit me</div>');
                textDiv.css({
                    position: 'absolute',
                    left: x + 'px',
                    top: y + 'px',
                    minWidth: '50px',
                    minHeight: '30px',
                    padding: '4px',
                    border: '1px dashed #ccc',
                    fontSize: $('#fontSize').val() + 'px',
                    fontFamily: $('#fontFamily').val(),
                    color: $('#fontColor').val(),
                    fontWeight: $('#boldText').is(':checked') ? 'bold' : 'normal',
                    fontStyle: $('#italicText').is(':checked') ? 'italic' : 'normal',
                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
                    cursor: 'move',
                    pointerEvents: 'auto'
                });
                
                $('#pdfOverlay').append(textDiv);
                
                makeDraggableAndResizable(textDiv, true);
                
                // Save annotation data
                pdfAnnotations.push({
                    type: 'text',
                    content: 'Edit me',
                    x: x,
                    y: y,
                    width: 50,
                    height: 30,
                    color: $('#fontColor').val(),
                    fontFamily: $('#fontFamily').val(),
                    fontSize: parseInt($('#fontSize').val()),
                    isBold: $('#boldText').is(':checked'),
                    isItalic: $('#italicText').is(':checked')
                });
            });
            
            // Generic function to make elements draggable and resizable within PDF bounds
            function makeDraggableAndResizable(element, isText = false) {
                element.draggable({
                    containment: [0, 0, pdfWidth, pdfHeight],
                    start: function() {
                        $(this).css('border', '1px dashed #666');
                    },
                    stop: function() {
                        $(this).css('border', '1px dashed #ccc');
                        updateAnnotationPosition($(this));
                    }
                });
                
                if (isText) {
                    element.resizable({
                        handles: 'se',
                        minWidth: 50,
                        minHeight: 30,
                        containment: [0, 0, pdfWidth, pdfHeight],
                        resize: function(event, ui) {
                            // Adjust font size based on height for text
                            const newSize = ui.size.height / 2;
                            $(this).css('fontSize', newSize + 'px');
                            updateAnnotationSize($(this));
                        },
                        stop: function() {
                            updateAnnotationSize($(this));
                        }
                    });
                } else {
                    element.resizable({
                        handles: 'se, sw, ne, nw',
                        minWidth: 20,
                        minHeight: 20,
                        containment: [0, 0, pdfWidth, pdfHeight],
                        stop: function() {
                            updateAnnotationSize($(this));
                        }
                    });
                }
                
                // Update position when dragged
                function updateAnnotationPosition(el) {
                    const index = findAnnotationIndex(el);
                    if (index >= 0) {
                        pdfAnnotations[index].x = parseInt(el.css('left'));
                        pdfAnnotations[index].y = parseInt(el.css('top'));
                    }
                }
                
                // Update size when resized
                function updateAnnotationSize(el) {
                    const index = findAnnotationIndex(el);
                    if (index >= 0) {
                        pdfAnnotations[index].width = parseInt(el.width());
                        pdfAnnotations[index].height = parseInt(el.height());
                    }
                }
            }
            
            // Modified shape tool implementation
            $('#pdf-container').on('mousedown', function(e) {
                if (activeTool !== 'shape') return;
                
                const x = e.clientX - pdfOffset.left;
                const y = e.clientY - pdfOffset.top;
                
                // Check if click is within PDF bounds
                if (x < 0 || y < 0 || x > pdfWidth || y > pdfHeight) {
                    return;
                }
                
                shapeStartX = x;
                shapeStartY = y;
                
                const shapeDiv = $('<div class="pdf-annotation draggable-shape"></div>');
                shapeDiv.css({
                    position: 'absolute',
                    left: shapeStartX + 'px',
                    top: shapeStartY + 'px',
                    width: '0px',
                    height: '0px',
                    border: $('#shapeBorderWidth').val() + 'px solid ' + $('#shapeBorderColor').val(),
                    backgroundColor: $('#shapeFillColor').val(),
                    pointerEvents: 'auto'
                });
                
                $('#pdfOverlay').append(shapeDiv);
                $(this).data('currentShape', shapeDiv);
            });
            
            // Modified image tool implementation
            $('#imageUpload').on('change', function(e) {
                if (activeTool !== 'image') return;
                
                const file = e.target.files[0];
                if (!file) return;
                
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = new Image();
                    img.onload = function() {
                        // Place image at center of PDF initially
                        const centerX = Math.max(0, (pdfWidth - img.width) / 2);
                        const centerY = Math.max(0, (pdfHeight - img.height) / 2);
                        
                        const imgDiv = $('<div class="pdf-annotation draggable-image"></div>');
                        imgDiv.css({
                            position: 'absolute',
                            left: centerX + 'px',
                            top: centerY + 'px',
                            width: img.width + 'px',
                            height: img.height + 'px',
                            backgroundImage: 'url(' + event.target.result + ')',
                            backgroundSize: 'contain',
                            backgroundRepeat: 'no-repeat',
                            cursor: 'move',
                            pointerEvents: 'auto'
                        });
                        
                        $('#pdfOverlay').append(imgDiv);
                        makeDraggableAndResizable(imgDiv);
                        
                        // Save annotation data
                        pdfAnnotations.push({
                            type: 'image',
                            content: event.target.result,
                            x: centerX,
                            y: centerY,
                            width: img.width,
                            height: img.height
                        });
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(file);
            });
            
            // Modified drawing tool to respect PDF bounds
            $('#drawingCanvas').on('mousedown', function(e) {
                if (activeTool !== 'draw') return;
                
                const x = e.clientX - pdfOffset.left;
                const y = e.clientY - pdfOffset.top;
                
                // Check if click is within PDF bounds
                if (x < 0 || y < 0 || x > pdfWidth || y > pdfHeight) {
                    return;
                }
                
                isDrawing = true;
                lastX = x;
                lastY = y;
                
                drawingCtx.beginPath();
                drawingCtx.strokeStyle = $('#penColor').val();
                drawingCtx.lineWidth = $('#penWidth').val();
                drawingCtx.lineJoin = 'round';
                drawingCtx.lineCap = 'round';
                drawingCtx.moveTo(lastX, lastY);
            });
            
            $('#drawingCanvas').on('mousemove', function(e) {
                if (!isDrawing || activeTool !== 'draw') return;
                
                const x = e.clientX - pdfOffset.left;
                const y = e.clientY - pdfOffset.top;
                
                // Constrain drawing to PDF bounds
                if (x < 0 || y < 0 || x > pdfWidth || y > pdfHeight) {
                    isDrawing = false;
                    return;
                }
                
                drawingCtx.lineTo(x, y);
                drawingCtx.stroke();
                lastX = x;
                lastY = y;
            });
            
            // Previous event handlers remain the same
                $('#drawingCanvas').on('mouseup', function() {
        isDrawing = false;
    });

    $('#drawingCanvas').on('mouseleave', function() {
        isDrawing = false;
    });

    // Shape tool implementation
    let shapeStartX, shapeStartY;

    $('#pdfCanvasArea').on('mousedown', function(e) {
        if (activeTool !== 'shape') return;

        shapeStartX = e.offsetX;
        shapeStartY = e.offsetY;

        const shapeDiv = $('<div class="draggable-shape"></div>');
        shapeDiv.css({
            position: 'absolute',
            left: shapeStartX + 'px',
            top: shapeStartY + 'px',
            width: '0px',
            height: '0px',
            border: $('#shapeBorderWidth').val() + 'px solid ' + $('#shapeBorderColor').val(),
            backgroundColor: $('#shapeFillColor').val(),
            pointerEvents: 'none'
        });

        $(this).append(shapeDiv);

        $(this).data('currentShape', shapeDiv);
    });

    $('#pdfCanvasArea').on('mousemove', function(e) {
        if (activeTool !== 'shape' || !$(this).data('currentShape')) return;

        const shapeDiv = $(this).data('currentShape');
        const currentX = e.offsetX;
        const currentY = e.offsetY;

        let left = Math.min(shapeStartX, currentX);
        let top = Math.min(shapeStartY, currentY);
        let width = Math.abs(currentX - shapeStartX);
        let height = Math.abs(currentY - shapeStartY);

        shapeDiv.css({
            left: left + 'px',
            top: top + 'px',
            width: width + 'px',
            height: height + 'px'
        });
    });

    $('#pdfCanvasArea').on('mouseup', function(e) {
        if (activeTool !== 'shape' || !$(this).data('currentShape')) return;

        const shapeDiv = $(this).data('currentShape');
        const currentX = e.offsetX;
        const currentY = e.offsetY;

        let width = Math.abs(currentX - shapeStartX);
        let height = Math.abs(currentY - shapeStartY);

        if (width < 10 || height < 10) {
            shapeDiv.remove();
        } else {
            // Make shape interactive after creation
            shapeDiv.css({
                pointerEvents: 'auto',
                cursor: 'move'
            });

            shapeDiv.draggable({
                containment: "#pdfCanvasArea"
            });

            shapeDiv.resizable({
                handles: 'se, sw, ne, nw',
                minWidth: 20,
                minHeight: 20
            });

            // Save annotation data
            pdfAnnotations.push({
                type: 'shape',
                shapeType: $('#shapeType').val(),
                x: parseInt(shapeDiv.css('left')),
                y: parseInt(shapeDiv.css('top')),
                width: parseInt(shapeDiv.css('width')),
                height: parseInt(shapeDiv.css('height')),
                fillColor: $('#shapeFillColor').val(),
                borderColor: $('#shapeBorderColor').val(),
                borderWidth: parseInt($('#shapeBorderWidth').val())
            });
        }

        $(this).removeData('currentShape');
    });

    // Image tool implementation
    $('.btn-add-image').on('click', function() {
        $('#imageUpload').click();
    });

    $('#imageUpload').on('change', function(e) {
        if (activeTool !== 'image') return;

        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(event) {
            const img = new Image();
            img.onload = function() {
                const imgDiv = $('<div class="draggable-image"></div>');
                imgDiv.css({
                    position: 'absolute',
                    left: '100px',
                    top: '100px',
                    width: img.width + 'px',
                    height: img.height + 'px',
                    backgroundImage: 'url(' + event.target.result + ')',
                    backgroundSize: 'contain',
                    backgroundRepeat: 'no-repeat',
                    cursor: 'move'
                });

                $('#pdfCanvasArea').append(imgDiv);

                imgDiv.draggable({
                    containment: "#pdfCanvasArea"
                });

                imgDiv.resizable({
                    aspectRatio: true,
                    handles: 'se, sw, ne, nw'
                });

                // Save annotation data
                pdfAnnotations.push({
                    type: 'image',
                    content: event.target.result,
                    x: 100,
                    y: 100,
                    width: img.width,
                    height: img.height
                });
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    });

    // Signature tool implementation
    $('.btn-add-signature').on('click', function() {
        // In a real app, you might use a signature pad library
        // Here we'll just create a simple signature line
        const signatureDiv = $('<div class="draggable-signature">Signature</div>');
        signatureDiv.css({
            position: 'absolute',
            left: '100px',
            top: '100px',
            minWidth: '150px',
            height: '30px',
            borderBottom: '1px solid #000',
            fontFamily: 'Brush Script MT, cursive',
            fontSize: '24px',
            cursor: 'move'
        });

        $('#pdfCanvasArea').append(signatureDiv);

        signatureDiv.draggable({
            containment: "#pdfCanvasArea"
        });

        signatureDiv.resizable({
            minWidth: 100,
            minHeight: 30
        });

        // Save annotation data
        pdfAnnotations.push({
            type: 'signature',
            content: 'Signature',
            x: 100,
            y: 100,
            width: 150,
            height: 30
        });
    });

    // Page number tool implementation
    $('.btn-add-pagenumber').on('click', function() {
        const pageNumDiv = $('<div class="draggable-pagenumber">Page 1</div>');
        pageNumDiv.css({
            position: 'absolute',
            left: '50%',
            top: '580px',
            padding: '2px 10px',
            backgroundColor: 'rgba(255, 255, 255, 0.8)',
            border: '1px solid #ccc',
            borderRadius: '3px',
            cursor: 'move'
        });

        $('#pdfCanvasArea').append(pageNumDiv);

        pageNumDiv.draggable({
            containment: "#pdfCanvasArea"
        });

        // Save annotation data
        pdfAnnotations.push({
            type: 'pagenumber',
            content: 'Page 1',
            x: parseInt(pageNumDiv.css('left')),
            y: parseInt(pageNumDiv.css('top')),
            width: parseInt(pageNumDiv.width()),
            height: parseInt(pageNumDiv.height())
        });
    });

    // Clear tool implementation
    $('.btn-clear').on('click', function() {
        if (confirm('Are you sure you want to clear all annotations?')) {
            $('.draggable-text, .draggable-shape, .draggable-image, .draggable-signature, .draggable-pagenumber').remove();
            drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
            pdfAnnotations = [];
        }
    });

    // Text formatting options
    $('#fontSize, #fontFamily, #fontColor, #boldText, #italicText').on('input change', function () {
        if (selectedElement && selectedElement.hasClass('draggable-text')) {
            selectedElement.css({
                fontSize: $('#fontSize').val() + 'px',
                fontFamily: $('#fontFamily').val(),
                color: $('#fontColor').val(),
                fontWeight: $('#boldText').is(':checked') ? 'bold' : 'normal',
                fontStyle: $('#italicText').is(':checked') ? 'italic' : 'normal'
            });

            // Update annotation data
            const index = findAnnotationIndex(selectedElement);
            if (index >= 0) {
                pdfAnnotations[index].fontSize = parseInt($('#fontSize').val());
                pdfAnnotations[index].fontFamily = $('#fontFamily').val();
                pdfAnnotations[index].color = $('#fontColor').val();
                pdfAnnotations[index].isBold = $('#boldText').is(':checked');
                pdfAnnotations[index].isItalic = $('#italicText').is(':checked');
            }
        }
    });

    // Find annotation index for an element
    function findAnnotationIndex(element) {
        const position = element.position();
        for (let i = 0; i < pdfAnnotations.length; i++) {
            if (Math.abs(pdfAnnotations[i].x - position.left) < 5 &&
                Math.abs(pdfAnnotations[i].y - position.top) < 5) {
                return i;
            }
        }
        return -1;
    }

    // Download edited PDF
    $('#downloadPdf').on('click', function() {
        if (!pdfAnnotations.length) {
            alert('No changes made to download.');
            return;
        }

        const editData = {
            originalFilePath: '@ViewBag.FilePath',
            annotations: pdfAnnotations
        };

        $.ajax({
            url: '/Home/SaveEditedPdf',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(editData),
            success: function(response) {
                if (response.success) {
                    // In a real app, this would download the edited PDF
                    // For now, we'll just show a message
                    alert('PDF saved successfully!');

                    // This would be the actual download code:
                    // window.location.href = response.filePath;
                } else {
                    alert('Error saving PDF.');
                }
            },
            error: function() {
                alert('Error saving PDF.');
            }
        });
    });

    // Click on canvas to deselect elements
    $('#pdfCanvasArea').on('click', function(e) {
        if ($(e.target).hasClass('pdfCanvasArea') || $(e.target).hasClass('pdf-container')) {
            selectedElement = null;
        }
    });

            // Function to find annotation index (updated to use PDF coordinates)
            function findAnnotationIndex(element) {
                const position = element.position();
                for (let i = 0; i < pdfAnnotations.length; i++) {
                    if (Math.abs(pdfAnnotations[i].x - position.left) < 5 && 
                        Math.abs(pdfAnnotations[i].y - position.top) < 5) {
                        return i;
                    }
                }
                return -1;
            }
        });
    </script>
}