@extends('layouts.app')
@section('content')
<div class="contents">
   <div class="crm mb-25">
      <div class="container-fluid">
         <div class="row">
            <div class="col-lg-12 d-flex justify-content-end">
               @include('layouts.navigation')
            </div>
            {{-- <div class="col-lg-12">
               <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                  <h2 class="breadcrumb-title">All Questionnaires</h2>
                  <a href="{{ route('questionnaires.create') }}" class="btn btn-primary btn-squared">
                  Create New Question Set <i class="fa-solid fa-plus ms-2"></i>
                  </a>
               </div>
            </div> --}}
             <div class="col-lg-12 mb-3">
               <ul class="dm-breadcrumb nav d-flex align-items-center">
                  <li class="dm-breadcrumb__item">
                     <a href="http://localhost/icmr-web/public/staff-management">
                        <svg width="44" height="44" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <g filter="url(#filter0_d_6590_53542)">
                              <rect x="56" y="52" width="48" height="48" rx="24" transform="rotate(180 56 52)" fill="white"></rect>
                              <path d="M30.3636 27.9999L38 35.7778L35.8182 38L26 27.9999L35.8182 18L38 20.2222L30.3636 27.9999Z" fill="black"></path>
                           </g>
                           <defs>
                              <filter id="filter0_d_6590_53542" x="0" y="0" width="64" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                 <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
                                 <feOffset dy="4"></feOffset>
                                 <feGaussianBlur stdDeviation="4"></feGaussianBlur>
                                 <feComposite in2="hardAlpha" operator="out"></feComposite>
                                 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix>
                                 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6590_53542"></feBlend>
                                 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6590_53542" result="shape"></feBlend>
                              </filter>
                           </defs>
                        </svg>
                        Assessment Type
                     </a>
                     <span class="breadcrumb__seperator">
                        <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M17.5606 16.0009L10.9609 9.40124L12.8466 7.51562L21.3318 16.0009L12.8466 24.4861L10.9609 22.6005L17.5606 16.0009Z" fill="black"></path>
                        </svg>
                     </span>
                  </li>
                  <li class="dm-breadcrumb__item">
                     <span>Teacher’s Questionaries</span>
                  </li>
               </ul>
            </div>
            <div class="mb-3 d-flex justify-content-between align-items-center">
               <div class="col-lg-6 d-flex align-items-center justify-content-start">
                  <h2 class="breadcrumb-title me-3">Teacher’s Questionaries</h2>
               </div>
               <div class="col-lg-6 d-flex justify-content-end align-items-center">
                  <p class="m-0 me-3 fw-600 showing-color-tablesearch">Showing: 07 Assessment </p>
                  <div class="dm-select w-50 me-3">
                     <select name="select-size-1" id="select-size-1" class="form-control  form-control-lg">
                        <option value="01">All Questionnaire</option>
                        <option value="02">Option 2</option>
                        <option value="03">Option 3</option>
                        <option value="04">Option 4</option>
                        <option value="05">Option 5</option>
                     </select>
                  </div>
               </div>
            </div>
            <div class="col-12">
               <div class="row g-3">
                  @foreach($questionnaires as $q)
   <div class="col-md-6 col-xxl-4 d-flex">
                     <div class="card p-3 shadow-sm w-100">
    <div class="d-flex mb-3">
         <div class="me-3">
            {{-- <img src="{{ url('/') }}/{{ $q->image }}" width="50" height="50" alt="{{ $q->title }}"> --}}
             <img class="svg" src="{{url('/')}}/admin_assets/img/themeicmr/Teacher’s-Questionaries.svg">
         </div>
             <div class="d-flex align-items-end justify-content-between w-100">
            <div class="w-100">
               <h5  class="questionaries-title">{{ $q->title }}</h5>
               <small class="text-muted fw-bold">Total Questions - {{ $q->total_questions ?? 0 }}</small>
               <div>
                  @php
                  $completion = $q->completion_percentage ?? 0;
                  @endphp
                  <div class="progress mt-2" style="height: 10px;">
                     <div class="progress-bar" role="progressbar" style="width: {{ $completion }}%;" aria-valuenow="{{ $completion }}" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <small>{{ $completion }}% Completed</small>
               </div>
               <div class="d-flex justify-content-end">
               @if($completion == 100)
               <span class="badge bg-success">Questionnaire Completed <i class="fa-solid ms-3 fa-arrow-right"></i></span>
               @elseif($completion > 0)
               <a href="{{ route('questionnaires.show', $q->id) }}" class="btn btn-primary ms-3btn-sm">Continue <i class="fa-solid fa-arrow-right ms-3"></i></a>
               @else
               <a href="{{ route('questionnaires.show', $q->id) }}" class="btn btn-primary btn-sm ms-3">Start Questionnaire  <i class="fa-solid fa-arrow-right ms-3"></i></a>
               @endif
            </div>
            </div>
            
         </div>
      </div>
   </div>
</div>
                  @endforeach
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection