@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">
                    <label for="" class="form--label fw-bold">@lang('Enter link')</label>
                    <div class="input-group">
                        <input class="form--control form-control" type="text" name="link" value="{{ old('link') }}" required>
                    </div>
                </div>

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

    @if (isset($videoData))
        <div id="results-section" class="card border-0 seo-tool-details__result">

            <div class="card-body p-4">
                <div class="row gy-4">
                    <!-- Thumbnail Section -->
                    <div class="col-xl-4 col-md-5">
                        <img src="{{ $videoData[0]['snippet']['thumbnails']['high']['url'] }}" class="img-fluid rounded" alt="Thumbnail">
                    </div>

                    <!-- Video Details Section -->
                    <div class="col-xl-8 col-md-7">
                        <h5 class="text--base">{{ $videoData[0]['snippet']['title'] }}</h5>
                        <p class="text-muted">
                            <strong>{{ __('Published on:') }}</strong>
                            {{ showDateTime($videoData[0]['snippet']['publishedAt'], 'M d, Y') }}
                        </p>
                        <p class="text-muted">
                            <strong>{{ __('Channel:') }}</strong>
                            {{ $videoData[0]['snippet']['channelTitle'] }}
                        </p>
                        <hr>
                    </div>

                    <!-- Video Statistics Section -->
                    <div class="row mt-5">
                        <div class="col-12">
                            <h5 class="text--base">{{ __('Video Statistics') }}</h5>
                        </div>

                        <div class="col-xl-2 col-lg-4 col-sm-6 mt-3">
                            <div class="card border-0 shadow-sm text-center p-3">
                                <h6 class="text-muted">{{ __('Category') }}</h6>
                                <p class="h6">
                                    {{ $categoryName }}
                                </p>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-4 col-sm-6 mt-3">
                            <div class="card border-0 shadow-sm text-center p-3">
                                <h6 class="text-muted">{{ __('Views') }}</h6>
                                <p class="h6">
                                    {{ number_format($videoData[0]['statistics']['viewCount']) }}
                                </p>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-4 col-sm-6 mt-3">
                            <div class="card border-0 shadow-sm text-center p-3">
                                <h6 class="text-muted">{{ __('Likes') }}</h6>
                                <p class="h6">
                                    {{ number_format($videoData[0]['statistics']['likeCount'] ?? 0) }}
                                </p>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-4 col-sm-6 mt-3">
                            <div class="card border-0 shadow-sm text-center p-3">
                                <h6 class="text-muted">{{ __('Dislikes') }}</h6>
                                <p class="h6">
                                    {{ number_format($videoData[0]['statistics']['dislikeCount'] ?? 0) }}
                                </p>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-4 col-sm-6 mt-3">
                            <div class="card border-0 shadow-sm text-center p-3">
                                <h6 class="text-muted">{{ __('Comments') }}</h6>
                                <p class="h6">
                                    {{ number_format($videoData[0]['statistics']['commentCount'] ?? 0) }}
                                </p>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-4 col-sm-6 mt-3">
                            <div class="card border-0 shadow-sm text-center p-3">
                                <h6 class="text-muted">{{ __('Favorite') }}</h6>
                                <p class="h6">
                                    {{ number_format($videoData[0]['statistics']['favoriteCount'] ?? 0) }}
                                </p>
                            </div>
                        </div>
                    </div>


                    <!-- Description -->
                    <p class="description mt-3">{{ $videoData[0]['snippet']['description'] }}
                    </p>

                    <!-- Tags -->
                    @if (!empty($videoData[0]['snippet']['tags']))
                        <div class="tags mt-3">
                            <strong>{{ __('Tags:') }}</strong>
                            @foreach ($videoData[0]['snippet']['tags'] as $tag)
                                <span class="badge bg--base me-2">{{ $tag }}</span>
                            @endforeach
                        </div>
                    @endif

                </div>

            </div>
        </div>
    @endif

@endsection

@push('style')
    <style>
        .card-body {
            padding: 20px 0 !important;
        }

        .card {
            height: 100%;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {

            "use strict";

            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
