@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/contenido.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/css/evento.css') }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
@endsection

@section('content')
<main class="page-main">
    <style>
        /* Estilos para los errores de validación */
        .uk-input.error {
            border-color: red;
        }

        .error-message {
            color: red;
            font-size: 0.875rem;
            margin-top: 5px;
        }
    </style>
    <style>
        /* Contenedor de los íconos de compartir */
        .share-buttons {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        /* Estilo común para los íconos de compartir */
        .share-icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 20px;
            color: white;
            margin: 0 10px;
            text-align: center;
            transition: background-color 0.3s ease;
        }

        .uk-button1 {
            padding: 15px 12px 14px 12px;
            border-radius: 0;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 12px;
            display: inline-block;
            width: 70px;
            position: revert-layer;
            line-height: 16px;
            border-radius: 100px;
        }

        /* Estilos individuales por plataforma */
        .share-icon.facebook {
            background-color: #3b5998;
        }

        .share-icon.twitter {
            background-color: #1da1f2;
        }

        .share-icon.email {
            background-color: #d44638;
        }

        .share-icon.whatsapp {
            background-color: #25d366;
        }

        /* Efecto hover para los íconos */
        .share-icon:hover {
            opacity: 0.8;
        }

        /* Contenedor de copiar enlace */
        .copy-link-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
        }

        /* Input de enlace y botón de copiar alineados */
        .copy-link-container input {
            flex-grow: 1;
            margin-right: 10px;
        }

        .copy-link-container button {
            white-space: nowrap;
        }
    </style>
    <style>
        .like i {
            color: #000000;
        }

        .liked i {
            color: #da291c;
        }

        .scrollable-sessions {
            max-height: 250px;
            /* Ajusta la altura máxima según tu diseño */
            overflow-y: scroll;
            /* Forza la barra de desplazamiento vertical */
            padding-right: 2px;
            /* Añade espacio para la barra de desplazamiento */
            -webkit-overflow-scrolling: touch;
            /* Para un desplazamiento suave en dispositivos táctiles */
        }

        .action-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .whatsapp-button {
            background-color: #da291c;
            color: white;
            border-radius: 50px;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            /* Espacio entre el icono y el texto */
        }

        .whatsapp-button i {
            font-size: 30px;
        }

        .whatsapp-button.pedido {
            background-color: #da291c;
        }

        .whatsapp-button.comunidad {
            background-color: #da291c;
        }

        .whatsapp-button:hover {
            opacity: 0.9;
            text-decoration: none;
            color: #fff;
        }
    </style>

    @php
    $acceso =
    $publicacion->tipo_acceso_id == 1 ? 'GRATIS' : ($publicacion->tipo_acceso_id == 2 ? 'LOGEO' : 'PAGO');
    $yapago = \App\Models\Pago::where('user_id', auth()->id())
    ->where('publicacion_id', $publicacion->id)
    ->exists();
    @endphp
    <script>
        var isAuthenticated =