@extends($activeTemplate . 'partials.tools')
@section('tools')
    <div class="seo-tool-details__block seo-tool-details-form-wrap">
        <form id="toolsForm" action="{{ route($tool->route) }}" method="post" class="seo-tool-details-form">
            @csrf

            <div id="processingMessage" class="alert alert-info mt-3 d-none text-center" role="alert">
                <i class="fas fa-cog fa-spin"></i> @lang('Processing your request')... @lang('This may take a few moments.')
            </div>

            <div class="seo-tool-details-form__body">
                <div class="form-group mb-3">
                    <label for="text" class="form--label fw-bold">@lang('Enter Text')</label>
                    <textarea class="form--control" rows="5" name="text" placeholder="@lang('Enter Text Here....')" required>{{ old('text', @$text) }}</textarea>
                </div>

                <div class="seo-tool-details-form__body mb-5">
                    <label for="case_type" class="form--label fw-bold">@lang('Select Case Conversion')</label>
                    <div class="d-flex justify-content-between flex-wrap gap-3">
                        <div class="form--check">
                            <input class="form-check-input" type="radio" name="case_type" id="uppercase" value="upper" {{ old('case_type') == 'uppercase' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="uppercase">@lang('Uppercase')</label>
                        </div>
                        <div class="form--check">
                            <input class="form-check-input" type="radio" name="case_type" id="lowercase" value="lower" {{ old('case_type') == 'lowercase' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="lowercase">@lang('Lowercase')</label>
                        </div>
                        <div class="form--check">
                            <input class="form-check-input" type="radio" name="case_type" id="titlecase" value="title" {{ old('case_type') == 'titlecase' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="titlecase">@lang('Title Case')</label>
                        </div>
                        <div class="form--check">
                            <input class="form-check-input" type="radio" name="case_type" id="sentencecase" value="ucfirst" {{ old('case_type') == 'sentencecase' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="sentencecase">@lang('Sentence Case')</label>
                        </div>
                    </div>
                </div>

                <div class="text-center">
                    <button type="submit" id="rewriteBtn" class="btn btn--base btn-lg">
                        <span class="button-text">@lang('Convert')</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>

    @if (isset($result))
        <div id="results-section" class="card border-0 seo-tool-details__result">
            <div class="card-header text-center">
                <h5 class="mb-0 tool-block__title">@lang('Case Conversion Result')</h5>
            </div>
            <div class="card-body">
                <textarea class="form--control referralURL" disabled>{{ $result }}</textarea>
                <button type="button" class="input-group-text copytext  btn--base text-white gap-2 align-items-center btn btn--sm d-flex" id="copyBoard"> <i class="las la-copy"></i>@lang('Copy')</button>
            </div>
        </div>
    @endif
@endsection

@push('script')
    <script>
        "use strict";
        (function($) {
            const resultsSection = document.getElementById('results-section');
            if (resultsSection) {
                const headerOffset = 100;
                const elementPosition = resultsSection.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }

            $('#copyBoard').on('click', function() {
                var copyText = document.getElementsByClassName("referralURL")[0];

                copyText.disabled = false;
                copyText.select();
                copyText.setSelectionRange(0, 99999);
                document.execCommand("copy");
                copyText.disabled = true;
                copyText.blur();
                this.classList.add('copied');
                setTimeout(() => this.classList.remove('copied'), 1500);
            });

        })(jQuery);
    </script>
@endpush
