{{--
  Reusable Drawing Module
  Usage:
  @include('components.drawing-module', [
      'moduleName' => 'OptoForm',
      'referenceId' => $OptoId,
      'title' => 'Visit drawing',
      'instanceId' => 'opto-drawing'
  ])
--}}
@php
    $instanceId = $instanceId ?? ('drawing-' . uniqid());
    $moduleName = $moduleName ?? 'General';
    $referenceId = (int) ($referenceId ?? 0);
    $title = $title ?? '';
    $canvasWidth = $canvasWidth ?? 900;
    $canvasHeight = $canvasHeight ?? 560;
@endphp

<div
    id="{{ $instanceId }}"
    class="drawing-module"
    data-module-name="{{ $moduleName }}"
    data-reference-id="{{ $referenceId }}"
    data-title="{{ $title }}"
    data-canvas-width="{{ $canvasWidth }}"
    data-canvas-height="{{ $canvasHeight }}"
    data-url-list="{{ url('drawing') }}"
    data-url-save="{{ url('drawing/save') }}"
    data-url-show="{{ url('drawing/__ID__') }}"
    data-url-update="{{ url('drawing/update/__ID__') }}"
    data-url-delete="{{ url('drawing/delete/__ID__') }}"
    data-url-upload="{{ url('drawing/upload') }}"
