@extends('layouts.app')
@section('title', $empreendimento->nome)
@section('content')
<section id="logo-empreedimento">
    <div class="container">
        <div class="logo">
            <img src="https://app.imobtask.com.br/public/storage/{{$logo}}" alt="{{$empreendimento->name}}">
        </div>
    </div>
</section>
@if($banners->isNotEmpty())
<section id="banners">
    <div class="arrow arrow-prev"><i class="fa-solid fa-chevron-left"></i></div>
    <div class="banners">
        @foreach($banners as $banner)
            <div class="banner swiper-slide">
                <div class="image-banner">
                    @if($banner->link != '') <a href="{{$banner->link}}" target="_blank"></a> @endif
                    <img src="https://app.imobtask.com.br/public/storage/{{$banner->path}}" alt="{{$empreendimento->nome}}">
                </div>
            </div>
        @endforeach
    </div>
    <div class="arrow arrow-next"><i class="fa-solid fa-chevron-right"></i></div>
</section>
@endif
<section id="sobre">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="text-sobre">
                    {!!$empreendimento->texto_sobre!!}
                </div>
            </div>
            <div class="col-12 col-md-6 video-sticky">
                <div class="video-sobre">
                    @if($video_url != '')
                        <div class="video-container">
                            {!!$video_url!!}
                        </div>
                    @else
                        <p>Erro ao carregar o vídeo</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<section id="beneficios">
    <div class="container">
        <h2>{{$empreendimento->title_beneficios}}</h2>
        <div class="beneficios d-flex flex-wrap">
            @foreach($beneficios as $beneficio)
            <div class="beneficio">
                <div class="content-beneficio">
                    <h3>{{$beneficio->titulo}}</h3>
                    <p>{{$beneficio->content}}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@if($midias->isNotEmpty())
<section id="galeria">
    <div class="container">
        <h2 class="title_gallery">{{$empreendimento->title_gallery}}</h2>
        <div class="galeria d-flex align-items-center justify-content-between flex-wrap">
            @foreach($midias as $midia)
                <div class="foto">
                    <a href="https://app.imobtask.com.br/public/storage/{{$midia->path}}" data-lightbox="roadtrip">
                        <img src="https://app.imobtask.com.br/public/storage/{{$midia->path}}" alt="{{$empreendimento->nome}}">
                    </a>
                </div>
            @endforeach
        </div>
        @if($total_midias > 6)
            <a href="javascript:void(0)" class="btn-load">Carregar mais</a>
        @endif
    </div>
</section>
@endif
<section id="form">
    <div class="container">
        <form action="{{url('cadastro/lead')}}" method="POST" id="form-lead" autocomplete="off">
            @CSRF
            <div class="content-form d-flex align-items-start justify-content-between flex-wrap">
                <div class="lado">
                    <h2>Inscreva-se para saber mais</h2>
                    <input type="checkbox" name="aceite" value="1" id="aceite" class="d-none">
                    <label for="aceite"><span>*Eu aceito receber as informações e o contato da equipe do empreendimento via Whatsapp ou Telefone.</span></label>
                </div>
                <div class="lado">
                    <div class="resposta-form"></div>
                    <div class="input-form">
                        <input type="text" name="nome" id="nome" placeholder="Nome" required>
                    </div>
                    <div class="input-form">
                        <input type="email" name="email" id="email" placeholder="E-mail" required>
                    </div>
                    <div class="input-form">
                        <input type="tel" name="telefone" id="telefone" placeholder="Telefone" required>
                    </div>
                    <input type="hidden" name="promotor" value="{{$promotor_id}}">
                    <button type="submit" class="submit-form">Quero saber mais</button>
                </div>
            </div>
        </form>
    </div>
</section>
<footer>
    <div class="container">
        <div class="content-footer d-flex align-items-center justify-content-between flex-wrap">
            <div class="copyright">
                &copy;{{$empreendimento->nome}} {{date('Y')}} - Todos os direitos reservados - Tecnologia Imobtask
            </div>
            <div class="sociais">
                <ul class="d-flex align-items-center">
                    @if($facebook != 'no') <li><a href="{{$facebook}}" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li> @endif
                    @if($instagram != 'no') <li><a href="{{$instagram}}" target="_blank"><i class="fa-brands fa-instagram"></i></a></li> @endif
                    @if($linkedin != 'no') <li><a href="{{$linkedin}}" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a></li> @endif
                </ul>
            </div>
        </div>
    </div>
</footer>
@endsection
@section('javascript')
<script>
let paginaAtual = 2;
function carregarMidias() {
    $('#loading-form').css({'display':'flex'});
    $.ajax({
        type: 'POST',
        url: '{{ route('midias.carregar') }}',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        data: {
            page: paginaAtual,
            empreendimento: '{{ $empreendimento->id }}'
        },
        success: function(response) {
            if (response.data.length > 0) {
                response.data.forEach(function(midia) {
                    $('.galeria').append(
                        '<div class="foto"><a href="https://app.imobtask.com.br/public/storage/{{$midia->path}}" data-lightbox="roadtrip">' +
                            '<img src="https://app.imobtask.com.br/public/storage/' + midia.path + '" alt="{{$empreendimento->nome}}">' +
                            '</a>' +
                        '</div>'
                    );
                });
                paginaAtual++;
                if(response.to == response.total){
                    $('.btn-load').prop('disabled', true).hide();
                }
            } else {
                $('.btn-load').prop('disabled', true).hide();
            }
        },
         beforeSend: function() { 
            $('#loading-form').css({'display':'flex'});
        },
        complete: function(){             
            $('#loading-form').css({'display':'none'});
        }
    });
}
$('.btn-load').click(function() {
    carregarMidias();
});

$(document).ready(function() {
	$('#form-lead').on('submit', function(event) {
        event.preventDefault();
        
        var formData = new FormData($(this)[0]);
        var action = $(this).attr('action');

        if ($('#aceite:checked').length < 1) {
            $('.resposta-form').html('<div class="alert alert-danger" role="alert">Você deve aceitar receber nossas informações e contato.</div>');
            return;
        }
        
        $.ajax({
            type: 'POST',
            url: action,
            data: formData,
            processData: false, 
            contentType: false, 
            success: function(response) {
                if(response.success){
                    $('.resposta-form').html('<div class="alert alert-success" role="alert">Informações enviadas com sucesso.<br>Um de nossos vendedores entrará em contato com você em breve!</div>');
                    $('#form-lead')[0].reset();
                }else{
                    $('.resposta-form').html('<div class="alert alert-danger" role="alert">'+response.message+'</div>');
                }
            },
            beforeSend: function() { 
                $('#loading-form').css({'display':'flex'});
                $('.resposta-form').html('');
            },
            complete: function(){             
                $('#loading-form').css({'display':'none'});
            }
        });
	});
});
</script>
@endsection