@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>
        </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>
                            @if($status==='pending')
                            <th width="120" class="text-center">Action</th>
                            @else
                                <th width="120" class="text-center">Entry</th>
                            @endif
                        </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>
                                @if($status==='pending')
                                <!-- ACTION -->
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm">

                                        {{-- Approve Button --}}
                                        <button class="btn btn-outline-success approveQuestion"
                                                data-id="{{ $questions->id }}"
                                                title="Approve Question"
                                                {{ $questions->approved == 1 ? 'disabled' : '' }}
                                                style="{{ $questions->approved == 1 ? 'cursor:not-allowed; opacity:0.6;' : '' }}">
                                            <i class="fa fa-check-circle"></i>
                                        </button>
                                        {{-- Reject Button --}}
                                        <button class="btn btn-outline-danger btn-reject"
                                                data-id="{{ $questions->id }}"
                                                title="Reject Question">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                        {{-- Delete Button --}}
                                        {{--<button class="btn btn-outline-danger btn-delete"--}}
                                                {{--data-id="{{ $questions->id }}"--}}
                                                {{--title="Delete">--}}
                                            {{--<i class="fa fa-trash"></i>--}}
                                        {{--</button>--}}
                                    </div>
                                    <small class="text-muted">
                                        {{$questions->user->name}}
                                    </small>
                                </td>
                                    @else
                                    <td>{{$questions->user->name}}</td>
                                @endif

                            </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>
    <script>
        var approveQuestionUrl = "{{ route('assistant.question.approve') }}";
        var deleteQuestionUrl  = "{{ route('assistant.question.delete', ':id') }}";
        var rejectQuestionUrl  = "{{ route('assistant.question.reject', ':id') }}";
        var csrfToken = "{{ csrf_token() }}";
    </script>
@endsection