@extends('layouts.base')

@section('css')
{!! Minify::stylesheet('/css/study.css')->withFullUrl() !!}
{!! Minify::stylesheet('/css/studyStarred.css')->withFullUrl() !!}
@stop

@section('title')
Oferta de cursos destacados de Aula Abierta
@stop

@section('description')
Vea aquí los cursos destacados o con promociones especiales en Radio ECCA. Próxima oferta formativa. Educación.
@stop

@section('content')
{!! Breadcrumbs::render('study-aa-starred') !!}
<div class="container" id="vueDestacados" codIdioma="{{$codIdioma}}" url="{{$url}}">
    <div class="titulo_categoria">
        <span>Cursos destacados</span>
    </div>
    <div class="row starred-wrapper">
<!-- Carlos 2020-01-13: Ocultar el curso "Iniciación al voluntariado", y añadir 2 columnas vacias para centrar las opciones restantes -->
<!-- Carlos 2019-11-09: Reactivar la entrada del curso "Iniciación al voluntariado" (CAMBIAR ANCHOS A 3 COLUMNAS) -->
<!--
        <div class="col-md-4 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/manos-voluntarios.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Iniciación al voluntariado</h1>
                        <br>
                        <p>
                            Plazas limitadas. <br>
                            Becado para residentes en Canarias
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/iniciacionalvoluntariado.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
-->
	<!-- 2 columnas vacias -->
	<!--         <div class="col-md-2 item-wrapper"> </div>           -->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/estudios2.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>V JORNADAS INTERNACIONALES DE EDUCACIÓN A DISTANCIA
                        </h1>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/vjornadasinternacionales" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

<!-- 17/10/2029: OCULTAR LA ENTRADA "Actuaciones de sensib..." en "Estudiar"->"Cursos destacados" -->
<!-- 05/02/2010: RECUPERAR LA ENTRADA "Actuaciones de sensibilización que fomenten la interculturalidad... -->
<!-- 17/04/2020: OCULTAR DE NUEVO -->
<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/interculturalidad.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Actuaciones de sensibilización
                            que fomenten la interculturalidad
                            en Centros Educativos
                        </h1>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/sensibilizacion_interculturalidad" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
-->

<!-- 05/02/2020: Nueva entrada, curso "LA CIGUATERA" (intoxicación alimentaria por consumo de pescado) CIERRE DEL CURSO 11/06/2020
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/banco_peces.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>La Ciguatera</h1>
                        <p>
                            Aprenda a detectar los síntomas de esta intoxicación alimentaria.
                        </p>
                        <p>
                            Curso becado. No deje pasar esta oportunidad.
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/laciguatera.html" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div> -->

<!-- 17/02/2020: Nueva entrada, "V Jornadas Mujer y Sociedad" Debido al COVID-19 NO SE IMPARTE EL CURSO POR COVID-19 SE QUITA 08/06/2020
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/mujer-sociedad-2020.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>V Jornadas Mujer y Sociedad</h1>
                        <p>
                            Mujeres y deporte
                        </p>
                        <p>
                            Formación online y presencial.
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/5jornadasmujerysociedad/" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
-->
	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/pencil.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Proyecto educación y formación de adultos</h1>
                        <p>
                            Plazas limitadas. <br>
                            Becado por el Cabildo Gran Canaria.
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/proyectoeducacion" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/fitosanitario.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>¿Utilizas o vendes productos fitosanitarios?</h1>
                        <p>
                            Este curso te interesa. <br>
                            Plazas limitadas.
                        </p>
                        <a style="background-color: orange !important; color: #444444 !important; font-weight: 600; border-color: orange"  class="btn btn-large btn-primary" href="{{ asset('img/cabeceras/destacados/octavilla-fitosanitario.pdf') }}" target="_blank" >
                            Información en PDF
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/universidad-sevilla.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Formación para el alumnado de la universidad de Sevilla</h1>
                        <p>No deje pasar esta oportunidad.</p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/andalucia/" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/sostenibilidad.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text" style="ma">
                        <h1>Gran Canaria, eficiente y sostenible</h1>
                        <p>
                            Becado para residentes de Gran Canaria. Cabildo Insular.
                            <br>
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/grancanariaeficiente.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
	<div class="col-md-3 item-wrapper">
            <div class="item" style="background-color:#07C1B4 ">
                <div class="wrapper-claim" style="background-color: rgba(1,1,1,0.1)">
                    <div class="claim-text">
                        <h1></h1>
                        <p>
                            Convocatoria Acreditación de 19 Cualificaciones Profesionales a través de la Experiencia Laboral 2018
                        </p>
                        <a style="background-color: orange !important; color: #444444 !important; font-weight: 600; border-color: orange" class="btn btn-large btn-primary" href="http://www3.gobiernodecanarias.org/empleo/portal/web/sce/noticias/contenidos_noticias_acreditacion_2017" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

