@extends('layout.main')

@section('header-css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" />
    <style>
        canvas {
            width: 100%; /* Scale to the column width */
            height: auto; /* Maintain aspect ratio */
            max-width: 100%; /* Prevent overflow */
        }
    </style>
@endsection

@section('main-container')
    <div class="container">
        <div class="row">
            <!-- Canvas on the left side -->
            <div class="col-lg-9 col-md-12 col-sm-12 mx-auto">
                <div class="canvas-wrapper">
                    <input style="max-width: 100%" type="file" class="form-control mb-2" id="upload" accept="image/*" />
                    <div class="mt-4 d-flex">
                        <canvas id="canvas"></canvas>
                    </div>

                    <!-- Modal for Cropping -->
                    <div class="modal fade" id="cropper-modal" tabindex="-1" aria-labelledby="cropperModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="cropperModalLabel"> {{ __t("Crop Image") }} </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                        id="close-cropper-modal"></button>
                                </div>
                                <div class="modal-body">
                                    <img style="width: 100%" id="cropper-image" />
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="apply-crop" class="btn btn-success"> {{ __t("Apply Crop") }} </button>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> {{ __t("Close") }} </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 mt-4">
                <!-- Tools and buttons on the right side -->
                <div class="controls-wrapper mt-5">

                    <!-- Input field for user text -->
                    <div class="mb-3">
                        <input type="text" id="text-input" class="form-control mb-2" placeholder="Enter your text" />
                        <button class="bs-btn bs-btn-danger" onclick="addText()"> {{ __t("Add Text") }} <i class="bi bi-fonts"></i>
                        </button>
                    </div>
                    {{-- <div class="container"> --}}
                        <div class="row">
                            <div class="color-title">
                                {{ __t("Color Selection") }}
                            </div>
                        </div>
                    {{-- </div> --}}

                    <!-- Font Color -->
                    <div class="color-container mt-1 d-flex">
                        <label class="color-label" for="font-color"> {{ __t("Color") }}</label>
                        <div class="color-box-container" id="font-color">
                            <div class="color-box" onclick="changeTextColor('#ff0000')" style="background-color: #ff0000;">
                            </div>
                            <div class="color-box" onclick="changeTextColor('#00ff00')" style="background-color: #00ff00;">
                            </div>
                            <div class="color-box" onclick="changeTextColor('#0000ff')" style="background-color: #0000ff;">
                            </div>
                            <div class="color-box" onclick="changeTextColor('#ffff00')" style="background-color: #ffff00;">
                            </div>
                            <div class="color-box" onclick="changeTextColor('#ff00ff')" style="background-color: #ff00ff;">
                            </div>
                            <div class="color-box" onclick="changeTextColor('#00ffff')" style="background-color: #00ffff;">
                            </div>
                            <div class="color-box" onclick="changeTextColor('#000000')" style="background-color: #000000;">
                            </div>
                            <div class="color-box" onclick="changeTextColor('#ffffff')"
                                style="background-color: #ffffff; border: 1px solid #ccc;"></div>
                        </div>
                    </div>

                    <!-- Background Color -->
                    <div class="color-container mt-1 d-flex">
                        <label class="color-label" for="bg-color"> {{ __t("Background") }} </label>
                        <div class="color-box-container" id="bg-color">
                            <div class="color-box" onclick="changeTextBackgroundColor('#ff0000')"
                                style="background-color: #ff0000;"></div>
                            <div class="color-box" onclick="changeTextBackgroundColor('#00ff00')"
                                style="background-color: #00ff00;"></div>
                            <div class="color-box" onclick="changeTextBackgroundColor('#0000ff')"
                                style="background-color: #0000ff;"></div>
                            <div class="color-box" onclick="changeTextBackgroundColor('#ffff00')"
                                style="background-color: #ffff00;"></div>
                            <div class="color-box" onclick="changeTextBackgroundColor('#ff00ff')"
                                style="background-color: #ff00ff;"></div>
                            <div class="color-box" onclick="changeTextBackgroundColor('#00ffff')"
                                style="background-color: #00ffff;"></div>
                            <div class="color-box" onclick="changeTextBackgroundColor('#000000')"
                                style="background-color: #000000;"></div>
                            <div class="color-box" onclick="changeTextBackgroundColor('#ffffff')"
                                style="background-color: #ffffff; border: 1px solid #ccc;"></div>
                        </div>
                    </div>


                    <!-- Canvas controls with icons -->
                    <div class="container">
                        <div class="row">
                            <div class="color-title">
                                {{ __t("Image Modification") }}
                            </div>
                            <div class="col-12">
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <button id="start-crop" class="icon-button" data-bs-toggle="tooltip"
                                        title="Crop Image">
                                        <i class="bi bi-crop"></i>
                                    </button>
                                    <button class="icon-button" onclick="flipImage('horizontal')"
                                        data-bs-toggle="tooltip" title="Flip Horizontal">
                                        <i class="bi bi-symmetry-horizontal"></i>
                                    </button>
                                    <button class="icon-button" onclick="flipImage('vertical')" data-bs-toggle="tooltip"
                                        title="Flip Vertical">
                                        <i class="bi bi-symmetry-vertical"></i>
                                    </button>
                                    <button class="icon-button" onclick="rotateImage('clockwise')"
                                        data-bs-toggle="tooltip" title="Rotate Clockwise">
                                        <i class="bi bi-arrow-repeat"></i>
                                    </button>
                                    <button class="icon-button" onclick="rotateImage('anticlockwise')"
                                        data-bs-toggle="tooltip" title="Rotate Anticlockwise">
                                        <i class="bi bi-arrow-counterclockwise"></i>
                                    </button>
                                    <button class="icon-button" onclick="deleteSelectedText()" data-bs-toggle="tooltip"
                                        title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    <button class="icon-button" onclick="undo()" data-bs-toggle="tooltip"
                                        title="Undo">
                                        <i class="bi bi-arrow-return-left"></i>
                                    </button>
                                    <button class="icon-button" onclick="redo()" data-bs-toggle="tooltip"
                                        title="Redo">
                                        <i class="bi bi-arrow-return-right"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="color-title">
                                {{ __t("Draw Shapes") }}
                            </div>
                            <div class="col-12">
                                <button class="icon-button" onclick="addRectangle()" data-bs-toggle="tooltip"
                                    title="Add Rectangle">
                                    <i class="bi bi-square"></i>
                                </button>
                                <button class="icon-button" onclick="addCircle()" data-bs-toggle="tooltip"
                                    title="Add Circle">
                                    <i class="bi bi-circle"></i>
                                </button>
                                <!-- Additional Shapes Buttons -->
                                <button class="icon-button" onclick="addTriangle()" data-bs-toggle="tooltip"
                                    title="Add Triangle">
                                    <i class="bi bi-triangle"></i>
                                </button>
                                <button class="icon-button" onclick="addLine()" data-bs-toggle="tooltip"
                                    title="Add Line">
                                    <i class="bi bi-slash-lg"></i>
                                </button>
                                <button class="icon-button" onclick="addEllipse()" data-bs-toggle="tooltip"
                                    title="Add Ellipse">
                                    <i class="bi bi-egg"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Range slider section -->
                        <div class="row mt-1">
                            <div class="col-12 text-center">
                                <label for="rotate-slider" class="form-label"> {{ __t("Rotate Object") }} </label>
                                <input class="form-range" type="range" id="rotate-slider" min="0"
                                    max="360" step="1" value="0"
                                    oninput="rotateSelectedObject(this.value)" />
                            </div>

                            <button class="btn btn-success mt-3" onclick="downloadImage()">
                                {{ __t("Download") }} <i class="bi bi-download"></i>
                            </button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        window.addEventListener('resize', resizeCanvas);

function resizeCanvas() {
    const canvas = document.getElementById('canvas');
    const parent = canvas.parentElement; // The Bootstrap column
    const width = parent.offsetWidth;
    const height = width * 0.75; // Adjust aspect ratio (e.g., 4:3)

    canvas.width = width;
    canvas.height = height;
}

// Initial resize
resizeCanvas();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/fabric@4.5.1/dist/fabric.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
    <script src="{{ asset('/assets/js/modification.js') }}"></script>
@endsection