@extends('layouts.app')

@section('content')


<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      @include('users.includes.sidebar')
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        @include('users.includes.header')

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
            <!-- Content -->
            {{-- @dd($contents) --}}
            <div class="container-xxl flex-grow-1 container-p-y">
                <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Home /</span> Quiz</h4>

                <div class="row mb-5 card">
                    <div class="col-12 col-md-12 mb-2 mb-md-0">
                        <div class="card-body">
                            <h5 class="card-title">Quiz Question <small class="text-muted" style="font-size: 70%;">Posted {{$quiz->created_at->diffForHumans()}}</small></h5>
                            <div class="d-grid d-sm-flex p-2 border">
                                @php
                                    $img = 'users/img/quiz.jpeg';
                                    if($quiz->image != ''){
                                        $img = 'cover_img/'.$quiz->image;
                                    }
                                @endphp
                                <img
                                src="{{asset($img)}}"
                                alt="collapse-image"
                                height="200"
                                class="me-4 mb-sm-0 mb-2"
                                />
                                <span>
                                    <h5 class="card-title">{{$quiz->title}} </h5>
                                    {{$quiz->question}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                @if (isset($quiza))
                    <div class="row mb-5 card">
                        <div class="col-12 col-md-12 mb-2 mb-md-0">
                            <div class="card-body">
                                <h5 class="card-title">Your Posted Answer <small class="text-muted" style="font-size: 70%;">Posted {{ \Carbon\Carbon::parse($quiza->date_submitted)->diffForHumans() }}</small></h5>
                                <div class="d-grid d-sm-flex p-2 border">
                                    @php
                                        $img = 'users/img/quiz.jpeg';
                                        if($quiza->upload != ''){
                                            $img = 'answers/'.$quiz->image;
                                        }
                                    @endphp
                                    <img
                                    src="{{asset($img)}}"
                                    alt="collapse-image"
                                    height="200"
                                    class="me-4 mb-sm-0 mb-2"
                                    />
                                    <span>
                                        <h5 class="card-title">{{$quiza->answer}}</h5>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-5 card">
                        <div class="col-12 col-md-12 mb-2 mb-md-0">
                            <div class="card-body">
                                <h5 class="card-title">Result / Admin's Response <small class="text-muted" style="font-size: 70%;">Posted {{ \Carbon\Carbon::parse($quiza->date_submitted)->diffForHumans() }}</small></h5>
                                <div class="d-grid d-sm-flex p-2 border">
                                    @php
                                        $img = 'users/img/quiz.jpeg';
                                        if($quiza->upload != ''){
                                            $img = 'answers/'.$quiz->image;
                                        }
                                    @endphp
                                    <img
                                    src="{{asset($img)}}"
                                    alt="collapse-image"
                                    height="200"
                                    class="me-4 mb-sm-0 mb-2"
                                    />
                                    <span>
                                        <h5 class="card-title">{{$quiza->answer}}</h5>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="row mb-5 card">
                    <div class="col-12 col-md-12 mb-2 mb-md-0">
                        <div class="card-body">
                            <h5 class="card-title">Post your answer</h5>
                            <form method="post" action="{{url('user/answerpost')}}" enctype="multipart/form-data" accept-charset="utf-8">
                                @csrf
                                <div class="for-group">
                                    <label for="answer">Answer</label>
                                    <input type="hidden" name="quiz_id" value="{{$quiz->id}}">
                                    <textarea rows="20" name="answer" id="answer" class="form-control" required></textarea>
                                </div><br/><br/>
                                <div class="for-group">
                                    <label for="image">Upload Related Image</label>
                                    <input type="file" name="upload" id="image" class="form-control">
                                </div><br/><br/>
                                <button type="submit" class="btn btn-success">Post Answer</button>
                            </form>
                        </div>
                    </div>
                </div>
             
              <!--/ Card layout -->
            </div>
            <!-- / Content -->

            <!-- Footer -->
            @include('users.includes.footer')
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>
@endsection