@extends('layouts.dashboard.app')
@section('content')
    <style>
        .pen {
            transition: .5s ease;
            opacity: 0;
            position: absolute;
            top: 28%;
            left: 82%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
        }

        .img {
            height: 240px;
            width: auto;
            object-fit: contain;
            padding: 10px;
        }

        @media (max-width: 768px) {

            /* Update styles for tablets here */
            .container {
                /* Adjust container styles for tablets */
            }

            /* Update other styles as needed */
            .mySlides {
                /* Adjust styles for individual slides on tablets */
            }

            /* Add more tablet-specific styles as necessary */
        }

        .mySlides img {
            max-width: 100%;
            height: auto;
        }

        /* Position the image container (needed to position the left and right arrows) */
        .container {
            position: relative;
        }

        /* Hide the images by default */
        .mySlides {}

        /* Add a pointer when hovering over the thumbnail images */
        .cursor {
            cursor: pointer;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            margin: 0 25px;
            cursor: pointer;
            position: absolute;
            /* top: 35%; */
            width: auto;
            padding: 6px;
            margin-top: -500px;
            color: #0000FF;
            font-weight: bold;
            font-size: 20px;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;

        }

        .prev {
            margin: -500px -12px 0;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* Container for image text */
        .caption-container {
            text-align: center;
            background-color: #222;
            padding: 2px 16px;
            color: white;
        }

        /* .row:after {
                                                                            content: "";
                                                                            display: table;
                                                                            clear: both;
                                                                        } */

        /* Six columns side by side */
        .column {
            float: left;
            width: 16.66%;
        }

        /* Add a transparency effect for thumnbail images */
        .demo {
            opacity: 0.6;
        }

        .active,
        .demo:hover {
            opacity: 1;
        }

        .form-select {
            display: inline-block;
        }
    </style>
    <div class="container-fluid mt-3 mb-2">
        <div class="row">
            <div class="col-12 mb-2">
                <div class="page-title-box"> 
                    <div class="page-title-left ">
                        <a href="{{ route('Dossier.show', $dossier->id) }}" class="mt-2 btn btn-outline-dark">Dossier</a>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="src"
            value="{{ Storage::disk('s3')->temporaryUrl($document->path, now()->addMinutes(30)) ?? null }}">
        <div class="row m-0 p-0 ">
            <div class="col-md-6">
                <div class="widget  ">
                    <div class="widget-header  no-actions d-flex align-items-center mb-1">
                        <h4 class="text-bold">Editeur</h4>
                    </div>
                    <div class="widget-body">
                        <div id="wrapper" style="">
                            <div id="conatiner" style="height: 120vh;width:100%;position: relative;" class="mb-4">
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <button class="btn" id="add">add</button> --}}
            </div>
            <div class="col-md-6 p-0">
                <ul class="nav nav-tabs nav-stacked ">
                    <li class="nav-item ">
                        <input type="hidden" id="dossier" value="{{ $dossier->id }}">
                        <button type="button" data-filter="ALL" class="filter nav-link" onclick="get(this)"
                            style=" cursor: pointer;" value="ALL">ALL
                        </button>
                    </li>
                    @foreach ($typedocuments as $type)
                        <li class="nav-item ">
                            <button type="button" data-filter="{{ $type->id }}" class=" filter nav-link"
                                onclick="get(this)" style=" cursor: pointer;"
                                value="{{ $type->id }}">{{ $type->type }} </button>
                        </li>
                    @endforeach
                </ul>
                <div class="mb-1">
                    <a class="btn btn-primary" onclick="plusSlides(-1)">❮</a>
                    <a class="btn btn-primary" onclick="plusSlides(1)">❯</a>
                </div>
                <div id="carrousel" class="container-fluid p-0 m-0">
                    @foreach ($dossier->document as $doc)
                        <div class="mySlides media1 {{ $doc->typedocument->type ?? null }} m-0">
                            <div class="image-container" style="position: relative;">
                                <img src="{{ Storage::disk('s3')->temporaryUrl($doc->path, now()->addMinutes(30)) }}"
                                    style="width: 100% !important;">
                                <div class="button-overlay" style="position: absolute; top: 10px; right: 10px;">
                                    <a href="{{ route('Document.edit', $doc->id) }}"
                                        class="text append icon dripicons-document-edit">
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <a class="prev" onclick="plusSlides(-1)">❮</a>
                    <a class="next" onclick="plusSlides(1)">❯</a>

                    {{-- <div class="row m-0">
                    <div style="display: none;">
                        {{ $i = 1 }}
                    </div>
                    @foreach ($dossier->document as $doc)
                        <div class="column">
                            <img class="demo cursor"
                                src="{{ Storage::disk('s3')->temporaryUrl($doc->path, now()->addMinutes(30)) }}"
                                style="width:100%" onclick="currentSlide({{ $i }})">
                        </div>
                        <div style="display: none;">
                            {{ $i++ }}
                        </div>
                    @endforeach
                </div> --}}
                </div>
            </div>
        </div>
        <form id="myForm" action="{{ route('Document.update', $document->id) }}" method="post">
            @csrf
            @method('PUT')
            <input type="hidden" name="img" value="" id="edited">
        </form>

    </div>
@endsection


