@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 class="form-label">@lang('Country')</label>
                    <select name="region" class="form-control form--control select2" required>
                        <option value="" selected disabled>@lang('Select Country')</option>
                        @foreach ($countries as $key => $country)
                            <option value="{{ $key }}">
                                {{ __($country->country) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="" class="form--label fw-bold">@lang('Result')</label>
                    <div class="input-group">
                        <input class="form--control form-control" type="text" name="result" value="{{ old('result', 10) }}" 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($videos) && count($videos) > 0)
        <div id="results-section">
            <table class="table table--responsive--xl">
                <thead>
                    <tr>
                        <th> # </th>
                        <th> @lang('Thumbnail') </th>
                        <th> @lang('Video') </th>
                        <th> @lang('Video Tags') </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($videos as $video)
                        <tr>
                            <td> {{ $loop->iteration }}</td>

                            <td> <img src="{{ $video['snippet']['thumbnails']['medium']['url'] }}" class="card-img-top" alt="{{ $video['snippet']['title'] }}">
                            </td>
                            <td> {{ $video['snippet']['title'] }}</td>
                            <td class="badge-main mb-2 d-flex gap-2 flex-wrap">
                                <div class="badge-wrapper  d-flex gap-2 flex-wrap">
                                    @if (isset($video['snippet']['tags']))
                                        @foreach ($video['snippet']['tags'] as $tag)
                                            <span class="badge bg-secondary me-1">{{ $tag }}</span>
                                        @endforeach
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

@endsection

@push('style')
    <style>
        .badge-wrapper .badge {
            white-space: wrap;
        }

        .badge-main {
            max-width: 550px !important;
            ;
            margin-left: auto;
        }

        .badge-wrapper {
            max-width: 550px !important;
            margin-left: auto !important;
        }

        .table tbody tr td:last-child {
            text-align: right;
        }

        .card-img-top {
            max-width: 200px;
        }

        @media (max-width:1199px) {
            max-width: unset;

            .badge-wrapper {
                max-width: unset !important;
                margin-left: auto !important;
            }

            .badge-main {
                max-width: unset !important;
                margin-left: auto;
            }
        }

        @media (max-width:575px) {
            .card-img-top {
                max-width: 100px;
            }

            .table tbody tr td::before {
                min-width: 60px;
            }
        }
    </style>
@endpush

@push('style')
    <link rel="stylesheet" href="{{ asset('assets/global/css/select2.min.css') }}">
@endpush

@push('script')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
@endpush

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

            "use strict";
            $('.select2').select2();

            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
