@extends('layouts.admin')

@section('content')

<style type="text/css">
	/* Ensure the search box takes the full width of its container */
	.search-box {
	    flex: 1; /* Allow the search box to grow */
	    margin-left: 10px; /* Optional: space between title and search box */
	}

	#searchAccountant {
	    width: 100%; /* Make the input field take the full width of its container */
	    box-sizing: border-box; /* Include padding and border in the element's total width */
	}

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

	.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>

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex justify-content-between align-items-center">
                <div class="page-title">
                    <h4>{{ __('messages.Select Tax Professional') }}</h4>
                </div>
                &nbsp;&nbsp;&nbsp;
                <!-- Search Input --> 
                <div class="search-box">
                    <input type="text" id="searchAccountant" class="form-control" placeholder="{{ __('messages.Search Tax Professionals...') }}">
                </div>
            </div>
        </div>

        @include('layouts.errors')

        <div class="employee-grid-widget">
            <form action="{{ route('connect.accountant') }}" method="post">
                @csrf
                <div class="row" id="accountantList">
                    @include('partials.accountant-list', ['accountants' => $accountants])
                </div>

                <button type="submit" class="btn btn-primary" id="connectButton">{{ __('messages.Connect') }}</button>
            </form>
        </div>
    </div>
</div>

<!-- Loading Spinner -->
<div id="loadingSpinner" class="loading-spinner">
    <div class="spinner"></div>
</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.accountants') }}",
	            type: "GET",
	            data: { 'search': query },
	            success: function(data) {
	                var content = data.html;
	                var showConnectButton = data.showConnectButton;

	                $('#accountantList').html(content);

	                // Show or hide the "Connect" button based on the flag
	                if (showConnectButton) {
	                    $('#connectButton').show();
	                } else {
	                    $('#connectButton').hide();
	                }

	                $('#loadingSpinner').hide(); // Hide the spinner
	            },
	            error: function() {
	                $('#loadingSpinner').hide(); // Hide the spinner in case of an error
	            }
	        });
	    });
	});

</script>

@endsection