@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Destek Taleplerim' => '/support/index',
            'Talep Detay' => '/support/detail/' . $ticket['ticket']['id'],
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <x-tickets.message-template :ticket="$ticket">
            <x-slot
                name="action">{{ route('support.answerToSupportRequest', ['ticket' => $ticket['ticket']['id']]) }}</x-slot>
        </x-tickets.message-template>
        <div id="images-container"></div>
    </div>
    <div id="images-container"></div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            $('#message_area').scrollTop($('#message_area')[0].scrollHeight);
        });

        // $(document).ready(function() {
        //     $('#uploadFile').change(function() {
        //         var files = this.files;

        //         if (files.length > 2) {
        //             alert("En fazla 2 dosya seçebilirsiniz.");
        //             $('#uploadFile').val('');
        //             return;
        //         }

        //         $('.image-preview').remove();

        //         // Asenkron bir işlemi kapsayan fonksiyonu tanımla
        //         function loadImagePreview(file, index) {
        //             var reader = new FileReader();

        //             reader.onload = function(e) {
        //                 var imagePreview = $('<div class="relative h-full image-preview">');
        //                 var image = $('<img class="h-full">');
        //                 var removeButton = $(
        //                     '<button type="button" class="remove-button absolute top-0 right-0 bg-red-500 text-white border-none rounded-full w-6 h-6 flex justify-center items-center">&#10006;</button>'
        //                 );
        //                 image.attr('src', e.target.result);
        //                 imagePreview.append(image);
        //                 imagePreview.append(removeButton);
        //                 $('#image-preview-container').append(imagePreview);

        //                 // Resmin dizinini veri olarak ekleyin
        //                 image.data('index', index);

        //                 // Silme butonuna tıklama işlevi ekle
        //                 removeButton.click(function() {
        //                     // Ekrandan resmi kaldır
        //                     $(this).parent('.image-preview').remove();
        //                     // İlgili dosyayı files dizisinden kaldırın
        //                     Array.from(files).splice(index, 1);
        //                 });
        //             };

        //             reader.readAsDataURL(file);
        //         }

        //         for (var i = 0; i < files.length; i++) {
        //             // Asenkron işlemi çağır
        //             loadImagePreview(files[i], i);
        //         }
        //     });
        // });
    </script>
    {{-- <script>
        const fileInput = document.getElementById('uploadFile');
        const imagesContainer = document.getElementById('image-preview-container');

        fileInput.addEventListener('change', function() {
            const files = this.files;
            const fileDataArray = []; // Veri nesnelerini saklamak için bir dizi oluşturun
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const imageUrl = event.target.result;
                        const imageWrapper = document.createElement('div');
                        imageWrapper.classList.add('image-wrapper');
                        const image = document.createElement('img');
                        image.src = imageUrl;
                        image.style.maxWidth = '150px'; // Set max width for image display
                        const removeButton = document.createElement('button');
                        removeButton.classList.add('remove-button');
                        removeButton.innerHTML = '&times;';
                        removeButton.addEventListener('click', function() {
                            imageWrapper.remove();
                            // Remove corresponding file from file input
                            const index = fileDataArray.findIndex(item => item.file === file);
                            if (index !== -1) {
                                fileInput.value =
                                    ''; // Reset the input value to clear the selected files
                                fileDataArray.splice(index, 1);
                            }
                        });
                        imageWrapper.appendChild(image);
                        imageWrapper.appendChild(removeButton);
                        imagesContainer.appendChild(imageWrapper);
                        fileDataArray.push({
                            file: file,
                            imageWrapper: imageWrapper
                        }); // Veri nesnesini diziye ekleyin
                    };
                    reader.readAsDataURL(file);
                }
            }
        });
    </script> --}}
@endsection