<style>
    .camera-container {
    position: relative;
    width: 100%;
    height: auto;
}

video, canvas {
    width: 100%;
    height: auto;
}

</style>

<div class="modal fade" data-modal="true" id="cameraModal" data-backdrop="" data-keyboard="false">
    <div class="modal-content">

        <div class="modal-header">
            <h3 class="modal-title">Ambil Foto</h3>
            <button type="button" class="btn btn-xs btn-icon btn-light" data-modal-dismiss="true" id="closeModal">
                <i class="ki-outline ki-cross"></i>
            </button>
        </div>
        <!-- Camera Interface -->
        <div class="modal-body">
            <div class="camera-container relative">
                <video id="video" class="w-full h-auto" autoplay playsinline></video>
                <canvas id="canvas" class="hidden w-full h-auto"></canvas>
                <canvas id="drawingCanvas" class="hidden absolute top-0 left-0 w-full h-full"></canvas>
                <div id="textOverlay" class="position-absolute top-0 left-0 w-100 h-100 pointer-events-none">

                </div>
            </div>

            <div class="modal-footer mt-2">
                <div id="cameraControls" class="flex justify-center gap-2 mt-4">
                    <button type="button" id="startButton" class="btn btn-primary">
                        <i class="ki-outline ki-camera"></i> Start Camera
                    </button>
                    <button type="button" id="takePhotoButton" class="btn btn-success" disabled>
                        <i class="ki-outline ki-photograph"></i> Ambil Foto
                    </button>
                    <button type="button" id="switchButton" class="btn btn-info" disabled>
                        <i class="ki-outline ki-arrows-circle"></i> Switch Camera
                    </button>
                </div>

                <!-- Editor Controls -->
                <div id="editorControls" class=" flex flex-wrap gap-2 mt-4">
                    <div class="drawing-tools flex gap-2">

                        <button type="button" class="tool-btn btn btn-sm" data-tool="brush">
                            <i class="ki-filled ki-brush"></i>
                        </button>
                        <button type="button" class="tool-btn btn btn-sm" data-tool="rectangle">
                            <i class="ki-filled ki-frame"></i>
                        </button>
                        <button type="button" class="btn btn-light btn-sm tool-btn" data-tool="arrow">
                            <i class="ki-duotone ki-arrow-right fs-2"></i>
                        </button>
                        <button type="button" class="tool-btn btn btn-sm" data-tool="circle">
                            <i class="ki-filled ki-mouse-circle"></i>
                        </button>
                        <button type="button" class="tool-btn btn btn-sm" data-tool="text">
                            <i class="ki-filled ki-text"></i>
                        </button>
                    </div>

                    <div class="drawing-settings flex gap-2">
                        <input type="color" id="colorPicker" class="w-8 h-8 rounded">
                        <div class="flex items-center gap-2">
                            <input type="range" id="brushSize" min="1" max="20" value="5"
                                class="range range-sm">
                            <span id="brushSizeValue" class="text-sm">5px</span>
                        </div>
                        <input type="text" id="textInput" class="input" placeholder="Enter text">
                        <button type="button" class="btn btn-primary" id="confirmTextBtn">Add Text</button>
                    </div>

                    <div class="history-controls flex gap-2">
                        <button type="button" id="undoButton" class="btn btn-sm">
                            <i class="ki-filled ki-arrows-loop"></i>
                        </button>
                        <button type="button" id="resetButton" class="btn btn-sm">
                            <i class="ki-outline ki-trash"></i>
                        </button>
                    </div>

                    <div class="final-controls flex gap-2">
                        <button  type="button" class="btn btn-light btn-sm" data-modal-dismiss="true">Cancel</button>
                        <button id="backButton" class="btn btn-warning btn-sm">
                            <i class="ki-outline ki-arrow-left"></i> Kembali
                        </button>
                        <button type="button" id="saveButton" class="btn btn-success btn-sm" data-modal-dismiss="true">
                            <i class="ki-outline ki-check"></i> Simpan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
