@extends('user.app.layout')

@section('content')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">

    <style>
        .draggable-field {
            cursor: move;
            display: flex;
            justify-content: center;
            align-items: center;
            resize: both;
            overflow: hidden;
        }

        .draggable-field.active {
            border: 2px solid #007bff;
            /* Highlight the active field */
            background-color: rgba(0, 123, 255, 0.1);
            /* Optional background highlight */
        }
    </style>
    <div class="main-content">

        <section class="table-section">
            <div class="template-header">
                <div class="template-left">
                    <a href="{{ route('editTemplate', ['id' => $template_id]) }}">
                        <span class="me-3">
                            <img src="../assets/images/vuesax-linear-arrow-left.svg" alt="image">
                        </span>
                    </a>
                    Templates
                </div>

                <div class="template-right"><span class="me-2"><a
                            href="{{ route('editTemplate', ['id' => $template_id]) }}"><img src="../assets/images/d3.svg"
                                alt="image"></span>Templates</a><span class="me-2 ms-2"><img
                            src="../assets/images/arrow-left (1).svg" alt="image"><a
                            href="{{ route('templateFieldSet', ['template_id' => $template_id]) }}"></span>Media</a><span
                        class="me-2 ms-2"><img src="../assets/images/arrow-left (1).svg" alt="image"></span>Set Fields
                </div>
            </div>
            <div class="template-content-1">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="row">
                            <div class="col-lg-12">
                                <input type="hidden" id="template_id" name="template_id" value="{{ $template_id }}">
                                <div class="doctor-card-2 ">
                                    <form>
                                        <input class="input-elevated" type="text" placeholder="Search Contact">
                                    </form>
                                    <div class="accordion" id="accordionExample">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingOne">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                    data-bs-target="#collapseOne" aria-expanded="true"
                                                    aria-controls="collapseOne">
                                                    Audience Details
                                                </button>
                                            </h2>
                                            <div id="collapseOne" class="accordion-collapse collapse show"
                                                aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <ul id="field-list">
                                                        <!-- Dynamic fields will be appended here -->
                                                    </ul>
                                                </div>
                                            </div>

                                            {{-- <div id="collapseOne" class="accordion-collapse collapse show"
                                                aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <ul>
                                                        <li><button>Name <img src="./../assets/images/ger_check.png"
                                                                    class="ms-2"></button></li>
                                                        <li><button>Email</button></li>
                                                        <li><button>Mobile Number <img
                                                                    src="./../assets/images/ger_check.png"
                                                                    class="ms-2"></button></li>
                                                        <li><button>WhatsApp Number </button></li>
                                                        <li><button>Photo <img src="./../assets/images/ger_check.png"
                                                                    class="ms-2"></button></li>
                                                        <li><button>Business Name </button></li>
                                                        <li><button>Business Logo <img
                                                                    src="./../assets/images/ger_check.png"
                                                                    class="ms-2"></button></li>
                                                        <li><button>Address </button></li>
                                                    </ul>
                                                </div>
                                            </div> --}}
                                        </div>

                                    </div>
                                </div>
                            </div>
                            {{-- <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="doctor-card">
                                    <h4 class="pb-3">Audience Data</h4>
                                    <div class="doctor-card-title">
                                        <div class="d-left">Name</div>
                                        <div class="d-right">
                                            <img src="../assets/images/vuesax-linear-copy.svg" class="pe-2"
                                                alt="image">
                                            <!-- <img src="../assets/images/Group 27600.svg" class="pe-2" alt="image"> -->
                                            <img src="../assets/images/Group 27601.svg" alt="image">
                                        </div>
                                    </div>
                                    <div class="doctor-card-title">
                                        <div class="d-left">Email</div>
                                        <div class="d-right">
                                            <img src="../assets/images/vuesax-linear-copy.svg" class="pe-2"
                                                alt="image">
                                            <!-- <img src="../assets/images/Group 27600.svg" class="pe-2" alt="image"> -->
                                            <img src="../assets/images/Group 27601.svg" alt="image">
                                        </div>
                                    </div>
                                    <div class="doctor-card-title">
                                        <div class="d-left">Mobile Number</div>
                                        <div class="d-right">
                                            <img src="../assets/images/vuesax-linear-copy.svg" class="pe-2"
                                                alt="image">
                                            <!-- <img src="../assets/images/Group 27600.svg" class="pe-2" alt="image"> -->
                                            <img src="../assets/images/Group 27601.svg" alt="image">
                                        </div>
                                    </div>
                                    <div class="doctor-card-title">
                                        <div class="d-left">WhatsApp Number</div>
                                        <div class="d-right">
                                            <img src="../assets/images/vuesax-linear-copy.svg" class="pe-2"
                                                alt="image">
                                            <!-- <img src="../assets/images/Group 27600.svg" class="pe-2" alt="image"> -->
                                            <img src="../assets/images/Group 27601.svg" alt="image">
                                        </div>
                                    </div>
                                    <div class="doctor-card-title">
                                        <div class="d-left">Photo</div>
                                        <div class="d-right">
                                            <img src="../assets/images/vuesax-linear-copy.svg" class="pe-2"
                                                alt="image">
                                            <!-- <img src="../assets/images/Group 27600.svg" class="pe-2" alt="image"> -->
                                            <img src="../assets/images/Group 27601.svg" alt="image">
                                        </div>
                                    </div>
                                </div>

                            </div> --}}
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="doctor-card-1">
                            <div class="form-group-1">
                                <label for="font-style">Style</label>
                                <select name="font_style" id="font-style" class="form-control form-control_select">
                                    @foreach ($fonts as $font)
                                        <option value="{{ $font->id }}">{{ $font->font_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group-1">
                                <label for="font-size">Size</label>
                                <select name="font_size" id="font-size" class="form-control form-control_select">
                                    <!-- Options for font sizes dynamically added through JavaScript -->
                                </select>
                            </div>
                            <div class="form-group-1">
                                <label for="font-color">Color</label>
                                <input type="color" id="font-color" name="font_color" class="form-control">
                            </div>
                            <div class="form-group-1">
                                <label for="text-alignment">Alignment</label>
                                <div class="custom-radios form-control-radio" id="text-alignment">
                                    <div>
                                        <input type="radio" id="align-left" name="text_alignment" value="left">
                                        <label for="align-left">
                                            <span>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24">
                                                    <path d="M0,0H18" transform="translate(3 4.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    <path d="M0,0H9.47" transform="translate(3 9.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    <path d="M0,0H18" transform="translate(3 14.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    <path d="M0,0H9.47" transform="translate(3 19.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                </svg>
                                            </span>
                                        </label>
                                    </div>
                                    <div>
                                        <input type="radio" id="align-center" name="text_alignment" value="center"
                                            checked>
                                        <label for="align-center">
                                            <span>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24">
                                                    <path d="M0,0H18" transform="translate(3 4.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H9.48" transform="translate(7.26 9.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H18" transform="translate(3 14.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H9.48" transform="translate(7.26 19.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                </svg>
                                            </span>
                                        </label>
                                    </div>
                                    <div>
                                        <input type="radio" id="align-right" name="text_alignment" value="right">
                                        <label for="align-right">
                                            <span>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24">
                                                    <path d="M0,0H18" transform="translate(3 4.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H9.47" transform="translate(11.53 9.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H18" transform="translate(3 14.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H9.47" transform="translate(11.53 19.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                </svg>
                                            </span>
                                        </label>
                                    </div>
                                    <div>
                                        <input type="radio" id="align-justify" name="text_alignment" value="justify">
                                        <label for="align-justify">
                                            <span>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24">
                                                    <path d="M0,0H18" transform="translate(3 4.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H18" transform="translate(3 9.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H18" transform="translate(3 14.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                    <path d="M0,0H18" transform="translate(3 19.5)" stroke="#a0a5b9"
                                                        stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="1.5" />
                                                </svg>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-4 col-md-6">
                                <div class="doctor-birthday-card position-relative">
                                    <img id="image-id"
                                        src="{{ asset('storage/Images/template') . '/' . $template->template_file }}"
                                        alt="image" class="w-100">
                                    <div id="input-overlay" class="position-absolute top-0 start-0 w-100 h-100"></div>
                                </div>
                            </div>

                            <div class="col-lg-8 col-md-6 col-sm-12 text-center text-md-end text-lg-end text-xl-end">
                                <a href="../assets/images/dummyPoster.png" class="image_view btn btn-blue-button btn_text"
                                    href="javascript:void(0)">Test
                                    Image</a>
                            </div>
                            <div class="col-lg-8 col-md-6 col-sm-12 text-center text-md-end text-lg-end text-xl-end">
                                <button id="save-fields">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('js')
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

    <script>
        let activeField = null;

        function setFields() {
            let template_id = $('#template_id').val();
            const image = document.getElementById('image-id'); // Reference to the image

            const originalWidth = parseFloat(image.getAttribute('data-original-width'));
            const originalHeight = parseFloat(image.getAttribute('data-original-height'));
            const renderedWidth = image.clientWidth;
            const renderedHeight = image.clientHeight;

            // Calculate scaling factors
            const scaleX = renderedWidth / originalWidth;
            const scaleY = renderedHeight / originalHeight;

            $.ajax({
                url: "{{ route('setFields') }}",
                type: 'POST',
                data: {
                    'template_id': template_id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status === 1) {
                        let fieldList = $('#field-list'); // Preserve the field list
                        let inputOverlay = $('#input-overlay'); // Overlay for draggable fields

                        fieldList.empty(); // Clear the field list
                        inputOverlay.empty(); // Clear the input overlay

                        response.fields.forEach(field => {
                            // Add buttons for changing statuses
                            let buttonClass = field.field_status === 'active' ? 'btn-active' :
                                'btn-inactive';
                            let checkIcon = '<img src="./../assets/images/ger_check.png" class="ms-2">';
                            let fieldHTML = `
                    <li>
                        <button 
                            class="${buttonClass}" 
                            onclick="changeStatus(${field.id})">
                            ${field.field_name}${field.field_status === 'active' ? checkIcon : ''}
                        </button>
                    </li>`;
                            fieldList.append(fieldHTML);

                            // Add draggable fields if active
                            if (field.field_status === 'active') {
                                // Adjust dimensions and positions using scaling factors
                                const scaledTop = field.y_position * scaleY;
                                const scaledLeft = field.x_position * scaleX;
                                const scaledWidth = field.width * scaleX;
                                const scaledHeight = field.height * scaleY;

                                let inputFieldHTML = `
                        <div id="field-${field.id}" 
                            class="draggable-field position-absolute" 
                            style="
                                top: ${scaledTop}px; 
                                left: ${scaledLeft}px; 
                                width: ${scaledWidth}px; 
                                height: ${scaledHeight}px;
                                font-size: ${field.font_size * scaleY}px; 
                                font-family: ${field.font_style}; 
                                color: ${field.font_color}; 
                                text-align: ${field.x_alignment};
                            " 
                            data-style="${field.font_style}" 
                            data-size="${field.font_size}" 
                            data-color="${field.font_color}" 
                            data-alignment="${field.x_alignment}">
                            <input type="text" 
                                class="form-control" 
                                placeholder="${field.field_name}" 
                                style="width: 100%; height: 100%; margin: 0; text-align: ${field.x_alignment};">
                        </div>`;
                                inputOverlay.append(inputFieldHTML);
                            }
                        });

                        makeFieldsDraggableAndResizable(); // Reinitialize draggable and resizable fields
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }





        function changeStatus(id) {
            $.ajax({
                url: "{{ route('changeFieldStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status === 1) {
                        setFields();
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function makeFieldsDraggableAndResizable() {
            $('.draggable-field').each(function() {
                $(this).children('input').before('<div class="drag-handle"></div>'); // Create a draggable handle

                $(this).find('.drag-handle').css({
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '50%',
                    height: '100%',
                    cursor: 'move',
                    background: 'rgba(0, 0, 0, 0.1)', // Optional background for better visibility of the handle
                });

                $(this).draggable({
                    handle: '.drag-handle', // Use only the left 50% area to drag the field
                    containment: "#input-overlay", // Keeps the drag inside the input overlay
                    cursor: "move", // Indicates that the field can be moved
                    start: function() {
                        $(this).addClass('active'); // Add active class on drag start
                    },
                    drag: function(event, ui) {
                        if (isOverlapping(ui.helper)) {
                            ui.helper.css('background-color', 'rgba(255, 0, 0, 0.2)');
                        } else {
                            ui.helper.css('background-color', '');
                        }
                    },
                    stop: function(event, ui) {
                        $(this).removeClass('active'); // Remove active class on drag stop
                        $(this).css('background-color', ''); // Reset background color

                        if (isOverlapping(ui.helper)) {
                            let prevPosition = $(this).data('prev-position');
                            ui.helper.css({
                                left: prevPosition.left,
                                top: prevPosition.top,
                            });
                        } else {
                            $(this).data("x", ui.position.left);
                            $(this).data("y", ui.position.top);
                        }

                        setLastActive($(this));
                    }
                }).resizable({
                    containment: "#input-overlay", // Keeps resizing inside the input overlay
                    start: function() {
                        $(this).addClass('active'); // Add active class on resize start
                    },
                    resize: function(event, ui) {
                        if (isOverlapping(ui.helper)) {
                            ui.helper.css('background-color', 'rgba(255, 0, 0, 0.2)');
                        } else {
                            ui.helper.css('background-color', '');
                        }
                    },
                    stop: function(event, ui) {
                        $(this).removeClass('active'); // Remove active class on resize stop
                        $(this).css('background-color', ''); // Reset background color

                        if (isOverlapping(ui.helper)) {
                            let prevSize = $(this).data('prev-size');
                            ui.helper.css({
                                width: prevSize.width,
                                height: prevSize.height,
                            });
                        } else {
                            $(this).data("width", ui.size.width);
                            $(this).data("height", ui.size.height);
                        }

                        setLastActive($(this));
                    }
                });

                $(this).data('prev-position', {
                    left: $(this).position().left,
                    top: $(this).position().top,
                });
                $(this).data('prev-size', {
                    width: $(this).width(),
                    height: $(this).height(),
                });

                $(this).click(function() {
                    setLastActive($(this));
                });
            });
        }

        function setLastActive(field) {
            $('.draggable-field').not(field).each(function() {
                $(this).removeClass('last-active');
            });

            field.addClass('last-active');

            const style = field.data('style') || 'default-style';
            const size = field.data('size') || 'default-size';
            const color = field.data('color') || '#000000'; // Default to black color
            const alignment = field.data('alignment') || 'left';

            field.data('style', style);
            field.data('size', size);
            field.data('color', color);
            field.data('alignment', alignment);

            $('#font-style').val(style);
            $('#font-size').val(size);
            $('#font-color').val(color);
            $("input[name='text_alignment'][value='" + alignment + "']").prop('checked', true);

            $('#font-style').change(function() {
                field.data('style', $(this).val());
                applyTextStyles(field);
            });

            $('#font-size').change(function() {
                field.data('size', $(this).val());
                applyTextStyles(field);
            });

            $('#font-color').change(function() {
                field.data('color', $(this).val());
                applyTextStyles(field);
            });

            $('input[name="text_alignment"]').change(function() {
                field.data('alignment', $(this).val());
                applyTextStyles(field);
            });

            applyTextStyles(field);
        }

        function applyTextStyles(field) {
            const style = field.data('style');
            const size = field.data('size');
            const color = field.data('color');
            const alignment = field.data('alignment');

            field.css({
                'font-family': style,
                'font-size': size + 'px',
                'color': color,
                'text-align': alignment
            });
        }



        function isOverlapping(element) {
            let isOverlapping = false;
            let currentOffset = element.offset();
            let currentWidth = element.outerWidth();
            let currentHeight = element.outerHeight();

            $('.draggable-field').not(element).each(function() {
                let otherOffset = $(this).offset();
                let otherWidth = $(this).outerWidth();
                let otherHeight = $(this).outerHeight();

                if (
                    currentOffset.left < otherOffset.left + otherWidth &&
                    currentOffset.left + currentWidth > otherOffset.left &&
                    currentOffset.top < otherOffset.top + otherHeight &&
                    currentOffset.top + currentHeight > otherOffset.top
                ) {
                    isOverlapping = true;
                    return false; // Break the loop
                }
            });

            return isOverlapping;
        }




        $('#save-fields').click(function() {
            let fieldsData = [];
            let image = $('#image-id'); // Replace with your image selector
            let originalWidth = image.data('original-width');
            let originalHeight = image.data('original-height');
            let displayedWidth = image.width();
            let displayedHeight = image.height();

            if (!originalWidth || !originalHeight) {
                console.error(
                    "Original dimensions are missing. Ensure the image has loaded and data attributes are set.");
                return;
            }

            let scaleX = originalWidth / displayedWidth;
            let scaleY = originalHeight / displayedHeight;

            $('.draggable-field').each(function() {
                let id = $(this).attr('id').split('-')[1];

                let x = ($(this).data('x') || $(this).position().left) * scaleX;
                let y = ($(this).data('y') || $(this).position().top) * scaleY;
                let width = ($(this).data('width') || $(this).width()) * scaleX;
                let height = ($(this).data('height') || $(this).height()) * scaleY;

                let style = $(this).data('style');
                let size = $(this).data('size');
                let color = $(this).data('color');
                let alignment = $(this).data('alignment');

                fieldsData.push({
                    id: id,
                    x: Math.round(x),
                    y: Math.round(y),
                    width: Math.round(width),
                    height: Math.round(height),
                    style: style, // Add style
                    size: size, // Add size
                    color: color, // Add color
                    alignment: alignment // Add alignment
                });
            });

            let template_id = $('#template_id').val();



            $.ajax({
                url: "{{ route('saveFields') }}",
                type: 'POST',
                data: {
                    fields: fieldsData,
                    'template_id': template_id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response) {
                    if (response.status === 1) {
                        $.notify(response.msg, "success");
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        });




        $(document).ready(function() {
            const select = document.getElementById('font-size');
            for (let i = 1; i <= 100; i++) {
                const option = document.createElement('option');
                option.value = i;
                option.textContent = i;
                select.appendChild(option);
            }

            const image = document.getElementById('image-id');

            image.onload = function() {
                image.setAttribute('data-original-width', image.naturalWidth);
                image.setAttribute('data-original-height', image.naturalHeight);

                console.log('Original Width:', image.naturalWidth);
                console.log('Original Height:', image.naturalHeight);
            };

            if (image.complete) {
                image.onload();
            }



            $('#font-style').on('change', function() {
                var selectedFontId = $(this).val();
                $('.last-active').attr('data-style', selectedFontId);
            });

            $('#font-size').on('change', function() {
                var selectedSize = $(this).val();
                $('.last-active').attr('data-size', selectedSize);
            });

            $('#font-color').on('input', function() {
                var selectedColor = $(this).val();
                $('.last-active').attr('data-color', selectedColor);
            });

            $('#text-alignment input').on('change', function() {
                var selectedAlignment = $('input[name="text_alignment"]:checked').val();
                $('.last-active').attr('data-alignment', selectedAlignment);
            });

            setFields();
        });
    </script>
@endsection