@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="domain" class="form--label fw-bold">@lang('Enter valid Domain')</label>
                    <div class="input-group">
                        <div class="input-group-text bg--base text-white border-0"><i class="fa fa-globe"></i></div>
                        <input type="text" class="form--control form-control" id="domain" name="domain" value="{{ old('domain') }}" placeholder="@lang('example.com')" required>
                    </div>
                </div>
                <div class="text-center">
                    <button type="submit" id="rewriteBtn" class="btn btn--base btn-lg">
                        <span class="button-text">@lang('Check')</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>

    @if (isset($indexInfo))
        <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('Google Index Details for') "{{ $domain }}"</h5>
            </div>
            <div class="card-body">
                @if (empty($indexInfo))
                    <p class="text-center text-muted">@lang('No results found').</p>
                @else
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="text-muted">@lang('Domain')</span>
                            <span class="d-flex align-items-center">
                                <img src="{{ getFavicon($domain) }}" class="me-2 domain-favicon" alt="favicon">
                                <strong>{{ $domain }}</strong>
                            </span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="text-muted">@lang('Status')</span>
                            <span class="badge {{ $indexInfo['indexed'] ? 'bg--success' : 'bg--danger' }}">
                                {{ $indexInfo['indexed'] ? 'Indexed' : 'Not Indexed' }}
                            </span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="text-muted">@lang('Google Index')</span>
                            <span>{{ $indexInfo['indexed'] ? $indexInfo['count'] : '—' }}
                                @lang('Pages')</span>
                        </li>
                    </ul>
                @endif
            </div>
            <div class="card-footer text-center">
                <small class="text-muted">@lang('Checked on')
                    {{ now()->toDayDateTimeString() }}</small>
            </div>
        </div>
    @elseif(isset($domain))
        <div class="alert alert-danger mt-3">
            @lang('Google index details could not be retrieved for') {{ $domain }}. @lang('Please make sure the domain is correct and try again').
        </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'
                });
            }
        })(jQuery);
    </script>
@endpush
