@extends('layouts.master')

@section('css')

{!! Html::style('css/datatable/dataTables.bootstrap.css')!!}   
<style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6; /* bg-gray-100 */
            color: #1f2937; /* text-gray-900 */
        }
        /* Dark mode styles */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #111827; /* dark:bg-gray-900 */
                color: #f9fafb; /* dark:text-gray-100 */
            }
        }

        .min-h-screen {
            min-height: 100vh;
        }
        .flex {
            display: flex;
        }
        .flex-col {
            flex-direction: column;
        }
        .items-center {
            align-items: center;
        }
        .justify-center {
            justify-content: center;
        }
        .py-12 {
            padding-top: 3rem; /* 48px */
            padding-bottom: 3rem; /* 48px */
        }
        .px-4 {
            padding-left: 1rem; /* 16px */
            padding-right: 1rem; /* 16px */
        }
        .sm\:px-6 {
            /* On small screens and up */
            @media (min-width: 640px) {
                padding-left: 1.5rem; /* 24px */
                padding-right: 1.5rem; /* 24px */
            }
        }
        .lg\:px-8 {
            /* On large screens and up */
            @media (min-width: 1024px) {
                padding-left: 2rem; /* 32px */
                padding-right: 2rem; /* 32px */
            }
        }

        .main-container {
            max-width: 64rem; /* max-w-4xl */
            width: 100%; /* w-full */
            background-color: #ffffff; /* bg-white */
            padding: 2rem; /* p-8 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
        }
        @media (min-width: 1024px) {
            .main-container {
                max-width: 1280px; /* lg:max-w-screen-xl */
            }
        }
        @media (min-width: 1280px) {
            .main-container {
                max-width: 1536px; /* xl:max-w-screen-2xl */
            }
        }
        @media (prefers-color-scheme: dark) {
            .main-container {
                background-color: #1f2937; /* dark:bg-gray-800 */
            }
        }

        .h1-title {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            text-align: center; /* text-center */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        .button-group {
            display: flex;
            justify-content: flex-start; /* justify-start */
            column-gap: 0.5rem; /* space-x-2 */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        .btn-base {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem; /* px-4 py-2 */
            color: #ffffff; /* text-white */
            font-weight: 600; /* font-semibold */
            border-radius: 0.375rem; /* rounded-md */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            outline: none; /* focus:outline-none */
            transition: background-color 0.15s ease-in-out;
        }
        .btn-base:focus {
            ring-width: 2px; /* focus:ring-2 */
            ring-offset-width: 2px; /* focus:ring-offset-2 */
        }
        @media (prefers-color-scheme: dark) {
            .btn-base:focus {
                ring-offset-color: #1f2937; /* dark:focus:ring-offset-gray-800 */
            }
        }

        .btn-gray {
            background-color: #4b5563; /* bg-gray-600 */
        }
        .btn-gray:hover {
            background-color: #374151; /* hover:bg-gray-700 */
        }
        .btn-gray:focus {
            ring-color: #6b7280; /* focus:ring-gray-500 */
        }

        .btn-blue {
            background-color: #2563eb; /* bg-blue-600 */
        }
        .btn-blue:hover {
            background-color: #1d4ed8; /* hover:bg-blue-700 */
        }
        .btn-blue:focus {
            ring-color: #3b82f6; /* focus:ring-blue-500 */
        }

        .icon-mr-2 {
            height: 1.25rem; /* h-5 */
            width: 1.25rem; /* w-5 */
            margin-right: 0.5rem; /* mr-2 */
        }

        .hr-style {
            margin-top: 1.5rem; /* my-6 */
            margin-bottom: 1.5rem; /* my-6 */
            border-color: #e5e7eb; /* border-gray-200 */
        }
        @media (prefers-color-scheme: dark) {
            .hr-style {
                border-color: #374151; /* dark:border-gray-700 */
            }
        }

        .alert-warning {
            background-color: #fffbeb; /* bg-yellow-100 */
            border-color: #fcd34d; /* border-yellow-400 */
            color: #b45309; /* text-yellow-700 */
            padding: 0.75rem 1rem; /* px-4 py-3 */
            border-radius: 0.25rem; /* rounded */
            position: relative; /* relative */
        }
        @media (prefers-color-scheme: dark) {
            .alert-warning {
                background-color: #78350f; /* dark:bg-yellow-800 */
                border-color: #fbbf24; /* dark:border-yellow-700 */
                color: #fde68a; /* dark:text-yellow-200 */
            }
        }

        .h2-charts {
            font-size: 1.5rem; /* text-2xl */
            font-weight: 600; /* font-semibold */
            text-align: center; /* text-center */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        .grid-cols-1 {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 1.5rem; /* gap-6 */
        }
        @media (min-width: 768px) {
            .md\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .question-card {
            background-color: #f9fafb; /* bg-gray-50 */
            padding: 1.5rem; /* p-6 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
        }
        @media (prefers-color-scheme: dark) {
            .question-card {
                background-color: #374151; /* dark:bg-gray-700 */
            }
        }

        .question-card-title {
            font-size: 1.125rem; /* text-lg */
            font-weight: 500; /* font-medium */
            color: #1f2937; /* text-gray-900 */
            margin-bottom: 1rem; /* mb-4 */
        }
        @media (prefers-color-scheme: dark) {
            .question-card-title {
                color: #f9fafb; /* dark:text-gray-100 */
            }
        }

        .question-type-text {
            font-size: 0.875rem; /* text-sm */
            color: #6b7280; /* text-gray-500 */
            margin-left: 0.5rem; /* ml-2 */
        }
        @media (prefers-color-scheme: dark) {
            .question-type-text {
                color: #d1d5db; /* dark:text-gray-300 */
            }
        }

        .chart-container {
            width: 100%; /* w-full */
            height: 20rem; /* h-80 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chart-canvas {
            max-width: 100%; /* max-w-full */
            max-height: 100%; /* max-h-full */
        }

        .text-note {
            color: #4b5563; /* text-gray-600 */
        }
        @media (prefers-color-scheme: dark) {
            .text-note {
                color: #d1d5db; /* dark:text-gray-300 */
            }
        }

        /* Chart.js specific styles (colors are defined in JS) */
        .chartjs-render-monitor {
            /* This class is added by Chart.js, no direct styling needed here */
        }
    </style>
    <!-- Incluir Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@stop

@section('content')
@if(Session::has('message_success'))
<div class="row">
	<div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
	<div class="alert alert-success success-msg centrado"><strong>{!! Session::get('message_success') !!}</strong></div>
	</div>
</div>
@endif
@if(Session::has('message_error_crear'))
<div class="row">
	<div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
	<div class="alert alert-danger error-msg centrado"><strong>{!! Session::get('message_error_crear') !!}</strong></div>
	</div>
</div>
@endif

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<div class="tab-content">
			@if ($form->submissions->isEmpty())
                <div class="alert-warning" role="alert">
                    <span class="block sm:inline">Aún no hay respuestas a este formulario.</span>
                </div>
            @else
                <h2 class="h2-charts">Gráficos de respuesta</h2>
                <div class="grid-cols-1 md:grid-cols-2">
                    @foreach ($form->questions as $question)
                        {{-- Solo mostrar canvas para preguntas que pueden tener gráfico de pastel --}}
                        @if (in_array($question->question_type, ['radio', 'checkbox', 'select']))
                            <div class="question-card">
                                <h3 class="question-card-title">
                                    {{ $loop->iteration }}. {{ $question->question_text }}
                                     <!--   <span class="question-type-text">({{ ucfirst($question->question_type) }})</span> -->
                                </h3>
                                <div class="chart-container"> {{-- Contenedor para el gráfico --}}
                                    <canvas id="pieChart_{{ $question->id }}" class="chart-canvas"></canvas>
                                </div>
                            </div>
                        @else {{-- Para preguntas de texto libre, mostrar solo la nota --}}
                            <div class="question-card">
                                <h3 class="question-card-title">
                                    {{ $loop->iteration }}. {{ $question->question_text }}
                                    <span class="question-type-text">({{ ucfirst($question->question_type) }})</span>
                                </h3>
                                <p class="text-note">
                                    Este tipo de pregunta (texto libre) no se visualiza bien en gráficos de pastel.
                                    Por favor, use la opción "Ver Respuestas Completas" para ver el texto detallado.
                                </p>
                            </div>
                        @endif
                    @endforeach
                </div>
            @endif
	</div>
</div>
@stop

@section('postscript')

{!! Html::script('js/solonumeros.js') !!}
{!! Html::script('js/solonumerosypunto.js') !!}
<!-- Incluyo Javascript de la libreria Datatable -->

{!! Html::script('js/datatable/jquery.dataTables.js') !!}
{!! Html::script('js/datatable/dataTables.bootstrap.js') !!}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pieChartData = @json($pieChartData);

            console.log('Datos para gráficos:', pieChartData); // Para depuración

            for (const questionId in pieChartData) {
                if (pieChartData.hasOwnProperty(questionId)) {
                    const data = pieChartData[questionId];
                    const ctx = document.getElementById(`pieChart_${questionId}`);

                    if (ctx) {
                        new Chart(ctx, {
                            type: 'pie',
                            data: {
                                labels: data.labels,
                                datasets: [{
                                    label: 'Número de Respuestas',
                                    data: data.counts,
                                    backgroundColor: [
                                        'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)',
                                        'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)',
                                        'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)',
                                        'rgba(199, 199, 199, 0.6)', 'rgba(83, 102, 205, 0.6)',
                                        'rgba(205, 83, 83, 0.6)', 'rgba(83, 205, 102, 0.6)',
                                    ],
                                    borderColor: [
                                        'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)',
                                        'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)',
                                        'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)',
                                        'rgba(199, 199, 199, 1)', 'rgba(83, 102, 205, 1)',
                                        'rgba(205, 83, 83, 1)', 'rgba(83, 205, 102, 1)',
                                    ],
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false, // Permitir que el gráfico no mantenga su relación de aspecto
                                plugins: {
                                    legend: {
                                        position: 'top',
                                        labels: {
                                            color: 'rgb(107, 114, 128)' // Tailwind gray-500
                                        }
                                    },
                                    title: {
                                        display: true,
                                        text: data.question_text,
                                        color: 'rgb(17, 24, 39)' // Tailwind gray-900
                                    }
                                }
                            }
                        });
                    } else {
                        console.warn(`Canvas element with ID pieChart_${questionId} not found.`);
                    }
                }
            }
        });
    </script>
@stop