@extends('layouts.app')

@section('content')

<style>
    @media (max-width: 992px) {
        .site-header .main-menu > ul > li a {
            font-size: 17px;
        }
    }
    .site-content {
        padding: 0;
    }
    .heading-title {
    }

    .placeholder-text {
        text-align: center;
        color: #888;
        font-size: 18px;
        padding: 50px 0;
    } 

    /* CSS for Loading Spinner */
    .loading-spinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex; /* Use flexbox for centering */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        z-index: 1000; /* Ensure it's on top of other content */
        display: none; /* Hidden by default */
        overflow: hidden; /* Prevents any overflow */
    }

    .spinner {
        border: 8px solid #f3f3f3; /* Light grey */
        border-top: 8px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;

        position: absolute;
        top: 50%;
        left: 50%;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

</style>


<!-- Loading Spinner -->
<div id="loadingSpinner" class="loading-spinner">
    <div class="spinner"></div>
</div> 

<div class="site-content">
    <div class="section-banner ratio" style="--bs-aspect-ratio: 30%; position: relative;">
        <img src="{{ Storage::disk('s3')->url('website/tax-professional-cover.jpg') }}" alt="Team" class="full-w" style="position: absolute; width: 100%; height: 100%; object-fit: cover;">
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);"></div>
        <div class="container d-flex align-items-center " style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
            <div class="col-lg-6">
                <div class="heading heading-alway-white wow animate__fadeInLeft">
                    <h2 class="heading-title size-xl">{{ __('messages.Tax Professionals') }}</h2>
                </div>
            </div>
        </div>
    </div>

    <section class="section-team section has-icon icon-bottom-left spdtb">
        <div class="container">
            <div class="heading align-center">
                <h2 class="heading-title">{{ __('messages.Meet Our Tax Professionals') }}</h2>
            </div>
            
            <!-- Search Input -->
            <div class="search-box text-center mb-4">
                <input type="text" id="searchAccountant" class="form-control" placeholder="{{ __('messages.Search by name, city, country') }}">
            </div>
            
            <div class="block-team layout-01">
                <div class="row" id="accountantList">
                    @include('partials.accountant-list-page', ['accountants' => $accountants])
                </div>
            </div>
        </div>
        <img class="icon" src="{{ Storage::disk('s3')->url('website/asc6.png') }}" alt="Image">
    </section>
</div>

<!-- jQuery for search functionality -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#searchAccountant').on('keyup', function() {
            var query = $(this).val();
            $('#loadingSpinner').show(); // Show the spinner

            $.ajax({
                url: "{{ route('search.page.accountants') }}",
                type: "GET",
                data: { 'search': query },
                success: function(data) {
                    var content = data.html;
                    var showConnectButton = data.showConnectButton;

                    if (content.trim() === '') {
                        content = '<div class="col-12 text-center placeholder-text"><p>No tax professionals found. Please try another search.</p></div>';
                        $('#connectButton').hide(); // Hide the Connect button if no results
                    } else {
                        $('#connectButton').show(); // Show the Connect button if results are found
                    }

                    $('#accountantList').html(content);
                    $('#loadingSpinner').hide(); // Hide the spinner
                },
                error: function() {
                    $('#loadingSpinner').hide(); // Hide the spinner in case of an error
                }
            });
        });
    });
</script>

@endsection