{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <h1 class="text-center">Cipher Shield Graphics</h1>
    <p class="text-center">Your personal graphics designing software</p>

    <div class="row mt-5">
        <div class="col-md-3">
            <h4>Tools</h4>
            <hr>
            <button id="add-rect" class="btn btn-primary btn-block">Add Rectangle</button>
            <button id="add-text" class="btn btn-secondary btn-block mt-2">Add Text</button>
            <hr>
            <label for="image-upload">Upload Image:</label>
            <input type="file" id="image-upload" class="form-control-file">
            <hr>
            <label for="color-picker">Color:</label>
            <input type="color" id="color-picker" class="form-control">
            <hr>
            <button id="bring-to-front" class="btn btn-info btn-block mt-2">Bring to Front</button>
            <button id="send-to-back" class="btn btn-info btn-block mt-2">Send to Back</button>
            <hr>
            <button id="delete-object" class="btn btn-danger btn-block mt-2">Delete Selected</button>
            <hr>
            <button id="download" class="btn btn-success btn-block mt-2">Download as Image</button>

        </div>
        <div class="col-md-9">
            <canvas id="canvas" width="800" height="600" style="border: 1px solid #ccc;"></canvas>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<script>
    const canvas = new fabric.Canvas('canvas');

    document.getElementById('add-rect').addEventListener('click', () => {
        const rect = new fabric.Rect({
            left: 100,
            top: 100,
            fill: 'red',
            width: 200,
            height: 100
        });
        canvas.add(rect);
    });

    document.getElementById('add-text').addEventListener('click', () => {
        const text = new fabric.IText('Hello, world!', {
            left: 100,
            top: 100
        });
        canvas.add(text);
    });

    document.getElementById('image-upload').addEventListener('change', (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = (f) => {
            fabric.Image.fromURL(f.target.result, (img) => {
                canvas.add(img);
            });
        };
        reader.readAsDataURL(file);
    });

    document.getElementById('color-picker').addEventListener('change', (e) => {
        const activeObject = canvas.getActiveObject();
        if (activeObject) {
            activeObject.set('fill', e.target.value);
            canvas.renderAll();
        }
    });

    document.getElementById('delete-object').addEventListener('click', () => {
        const activeObject = canvas.getActiveObject();
        if (activeObject) {
            canvas.remove(activeObject);
        }
    });

    document.getElementById('bring-to-front').addEventListener('click', () => {
        const activeObject = canvas.getActiveObject();
        if (activeObject) {
            canvas.bringToFront(activeObject);
        }
    });

    document.getElementById('send-to-back').addEventListener('click', () => {
        const activeObject = canvas.getActiveObject();
        if (activeObject) {
            canvas.sendToBack(activeObject);
        }
    });

    document.getElementById('download').addEventListener('click', () => {
        const dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
        });
        const link = document.createElement('a');
        link.href = dataURL;
        link.download = 'cipher-shield-graphic.png';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });

</script>
{% endblock %}