@extends('layout.padrao')
@section('content')

<!-- Menu -->
<script>
    window.onload = function () {
        $('.wallpapers').addClass('active');
    }
</script>

@include('Intranet.menu')

<div class="col col-12 margin-bottom-30 ajusteMobile">
    <div class="col margin-bottom-30">
        <h2>
            Wallpapers
        </h2>
    </div>
    <div class="w-100"></div>
    <div class="col col-sm-12 col-md-12 col-lg-12">
        <div class="row col shadow folha-interna folha-azul rounded box padding-15">

            <!-- Container 1 -->
            <div class="col-sm-12 col-md-12 col-lg-6 text-center container">
                <img id="wallpaper1" src="{!! asset('/image/wallpapers/wallpaperCSA.jpg') !!}" alt="Wallpaper CSA" class="image wallpaper img-fluid">
                <div class="overlay">
                    <div class="row">
                        <div class="col"></div>
                        <div class="col">
                            <a class="downloadButton" href="/wallpapers/download/wallpaper1" 
                                target="_blank" 
                                download 
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="Download"
                            >
                                <img src="{!! asset('/image/icons/download-icon.svg') !!}" alt="Baixar Wallpaper">
                            </a>   
                            <div class="expandButton" onclick="expandirWallpaper('expand1','wallpaper1','img1')" data-toggle="tooltip" data-placement="top" title="Expandir">
                                <img src="{!! asset('/image/icons/expand-icon.svg') !!}" alt="Expandir Wallpaper">
                            </div>
                        </div>
                    </div>
                </div> 
            </div>

            <!-- Modal 1 -->
            <div id="expand1" class="modal">
                <span class="close" onclick="fecharModal('expand1')">&times;</span>
                <img class="modal-content" id="img1">
            </div>

            <!-- Container 2 -->
            <div class="col-sm-12 col-md-12 col-lg-6 text-center container emBreve">
                <img id="wallpaper2" src="{!! asset('/image/wallpapers/wallpaperEmBreve.jpg') !!}" alt="Wallpaper CSA" class="image wallpaper img-fluid">
                <div class="overlay">
                    <div class="row">
                        <div class="col"></div>
                        <div class="col">
                            <a class="downloadButton" href="#" 
                                target="_blank" 
                                download 
                                data-toggle="tooltip" 
                                data-placement="top" 
                                title="Download"
                            >
                                <img src="{!! asset('/image/icons/download-icon.svg') !!}" alt="Baixar Wallpaper">
                            </a>   
                            <div class="expandButton" onclick="expandirWallpaper('expand2','wallpaper2','img2')" data-toggle="tooltip" data-placement="top" title="Expandir">
                                <img src="{!! asset('/image/icons/expand-icon.svg') !!}" alt="Expandir Wallpaper">
                            </div>
                        </div>
                    </div>
                </div> 
            </div>

            <!-- Modal 2 -->
            <div id="expand2" class="modal emBreve">
                <span class="close" onclick="fecharModal('expand2')">&times;</span>
                <img class="modal-content" id="img2">
            </div>

        </div>
    </div>
</div>

@include('Intranet.style')
@include('Intranet.wallpapers.style')
@include('Intranet.wallpapers.script')

@endSection