<!-- Carlos 2019-10-21: Añadir cartel "VI Jornadas Internacionales de Educacion a Distancia" -->
<!-- Carlos 2019-10-29: Sustituir link al cartel por otro a la página informativa creada por Juan Antonio -->
<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/cartel_2019_6a_jornadas_edu_dist.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>VI Jornadas Internacionales de Educacion a Distancia</h1>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/6jornadasinternacionales/" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
-->

    <div v-if="hasCursos" class="row starred-wrapper" >
        <div class="col-md-3 item-wrapper" v-for="c in getCursos" :key="c.idTitulacion">
                <div class="item" v-bind:style="{ 'background-image': 'url(data:image/jpeg;base64,' + c.portada + ')' }">
                    <div class="wrapper-claim">
                        <div class="claim-text">
                            <h1>@{{c.nombreTitulacion}}</h1>
                            <p v-html="c.descripcion">
                            </p>
                            <a class="btn btn-large btn-primary" v-on:click="goto_route(c)">
                                Infórmese aquí
                            </a>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div v-else class="row starred-wrapper">
        <div class="col-md-12 item-wrapper text-center">
            @{{ loadingCursos ? 'Cargando...' : 'No existen actualmente cursos disponibles' }}
        </div>
    </div>

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cabeceras/destacados/competencias-clave.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1 style="">Competencias clave</h1>
                        <p style="">
                            BECADO PARA CANARIAS <br> PLAZAS LIMITADAS
                        </p>
                        <a class="btn btn-large btn-primary" target="_blank" href="http://www.radioecca.net/tele_formacion/catalogo/competenciasclave">
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

<!-- 2020-03-18 Carlos: Reactivar la entrada al curso de Adaptacion al Cambio Climatico  SE CIERRA EL CURSO 11/06/2020
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/sequia.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Curso Adaptacion al Cambio Climatico y uso eficiente del agua</h1>
                        <p>ADAPTaRES</p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/adaptares_a.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div> -->

<!-- 2020-04-02 Carlos: Añadir entrada para la campaña de cursos gratuitos -->
<!-- 2020-05-08 Carlos: DESHABILITAR
        <div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cartel_formacion_gratuita_2020_dark.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Formación gratuita</h1>
                        <p style="font-size:18px; color:white"><i>para este momento</i></p>
                        <p style="font-size:14px; color:white">#Quédate en casa</p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/gratuitos.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
-->

