@extends('front.main', [
    'title' => __('Réalisation :libelle', ['libelle' => $item->libelle]),
    'pagename' => 'realizations'])
@push('css')
    <style>
        .parent_realization .legend {
            display:none;
        }
        .parent_realization:hover .legend {
            display:block;
        }
        .realization_img .overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 0%;
            width: 0%;
            background: #000;
            opacity: 0.9;
            border-radius: 5px;
            transition: width 0.2s;
        }
        .realization_img:hover .overlay {
            height: 310px;
            width: 100%;
        }
    </style>
@endpush
@section('content')

    @include('realization-item', compact('item'))

@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').hover(
                function() {
                    console.log('fadeIn');
                    $('.legend', this).fadeIn();
                },
                function() {
                    console.log('fadeOut');
                    $('.legend', this).fadeOut();
                }
            );
        });

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

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

                    if (output) {

                        var html = '';

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

                                if (key.indexOf('config_realization_image') != -1) {
                                    $('#front_' + key).attr({
                                        'src': route_home + '/storage/public/config_websites/' + element
                                    });
                                }
                                else if (key.indexOf('realization_resume') != -1) {
                                    if (key == 'realization_resume_image') {
                                        $('#front_' + key).attr({
                                            'src': route_home + '/storage/public/config_websites/' + element
                                        });
                                    }
                                    else {
                                        $('[name="'+key+'"]').val(element);
                                    }
                                }
                            }
                        }
                    }
                }
            });

            $.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-2">';
                                    html += '<div class="parent_realization">';
                                        html += '<div class="w-100 realization_img" style="border-radius: 30px;height: 300px;background-image: url(' +route_home+ '/storage/public/realizations/' + element.image + ');background-position: center;background-size: cover;background-repeat: no-repeat">';
                                            html += '<div class="overlay"></div>';
                                        html += '</div>';
                                        html += '<div class="fs-25 w-100 legend" style="position: absolute;top: 40%;text-align: center">'+element.type.libelle+'</div>';
                                    html += '</div>';
                                    html += '<a style="display: block;text-decoration: none;color: white" href="#!" class="mt-3"><span class="fs-20">' +element.title+ '</span><br><span class="text-muted">' +element.context+ '</span></a>';
                                html += '</div>';

                            }
                        }

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

                    }
                }
            });
        }

    </script>
    <script>

        init_front();

    </script>
@endpush