@extends('layouts.app')
@section('title', 'Actividades Extra')
@section('content')
    @if ($activeActivity)
        @if ($usrMadeActivity)
            <div
                class="bg-custom-back-answers-results bg-cover bg-center h-custom flex flex-col justify-center items-center">
                <div class="flex flex-col md:flex-row justify-around md:space-x-4">
                    <button class="btn-orange-custom text-2xl toggleTab" data-toggle="tab-one" type="button">
                        Actividad
                    </button>
                    <button class="btn-orange-custom text-2xl toggleTab" data-toggle="tab-two" type="button">
                        Prepárate
                    </button>
                </div>
                <div class="panelTab flex flex-col space-y-4 items-center  p-4 relative" id="tab-one">
                    <img src="img-2025/assets/activities/END-ACTIVITY.png" alt="" class="w-2/3">
                    <div class="absolute flex flex-col w-1/2 h-full justify-end items-end text-white">
                        <div class="h-2/4 text-center">
                            <p class="font-dunkin-sans-display mt-1 pl-14  text-2xl">Respuesta enviada
                                correctamente</p>
                        </div>
                        <div class="h-3/4 font-dunkin-sans-book pt-3 ">
                            <p class="font-dunkin-sans-display text-2xl">Prueba Extra</p>
                            <p>Esta es la prueba de la sección extra</p>
                            <p>Ya has participado de esta Actividad</p>
                        </div>
                    </div>
                </div>
                <div class="panelTab hidden flex flex-col space-y-4 items-center p-4" id="tab-two">
                    <img src="{{ asset(config('constants.logo_image_path')) }}" width="150" class="img-responsive">
                    <p>
                        Tus conocimientos serán claves para alcanzar los primeros puestos de la
                        competencia.
                    </p>
                    <p>Descarga el material de estudio</p>
                    <a href="{{ asset('storage/' . $activity->study_information) }}" target="_blank">
                        <button class="btn-purple-custom">Descargar</button>
                    </a>
                </div>
            </div>
        @else
            <div
                class="bg-custom-back-activity bg-cover  bg-center h-custom text-white flex flex-col md:flex-row  md:justify-end">
                <div class="font-dunkin-sans-book w-full sm:w-1/2 p-4 overflow-y-scroll md:pr-20 md:pt-10">
                    @if (session('status'))
                        <div class="alert alert-success my-6">
                            {{ session('status') }}
                        </div>
                    @endif
                    <p class="font-dunkin-sans-medium text-center my-4 text-2xl">
                        y gana más demostrando tu talento
                    </p>
                    <div class="flex flex-col md:flex-row justify-around">
                        <button class="btn-orange-custom text-2xl toggleTab" data-toggle="tab-one" type="button">
                            Actividad
                        </button>
                        <button class="btn-orange-custom text-2xl toggleTab" data-toggle="tab-two" type="button">
                            Prepárate
                        </button>
                    </div>
                    <div class="panelTab  justify-items-center" id="tab-one">
                        <p class="font-dunkin-sans-medium text-2xl">{{ $activity->name }}</p>
                        <div class="font-dunkin-sans-medium">
                            {!! nl2br($activity->description) !!}
                        </div>
                        <p class="font-dunkin-sans-medium text-center">
                            <span>¿ESTÁS LISTO?</span> <br>
                            SI AÚN NO LO ESTAS PREPARATE PARA PODER GANAR
                        </p>
                        <form class="flex flex-col space-y-4 w-full  items-center" action="{{ url('activities-response') }}"
                            method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="activity_id" value="{{ $activity->id }}">
                            <textarea name="text" rows="5" placeholder="Agregar texto respuesta *"
                                class="text-black p-4 w-full {{ $activity->type_evidence == 'Archivo' ? 'hidden' : '' }}"
                                {{ $activity->type_evidence == 'Texto' || $activity->type_evidence == 'Ambos' ? 'required' : '' }}></textarea>
                            <div
                                class="bg-white p-2 w-full text-black   {{ $activity->type_evidence == 'Texto' ? 'hidden' : '' }}">
                                <input type="file" name="file"
                                    {{ $activity->type_evidence == 'Archivo' ? 'required' : '' }}>
                            </div>
                            <button type="submit" class="btn-purple-custom w-1/2">Enviar</button>
                        </form>
                    </div>
                    <div class="panelTab hidden flex flex-col space-y-4 items-center p-4" id="tab-two">
                        <img src="{{ asset(config('constants.logo_image_path')) }}" width="150" class="img-responsive">
                        <p>
                            Tus conocimientos serán claves para alcanzar los primeros puestos de la
                            competencia.
                        </p>
                        <p>Descarga el material de estudio</p>
                        <a href="{{ asset('storage/' . $activity->study_information) }}" target="_blank">
                            <button class="btn-purple-custom">Descargar</button>
                        </a>
                    </div>
                </div>
            </div>
        @endif
    @else
        <div
            class="bg-custom-back-activity-404-responsive sm:bg-custom-back-activity-404 bg-cover  bg-center h-custom text-white flex flex-col md:flex-row  md:justify-end">
        </div>
    @endif

@endsection