@extends('layouts.app')

@section('title', 'Перемішування рядків')
@section('body_class', 'shuffle-page')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/site/shuffle.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-solid fa-shuffle mr-2 text-info"></i>
                Перемішування рядків
            </h2>
            <p class="lp-page-sub mb-0">
                Встав текст зліва — отримаєш перемішані рядки справа.
            </p>
        </div>
    </div>
@endsection

@section('content')
    <form id="shuffleForm">
        @csrf

        <div class="row">
            <div class="col-md-6 mb-3 mb-md-0">
                <label for="lines" class="font-weight-semibold small text-uppercase text-muted">
                    Вхідні рядки
                </label>
                <textarea name="lines" id="lines" class="form-control" rows="14"
                          placeholder="Кожен рядок окремо&#10;Рядок 1&#10;Рядок 2&#10;Рядок 3"></textarea>
            </div>

            <div class="col-md-6">
                <label for="result" class="font-weight-semibold small text-uppercase text-muted d-flex justify-content-between">
                    <span>Результат</span>
                    <span class="badge badge-light border">
                        <i class="fa-regular fa-clipboard mr-1"></i>можна скопіювати
                    </span>
                </label>
                <textarea readonly id="result" class="form-control bg-light" rows="14"
                          placeholder="Тут з’явиться перемішаний текст"></textarea>
            </div>
        </div>

        <div class="d-flex flex-wrap mt-3">
            <button type="submit" class="btn btn-primary mr-2 mb-2">
                <i class="fa-solid fa-wand-magic-sparkles mr-1"></i> Перемішати
            </button>
            <button type="button" id="btnCopyResult" class="btn btn-outline-secondary mr-2 mb-2">
                <i class="fa-regular fa-copy mr-1"></i> Скопіювати результат
            </button>
            <button type="button" id="btnClearAll" class="btn btn-light border mb-2">
                <i class="fa-regular fa-trash-can mr-1"></i> Очистити
            </button>
        </div>
    </form>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form   = document.getElementById('shuffleForm');
            const input  = document.getElementById('lines');
            const output = document.getElementById('result');
            const btnCopy = document.getElementById('btnCopyResult');
            const btnClear = document.getElementById('btnClearAll');

            form.addEventListener('submit', async function (e) {
                e.preventDefault();

                const lines = input.value;
                const formData = new FormData();
                formData.append('lines', lines);

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

                    const data = await response.json();

                    if (response.ok && typeof data.result !== 'undefined') {
                        output.value = data.result;
                    } else {
                        alert('Сталася помилка при обробці рядків.');
                    }
                } catch (error) {
                    console.error('Помилка:', error);
                    alert('Помилка зʼєднання із сервером.');
                }
            });

            btnCopy.addEventListener('click', function () {
                if (!output.value.trim()) return;
                output.select();
                document.execCommand('copy');
            });

            btnClear.addEventListener('click', function () {
                input.value = '';
                output.value = '';
                input.focus();
            });
        });
    </script>
@endpush