<!-- 2020-04-14 Carlos: Añadir entrada para el curso de Emprendimiento : SE ELEIMINA DE LA WEB 25/06/2020
        <div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cartel_emprendimiento_2020.png') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Emprendimiento</h1>
                        <p>
                            Curso dirigido a aquellas personas que desean iniciar su propio negocio.
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/emprendimiento/" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/sostenibilidad.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>USO EFICIENTE DEL AGUA Y ADAPTACIÓN AL CAMBIO CLIMÁTICO</h1>
                        <p>
                            TALLER PARA ESCOLARES
                        <br>
                        ADAPTaRES
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/adaptares.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/madrid_comunidad.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Formación para el profesorado de la Comunidad de Madrid</h1>
                        <p>
                            Consejería de Educación y Deporte
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/madrid/menu/comunidad_madrid.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/human-rights.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Derechos humanos: nuestros derechos
                        </h1>
                        <p>
                            Becado por Consejería de Empleo, Políticas Sociales y Vivienda del Gobierno de Canarias
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/derechoshumanos.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->
        
	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/anio_escolar_irlanda.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h6 style="font-size: 14px; color: orange; padding-top: 5px;"><i class="fa fa-star-o"></i> Oferta de verano</h6>
                        <h1>Cursos acreditables para bachillerato</h1>
                        <p>
                            Tiempo de formación
                        </p>
                        <a class="btn btn-large btn-primary" style="background-color: orange !important; color: #444444 !important; font-weight: 600; border-color: orange" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/oferta_verano/" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/student_training.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h6 style="font-size: 14px; color: orange; padding-top: 5px;"><i class="fa fa-star-o"></i> Oferta de verano</h6>
                        <h1>Cursos acreditables para graduado en educación secundaria</h1>
                        <p>
                            Tiempo de formación
                        </p>
                        <a class="btn btn-large btn-primary" style="background-color: orange !important; color: #444444 !important; font-weight: 600; border-color: orange" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/oferta_verano_ges/" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
	<div class="col-md-3 item-wrapper">
            <div class="item" style=" background-image: url( {{ asset('img/cabeceras/destacados/alicante.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Formación y apoyo al empleo para jóvenes en Alicante</h1>
                        <p>
                            No deje pasar esta oportunidad.
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/jovenesalicante/" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
	<div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cabeceras/destacados/acreditaciones_externas2.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Disponemos de cursos con acreditaciones externas</h1>
                        <p style="font-size: 10px">
                            ESSSCAN (Escuela de Servicios Sociosanitarios de Canarias), 
                            Dirección General de Ordenación, Innovación y Promoción Educativa del Gobierno de Canarias,
                            ULPGC (Universidad de Las Palmas de Gran Canaria)
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/n_externas.html" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
	<div class="col-md-3 item-wrapper">
            <div class="item" style="background-color:rgba(0, 105, 173, 1)">
                <div class="wrapper-claim" style="background-color: rgba(1,1,1,0)">
                    <div class="claim-text">
                        <h1 style="text-shadow: 0px 2px 2px rgba(255,255,255,0.15); font-size: 30px">
                            <span 
                                style="text-transform: none; color: #312e89; font-weight: 600;letter-spacing: 1px;">
                                Diferéncia 
                                <span style="color: #ec1814; margin-left: -10px">Te</span>
                            </span>
                        </h1>
                        <p>
                            Programa de formación, mejora de la empleabilidad e inserción laboral
                        </p>
                        <a style="background-color: orange !important; color: #444444 !important; font-weight: 600; border-color: orange" class="btn btn-large btn-primary" href="{{ route('diferenciate') }}" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
        <div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cabeceras/rubrica.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Formación del profesorado</h1>
                        <p>
                            Cursos homologados por la Consejería de Educación del Gobierno de Canarias.
                        </p>
                        <a class="btn btn-large btn-primary" href="{{ route ('study-aa-online', [ 'clave'=>'Formación del profesorado' ]) }}" >
                            Infórmese <span>aquí</span>
                        </a>
                        <a class="btn btn-large btn-primary" style="background-color: orange !important; color: #444444 !important; font-weight: 600; border-color: orange" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/profesorado/" target="_blank" >
                            Matriculese <span>ahora</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
	-->

	<!--
	<div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cabeceras/time_to_speak.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Cursos de inglés</h1>
                        <p>
                            ¿Hablamos en inglés? Consulte los niveles disponibles.
                        </p>
                        <a class="btn btn-large btn-primary" target="_blank" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursosdeingles/">
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
	</div>
	-->

	<!--
	<div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cabeceras/destacados/cursos-becados-para-canarias.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Cursos becados</h1>
                        <p>
                            No deje pasar esta oportunidad.
                        </p>
                        <a class="btn btn-large btn-primary" href="http://www.radioecca.net/tele_formacion/catalogo/cursos/cursos_becados/" target="_blank" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
	</div>
	-->

	<!--
	<div class="col-md-3 item-wrapper">
            <div class="item" style="background-image: url( {{ asset('img/cabeceras/manipulacion.jpg') }} )">
                <div class="wrapper-claim">
                    <div class="claim-text">
                        <h1>Cursos con reconocimiento ESSSCAN</h1>
                        <p>
                            Escuela de Servicios Sanitarios y Sociales de Canarias.
                        </p>
                        <a class="btn btn-large btn-primary" href="{{ route ('study-aa-online') }}#essscan" >
                            Infórmese <span>aquí</span>
                        </a>
                    </div>
                </div>
            </div>
	</div>
	-->
 
    <!-- AQUI TERMINA el class="row starred-wrapper" para los "Cursos destacados" -->
    </div>

    <div class="spacer"></div>

</div>

<div class="spacer"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#vueDestacados',
        props: {
        },
        data: { 
            cursos: [],
            codIdioma: null,
            loadingCursos: false
        },
        computed: {
            getCursos: function() {
                return this.cursos
            },
            hasCursos: function() {
                return this.cursos && this.cursos.length > 0
            }
        },
        mounted () {
            this.loadingCursos = true;
            this.codIdioma = this.$el.attributes.codIdioma.value
            var params = { params: { codIdioma: this.codIdioma } }
            axios
            .get(this.$el.attributes.url.value + '/getLastASAulaLibreWebPublica', params)
            .then(
                response => {
                    this.cursos = response.data
                    this.loadingCursos = false;
                })
            
        },
        methods: {
            
            goto_route: function(curso) {
                route = "{{route('study-libres', ['id' => '?id?', 'nombre' => '?nombre?'])}}"
                route = route.replace('?id?', curso.idTitulacion)
                let nombreTitulacion = curso.nombreTitulacion.replace(/\//g,'-')
                route = route.replace('?nombre?', nombreTitulacion)
                location.href = route
            }
        },
    });

           
</script>
@stop

@section('js-code-post')
{!! Minify::javascript('/js/custom.js')->withFullUrl() !!}

<!--<script>
   $(".image-item").click(function (event) {
       event.preventDefault();
       var href = $(this).attr("href");
       $(".image-viewer").removeClass("hide");
       $("#load-image").attr("src", href);
   });
   $(".image-viewer").click(function () {
       $(this).addClass("hide");
   });
</script>-->

@stop