@section('script')
    <script src="{{ asset('js/Painterro/painterro.min.js') }}"></script>
    <script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ asset('js/tinymce/init-tinymce.js') }}"></script>
    <script src="{{ asset('js/viewer.js') }}"></script>
    <script>
        window.addEventListener('load', function() {
            console.log('DOM fully loaded and parsed');
            var galley = document.getElementById('galley');
            var maxOffsetPercentage = 0.9;
            var viewer = new Viewer(galley, {
                url: 'data-original',
                backdrop: 'static',
                move: function(event) {
                    var viewerData = viewer.viewerData;
                    var imageData = viewer.imageData;
                    var maxOffsetHorizontal = viewerData.width * maxOffsetPercentage;
                    var maxOffsetVertical = viewerData.height * maxOffsetPercentage;
                    var detail = event.detail;
                    var left = detail.x;
                    var top = detail.y;
                    var right = viewerData.width - (left + imageData.width);
                    var bottom = viewerData.height - (top + imageData.height);
                    if (
                        // Move left
                        (detail.x < detail.oldX && right > 0 && right > maxOffsetHorizontal)
                        // Move right
                        ||
                        (detail.x > detail.oldX && left > 0 && left > maxOffsetHorizontal)
                        // Move up
                        ||
                        (detail.y < detail.oldY && bottom > 0 && bottom > maxOffsetVertical)
                        // Move down
                        ||
                        (detail.y > detail.oldY && top > 0 && top > maxOffsetVertical)
                    ) {
                        event.preventDefault();
                    }
                },
                zoomed: function(event) {
                    var detail = event.detail;
                    // Zoom out
                    if (detail.ratio < detail.oldRatio) {
                        var viewerData = viewer.viewerData;
                        var imageData = viewer.imageData;
                        var maxOffsetHorizontal = viewerData.width * maxOffsetPercentage;
                        var maxOffsetVertical = viewerData.height * maxOffsetPercentage;
                        var left = imageData.x;
                        var top = imageData.y;
                        var right = viewerData.width - (left + imageData.width);
                        var bottom = viewerData.height - (top + imageData.height);
                        var x = 0;
                        var y = 0;
                        if (right > 0 && right > maxOffsetHorizontal) {
                            x = maxOffsetHorizontal - right;
                        }
                        if (left > 0 && left > maxOffsetHorizontal) {
                            x = maxOffsetHorizontal - left;
                        }

                        if (bottom > 0 && bottom > maxOffsetVertical) {
                            y = bottom - maxOffsetVertical;
                        }

                        if (top > 0 && top > maxOffsetVertical) {
                            y = top - maxOffsetVertical;
                        }

                        // Move the image into view if it is invisible
                        if (x !== 0 || y !== 0) {
                            viewer.move(x, y);
                        }
                    }
                },
            });
        });
    </script>
    <script async type="application/javascript">

    window.onload = function() {
    var image = document.getElementById('src').value;
    showDevis(image);
    };

        let slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            let i;
            let slides = document.getElementsByClassName("mySlides");
            // let dots = document.getElementsByClassName("demo");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            // for (i = 0; i < dots.length; i++) {
            //     dots[i].className = dots[i].className.replace(" active", "");
            // }
            slides[slideIndex - 1].style.display = "block";
            // dots[slideIndex - 1].className += " active";
        }

        function showDevis(path) {
            document.querySelector('#conatiner').innerHTML = '';
            let P = Painterro({
                activeColor: '#FFF',
                id: 'conatiner',
                language: 'fr',
                defaultTool: 'brush',
                initTextStyle: "18px 'Open Sans', sans-serif",
                hiddenTools: ['close', 'settings', 'resize', 'open'],
                activeColor: '#FF0000',
                initTextColor: '#FF0000',
                setColor: '#FF0000',
                colorScheme: {
                activeColor: '#FFF',
                    main: '#F6E8EA', // make panels light-yellow
                    control: '#FFF', // change controls color
                    inputBackground: '#FFF',
                    backgroundColor: '#F6E8EA',
                    inputText: '#000000',

                },
                saveHandler: function(image, done) {
                    let imageData = image.asDataURL('image/jpeg');
                    document.getElementById('edited').value = imageData;
                    document.getElementById("myForm").submit();

                }
            });

            P.show(path);
            // var addButton = document.getElementById('add');
            // addButton.addEventListener('click', function() {
            //     P.addImage('https://i.stack.imgur.com/N4TSy.jpg');
            // });

}
    </script>
    <script>
        var $Elements = $('.media1');

        $('.link').click(function(e) {
            e.preventDefault();
            var filterVal = $(this).data('filter');
            var type_id = this.value;
            if (filterVal === 'ALL') {
                $Elements.removeClass('hidden');
            } else {
                $Elements.addClass('hidden').filter('.' + filterVal).removeClass('hidden');
            }
        });

        function get(e) {
            const type = e.getAttribute('data-filter');
            const id = document.getElementById('dossier').value;
            const carrousel = document.getElementById('carrousel');
            // console.log(e.getAttribute('data-filter'), id);

            $.ajax({
                url: '/Document/' + id + '/Type/' + type,
                type: 'get',
                success: function(response) {
                    carrousel.innerHTML = '';
                    var html = '';
                    $.each(response, function(k, v) {
                        html += "<div class='mySlides media1 m-0'>";
                        html += "<div class='image-container' style='position: relative;'>";
                        html += "<img src='" + v.image + "' style='width:100% !important;'>";
                        html +=
                            "<div class='button-overlay' style='position: absolute; top: 10px; right: 10px;width:50px'>";
                        // Add the "Edit" button with a link to the edit route
                        html += "<a href='/Document/" + v.id +
                            "/edit' class='text append icon dripicons-document-edit'>Edit</a>";
                        html += "</div>"; // Close button-overlay
                        html += "</div>"; // Close image-container
                        html += "</div>"; // Close mySlides
                    });
                    carrousel.innerHTML = html;

                },
                error: function(error) {
                    console.log(error);
                },
            });
        }
    </script>


@endsection
