@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')
    <link rel="stylesheet" href="{{asset('assets/vendor/css/datatables.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/vendor/css/datatables_responsive.min.css')}}">
@endsection

@section('slider')
    <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>
                    <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>
@endsection

@section('content')
        <div class="container mb-5">

            <div class="row">

                <div class="col-12 mt-3">
                    <a href="./" class="link-project"><i class="fa-solid fa-arrow-left font-20"></i> VOLVER</a>
                    <form id="frm_filtros" method="POST" class=" mt-3">
                        <div class="row">
                            <div class="col-sm-6 col-lg-2 mt-2 text-primary">
                                <select id="projects_topics_visible" class="form-control filters uppercase font-12 font-weight-700">
                                    <option value="">TEMÁTICAS</option>
                                    @foreach ($sect->proyectos_tematicas($lang) as $pt)
                                        <option value="{{ $pt->id }}">{{ $pt->name }}</option>
                                    @endforeach
                                </select>
                                <select id="projects_topics" name="projects_topics[]" class="hidden" multiple></select>
                            </div>
                            <div class="col-sm-6 col-lg-2 mt-2 text-secondary">
                                <select id="projects_media_visible" class="form-control filters uppercase font-12 font-weight-700">
                                    <option value="">MEDIOS</option>
                                    @foreach ($sect->proyectos_medios($lang) as $pt)
                                        <option value="{{ $pt->id }}">{{ $pt->name }}</option>
                                    @endforeach
                                </select>
                                <select id="projects_media" name="projects_media[]" class="hidden" multiple></select>
                            </div>
                            <div class="col-sm-6 col-lg-2 mt-2 text-tertiary">
                                <select id="projects_year" class="form-control filters uppercase font-12 font-weight-700">
                                    <option value="">AÑO</option>
                                    @foreach ($sect->proyectos_anos($lang) as $pt)
                                        <option value="{{ $pt->id }}">{{ $pt->year }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <!--<div class="col-md-2 d-none d-sm-block">
                                &nbsp;
                            </div>-->
                            <div class="col-xs-6 col-sm-6 col-lg-3 mt-2">
                                <input id="projects_find" name="" class="form-control filters uppercase font-12 font-weight-700" placeholder="BUSCAR">
                                <svg xmlns="http://www.w3.org/2000/svg" class="input-icon" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-lg-3 text-center text-md-right mt-2">
                                <a id="btn_aplicar" href="javascript:void(0);" class="btn btn-primary text-black rounded-pill font-weight-700 uppercase mr-2"><small>Aplicar</small></a>
                                <a id="btn_borrar" href="javascript:void(0);" class="btn btn white-btn font-weight-700 rounded-pill text-black uppercase"><small>Borrar</small></a>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div id="chips" class="col-md-10"></div>
                        </div>
                    </form>
                </div>

                <div class="col-md-12 mt-3">
                    <div class="row">
                        <div id="items_loader" class="text-center w-100"><img src="{{ asset('img/loader.gif') }}" width="60"></div>
                        <div id="projects" class="col-12">

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

            </div>
        </div>
@endsection


@section('modal')
    <!-- 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>
@endsection

@section('js')
    <script src="{{asset('assets/vendor/js/datatables.min.js')}}"></script>
    <script src="{{asset('assets/vendor/js/datatables_responsive.min.js')}}"></script>

    <script>
        
            $('#projects_topics_visible').select2();
            
            $('#projects_topics_visible').change(function() {
                var repetido = false;
                $('#projects_topics option').each(function(){
                    if($(this).val() === $('#projects_topics_visible option:selected').val()){ repetido = true; }
                });
                if(!repetido){
                    $('#projects_topics').append(new Option($('#projects_topics_visible option:selected').text(), $(this).val()));
                }
                make_chips();
            });

            $('#projects_media_visible').change(function() {
                var repetido = false;
                $('#projects_media option').each(function(){
                    if($(this).val() === $('#projects_media_visible option:selected').val()){ repetido = true; }
                });
                if(!repetido){
                    $('#projects_media').append(new Option($('#projects_media_visible option:selected').text(), $(this).val()));
                }
                make_chips();
            });

            function del_chip(id,type){
                if(type == 'topic'){
                    $("#projects_topics option[value='"+id+"']").remove();
                }else{
                    $("#projects_media option[value='"+id+"']").remove();
                }
                make_chips();
            }

            function make_chips(){
                var chip = "";
                $("#projects_topics option").each(function(){
                    chip += '<span class="badge badge-pill badge-secondary-outline mr-2 mb-2">'+$(this).text()+' <a class="text-white" href="javascript:del_chip('+$(this).val()+','+"'topic'"+')" data-id="'+$(this).val()+'"><i class="fa-solid fa-circle-xmark"></i></a></span>'
                });
                $("#projects_media option").each(function(){
                    chip += '<span class="badge badge-pill badge-primary-outline mr-2 mb-2">'+$(this).text()+' <a class="text-white" href="javascript:del_chip('+$(this).val()+','+"'media'"+')" data-id="'+$(this).val()+'"><i class="fa-solid fa-circle-xmark"></i></a></span>'
                });
                $('#chips').html(chip);
                $("#projects_topics_visible").select2('destroy').val('').select2();
                $("#projects_media_visible").select2('destroy').val('').select2();
            }

            function reset_filters(){
                $("#projects_topics_visible").select2('destroy').val('').select2();
                $("#projects_media_visible").select2('destroy').val('').select2();
                $("#projects_year").select2('destroy').val('').select2();
                $("#projects_topics").empty();
                $("#projects_media").empty();
                $("#projects_find").val("");
                $('#chips').html("");
            }
            
            $('#projects_media_visible').select2();$('#projects_year').select2();
            $('#items_loader').hide();
            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});

            $('#btn_aplicar').click(function(){                
                carga_contenidos(set_variables());
            });

            $('#frm_filtros').submit(function(e){
                carga_contenidos(set_variables());
                e.preventDefault();
            });

            $('#btn_borrar').click(function(){
                //$('#frm_filtros').reset();
                reset_filters();
                carga_contenidos(set_variables());
            });

            carga_contenidos(set_variables());
            function carga_contenidos(data){
                $('#items_loader').show();
                $.ajax({
                    url: '{{route('projects')}}',type: 'POST', data:data,
                    success: function(result){
                        $('#items_loader').hide();
                        if(result.msg_type == "success"){
                            $("#projects").html(result.html);
                            if(result.total == 0){
                                $("#projects").html('<div class="text-center w-100">No hay proyectos</div>');
                            }
                        }else{
                            $("#projects").html('<div class="text-center w-100">Error al mostrar los datos</div>');
                        }
                    },
                    error: function (error) {
                        $('#items_loader').hide();
                        $("#projects").html('<div class="text-center w-100">Error al enviar la petición</div>');
                    }
                });
            }

            function carga_ficha(id){
                $.ajax({
                    url: '{{route('desc_project')}}',type: 'POST', data:{id:id},
                    success: function(result){
                        if(result.msg_type == "success"){
                            $('#proj_title').html(result.proj_title);
                            $("#proj_desc").html(result.html);
                            $('#mdl_project').modal();
                        }else{
                            $('#mdl_project').modal();
                            $('#proj_title').html('Upps...');
                            $("#proj_desc").html('<div class="text-center w-100">Error al mostrar los datos</div>');
                        }
                    },
                    error: function (error) {
                        $('#mdl_project').modal();
                        $('#proj_title').html('Upps...');
                        $("#proj_desc").html('<div class="text-center w-100">Error al enviar la petición</div>');
                    }
                });
            }

            function set_variables(){
                var projects_topics = $("#projects_topics option").map(function(){return this.value;}).get().join(",");
                var projects_media = $('#projects_media option').map(function(){return this.value;}).get().join(",");
                var projects_year = $('#projects_year').val();
                var projects_find = $('#projects_find').val();
                return dataString = 'projects_topics='+projects_topics+'&projects_media='+projects_media+'&projects_year='+projects_year+'&projects_find='+projects_find;
            }

    </script>
@endsection