@extends('layout')

@section('content')
    <div class=" page-header-light">

        <div class="d-flex justify-content-between align-items-center mx-3 my-1">

            <div class="d-flex flex-column tailwind-scope">

                <h4 class="text-white text-2xl font-bold mb-1">Propriétés & Maintenance</h4>
                <p class="text-white text-sm">disponibilité</p>
            </div>
            @include('shared.navbar')
        </div>
        @include('propertie._searchv2')
    </div>
    <div class="content">

        <div class="row" id="properties-container">
            @include('propertie._properties', ['properties' => $properties])
        </div>

        <!-- Pagination Links -->
        <div class="d-flex justify-content-center " id="pagination-links">
            {{ $properties->links('vendor.pagination.bootstrap-5') }}
        </div>
    </div>

    <script>
        function showLoader() {
            $('.spinner-border').removeClass('d-none');
            $('body').css({ 'opacity': '0.3', 'pointer-events': 'none' });
        }

        function hideLoader() {
            $('.spinner-border').addClass('d-none');
            $('body').css({ 'opacity': '1', 'pointer-events': 'auto' });
        }

        $('#search-form').on('submit', function (event) {
            event.preventDefault();
            fetchProperties($(this).attr('action'), $(this).serialize());
        });

        $('#pagination-links').on('click', 'a.page-link', function (event) {
            showLoader();
            event.preventDefault();
            fetchProperties($(this).attr('href'));
        });

        function fetchProperties(url) {
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $('#properties-container').html(data.html);
                    $('#pagination-links').html(data.pagination);
                    window.history.pushState("", "", url);
                },
                error: function (xhr) {
                    console.error('Failed to fetch properties:', xhr.responseText);
                },
                complete: function () {
                    hideLoader();
                }
            });
        }
    </script>
@endsection