>
    <input type="hidden" class="dm-drawing-id" value="">

    {{-- Top toolbar: color, brush, history, save, export --}}
    <div class="dm-toolbar-top">
        <div class="dm-group">
            <span class="dm-label">Color</span>
            <input type="color" class="dm-color-input dm-color-picker" value="#000000" title="Color picker">
            <div class="dm-recent-colors" title="Recently used"></div>
        </div>
        <div class="dm-sep"></div>
        <div class="dm-group">
            <span class="dm-label">Size</span>
            <input type="range" class="dm-range dm-brush-size" min="1" max="60" value="4">
            <span class="dm-label dm-brush-size-val">4</span>
        </div>
        <div class="dm-group">
            <span class="dm-label">Opacity</span>
            <input type="range" class="dm-range dm-brush-opacity" min="0.1" max="1" step="0.05" value="1">
            <span class="dm-label dm-brush-opacity-val">100%</span>
        </div>
        <div class="dm-sep"></div>
        <div class="dm-group">
            <button type="button" class="dm-btn" data-dm-action="undo" title="Undo (Ctrl+Z)"><i class="fas fa-undo"></i></button>
            <button type="button" class="dm-btn" data-dm-action="redo" title="Redo (Ctrl+Y)"><i class="fas fa-redo"></i></button>
            <button type="button" class="dm-btn" data-dm-action="clearCanvas" title="Clear"><i class="fas fa-eraser"></i> Clear</button>
            <button type="button" class="dm-btn" data-dm-action="resetCanvas" title="Reset"><i class="fas fa-sync"></i></button>
        </div>
        <div class="dm-sep"></div>
        <div class="dm-group">
            <button type="button" class="dm-btn" data-dm-action="zoomOut" title="Zoom out"><i class="fas fa-search-minus"></i></button>
            <button type="button" class="dm-btn" data-dm-action="zoomIn" title="Zoom in"><i class="fas fa-search-plus"></i></button>
            <button type="button" class="dm-btn" data-dm-action="toggleFullscreen" title="Fullscreen"><i class="fas fa-expand"></i></button>
            <button type="button" class="dm-btn" data-dm-action="toggleDarkMode" title="Dark mode"><i class="fas fa-moon"></i></button>
        </div>
        <div class="dm-sep"></div>
        <div class="dm-group">
            <button type="button" class="dm-btn dm-primary" data-dm-action="save" title="Save as new drawing (Ctrl+S)"><i class="fas fa-save"></i> Save New</button>
            <button type="button" class="dm-btn dm-update-btn" data-dm-action="updateDrawing" title="Update loaded drawing" disabled><i class="fas fa-sync-alt"></i> Update</button>
            <button type="button" class="dm-btn" data-dm-action="newDrawing" title="Clear canvas for a new drawing"><i class="fas fa-plus"></i> New</button>
            <button type="button" class="dm-btn" data-dm-action="downloadPng" title="PNG"><i class="fas fa-file-image"></i> PNG</button>
            <button type="button" class="dm-btn" data-dm-action="downloadJpeg" title="JPEG"><i class="fas fa-file-image"></i> JPEG</button>
            <button type="button" class="dm-btn" data-dm-action="downloadPdf" title="PDF"><i class="fas fa-file-pdf"></i> PDF</button>
            <button type="button" class="dm-btn" data-dm-action="printDrawing" title="Print"><i class="fas fa-print"></i></button>
        </div>
        <div class="dm-sep"></div>
        <div class="dm-group">
            <button type="button" class="dm-btn dm-trigger-bg-upload" title="Upload background image">
                <i class="fas fa-upload"></i> Image
            </button>
            <input id="{{ $instanceId }}-bg-upload" type="file" class="dm-hidden-file dm-bg-upload" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp">
            <input type="file" class="dm-hidden-file dm-image-tool-upload" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp">
        </div>
    </div>

    <div class="dm-body">
        {{-- Left tools --}}
        <div class="dm-tools-left" title="Drawing tools">
            <button type="button" class="dm-tool-btn" data-dm-tool="select" title="Select"><i class="fas fa-mouse-pointer"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="pencil" title="Pencil"><i class="fas fa-pencil-alt"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="brush" title="Brush"><i class="fas fa-paint-brush"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="marker" title="Marker"><i class="fas fa-marker"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="highlighter" title="Highlighter"><i class="fas fa-highlighter"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="eraser" title="Eraser"><i class="fas fa-eraser"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="freehand" title="Free hand"><i class="fas fa-signature"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="line" title="Straight line"><i class="fas fa-minus"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="arrow" title="Arrow"><i class="fas fa-long-arrow-alt-right"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="rectangle" title="Rectangle"><i class="far fa-square"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="circle" title="Circle"><i class="far fa-circle"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="ellipse" title="Ellipse"><i class="fas fa-circle-notch"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="triangle" title="Triangle"><i class="fas fa-play fa-rotate-270"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="polygon" title="Polygon (double-click to close)"><i class="fas fa-draw-polygon"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="text" title="Text"><i class="fas fa-font"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="image" title="Insert image"><i class="fas fa-image"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="signature" title="Signature"><i class="fas fa-pen-nib"></i></button>
            <button type="button" class="dm-tool-btn" data-dm-tool="pan" title="Pan canvas"><i class="fas fa-hand-paper"></i></button>
        </div>

        {{-- Canvas --}}
        <div class="dm-canvas-wrap">
            <div class="dm-canvas-stage">
                <div class="dm-canvas-inner">
                    <canvas class="dm-fabric-canvas"></canvas>
                </div>
            </div>
        </div>

        {{-- Right properties --}}
        <div class="dm-props-right">
            <div class="dm-props-section">
                <h6>Title</h6>
                <div class="dm-props-row">
                    <input type="text" class="dm-title-input" value="{{ $title }}" placeholder="Drawing title">
                </div>
            </div>

            <div class="dm-props-section">
                <h6>Brush Preview</h6>
                <div class="dm-brush-preview">
                    <span class="dm-brush-preview-dot"></span>
                </div>
                <div class="dm-props-row">
                    <span class="dm-label">Hardness</span>
                    <input type="range" class="dm-range dm-brush-hardness" min="0.1" max="1" step="0.05" value="1">
                    <span class="dm-label dm-brush-hardness-val">100%</span>
                </div>
            </div>

            <div class="dm-props-section">
                <h6>HEX / RGB</h6>
                <div class="dm-hex-rgb-row">
                    <input type="text" class="dm-hex-input" value="#000000" title="HEX">
                    <input type="number" class="dm-rgb-r" min="0" max="255" value="0" title="R">
                    <input type="number" class="dm-rgb-g" min="0" max="255" value="0" title="G">
                    <input type="number" class="dm-rgb-b" min="0" max="255" value="0" title="B">
                </div>
            </div>

            <div class="dm-props-section">
                <h6>Layers</h6>
                <div class="dm-group dm-layer-actions">
                    <button type="button" class="dm-btn" data-dm-action="addLayer" title="Add layer"><i class="fas fa-plus"></i></button>
                    <button type="button" class="dm-btn" data-dm-action="mergeLayers" title="Merge layers"><i class="fas fa-object-group"></i></button>
                </div>
                <ul class="dm-layer-list"></ul>
            </div>

            <div class="dm-props-section">
                <h6>Saved Drawings</h6>
                <ul class="dm-saved-list"></ul>
            </div>
        </div>
    </div>

    <div class="dm-status-bar">
        <span class="dm-coords">X: 0  Y: 0</span>
        <span>Tool: <strong class="dm-tool-label">pencil</strong></span>
        <span>Zoom: <strong class="dm-zoom-label">100%</strong></span>
        <span>MRD {{ $referenceId }}</span>
    </div>
</div>