@extends('layouts.app')
@section('content')
    <section class="py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="top-text">
                        <h1>Browse project and start planting</h1>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mt-4">
                <div class="col-md-12">
                    <ul class="nav nav-tabs country-tab " id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link nav-country active" id="country-all" href="#all"
                                onclick="renderProject('all', 1, 'new')">All</a>
                        </li>
                        @foreach ($countries as $key => $country)
                            <li class="nav-item">
                                <a class="nav-link nav-country" id="country-{{ $key }}"
                                    onclick="renderProject('{{ $key }}',1, 'new')"
                                    href="#{{ $key }}">{{ $country }}</a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <input type="hidden" name="country_id" id="selectedCountryId" value="">
                        <div class="tab-pane fade show active data-tab" id="all" role="tabpanel"
                            aria-labelledby="home-tab">
                            <div class="row mt-3" id="dataContainer">

                            </div>
                            <div class="col-md-12 text-center mt-2 mt-sm-4">
                                <button type="button" class="btn more-btn" page-count="1" id="viewMoreButton">View more
                                    projects</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    @include('partials.subscribe-news-letter')
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            renderProject('all', 1, 'new');
        });

        $('#viewMoreButton').on('click', function() {
            var page_count = (parseInt($(this).attr('page-count')) + 1);
            var selected_country_id = $('#selectedCountryId').val();
            $(this).attr('page-count', page_count);
            renderProject(selected_country_id, page_count, 'more');
        });


        function renderProject(countryId, pageNumber = 1, type) {
            $('#selectedCountryId').val(countryId);
            $.ajax({
                url: app_url + '/projects',
                method: 'GET',
                data: {
                    'country_id': countryId,
                    'page': pageNumber,
                },
                success: function(response) {
                    $('.nav-country').removeClass('active');
                    $('#country-' + countryId).addClass('active');
                    $(".data-tab").attr('id', countryId);

                    var html = response.html;
                    if (type == 'new') {
                        $('#viewMoreButton').attr('page-count', 1);
                        $('#dataContainer').html(html);
                    } else {
                        $('#dataContainer').append(html);
                    }
                    nextPageUrl = response.nextPageUrl;
                    if (nextPageUrl) {
                        $('#viewMoreButton').show();
                    } else {
                        $('#viewMoreButton').hide();
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            });
        }
    </script>
@endsection