@extends('layouts.app')
@section('title', $title = __('forms.edit') . ' ' . $ar->name)
@section('content')
    <x-page-header>
        <x-slot name="left">
            <x-breadcrumbs :items="[
                ['label' => __('sidebar.dashboard'), 'url' => route('home.dashboard')],
                ['label' => __('AR.index'), 'url' => route('AR.index')],
                ['label' => $ar->name, 'url' => route('AR.edit', $ar)],
                ['label' => $title, 'url' => '']
            ]"/>
        </x-slot>
    </x-page-header>

    <hr class="my-5 border-gray-300 dark:border-gray-700">

    <form id="form" action="{{ route('AR.update', $ar) }}" method="post" enctype="multipart/form-data">
        @csrf
        @method('PATCH')
        <div class="grid gap-6 mb-6 md:grid-cols-3">
            <div>
                <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.name') }}
                </label>
                <input type="text" id="name" name="name" required
                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                       placeholder="{{ __('forms.required') }}" value="{{ $ar->name }}"/>
            </div>
            <div class="sm:col-span-2">
                <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    {{ __('forms.description') }}
                </label>
                <textarea id="description" name="description" rows="1"
                          class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                          placeholder="{{ __('forms.optional') }}">{{ $ar->description }}</textarea>
            </div>
        </div>
        <label for="images" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
            {{ __('forms.CurrentImages') }}
        </label>
        <div id="images"
             class="rounded-lg bg-gray-300 dark:bg-gray-700 p-2 mb-6 flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0">
            @foreach($ar->Images()->sortBy('use_type') as $image)
                <div class="ar-image-item" data-uuid="{{ $image->uuid }}">
                    <a href="{{ asset($image->path) }}" data-fancybox="AR"
                       data-caption="Index : {{ $image->use_type }}">
                        <img src="{{ asset($image->path) }}" alt="{{ $image->use_type }}"
                             class="sm:w-48 sm:h-48 rounded-md hover:shadow-xl"/>
                    </a>
                    <p class="text-center mt-2">
                        {{ __('forms.index') }} : {{ $image->use_type }}
                    </p>
                    <div class="text-center mt-2">
                        <button type="button" class="delete-image-btn px-3 py-1 text-xs bg-red-600 text-white rounded"
                                data-uuid="{{ $image->uuid }}">
                            حذف
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
        <label for="dropzone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
            {{ __('forms.UploadImages') }}
        </label>
        <div id="dropzone"
             class="dropzone rounded-lg bg-gray-300 dark:bg-gray-700 p-10 mb-6 text-center hover:cursor-pointer">
            <div class="dz-message hover:underline hover:text-blue-500">
                {{ __('forms.Dropzone') }}
            </div>
        </div>
        <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700 mb-6 hidden">
            <div id="progress"
                 class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
                 style="width: 0%">
                0%
            </div>
        </div>
        <hr class="my-5 border-gray-300 dark:border-gray-700">
        <button type="submit"
                class="flex items-center justify-center space-x-2 text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
                <path
                    d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
            </svg>
            <span>
                {{ __('forms.update') }}
            </span>
        </button>
    </form>
    <script src="{{ asset('js/dropzone.min.js') }}"></script>
    <script src="{{ asset('js/mindar-image.prod.js') }}"></script>
    <script>
        Dropzone.autoDiscover = false;

        window.addEventListener('DOMContentLoaded', function (event) {
            const deleteUrl = "{{ route('AR.file.delete', $ar) }}";
            const indexRedirect = "{{ route('AR.index') }}";

            // تابع برای پیدا کردن بالاترین ایندکس تصاویر موجود
            function getMaxExistingIndex() {
                let maxIndex = -1;
                const existingImages = document.querySelectorAll('#images p');
                existingImages.forEach(p => {
                    const text = p.textContent;
                    const indexMatch = text.match(/(\d+)/);
                    if (indexMatch) {
                        const index = parseInt(indexMatch[1]);
                        if (index > maxIndex) {
                            maxIndex = index;
                        }
                    }
                });
                return maxIndex;
            }

            const myDropzone = new Dropzone("#dropzone", {
                url: "{{ route('AR.index') }}",
                autoProcessQueue: false,
                addRemoveLinks: true,
                parallelUploads: 5,
                maxFiles: 10,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });

            myDropzone.on("addedfile", file => {
                const bubble = document.createElement('span');
                bubble.classList.add('index-bubble');
                const maxExisting = getMaxExistingIndex();
                const newIndex = maxExisting + 1 + myDropzone.files.indexOf(file);
                bubble.innerHTML = newIndex;
                file.previewElement.appendChild(bubble);
            });

            myDropzone.on("removedfile", function (file) {
                $('.index-bubble').remove();
                myDropzone.files.forEach((file, index) => {
                    const bubble = document.createElement('span');
                    bubble.classList.add('index-bubble');
                    const maxExisting = getMaxExistingIndex();
                    const newIndex = maxExisting + 1 + index;
                    bubble.innerHTML = newIndex;
                    file.previewElement.appendChild(bubble);
                });
            });

            async function generateMindFile(images) {
                if (!window.MINDAR || !window.MINDAR.IMAGE || !window.MINDAR.IMAGE.Compiler) {
                    throw new Error("MINDAR.IMAGE.Compiler is not available.");
                }
                const compiler = new MINDAR.IMAGE.Compiler();
                const loadImage = async (file) => {
                    return new Promise((resolve, reject) => {
                        const img = new Image();
                        img.onload = () => resolve(img);
                        img.onerror = reject;
                        img.src = URL.createObjectURL(file);
                    });
                };
                const loadedImages = [];
                for (let i = 0; i < images.length; i++) {
                    loadedImages.push(await loadImage(images[i]));
                }
                const dataList = await compiler.compileImageTargets(loadedImages, (progress) => {
                    const value = (progress * 100).toFixed(2);
                    $('#progress').css('width', (value + '%')).html(value + "%");
                });
                const exportedBuffer = await compiler.exportData();
                const mindFile = new Blob([exportedBuffer], {type: "application/octet-stream"});
                return mindFile;
            }

            $('#form').on('submit', async function (e) {
                e.preventDefault();
                SetLoading(true);
                $('#progress').parent().removeClass('hidden');
                $('#progress').css('width', '0%').html('0%');

                const form = $(this);
                let formData = new FormData(this);
                const images = myDropzone.files;

                try {
                    if (images.length > 0) {
                        try {
                            const mind = await generateMindFile(images);
                            formData.append('mind', mind, 'mind.mind');
                        } catch (mindError) {
                            console.error('Mind file generation error:', mindError);
                            window.swal.fire({
                                title: 'خطا در پردازش تصاویر!',
                                text: 'خطا در تولید فایل mind: ' + mindError.message,
                                icon: 'error',
                                confirmButtonText: 'متوجه شدم'
                            });
                            SetLoading(false);
                            return;
                        }
                    }

                    // ارسال درخواست بروزرسانی AR
                    $.ajax({
                        url: form.attr('action'),
                        type: form.attr('method'),
                        data: formData,
                        processData: false,
                        contentType: false,
                    }).done(function (response) {
                        console.log('Update response:', response);

                        if (response.success) {
                            // اگر فایلی برای آپلود وجود دارد، پردازش را شروع کن
                            if (myDropzone.files.length > 0) {
                                // تنظیم URL جدید برای آپلود تصاویر
                                myDropzone.options.url = response.upload_url;
                                myDropzone.processQueue();
                            } else {
                                // اگر فایلی برای آپلود نیست، مستقیماً هدایت کن
                                SetLoading(false);
                                window.swal.fire({
                                    title: 'موفق!',
                                    text: response.message || 'اطلاعات با موفقیت بروزرسانی شد.',
                                    icon: 'success',
                                    confirmButtonText: 'متوجه شدم'
                                }).then(() => {
                                    window.location.href = indexRedirect;
                                });
                            }
                        } else {
                            throw new Error(response.message || 'خطا در بروزرسانی اطلاعات');
                        }
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        console.error('AJAX Error Details:', {
                            status: jqXHR.status,
                            statusText: jqXHR.statusText,
                            responseText: jqXHR.responseText,
                            textStatus: textStatus,
                            errorThrown: errorThrown
                        });

                        let errorMessage = 'مشکلی در بروزرسانی اطلاعات رخ داده است.';

                        // بررسی خطاهای اعتبارسنجی
                        if (jqXHR.status === 422) {
                            try {
                                const errors = JSON.parse(jqXHR.responseText).errors;
                                if (errors && errors.name) {
                                    errorMessage = errors.name[0];
                                }
                            } catch (e) {
                                errorMessage = jqXHR.responseText;
                            }
                        } else if (jqXHR.responseText) {
                            try {
                                const errorResponse = JSON.parse(jqXHR.responseText);
                                errorMessage = errorResponse.message || errorMessage;
                            } catch (e) {
                                errorMessage = jqXHR.responseText;
                            }
                        }

                        SetLoading(false);
                        window.swal.fire({
                            title: 'خطا!',
                            text: errorMessage,
                            icon: 'error',
                            confirmButtonText: 'متوجه شدم'
                        });
                    });

                } catch (error) {
                    console.error('Error in form submission:', error);
                    SetLoading(false);
                    window.swal.fire({
                        title: 'خطا!',
                        text: error.message || 'مشکلی در پردازش داده‌ها رخ داده است.',
                        icon: 'error',
                        confirmButtonText: 'متوجه شدم'
                    });
                }
            });

            myDropzone.on("sending", function (file, xhr, formData) {
                const maxExisting = getMaxExistingIndex();
                const newFileIndex = myDropzone.files.indexOf(file);
                const finalIndex = maxExisting + 1 + newFileIndex;
                formData.append('index', finalIndex);
            });

            myDropzone.on("success", function (file, response) {
                console.log('File uploaded successfully:', file.name);
            });

            myDropzone.on("error", function (file, errorMessage) {
                console.error('Dropzone error:', errorMessage);
                window.swal.fire({
                    title: 'خطا در آپلود!',
                    text: 'مشکلی در آپلود فایل رخ داده است: ' + errorMessage,
                    icon: 'error',
                    confirmButtonText: 'متوجه شدم'
                });
            });

            myDropzone.on("queuecomplete", function () {
                SetLoading(false);
                window.swal.fire({
                    title: 'موفق!',
                    text: 'همه فایل‌ها با موفقیت آپلود شدند.',
                    icon: 'success',
                    confirmButtonText: 'متوجه شدم'
                }).then(() => {
                    window.location.href = indexRedirect;
                });
            });

            // حذف تصویر
            $(document).on('click', '.delete-image-btn', async function (e) {
                e.preventDefault();
                if (!confirm('آیا از حذف این تصویر مطمئن هستید؟')) return;
                const btn = $(this);
                const uuid = btn.data('uuid');
                const parent = btn.closest('.ar-image-item');

                try {
                    const res = await fetch(deleteUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ uuid })
                    });

                    if (!res.ok) {
                        const txt = await res.text();
                        console.error('Delete failed', res.status, txt);
                        alert('حذف با خطا مواجه شد.');
                        return;
                    }

                    const json = await res.json();
                    if (json.success) {
                        parent.remove();
                        // بروزرسانی ایندکس‌های Dropzone پس از حذف
                        $('.index-bubble').remove();
                        myDropzone.files.forEach((file, index) => {
                            const bubble = document.createElement('span');
                            bubble.classList.add('index-bubble');
                            const maxExisting = getMaxExistingIndex();
                            const newIndex = maxExisting + 1 + index;
                            bubble.innerHTML = newIndex;
                            file.previewElement.appendChild(bubble);
                        });
                    } else {
                        alert('حذف با خطا مواجه شد: ' + (json.message || 'unknown'));
                    }
                } catch (err) {
                    console.error('Delete error', err);
                    alert('خطا در ارتباط با سرور.');
                }
            });
        });
    </script>
@endsection