@extends('layouts.app')

@section('title', 'Client List')

@section('content')
    <div class="col-md-12 text-center mobile-space">
        <p class="text-22"><b>{{ $pageContent->client_list_title }}</b></p>
    </div>

    <div class="container client-list-page">
        <div class="row">
            <div class=" col-md-11 m-auto col-sm-12 pl-4">
                <ul class="list-unstyled list-inline alphabet d-flex justify-content-between mb-5 flex-wrap">
                    <li>
                        <a href="#" data-letter="all" class="active">All</a>
                    </li>
                    @foreach (range('A', 'Z') as $letter)
                        <li>
                            <a href="#" data-letter="{{ $letter }}">{{ $letter }}</a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <div class="col-md-12 d-flex pl-5 flex-wrap m-auto services pad-off">
            <!-- Client list will be populated here by AJAX -->
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // Default load clients starting with 'All' and mark 'All' as active
            loadClients('all');

            // Click event for filtering by letter or 'All'
            $('.alphabet li a').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation(); // Prevent the event from bubbling up

                var letter = $(this).data('letter');

                // Remove 'active' class from all letters, then add it to the clicked one
                $('.alphabet li a').removeClass('active');
                $(this).addClass('active');

                // Load the clients based on the selected letter
                loadClients(letter);
            });

            // AJAX function to load clients
            function loadClients(letter) {
                $.ajax({
                    url: '{{ url('/fetch-clients') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        letter: letter
                    },
                    success: function(response) {
                        var clients = response;
                        var servicesHtml = '';
                        $.each(clients, function(index, client) {
                            servicesHtml += '<article class="col-sm-4" data-title="' + client
                                .name + '">';
                            servicesHtml += '<div class="card">' + client.name + '</div>';
                            servicesHtml += '</article>';
                        });
                        $('.services').html(servicesHtml);
                    }
                });
            }
        });
    </script>
@endsection