@extends('front.main', ['title' => 'Expertises', 'pagename' => 'expertises'])
@push('css')
@endpush
@section('content')
    @include('expertises')
@endsection
@push('js')
<script>

    var ajax_all_url = "{{ route('front.expertises.all') }}";

</script>
<script>

    var front_init = function () {
        $.ajax({
            type: 'get',
            url: ajax_all_url,
            success: function(output) {

                console.log('!! output');
                console.log(output);

                if (output) {

                    var html = '<div class="form-row">';
                    var n = 0;

                    for (const key in output) {
                        if (Object.hasOwnProperty.call(output, key)) {
                            const element = output[key];

                            n++;

                            html += '<div class="col-lg-3 col-6 py-4" style="'+(((n<=4) ? n%2 == 0:n%2==1)?'background-color:#333':'')+'">';
                            html += '<div class="p-4">';
                            html += (element.libelle == null || element.libelle == '') ? '':'<h5 class="pr-5">' +element.libelle+ '</h5>';
                            html += '<p class="text-muted ff-gotham">' +element.content+ '</p>';
                            html += '</div>';
                            html += '</div>';
                            
                            if (n == 8) n = 0;

                        }
                    }

                    html += '</div>';

                    $('#items').html(html);

                }
            }
        });
    }

    front_init();

</script>

@endpush