@extends('layouts.admin')

@section('title', 'Survey Details - ' . $journey->title)

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Survey Details - {{ $journey->title }}</h4>
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.journey.survey-analytics') }}">Survey Analytics</a></li>
                            <li class="breadcrumb-item active">Survey Details</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <!-- Journey Info -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5 class="card-title">{{ $journey->title }}</h5>
                                <p class="text-muted mb-2"><i class="ri-map-pin-line me-1"></i> {{ $journey->destination }}</p>
                                <p class="text-muted mb-2"><i class="ri-user-line me-1"></i> Created by: {{ $journey->user->name }}</p>
                                <p class="text-muted mb-0"><i class="ri-calendar-line me-1"></i> {{ $journey->start_date ? $journey->start_date->format('d M, Y') : 'N/A' }} - {{ $journey->end_date ? $journey->end_date->format('d M, Y') : 'N/A' }}</p>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('admin.journey.show', $journey->id) }}" class="btn btn-outline-primary btn-sm">
                                        <i class="ri-eye-line me-1"></i> View Journey
                                    </a>
                                    <a href="{{ route('admin.journey.survey-analytics') }}" class="btn btn-outline-secondary btn-sm">
                                        <i class="ri-arrow-left-line me-1"></i> Back to Analytics
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Survey Statistics -->
        <div class="row">
            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Questions</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $journey->survey_questions->count() }}</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-primary-subtle rounded fs-3">
                                    <i class="ri-question-line text-primary"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Participants</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $journey->participants->count() }}</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-success-subtle rounded fs-3">
                                    <i class="ri-group-line text-success"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Responses Received</p>
                                <div class="d-flex align-items-center">
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $responsesByUser->count() }}</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-info-subtle rounded fs-3">
                                    <i class="ri-message-2-line text-info"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Response Rate</p>
                                <div class="d-flex align-items-center">
                                    @php
                                        $responseRate = $journey->participants->count() > 0 ? 
                                            round(($responsesByUser->count() / $journey->participants->count()) * 100, 1) : 0;
                                    @endphp
                                    <h4 class="fw-semibold flex-shrink-0 mb-0">{{ $responseRate }}%</h4>
                                </div>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-warning-subtle rounded fs-3">
                                    <i class="ri-trending-up-line text-warning"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Survey Questions and Responses -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Survey Questions & Response Analysis</h4>
                    </div>
                    <div class="card-body">
                        @foreach($journey->survey_questions as $question)
                            @php
                                $questionResponses = $responsesByQuestion->get($question->id, collect());
                                $responseCount = $questionResponses->count();
                            @endphp
                            <div class="border rounded p-3 mb-4">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <h6 class="mb-1">Question {{ $loop->iteration }}</h6>
                                        <p class="text-muted mb-2">{{ $question->question }}</p>
                                        <small class="text-muted">
                                            <i class="ri-user-line me-1"></i> {{ $responseCount }} responses
                                            @if($question->is_required)
                                                <span class="badge badge-soft-danger ms-2">Required</span>
                                            @endif
                                        </small>
                                    </div>
                                    <div class="text-end">
                                        @php
                                            $questionResponseRate = $journey->participants->count() > 0 ? 
                                                round(($responseCount / $journey->participants->count()) * 100, 1) : 0;
                                        @endphp
                                        <span class="badge badge-soft-primary">{{ $questionResponseRate }}% response rate</span>
                                    </div>
                                </div>

                                @if($responseCount > 0)
                                    <div class="table-responsive">
                                        <table class="table table-sm table-borderless">
                                            <thead>
                                                <tr class="bg-light">
                                                    <th>Participant</th>
                                                    <th>Response</th>
                                                    <th>Submitted At</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($questionResponses as $response)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <div class="flex-grow-1">
                                                                    <h6 class="fs-13 mb-0">{{ $response->user->name }}</h6>
                                                                    <p class="text-muted mb-0 fs-12">{{ $response->user->email }}</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="text-wrap">{{ Str::limit($response->response, 100) }}</span>
                                                        </td>
                                                        <td>
                                                            <small class="text-muted">{{ $response->submitted_at ? $response->submitted_at->format('d M, Y H:i') : 'N/A' }}</small>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="text-center py-3">
                                        <i class="ri-inbox-line fs-1 text-muted"></i>
                                        <p class="text-muted mb-0">No responses received for this question</p>
                                    </div>
                                @endif
                            </div>
                        @endforeach

                        @if($journey->survey_questions->count() == 0)
                            <div class="text-center py-4">
                                <i class="ri-question-line fs-1 text-muted"></i>
                                <h5 class="text-muted">No survey questions found</h5>
                                <p class="text-muted">This journey doesn't have any survey questions set up.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Participants Response Summary -->
        @if($responsesByUser->count() > 0)
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title mb-0">Participant Response Summary</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-nowrap">
                                <thead>
                                    <tr>
                                        <th>Participant</th>
                                        <th>Email</th>
                                        <th>Questions Answered</th>
                                        <th>Completion Rate</th>
                                        <th>Last Response</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($responsesByUser as $userId => $userResponses)
                                        @php
                                            $user = $userResponses->first()->user;
                                            $answeredQuestions = $userResponses->count();
                                            $totalQuestions = $journey->survey_questions->count();
                                            $completionRate = $totalQuestions > 0 ? round(($answeredQuestions / $totalQuestions) * 100, 1) : 0;
                                            $lastResponse = $userResponses->sortByDesc('submitted_at')->first();
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1">
                                                        <h6 class="fs-14 mb-1">{{ $user->name }}</h6>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ $user->email }}</td>
                                            <td>
                                                <span >{{ $answeredQuestions }}/{{ $totalQuestions }}</span>
                                            </td>
                                            <td>
                                                @if($completionRate == 100)
                                                    <span>{{ $completionRate }}%</span>
                                                @elseif($completionRate >= 50)
                                                    <span>{{ $completionRate }}%</span>
                                                @else
                                                    <span>{{ $completionRate }}%</span>
                                                @endif
                                            </td>
                                            <td>
                                                <small class="text-muted">{{ $lastResponse->submitted_at ? $lastResponse->submitted_at->format('d M, Y H:i') : 'N/A' }}</small>
                                            </td>
                                            <td>
                                                <button class="btn btn-soft-primary btn-sm" onclick="viewUserResponses({{ $userId }})">
                                                    <i class="ri-eye-line me-1"></i> View Responses
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- User Responses Modal -->
<div class="modal fade" id="userResponsesModal" tabindex="-1" aria-labelledby="userResponsesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userResponsesModalLabel">User Survey Responses</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="userResponsesContent">
                    <!-- User responses will be loaded here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
function viewUserResponses(userId) {
    const userResponses = @json($responsesByUser);
    const user = userResponses[userId][0].user;
    const responses = userResponses[userId];
    
    let content = `<h6>Responses by ${user.name}</h6><hr>`;
    
    responses.forEach((response, index) => {
        content += `
            <div class="mb-3">
                <strong>Q${index + 1}:</strong> ${response.question.question}
                <div class="mt-1 p-2 bg-light rounded">
                    ${response.response}
                </div>
                <small class="text-muted">Submitted: ${response.submitted_at ? new Date(response.submitted_at).toLocaleString() : 'N/A'}</small>
            </div>
        `;
    });
    
    document.getElementById('userResponsesContent').innerHTML = content;
    new bootstrap.Modal(document.getElementById('userResponsesModal')).show();
}
</script>
@endsection