@extends($layout ?? 'company.layouts.main')
@section('content')
<style>
  .vwep-response-page {
    padding-bottom: 24px;
  }

  .vwep-response-title {
    color: #29337e;
    font-weight: 700;
  }

  .vwep-response-shell {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  }

  .vwep-response-toolbar {
    align-items: center;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 16px 18px;
  }

  .vwep-task-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .vwep-task-tabs a {
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    color: #29337e;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 11px;
  }

  .vwep-task-card {
    border: 1px solid #e6e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
  }

  .vwep-task-header {
    background: #f8fafc;
    border-bottom: 1px solid #e6e8f0;
    padding: 16px;
  }

  .vwep-task-kicker {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    margin-bottom: 6px;
    text-transform: uppercase;
  }

  .vwep-task-title {
    color: #1d2939;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
  }

  .vwep-task-description {
    color: #667085;
    margin: 8px 0 0;
  }

  .vwep-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .vwep-chip {
    background: #eef4ff;
    border-radius: 999px;
    color: #29337e;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 9px;
  }

  .vwep-chip.is-success {
    background: #e8f7f3;
    color: #007a68;
  }

  .vwep-chip.is-danger {
    background: #fdecec;
    color: #b42318;
  }

  .vwep-answer-list {
    padding: 16px;
  }

  .vwep-answer-item {
    border-bottom: 1px solid #edf0f5;
    padding: 14px 0;
  }

  .vwep-answer-item:first-child {
    padding-top: 0;
  }

  .vwep-answer-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .vwep-question-text {
    color: #344054;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .vwep-answer-box {
    background: #fcfcfd;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    color: #475467;
    padding: 12px;
  }

  .vwep-empty-answer {
    color: #98a2b3;
    font-weight: 600;
  }

  @media (max-width: 767px) {
    .vwep-response-toolbar,
    .vwep-task-tabs {
      align-items: stretch;
      flex-direction: column;
    }
  }
</style>
<main>
   <div class="content-wrapper vwep-response-page">
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
        <a class="btn btn-outline-info mr-2" href="{{ $backUrl ?? route('listTaskResponses.list',$id) }}">Back</a>

          <div class="col-sm-6">
            <h1 class="m-0 vwep-response-title">Show Virtual Task response</h1>
          </div>
         
        </div>
      </div>
    </div>
  
    <div class="container-fluid">
      <div class="card vwep-response-shell">
        <div class="vwep-response-toolbar">
          <h4 class="m-0">Question Answers</h4>
          <div class="vwep-task-tabs">
            @foreach($task_responses as $task_key => $task_response)
              <a href="#task-response-{{ $task_response->id }}">Task {{ $task_key + 1 }}</a>
            @endforeach
          </div>
        </div>

        <div class="card-body">
          @forelse($task_responses as $task_key=> $task_response)
            @php
              $task = $task_response->virtualExpTask;
              $statusLabel = (int) $task_response->status === 2 ? 'Rejected' : 'Submitted';
              $statusClass = (int) $task_response->status === 2 ? 'is-danger' : 'is-success';
            @endphp

            <section class="vwep-task-card" id="task-response-{{ $task_response->id }}">
              <div class="vwep-task-header">
                <div class="vwep-task-kicker">Task {{ $task_key + 1 }}</div>
                <h4 class="vwep-task-title">{{ $task->title ?? 'Task details unavailable' }}</h4>
                @if(!empty($task->description))
                  <p class="vwep-task-description">{!! $task->description !!}</p>
                @endif
                <div class="vwep-task-meta">
                  <span class="vwep-chip {{ $statusClass }}">{{ $statusLabel }}</span>
                  @if($task_response->updated_at)
                    <span class="vwep-chip">Submitted {{ \Carbon\Carbon::parse($task_response->updated_at)->format('d/m/Y h:i A') }}</span>
                  @endif
                  @if(optional($task)->difficulty_level)
                    <span class="vwep-chip">{{ $task->difficulty_level->difficulty_level }}</span>
                  @endif
                  @if(!empty($task->duration))
                    <span class="vwep-chip">{{ $task->duration }}</span>
                  @endif
                </div>
              </div>

              <div class="vwep-answer-list">
                @forelse($task_response->wepTaskAnswers as $key=> $wepTaskAnswer)
                  <div class="vwep-answer-item">
                    <div class="vwep-question-text">
                      {{ $key + 1 }}. {{ optional($wepTaskAnswer->taskQuestion)->question_text ?? 'Question details unavailable' }}
                    </div>
                    <div class="vwep-answer-box">
                      @if($wepTaskAnswer->selected_option)
                        <div><strong>Selected:</strong> {{ $wepTaskAnswer->selected_option }}</div>
                      @endif
                      @if($wepTaskAnswer->paragraph_response)
                        <div><strong>Answer:</strong> {!! nl2br(e($wepTaskAnswer->paragraph_response)) !!}</div>
                      @endif
                      @if(!$wepTaskAnswer->selected_option && !$wepTaskAnswer->paragraph_response && !$wepTaskAnswer->uploaded_file)
                        <span class="vwep-empty-answer">No answer submitted</span>
                      @endif
                      @if($wepTaskAnswer->uploaded_file)
                        <div class="mt-2">
                          <a href="{{ $wepTaskAnswer->uploaded_file }}" class="btn btn-tableviewbtn btn-sm" target="_blank">Download uploaded file</a>
                        </div>
                      @endif
                    </div>
                  </div>
                @empty
                  <div class="vwep-empty-answer">No answers found for this task.</div>
                @endforelse
              </div>
            </section>
          @empty
            <div class="vwep-empty-answer">No task responses found.</div>
          @endforelse
        </div>
      </div>
    </div>
  </div>
</main>
@endsection