@extends('layouts.portal')

@section('title'){{$page->name}} - @endsection
@section('meta_description'){{strip_tags($page->description)}}@endsection

@section('metas')
    <!-- Open Graph para Facebook -->
    <meta property="og:title" content="{{$page->name}}" />
    <meta property="og:type" content="page" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:image" content="{{Voyager::image($page->banner_image)}}" />
    <meta property="og:description" content="{{strip_tags($page->description)}}" />
    <meta property="og:site_name" content="{{setting('site.title')}}" />
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="{{'@'.Str::lower(setting('site.title'))}}">
    <meta name="twitter:title" content="{{$page->name}}">
    <meta name="twitter:description" content="{{strip_tags($page->description)}}">
    <meta name="twitter:creator" content="@IngenesisCol">
    <meta name="twitter:image:src" content="{{Voyager::image($page->banner_image)}}">
@endsection

@section('css')
@endsection

@section('slider')
    @if($page->is_main)
        <div class="slider">
            <div id="slider" class="carousel slide @if(setting('site.slider_animation') == 2)carousel-fade @endif" data-ride="carousel">
                <ol class="carousel-indicators justify-center justify-lg-right">
                    @foreach ($slides as $i => $slide)
                        <li data-target="#slider" data-slide-to="{{$i}}" class="@if($i == 0)active @endif"></li>
                    @endforeach
                </ol>
                <div class="carousel-inner">
                    @foreach ($slides as $i => $slide)
                    <div class="carousel-item @if($i == 0)active @endif" style="background: url({{Voyager::image($slide->bg_image)}}) center center; height:{{setting('site.slider_height')}}px; background-size:cover;">
                        <div class="carousel-caption">
                            {!!$slide->description!!}
                        </div>
                    </div>
                    @endforeach
                </div>
                @if(count($slides) > 1)
                <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
                    <i class="fa-solid fa-chevron-left fa-2xl"></i>
                    <span class="sr-only">Anterior</span>
                </a>
                <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
                    <i class="fa-solid fa-chevron-right fa-2xl"></i>
                    <span class="sr-only">Siguiente</span>
                </a>
                @endif
            </div>
        </div>
    @else
    <section id="particles-js" class="p-0 position-relative">
        <div class="slider-area" id="slider-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 text-md-center text-lg-center wow flipInX content-margin" data-wow-duration="1.5s" data-wow-delay="0.2s">
                        <div class="area-heading text-center text-lg-center">
                            <h1 class="text-white font-weight-bold mb-4">{!!$page->banner_text!!}</h1>
                        </div>
                    </div>
                </div>
                <ul class="page-breadcrumb link">
                    <li><a href="./">{{$label->traducir('label_home_page')->name}}</a></li>
                    @if(!is_null($mnuPpalTop))<li><a href="#">{{$mnuPpalTop->title}}</a></li>@endif
                    <li>{{ucfirst($page->name)}}</li>
                </ul>
            </div>
        </div>
        <canvas class="particles-js-canvas-el" width="2716" height="750" style="width: 100%; height: 100%;"></canvas>
    </section>
    @endif
@endsection

@section('body_props')
    style="background: url('../../img/page_bg1.svg') top center; background-size: cover;"
@endsection
 
@section('content')
    @foreach($sections as $section)
            @php $sect = \App\Models\Section::where('id',$section->id)->first() @endphp
            <div id="{{$section->slug}}">
                @switch($section->model)
                    @case('content') @include('sections.texto_imagen', ['section' => $section]) @break
                    @case('search') @include('sections.busqueda', ['section' => $section]) @break
                    @case('products') @include('sections.productos', ['section' => $section,'sect'=>$sect]) @break
                    @case('projects') @include('sections.proyectos', ['section' => $section,'sect'=>$sect]) @break
                    @case('nodes') @include('sections.nodos', ['section' => $section,'sect'=>$sect]) @break
                @endswitch
            </div>
    @endforeach
@endsection

