@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-box {
            position: absolute;
            border: 2px dashed #007bff;
            background: rgba(0, 123, 255, 0.05);
            cursor: move;
            overflow: hidden;
            padding: 4px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            transition: box-shadow 0.2s ease;
            font-weight: 500;
            font-family: 'Segoe UI', sans-serif;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }




        .draggable-box:hover {
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
        }

        .draggable-box[data-type="Image"] {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 2px solid #666;
            opacity: 0.6;
            /* More transparent for visual clarity */
        }

        .active-box {
            outline: 2px dashed #ff3d00 !important;
            background-color: rgba(255, 61, 0, 0.05);
            z-index: 10;
        }

        /* Resize handles: left & right as small round buttons */
        .draggable-box .ui-resizable-e,
        .draggable-box .ui-resizable-w {
            width: 12px;
            height: 12px;
            top: 50%;
            margin-top: -6px;
            background: #007bff;
            border-radius: 50%;
            position: absolute;
            z-index: 2;
            cursor: ew-resize;
        }

        .draggable-box .ui-resizable-e {
            right: -6px;
        }

        .draggable-box .ui-resizable-w {
            left: -6px;
        }

        /* Hide default bottom-right resize handle */
        .draggable-box .ui-resizable-se {
            display: none !important;
        }

        #field-list button {
            border: none;
            padding: 6px 10px;
            margin: 4px 0;
            border-radius: 6px;
            background-color: #e7e7e7;
            font-weight: 600;
            width: 100%;
            text-align: left;
            transition: background 0.2s;
        }

        #field-list button.btn-active {
            background-color: #d1e7dd;
            color: #0f5132;
        }

        #field-list button.btn-inactive {
            background-color: #f8d7da;
            color: #842029;
        }

        #field-list button:hover {
            background-color: #d0d0d0;
        }
    </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 js-example-basic-single">
                                    <option value=""> Select Font</option>
                                    @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 js-example-basic-single">
                                    <option value="">Select Font Size</option>
                                    @foreach (range(40, 200) as $size)
                                        <option value="{{ $size }}">{{ $size }}</option>
                                    @endforeach
                                </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 w-100 p-0">
                            </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" class="text_allign" 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" class="text_allign"
                                            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" class="text_allign" 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>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-8 col-md-6">
                                <div class="doctor-birthday-card position-relative">
                                    <img id="main-image"
                                        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="{{ route('testTemplate', ['id' => $template_id]) }}"
                                    class=" btn btn-blue-button btn_text">Test
                                    Image</a>

                                {{--                                 <button class="btn btn-blue-button btn_text" 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 isOverlapping($box, allBoxes) {
            let newBox = $box[0].getBoundingClientRect();
            return allBoxes.toArray().some(box => {
                if (box === $box[0]) return false;
                let b = box.getBoundingClientRect();
                return !(newBox.right < b.left || newBox.left > b.right || newBox.bottom < b.top || newBox.top > b
                    .bottom);
            });
        }

        /* $('#save-fields').on('click', function() {
            collectBoxPositions();
        }); */

        function collectBoxPositions() {
            let positions = [];

            const image = document.getElementById('main-image'); // Your image must have this ID
            const renderedWidth = image.clientWidth;
            const renderedHeight = image.clientHeight;
            const intrinsicWidth = image.naturalWidth;
            const intrinsicHeight = image.naturalHeight;

            const scaleX = intrinsicWidth / renderedWidth;
            const scaleY = intrinsicHeight / renderedHeight;

            $(".draggable-box").each(function() {
                let $box = $(this);

                let left = parseInt($box.css("left"));
                let top = parseInt($box.css("top"));
                let width = parseInt($box.css("width"));
                let height = parseInt($box.css("height"));

                positions.push({
                    id: $box.data('id'),
                    font_size: $box.attr('data-font-size'),
                    font_style: $box.attr('data-font-family'),
                    font_color: $box.attr('data-font-color'),
                    text_align: $box.attr('data-text-align'),
                    x_position: Math.round(left * scaleX),
                    y_position: Math.round(top * scaleY),
                    width: Math.round(width * scaleX),
                    height: Math.round(height * scaleY)
                });
            });

            $.ajax({
                url: '/saveFields',
                method: 'POST',
                data: {
                    fields: positions,
                    template_id: "{{ $template_id }}",
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    /*                     $.notify("Update successful", "success");
                     */
                },
                error: function(xhr) {
                    $.notify("Update failed:", xhr.responseText, "error");
                }
            });
        }

        function setActiveBox($box) {
            $('.draggable-box').removeClass('active-box');
            $box.addClass('active-box');

            let fontSize = $box.attr('data-font-size') || '';
            let fontColor = $box.attr('data-font-color') || '#000000';
            let fontFamily = $box.attr('data-font-family') || '';
            let textAlign = $box.attr('data-text-align') || 'center';


            if (fontSize == 'null') {
                $('#font-size').val('').trigger('change');
            } else {
                $('#font-size').val(fontSize).trigger('change');
            }

            if (fontFamily == 'null') {
                $('#font-style').val('').trigger('change');
            } else {
                $('#font-style').val(fontFamily).trigger('change');
            }


            $(`input[name="text_alignment"][value="${textAlign}"]`).prop('checked', true);
            $('#font-color').val(fontColor);



            let $active = $('.active-box');
            if ($active.length) {
                let $text = $active.find('.field-text');



                if (fontSize) {
                    $text.css('font-size', fontSize + 'px');
                    $active.attr('data-font-size', fontSize);
                }

                if (fontColor) {
                    $text.css('color', fontColor);
                    $active.attr('data-font-color', fontColor);
                }

                if (fontFamily) {
                    $text.css('font-family', fontFamily);
                    $active.attr('data-font-family', fontFamily);
                }

                if (textAlign) {
                    $text.css('text-align', textAlign);
                    $text.css('align-items', textAlign);
                    $text.css('justify-content', textAlign);
                    $text.css('width', '100% ');
                    $active.attr('data-text-align', textAlign);

                }
            }

            collectBoxPositions();

        }


        function rgbToHex(rgb) {
            if (!rgb) return '#000000';
            let rgbArr = rgb.match(/\d+/g);
            if (!rgbArr) return '#000000';
            return "#" + rgbArr.map(x => ('0' + parseInt(x).toString(16)).slice(-2)).join('');
        }

        function initializeDragResize() {
            $(".draggable-box").each(function() {
                let $this = $(this);
                let isImage = $this.data("type") === "Image";

                $this.draggable({
                    containment: "#input-overlay",
                    stop: function(event, ui) {
                        if (isOverlapping($this, $(".draggable-box"))) {
                            alert("Boxes cannot overlap!");
                            ui.helper.css({
                                top: $this.data('y') || 0,
                                left: $this.data('x') || 0
                            });
                        } else {
                            $this.data('x', ui.position.left);
                            $this.data('y', ui.position.top);
                            setActiveBox($this);
                        }
                    }
                }).resizable({
                    containment: "#input-overlay",
                    aspectRatio: isImage ? 1 : false,
                    stop: function(event, ui) {
                        $this.data('width', ui.size.width);
                        $this.data('height', ui.size.height);
                        setActiveBox($this);
                    }
                }).on('click', function() {
                    setActiveBox($(this));
                });
            });
        }

        function setFields() {
            let template_id = $('#template_id').val();

            $.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');
                        let inputOverlay = $('#input-overlay');
                        const image = document.getElementById('main-image');
                        const renderedWidth = image.clientWidth;
                        const renderedHeight = image.clientHeight;
                        const intrinsicWidth = image.naturalWidth;
                        const intrinsicHeight = image.naturalHeight;

                        const scaleX = renderedWidth / intrinsicWidth;
                        const scaleY = renderedHeight / intrinsicHeight;

                        fieldList.empty();
                        inputOverlay.empty();

                        response.fields.forEach(field => {
                            let buttonClass = field.field_status === 'active' ? 'btn-active' :
                                'btn-inactive';
                            let checkIcon = '<img src="./../assets/images/ger_check.png" class="ms-2">';

                            let x = field.x_position ?? 0;
                            let y = field.y_position ?? 0;
                            let width = field.width ?? 500;
                            let height = field.height ?? 100;

                            // Scale from intrinsic → rendered
                            x = Math.round(x * scaleX);
                            y = Math.round(y * scaleY);
                            width = Math.round(width * scaleX);
                            height = Math.round(height * scaleY);

                            let boxStyle = `top: ${y}px; left: ${x}px; position: absolute;`;

                            if (field.field_type === 'Image') {
                                width = height = width;
                                let imageUrl = "{{ asset('assets/images/profile_image.png') }}";
                                boxStyle += `
                                width: ${width}px; height: ${height}px;
                                background-image: url('${imageUrl}');
                                background-size: cover;
                                background-position: center;
                                border: 2px solid #555;
                            `;
                            } else {
                                boxStyle += `
                                width: ${width}px; height: ${height}px;
                                background: rgba(0,0,255,0.1);
                                border: 1px dashed #333;
                            `;
                            }

                            let fieldHTML = `<li>
                            <button class="${buttonClass}" onclick="changeStatus(${field.id})">
                                ${field.field_name}${field.field_status === 'active' ? checkIcon : ''}
                            </button>
                        </li>`;
                            fieldList.append(fieldHTML);

                            if (field.field_status === 'active') {
                                let box = $(`
                                <div class="draggable-box"
                                     data-id="${field.id}"
                                     data-type="${field.field_type}"
                                     data-font-size="${field.font_size}"
                                     data-font-color="${field.font_color}"
                                     data-font-family="${field.font_style}"
                                     data-text-align="${field.x_alignment}"
                                     style="${boxStyle}">
${field.field_type !== 'Image' ? `<span class="field-text">${field.field_name}</span>` : ''}
                                </div>
                            `);
                                inputOverlay.append(box);
                            }
                        });

                        initializeDragResize();
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function changeStatus(id) {
            let template_id = $('#template_id').val();

            $.ajax({
                url: "{{ route('changeFieldStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    'template_id': template_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");
                }
            });
        }

        $('#font-style, #font-size, #font-color, .text_allign').on('change', function() {
            setStyle();
            collectBoxPositions();
        });

        function setStyle() {
            let $active = $('.active-box');
            if ($active.length) {
                let fontSize = $('#font-size').val();
                let fontColor = $('#font-color').val();
                let fontFamily = $('#font-style').val();
                let textAlign = $('input[name="text_alignment"]:checked').val();

                let $text = $active.find('.field-text');

                if (fontSize) {
                    $text.css('font-size', fontSize + 'px');
                    $active.attr('data-font-size', fontSize);
                }

                if (fontColor) {
                    $text.css('color', fontColor);
                    $active.attr('data-font-color', fontColor);
                }

                if (fontFamily) {
                    $text.css('font-family', fontFamily);
                    $active.attr('data-font-family', fontFamily);
                }

                if (textAlign) {
                    $text.css('text-align', textAlign);
                    $text.css('align-items', textAlign);
                    $text.css('justify-content', textAlign);
                    $text.css('width', '100% ');
                    $active.attr('data-text-align', textAlign);

                }
            }
        }


        $(document).ready(function() {
            setFields();
        });
    </script>
@endsection