@extends('layouts.app')

@section('title', 'Contenidos')

@section('content')
<style>
    @media (min-width: 576px) {
        .imagen {
            width: 25vw !important;
        }
        .saveImageIcon {
            right: 2vw !important;
            bottom: 3.25vh !important;
            font-size: 1.75vw !important;
        }

        .copyContentIcon {
            font-size: 1.5vw !important;
            bottom: 6vh !important;
        }
    }

    .saveImageIcon {
        width: 2rem;
        height: 2rem;
        text-align: center;
        background-color: white;
        border-radius: 25rem;
        cursor: pointer;
        position: relative; 
        right: 1vw; 
        bottom: 5.5vh; 
        color: black; 
    }

    .copyContentIcon {
        cursor: pointer;
        position: absolute; 
        right: 4vw; 
        bottom: 9.5vh;
        color: blue; 
    }

</style>
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Contenidos</h1>
        <form action="{{ route('tableros.clearSession', ['identifier' => 'CALENDARIO']) }}" method="GET">
            @csrf
            <button type="submit" class="btn btn-secondary">Volver</button>
        </form>
    </div>
    <div class="mb-4">
        <div class="d-flex justify-content-center" style="gap: 1rem;">
            @if($cuentaRechazadas > 0)
                <form action="{{ route('contenidos.index') }}" method="GET">
                    <input type="hidden" name="estado" value="rechazadas">
                    <button class="btn w-100" style="background-color:rgb(253, 20, 20); color: white;">Rechazado</button>
                </form>
            @endif
            @if($cuentaRechazadas > 0 || $cuentaAceptadas > 0)
                <form action="{{ route('contenidos.index') }}" method="GET">
                    <input type="hidden" name="estado" value="pendientes">
                    <button class="btn w-100" style="background-color: #fd7e14; color: white;">Pendiente</button>
                </form>
            @endif
            @if($cuentaAceptadas > 0)
                <form action="{{ route('contenidos.index') }}" method="GET">
                    <input type="hidden" name="estado" value="aceptadas">
                    <button class="btn w-100" style="background-color: rgb(25, 135, 84); color: white;">Aceptado</button>
                </form>
            @endif
        </div>
    </div>
    <div class="row">
        @forelse ($contenidos as $contenido)
            <div class="col-12 mb-3">
                <div class="card">
                    <div class="card-body">
                        <div>
                            @if ($contenido->path)
                                <img src="https://s3.eu-south-2.amazonaws.com/autoritas.kanboard/{{ $contenido->path }}" class="card-img-top imagen" alt="Imagen" style="max-height: 50rem !important;"> 
                                <a class="d-flex justify-content-end" href="https://s3.eu-south-2.amazonaws.com/autoritas.kanboard/{{ $contenido->path }}" download="{{ basename($contenido->title) }}.jpg"><i class="bi bi-box-arrow-in-down fs-4 saveImageIcon"></i></a>
                            @endif 
                        </div>                       

                        @php
                            // Definición de los iconos de las redes sociales, con su clave y el icono correspondiente
                            // Se usa la clave en mayúscula para hacer la comparación
                            $redes = ['TW' => 'twitter-x', 'TWITTER' => 'twitter-x', 'FB' => 'facebook', 'FACEBOOK' => 'facebook', 'IG' => 'instagram', 'INSTAGRAM' => 'instagram', 'YT' => 'youtube', 'YOUTUBE' => 'youtube', 'WA' => 'whatsapp', 'WHATSAPP' => 'whatsapp', 'TIKTOK' => 'tiktok', 'LINKEDIN' => 'linkedin', 'PINTEREST' => 'pinterest', 'NEWSLETTER' => 'envelope', 'BLOG' => 'newspaper', 'IN' => 'file-play-fill', 'threads' => 'threads', 'GOOGLE' => 'google'];

                            // Detecta por clave parcial la red social y pone el logo correspondiente
                            // Si no encuentra nada, no pone nada
                            $claveDetectada = collect($redes)->filter(function($icono, $clave) use ($contenido) {
                                return str_contains(strtoupper($contenido->category), $clave);
                            })->first();

                            $icono = $claveDetectada ? 'bi-' . $claveDetectada : 'bi-pin-angle-fill';

                            $dt = new DateTime();
                            $dt->setTimestamp($contenido->date_due);
                            $duedate = $dt->format('d/m/Y H:i');

                            $inputDate = date('Y-m-d\TH:i', $contenido->date_due);
                        @endphp
                        <div class="d-flex justify-content-between align-items-baseline">
                            <h6 class="card-title">                        
                                @if($icono)
                                    <i class="bi {{ $icono }}"></i>
                                @endif
                                {{ ucfirst($contenido->title) }}
                            </h6> 
                            <small class="text-muted" style="font-size: 0.8rem;" onclick="showEditDate({{ $contenido->id }})">{{ $duedate }}</small>
                        </div>
                        <p class="card-text">{{ $contenido->description }} <i data-content="{{ $contenido->description }}" class="bi bi-copy fs-4 copyContentIcon"></i></p>
                        <br>
                        <div class="d-flex justify-content-center" style="gap: 1rem;">
                            @if ($contenido->column_id == $idcolumnapproved || $contenido->column_id == $idcolumnpendent)
                                <button type="button" class="btn" style="background-color:rgb(253, 20, 20); color: white;" data-toggle="modal" data-target="#rechazoModal{{ $contenido->id }}">
                                    Rechazar
                                </button>
                            @endif
                            @if ($contenido->column_id == $idcolumnapproved || $contenido->column_id == $idcolumnrejected)
                                <form action="{{ route('tareas.changeColumn') }}" method="POST" style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="idTask" value="{{ $contenido->id }}">
                                    <input type="hidden" name="idColumn" value="{{ $idcolumnpendent }}">
                                    <button type="submit" class="btn" style="background-color: #fd7e14; color: white;">
                                        Pendientes
                                    </button>
                                </form>
                            @endif
                            @if ($contenido->column_id == $idcolumnpendent || $contenido->column_id == $idcolumnrejected)
                                <form action="{{ route('tareas.changeColumn') }}" method="POST" style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="idTask" value="{{ $contenido->id }}">
                                    <input type="hidden" name="idColumn" value="{{ $idcolumnapproved }}">
                                    <button type="submit" class="btn" style="background-color: rgb(25, 135, 84); color: white;">
                                        Aceptar
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal de rechazo -->
            <div class="modal fade" id="rechazoModal{{ $contenido->id }}" tabindex="-1" role="dialog" aria-labelledby="rechazoModalLabel{{ $contenido->id }}" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form action="{{ route('tareas.rejectColumn') }}" method="POST">
                            @csrf
                            <input type="hidden" name="idTask" value="{{ $contenido->id }}">
                            <input type="hidden" name="idColumn" value="{{ $idcolumnrejected }}">

                            <div class="modal-header justify-content-between">
                                <h5 class="modal-title" id="rechazoModalLabel{{ $contenido->id }}">Confirmar rechazo</h5>
                                <span class="cerrar-modal" data-dismiss="modal" aria-label="Close" aria-hidden="true" style="cursor: pointer;">
                                    <i class="bi bi-x-lg cerrar-modal"></i>
                                </span>
                            </div>

                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="comment">Explicación del rechazo</label>
                                    <textarea name="comment" id="comment" class="form-control" rows="3" required></textarea>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-success">Confirmar Rechazo</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal de editar fecha -->
            <div class="modal fade" id="editDate{{ $contenido->id }}" tabindex="-1" role="dialog" aria-labelledby="editDateLabel{{ $contenido->id }}" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form action="{{ route('contenidos.changeDate') }}" method="POST">
                            @csrf
                            <input type="hidden" name="idTask" value="{{ $contenido->id }}">

                            <div class="modal-header justify-content-between">
                                <h5 class="modal-title" id="rechazoModalLabel{{ $contenido->id }}">Cambiar fecha</h5>
                                <span class="cerrar-modal" data-dismiss="modal" aria-label="Close" aria-hidden="true" style="cursor: pointer;">
                                    <i class="bi bi-x-lg cerrar-modal"></i>
                                </span>
                            </div>

                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="fecha">Fecha</label>
                                    <input type="datetime-local" name="fecha" id="fecha" class="form-control" value="{{ $inputDate }}">
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-success">Cambiar fecha</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        @empty
            <div class="col-12">
                <div class="alert alert-info text-center">
                    No hay contenidos disponibles.
                </div>
            </div>
        @endforelse
    </div>
</div> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function showEditDate(contentId) {
        let modal = new bootstrap.Modal(document.getElementById('editDate' + contentId));
        modal.show();
    }

    // Añadir evento de copiar contenido
    const copyIcons = document.querySelectorAll('.copyContentIcon');
    if (copyIcons) {
        copyIcons.forEach(copyIcon => {
            copyIcon.addEventListener('click', function () {
                const content = this.getAttribute('data-content');
                if (!content) return;

                navigator.clipboard.writeText(content).then(() => {
                    this.classList.remove('bi-copy');
                    this.classList.add('text-success', 'bi-check2-square');
                    this.setAttribute('title', '¡Enlace copiado!');
                    setTimeout(() => {
                        this.classList.remove('text-success', 'bi-check2-square');
                        this.classList.add('bi-copy');
                        this.setAttribute('title', 'Copiar enlace de la publicación');
                    }, 1500);
                }).catch(() => {
                    alert('No se pudo copiar el enlace.');
                });
            });
        });
    }

</script>

@endsection