@extends('layouts.master')
@section('content')
    <div class="container-fluid">
        <!-- Page Heading -->
        <div class="d-flex align-items-center justify-content-between mb-4">
            <h1 class="h4 font-weight-bold text-dark text-capitalize mb-0">
                {{$status}} Questions
            </h1>
            <a href="{{route('operator.questionarchitecture')}}" class="btn btn-sm btn-primary shadow-sm">
                <i class="fa fa-plus mr-1"></i> Add Question
            </a>
        </div>

        <!-- Start Boards Row -->
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0 font-weight-bold text-primary text-uppercase">
                    {{ ucfirst($status) }} Questions
                </h6>
                <span class="badge badge-light">
                    {{--Total: {{ $invoice->count() }}--}}
                </span>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered mb-0">
                        <thead class="bg-light">
                        <tr class="text-uppercase small text-muted">
                            <th width="60">#</th>
                            <th>Question</th>
                            <th>Program</th>
                            <th>Board / Class</th>
                            <th>Subject / Chapter</th>
                            <th>Type / Behaviour</th>
                            <th>Medium</th>
                            <th width="120" class="text-center">Action</th>
                        </tr>
                        </thead>

                        <tbody>
                        @forelse($question as $key => $questions)
                            <tr class="align-middle text-capitalize">

                                <!-- S.NO -->
                                <td class="font-weight-bold text-muted">
                                    {{ $key + 1 }}
                                </td>

                                <!-- QUESTION -->
                                <td style="max-width:350px;">
                                    <div class="font-weight-bold text-dark mb-1">
                                        {{ $questions->question ?? 'N/A' }}
                                    </div>
                                    @if($questions->questiontype_id == 1)
                                        <div class="d-flex flex-wrap gap-1">
                                            <span class="badge badge-light border">A) {{ $questions->option_a }}</span>
                                            <span class="badge badge-light border">B) {{ $questions->option_b }}</span>
                                            <span class="badge badge-light border">C) {{ $questions->option_c }}</span>
                                            <span class="badge badge-light border">D) {{ $questions->option_d }}</span>
                                        </div>
                                    @endif
                                </td>

                                <!-- PROGRAM -->
                                <td>
                        <span class="badge badge-primary px-2 py-1">
                            {{ $questions->program->name ?? 'N/A' }}
                        </span>
                                </td>

                                <!-- BOARD / CLASS -->
                                <td>
                                    <div class="font-weight-bold text-dark text-uppercase">
                                        {{ $questions->board->name ?? 'N/A' }}
                                    </div>
                                    <small class="text-muted">
                                        {{ $questions->klass->name ?? 'N/A' }}
                                    </small>
                                </td>

                                <!-- SUBJECT / CHAPTER -->
                                <td>
                                    <div class="font-weight-bold text-success">
                                        {{ $questions->subject->name ?? 'N/A' }}
                                    </div>
                                    <small class="text-muted">
                                        {{ $questions->chapter->name ?? 'N/A' }}
                                    </small>
                                </td>

                                <!-- TYPE / BEHAVIOUR -->
                                <td>
                        <span class="badge badge-info">
                            {{ $questions->questiontype->name ?? 'N/A' }}
                        </span>
                                    <br>
                                    <small class="text-muted">
                                        {{ $questions->questionbehaviour->name ?? 'N/A' }}
                                    </small>
                                </td>

                                <!-- MEDIUM -->
                                <td>
                                    @if($questions->medium == 1)
                                        <span class="badge badge-secondary">English</span>
                                    @else
                                        <span class="badge badge-dark">Urdu</span>
                                    @endif
                                </td>

                                <!-- ACTION -->
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary"
                                                title="Edit"
                                                {{ $status == 'total' ? 'disabled' : '' }}
                                                style="{{ $status == 'total' ? 'cursor:not-allowed; opacity:0.6;' : '' }}">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        {{--<button class="btn btn-outline-danger" title="Delete">--}}
                                            {{--<i class="fa fa-trash"></i>--}}
                                        {{--</button>--}}
                                    </div>
                                </td>

                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5">
                                    <div class="text-muted">
                                        <i class="fa fa-inbox fa-3x mb-3"></i>
                                        <div class="font-weight-bold">No Questions Found</div>
                                        <small>Start by adding new questions</small>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End Boards Row -->
    </div>
@endsection