@extends('front.main', ['title' => 'Réalisations', 'pagename' => 'realizations'])
@push('css')
    <style>
        .image-container {
            position: relative;
            display: inline-block;
        }

        .realization_img {
            /* width: 100%; /* Ou une autre dimension spécifique */
            /* display: block; /* Assure qu'il n'y a pas d'espace en dessous de l'image */
            transition: opacity 0.3s ease; /* Transition douce pour l'effet d'opacité */
        }

        .realization_img:hover {
            opacity: 0.2; /* Assombrissement de l'image au survol */
        }

        .parent_realization .legend {
            display: none;
        }
        

        .parent_realization:hover .legend {
            display: block;
        }
    </style>
@endpush
@section('content')
    @include('realizations')
@endsection
@push('js')
    <script>

        var ajax_front_realizations_url = "{{ route('front.realizations.all') }}";
        var ajax_front_settings_url = "{{ route('front.settings.all') }}";

        $(document).ready(function() {
            $('.realization_img').on('mouseover', function() {
                console.log('test...');
                $('.legend').css({
                    'opacity': '0',
                    'visibility': 'hidden'
                });
                $(this).find('.legend').css({
                    'opacity': '1',
                    'visibility': 'visible'
                });
            });
            $('.realization_img').on('mouseout', function() {
                $(this).find('.legend').css({
                    'opacity': '0',
                    'visibility': 'hidden'
                });
            });
        });

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

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

                    if (output) {

                        var html = '';

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

                                html += '<div class="col-lg-6 col-12 p-4">';
                                    html += '<div class="parent_realization">';
                                        html += '<a href="' +route_home+'/realization/'+element.id+'/'+element.slug+ '"';
                                            html += 'class="w-100 realization_img" ';
                                            html += 'style="';
                                            html += 'display: block;';
                                            html += 'border-radius: 30px;';
                                            html += 'height: 300px;';
                                            html += 'background-image: url(' +route_home+ '/storage/public/realizations/' + element.image + ');';
                                            html += 'background-position: center;';
                                            html += 'background-size: cover;';
                                            html += 'background-repeat: no-repeat">';
                                        html += '</a>';
                                        html += '<div ';
                                            html += 'class="fs-25 w-100 legend" ';
                                            html += 'style="';
                                            html += 'position: absolute;';
                                            html += 'top: 40%;';
                                            html += 'text-align: center">'+element.type.libelle;
                                        html += '</div>';
                                    html += '</div>';
                                    html += '<a style="display: block;text-decoration: none;color: white" href="' +route_home+'/realization/'+element.id+'/'+element.slug+ '" class="mt-3">';
                                    html += '<span class="fs-20">' +element.title+ '</span><br>';
                                    html += '<span class="text-muted">' +element.context+ '</span>';
                                    html += '</a>';
                                html += '</div>';

                            }
                        }

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

                    }
                }
            });
        }

    </script>
    <script>

        init_front();

    </script>
@endpush