@extends('layouts.app')

@section('title', 'Завантаження фото для обрізання')
@section('body_class', 'upload-page')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/site/photo.css') }}">
@endpush

@section('page_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-3">
        <div>
            <h2 class="lp-page-title mb-1">
                <i class="fa-regular fa-image mr-2 text-info"></i>
                Завантажте фото для обрізання
            </h2>
            <p class="lp-page-sub mb-0">
                Ми автоматично обріжемо фото під потрібний формат і одразу віддамо готові файли.
            </p>
        </div>
    </div>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger mb-3">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form id="uploadForm"
          action="{{ route('site.photo.store') }}"
          method="POST"
          enctype="multipart/form-data">
        @csrf

        {{-- Красива дроп-зона, як було раніше --}}
        <div class="upload-drop mb-2">
            <i class="fa-regular fa-folder-open"></i>
            <div class="upload-drop-title mb-1">
                Оберіть файли або перетягніть їх сюди
            </div>
            <div class="upload-drop-sub">
                Можна завантажувати одразу велику пачку фото — кожне буде обрізане
                і завантажене окремим JPG-файлом.
            </div>
        </div>

        {{-- прихований інпут, тригериться кліком по блоку --}}
        <input
            type="file"
            name="photos[]"
            id="photos"
            class="d-none"
            multiple
            onchange="handleFiles(event)">
    </form>
@endsection

@push('scripts')
    <script>
        // той самий робочий handleFiles + красивий клік по блоку і drag&drop
        async function uploadFiles(files) {
            if (!files || !files.length) return;

            // ВАЖЛИВО: відносний URL, щоб не було проблем з доменом/https
            const uploadUrl = '{{ route('site.photo.store', [], false) }}';

            for (let i = 0; i < files.length; i++) {
                const formData = new FormData();
                // ІМ'Я ПОЛЯ МАЄ СПІВПАСТИ З ВАЛІДАЦІЄЮ В КОНТРОЛЕРІ: 'photo'
                formData.append('photo', files[i]);

                try {
                    const response = await fetch(uploadUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: formData
                    });

                    if (response.ok) {
                        const blob = await response.blob();
                        const url  = window.URL.createObjectURL(blob);

                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = url;
                        a.download = files[i].name.replace(/\.[^/.]+$/, ".jpg");
                        document.body.appendChild(a);
                        a.click();
                        a.remove();

                        window.URL.revokeObjectURL(url);
                    } else {
                        console.error('Помилка при завантаженні файлу:', response.status, response.statusText);
                    }
                } catch (error) {
                    console.error('Помилка зʼєднання із сервером для файлу:', files[i].name, error);
                }
            }
        }

        async function handleFiles(event) {
            const files = event.target.files;
            await uploadFiles(files);

            // щоб можна було вибрати ті ж файли ще раз
            event.target.value = '';
        }

        document.addEventListener('DOMContentLoaded', function () {
            const dropZone  = document.querySelector('.upload-drop');
            const fileInput = document.getElementById('photos');

            if (!dropZone || !fileInput) return;

            // Клік по блоку — відкриваємо вибір файлів
            dropZone.addEventListener('click', function () {
                fileInput.click();
            });

            // Drag & drop стилі
            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone.addEventListener(eventName, function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    dropZone.classList.add('is-drag-over');
                });
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    dropZone.classList.remove('is-drag-over');
                });
            });

            // Обробка drop — шлемо файли так само, як через input
            dropZone.addEventListener('drop', async function (e) {
                const dtFiles = e.dataTransfer.files;
                await uploadFiles(dtFiles);
            });
        });
    </script>
@endpush