@section('modal')
    @if($page->is_main)
        <!-- Modal Intro -->
        <div class="modal modal-fullscreen-xl" id="mdl_intro" tabindex="-1" role="dialog" aria-hidden="true" >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    
                    <div id="intro" class="carousel slide" data-ride="carousel" style="height:100%;"> <!-- carousel-fade-->
                        <ol class="carousel-indicators">
                            @foreach ($slides as $i => $slide)
                                <li data-target="#intro" data-slide-to="{{$i}}" class="@if($i == 0)active @endif"></li>
                            @endforeach
                        </ol>
                        <div class="carousel-inner" style="height:100%;">
                            @foreach ($slides as $i => $slide)
                            <div class="carousel-item @if($i == 0)active @endif" style="height:100%;">
                                {!!$slide->description!!}
                            </div>
                            @endforeach
                        </div>
                        @if(count($slides) > 1)
                        <a class="carousel-control-prev" href="#intro" role="button" data-slide="prev">
                            <i class="lni lni-chevron-left font-26"></i>
                        <span class="sr-only">Anterior</span>
                        </a>
                        <a class="carousel-control-next" href="#intro" role="button" data-slide="next">
                            <i class="lni lni-chevron-right font-26"></i>
                        <span class="sr-only">Siguiente</span>
                        </a>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn white-btn font-weight-700 rounded-pill text-black uppercase" data-dismiss="modal">Saltar intro</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Projects modal -->
        <div id="mdl_project" class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg mt-0" style="height: auto;">
                <div class="modal-content modal-dark">
                    <div class="modal-header">
                    <h5 class="modal-title text-center font-30 font-syne font-weight-700 w-100" id="proj_title"></h5>
                    <button type="button" class="close close-dark" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div id="proj_desc" class="modal-body">
                        
                    </div>
                    <div class="modal-footer align-items-center">
                    <button type="button" class="btn btn-primary rounded-pill uppercase" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('js')

    @if($page->is_main)
        <script>
            $(function(){ 
                $("#mdl_intro").modal("show"); 
                if(localStorage.getItem("val_cookies") != 1){ $("#mdl_intro").modal("show"); } 
            });
        </script>
    @endif

    <script>
        $.ajaxSetup({headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')}});

        $("#frm_contact").on("submit", function(e) { 
            $.ajax({
                url: '{{route('contact')}}',type: 'POST', data:new FormData(this),
                dataType:'JSON', contentType: false, cache: false, processData: false,
                success: function(result) {
                    if(result.msg_type == "success"){
                        $("#frm_contact")[0].reset();
                        Swal.fire({icon:'success',html:result.msg,showCloseButton: false,showCancelButton: false,focusConfirm:true,
                        confirmButtonText:'OK',cancelButtonText:'Cancelar',});
                    }else{
                        Swal.fire({icon:'error',html:result.msg,showCloseButton: false,showCancelButton: false,focusConfirm:true,
                        confirmButtonText:'OK',cancelButtonText:'Cancelar',});
                    }
                },
                error: function (error) {
                    Swal.fire({icon:'error',html:error,showCloseButton: false,showCancelButton: false,focusConfirm:true,
                    confirmButtonText:'OK',cancelButtonText:'Cancelar',});
                }
            });
            e.preventDefault(); 
        });

        $("#frm_node").on("submit", function(e){
        
            const swal_be_node = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-primary text-black rounded-pill font-weight-700 uppercase mr-3',
                cancelButton: 'btn btn-tertiary text-black rounded-pill font-weight-700 uppercase'
            },
                buttonsStyling: false
            })

            swal_be_node.fire({
                title: '¿Estás seguro de enviar el formulario?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Continuar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#73BF8D',
                cancelButtonColor: '#0397C7',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{route('be_node')}}',type: 'POST', data:new FormData(this),
                        dataType:'JSON', contentType: false, cache: false, processData: false,
                        success: function(result) {
                            if(result.msg_type == "success"){
                                $("#frm_node")[0].reset();
                                Swal.fire({icon:'success',html:result.msg,showCloseButton: false,showCancelButton: false,focusConfirm:true,
                                confirmButtonText:'OK',cancelButtonText:'Cancelar',});
                            }else{
                                Swal.fire({icon:'error',html:result.msg,showCloseButton: false,showCancelButton: false,focusConfirm:true,
                                confirmButtonText:'OK',cancelButtonText:'Cancelar',});
                            }
                        },
                        error: function (error) {
                            Swal.fire({icon:'error',html:error,showCloseButton: false,showCancelButton: false,focusConfirm:true,
                            confirmButtonText:'OK',cancelButtonText:'Cancelar',});
                        }
                    });
                } else if (result.isDenied) {
                    //Swal.fire('Changes are not saved', '', 'info')
                }
            });
            e.preventDefault(); });
    </script>
    
@endsection