<!DOCTYPE html>
<html>

<head>
    <title>{{ get_phrase('Certificate') }}</title>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/backend/vendors/bootstrap/bootstrap.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/global/jquery-ui-themes-1.13.2/themes/base/jquery-ui.css') }}">

    {{-- FlatIcons --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/icons/uicons-solid-rounded/css/uicons-solid-rounded.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/icons/uicons-bold-rounded/css/uicons-bold-rounded.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/icons/uicons-bold-straight/css/uicons-bold-straight.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/icons/uicons-regular-rounded/css/uicons-regular-rounded.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/icons/uicons-thin-rounded/css/uicons-thin-rounded.css') }}" />

    <link rel="stylesheet" type="text/css" href="{{ asset('assets/backend/css/style.css') }}">

    <script type="text/javascript" src="{{ asset('assets/backend/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/jquery-ui-1.13.2/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('assets/backend/vendors/bootstrap/bootstrap.bundle.min.js') }}"></script>

    <style type="text/css">
        .draggable {
            border: 2px dashed rgb(255, 255, 255);
            cursor: move;
            background-color: #15b57e33;
            top: 0;
        }

        .hidden-position:not(.certificate-layout-module) {
            background-color: #ffd3d3 !important;
        }

        .resizeable-canvas {
            width: 400px;
            padding: 10px;
            box-shadow: 1px 3px 11px -4px #565656;
            border-radius: 5px;
        }

        .certificate-layout-module.resizeable-canvas {
            padding: 0px !important;
        }

        .certificate-layout-module {
            background-color: #fff;
        }

        .sidebar {
            position: fixed;
            top: 0;
            right: -300px;
            bottom: 0;
            z-index: 200;
            background-color: #ffffff;
            width: 300px;
            height: 100%;
        }

        .sidebar.open {
            right: 0;
        }

        .sidebar-header {
            width: 100%;
            padding: 10px;
        }

        .sidebar-toggle {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 150;
        }

        .remove-item {
            position: absolute;
            top: -20px;
            right: -17px;
            background-color: white;
            border-radius: 50%;
            padding: 2px;
            height: 20px;
            width: 20px;
            font-size: 16px;
        }

        i:not(.fas, .fa, .fab) {
            line-height: 1.5em !important;
            vertical-align: -0.14em !important;
            display: inline-flex !important;
        }

        .dotted-background {
            width: 200px;
            height: 200px;
            background-image: radial-gradient(circle, #afafaf 1px, transparent 1px);
            background-size: 10px 10px;
            /* Adjust size of dots as needed */

            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background-color: #e4e5ff;
            width: 100%;
            height: 100%;
            padding-left: 10px;
            padding-top: 10px;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .sidebar-body {
            height: 100%;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <a onclick="$('.sidebar').addClass('open')" href="#" class="sidebar-toggle">
        <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="SVGRepo_bgCarrier" stroke-width="0" />
            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
            <g id="SVGRepo_iconCarrier">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H4ZM7 12C7 11.4477 7.44772 11 8 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H8C7.44772 13 7 12.5523 7 12ZM13 18C13 17.4477 13.4477 17 14 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14C13.4477 19 13 18.5523 13 18Z"
                    fill="#000000" />
            </g>
        </svg>
    </a>

    <div class="sidebar open">
        <div class="sidebar-header border-bottom d-flex align-items-center">
            <a class="btn" href="#" onclick="$('.sidebar').removeClass('open')">
                <i class="fi-rr-cross-small"></i>
            </a>
            {{ get_phrase('Certificate elements') }}
            <a class="ms-auto" href="{{ route('admin.certificate.settings') }}">{{ get_phrase('Back') }}</a>
        </div>

        <div class="sidebar-body">
            <div class="card border-0 m-2">
                <div class="card-body pt-0">
                    <h6 class="card-title mt-3">{{ get_phrase('Available Variable Data') }}</h6>
                    <span class="badge bg-secondary rounded-1">{course_duration}</span>
                    <span class="badge bg-secondary rounded-1">{instructor_name}</span>
                    <span class="badge bg-secondary rounded-1">{student_name}</span>
                    <span class="badge bg-secondary rounded-1">{course_title}</span>
                    <span class="badge bg-secondary rounded-1">{number_of_lesson}</span>
                    <span class="badge bg-secondary rounded-1">{qr_code}</span>
                    <span class="badge bg-secondary rounded-1">{course_completion_date}</span>
                    <span class="badge bg-secondary rounded-1">{certificate_download_date}</span>
                    <span class="badge bg-secondary rounded-1">{course_level}</span>
                    <span class="badge bg-secondary rounded-1">{course_language}</span>
                </div>
            </div>
            <div class="card border-0 m-2" id="custom_elem_form">
                <div class="card-body pt-2">
                    <h6 class="card-title">{{ get_phrase('Add a new element') }}</h6>
                    <form action="#">
                        <div class="mb-3">
                            <label for="certificate_element_content" class="form-label">{{ get_phrase('Enter Text with variable data') }}</label>
                            <textarea name="certificate_element_content" placeholder="{{ get_phrase('Total Lesson') }}:{number_of_lesson}" id="certificate_element_content" rows="3"
                                class="form-control"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="font_family_default" class="form-label">{{ get_phrase('Choice a font-family') }}</label><br>
                            <input type="radio" name="font_family" value="default" id="font_family_default" checked> <label
                                for="font_family_default">{{ get_phrase('Default') }}</label><br>
                            <input type="radio" name="font_family" value="Pinyon Script" id="font_family_pinyon_script"> <label
                                for="font_family_pinyon_script">{{ get_phrase('Pinyon Script') }}</label><br>
                        </div>
                        <div class="mb-3">
                            <label for="font_size" class="form-label">{{ get_phrase('Font Size') }}</label><br>
                            <input type="number" name="font_size" value="16" id="font_size" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <button type="button" class="btn ol-btn-light-primary w-100" onclick="addElemToCertificate()">{{ get_phrase('Add') }}</button>
                        </div>
                        <div class="mb-5">
                            <button type="button" class="btn ol-btn-primary w-100" onclick="saveTemplate()">{{ get_phrase('Save Template') }}</button>
                        </div>
                    </form>

                </div>
            </div>

        </div>
    </div>


    <div id="certificate_builder_content" class="builder dotted-background">

        {{-- Common style for page builder start--}}
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap%27');
            @import url('https://fonts.googleapis.com/css2?family=Miss+Fajardose&display=swap%27');
        </style>
        {{-- Common style for page builder END --}}

        @if (get_settings('certificate_builder_content'))
            @php
                $doc = new DOMDocument();
                // Load the HTML into the DOMDocument object
                // Suppress errors due to malformed HTML using '@'
                @$doc->loadHTML(get_settings('certificate_builder_content'));
                // Get the DOMDocument's body element
                $body = $doc->getElementsByTagName('body')->item(0);
                // Find the <img> element with the class 'certificate-template'
                $xpath = new DOMXPath($doc);
                $img = $xpath->query('//img[contains(@class, "certificate-template")]')->item(0);
                if ($img) {
                    // Update the src attribute
                    $newSrc = ''; // New URL
                    $img->setAttribute('src', get_image(get_settings('certificate_template')));
                }
                // Save the updated HTML
                $certificate_builder_content = $doc->saveHTML();
            @endphp
            {!! $certificate_builder_content !!}
        @else
            <div id="certificate-layout-module" class="certificate-layout-module resizeable-canvas draggable position-relative">
                <img class="certificate-template w-100 h-100" src="{{ get_image(get_settings('certificate_template')) }}">
            </div>
        @endif
    </div>
    <script>
        "use strict";

        function saveTemplate() {
            var certificate_builder_content = $('#certificate_builder_content').html();
            $.ajax({
                type: 'POST',
                url: "{{ route('admin.certificate.certificate.builder.update') }}",
                data: {
                    certificate_builder_content: certificate_builder_content
                },
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    $(location).attr('href', response);
                    console.log(response)
                }
            });
        }

        function addElemToCertificate() {
            var font_family = $("input[type='radio'][name='font_family']:checked").val();
            console.log(font_family);
            var font_size = $("#font_size").val();
            var certificate_element_content = $('#certificate_element_content').val();
            var certificateElem = `<div class="draggable resizeable-canvas" style="padding: 5px !important; position: absolute; font-size: ${font_size}px; top: 10px; left: 10px; width: min-content; font-family: '${font_family}';">
                ${certificate_element_content}
                <i class="remove-item fi-rr-cross-circle cursor-pointer" onclick="$(this).parent().remove()">
            </div>`;

            if (certificate_element_content != '') {
                $('#certificate-layout-module').append(certificateElem);
                $('#certificate_element_content').val('');
                $("#font_size").val(16);
                $("#font_family_default").attr('checked', 'checked');
                initialize();
            }
        }

        $(document).ready(function() {
            initialize();
        });

        function initialize() {
            $(".draggable").draggable();

            $(".resizeable-canvas").resizable({
                resize: function(event, ui) {
                    // When resizing starts, temporarily disable dragging
                    $(".draggable").draggable("disable");
                    positionTracking(this);
                },
                stop: function(event, ui) {
                    $(".draggable").draggable("enable");
                    positionTracking(this);
                }
            });


            $(".draggable").on("dragend", function(e, pos) {}).on("dragstart", function(e, pos) {}).on("dragstop", function(e, pos) {
                positionTracking(this);
            });
        }

        function positionTracking(e) {
            var layoutCanvasOffset = $('#certificate-layout-module').offset();
            var layoutCanvasRight = $('#certificate-layout-module').width() + layoutCanvasOffset.left;
            var layoutCanvasBottom = $('#certificate-layout-module').height() + layoutCanvasOffset.top;

            if ($(e).attr('id') != 'certificate-layout-module') {
                var itemOffset = $(e).offset();
                var itemRight = $(e).width() + itemOffset.left;
                var itemBottom = $(e).height() + itemOffset.top;

                if (
                    layoutCanvasOffset.left < itemOffset.left &&
                    layoutCanvasOffset.top < itemOffset.top &&
                    layoutCanvasRight > itemRight &&
                    layoutCanvasBottom > itemBottom
                ) {
                    $(e).removeClass('hidden-position');
                } else {
                    $(e).addClass('hidden-position');
                }
            } else {
                var draggableItems = document.getElementsByClassName("draggable");
                for (var i = 0; i < draggableItems.length; i++) {
                    var itemOffset = $(draggableItems.item(i)).offset();
                    var itemRight = $(draggableItems.item(i)).width() + itemOffset.left;
                    var itemBottom = $(draggableItems.item(i)).height() + itemOffset.top;

                    if (
                        layoutCanvasOffset.left < itemOffset.left &&
                        layoutCanvasOffset.top < itemOffset.top &&
                        layoutCanvasRight > itemRight &&
                        layoutCanvasBottom > itemBottom
                    ) {
                        $(draggableItems.item(i)).removeClass('hidden-position');
                    } else {
                        $(draggableItems.item(i)).addClass('hidden-position');
                    }
                }
            }
        }
    </script>

</body>

</html>
