{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Preview Match Question')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['All Questions' => route('teacher.questionbank.show', [$course_id,$question->question_bank_id])]])
@endsection
{{-- Content --}}
@section('content')
@include('components._error')

    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title align-items-start flex-column">
                <span class="card-label fw-bold fs-3 mb-1">Preview Match Question</span>
            </div>
            <!--begin::Card title-->
        </div>
        <!--end::Card header-->
        <div class="separator border-gray-200 pt-2 pb-4"></div>
        <!--begin::Card body-->
        <div class="card-body py-4">
           <h3 class="fs-1x text-gray-800 w-bolder my-4">
                * <em>Match the following :-</em>
            </h3>
            {{--begin question --}}
            <div class="mt-3">
                <!--begin::Heading-->
                <div class="d-flex align-items-center collapsible py-3 toggle active mb-0" data-bs-toggle="collapse" data-bs-target="#kt_job_4_2">
                    @if ($question->matchQuestion->questiontext)
                        <!--begin::Icon-->
                        <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                            <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor" />
                                    <rect x="6.0104" y="10.9247" width="12" height="2" rx="1" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                            <span class="svg-icon toggle-off svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor" />
                                    <rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="currentColor" />
                                    <rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Icon-->
                    @endif
                    <!--begin::Title-->
                    <h4 class="text-gray-700 fw-bold cursor-pointer mb-0">
                        {{$question->matchQuestion->name}}
                        @if ($question->matchQuestion->hint)
                        <span class="ms-6" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{$question->MatchQuestion->hint}}">
                            <i class="far fa-lightbulb text-warning fs-1"></i>
                        </span>
                        @endif
                    </h4>
                    <!--end::Title-->
                </div>

                <!--end::Heading-->
                @if ($question->matchQuestion->questiontext)
                    <!--begin::Body-->
                    <div id="kt_job_4_2" class="collapse fs-6 ms-1 show">
                        <!--begin::Text-->
                        <div class="mb-4 text-gray-600 fw-semibold fs-6 ps-10 ">{!! $question->matchQuestion->questiontext !!}</div>
                        <!--end::Text-->
                    </div>
                @endif

                <!--end::Content-->
            </div>
            {{--end question --}}

            {{-- start:question multimedia --}}
            @if ($question_attachments->count() > 0)
            @foreach ($question_attachments as $question_attachment)
                @if ($question_attachment->type == 'ogg' || $question_attachment->type == 'mp4' || $question_attachment->type == 'mp3')
                    <div class=" px-3 mt-6">
                            <video
                            id="my-video"
                            class="video-js vjs-big-play-centered"
                            controls
                            preload="auto"
                            width="auto"
                            height="auto"
                            poster="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}"
                            data-setup="{}">

                            <source src="{{$question->getDownloadUrl($question_attachment->url)}}" type="{{$question->getMimeType($question_attachment->url)}}" />

                            @elseif ($question_attachment->type == 'png' || $question_attachment->type == 'jpg' || $question_attachment->type == 'jpeg')

                            <img src="{{$question->getDownloadUrl($question_attachment->url)}}" width="100" height="100"/>
                    </div>
                    <div class="separator mb-3 opacity-75"></div>

                    @else
                    <div class=" my-6 py-3">
                        {{-- <span class="ms-3 pt-1 fw-bold">Attachment {{++$count}} </span> --}}
                        <a href="{{$question->getDownloadUrl($question_attachment->url)}}" class="menu-link shadow w-150px px-3 rounded">
                            <i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>
                            <span class="ms-6 pt-1">Download</span>
                        </a>
                    </div>
                    <div class="separator mb-3 opacity-75"></div>
                @endif
            @endforeach
        @endif
        {{-- end:question multimedia --}}

            <div class="row g-6 g-xl-12 mt-10">
                <!--begin::Left-->
                <!--begin::Col-->
                <div class="col-md-6 col-xl-6">
                    <!--begin::Card-->
                    <div class="card border-hover-primary shadow">
                        <!--begin::Card header-->
                        <div class="card-header border-0 pt-9">
                            <!--begin::Card Title-->
                            <div class="card-title m-0">
                                <!--begin::Avatar-->
                                <div class="badge badge-primary">
                                    Left Side
                                </div>
                                <!--end::Avatar-->
                            </div>
                            <!--end::Car Title-->
                        </div>
                        <!--end:: Card header-->
                        <!--begin:: Card body-->
                        <div class="card-body p-9">
                            <!--begin::Info-->
                            <div class="mb-5">

                                @foreach ($left_side as $left_item)
                                    <!--begin::Due-->

                                    <div class="border border-gray-300 border-dashed rounded py-3 px-4 me-7 mb-3">
                                        <div class="fs-6 text-gray-800 fw-bold">
                                            <div><span class="svg-icon svg-icon-1 svg-icon-primary">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                                    <path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="currentColor"></path>
                                                    <path d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white"></path>
                                                </svg>
                                            </span>
                                            {{$left_item->description}}
                                        </div>
                                            @if ($left_item->multimedia_id)
                                               <div> <img src="{{$left_item->multimedia->url}}" alt="{{$left_item->description}}"></div>
                                            @endif
                                        </div>
                                    </div>
                                    <!--end::Due-->
                                @endforeach
                            </div>
                            <!--end::Info-->
                        </div>
                        <!--end:: Card body-->
                    </div>
                    <!--end::Card-->
                </div>
                <!--end::Col-->
                <!--end::Left-->

                <!--begin::Right-->
                <!--begin::Col-->
                <div class="col-md-6 col-xl-6">
                    <!--begin::Card-->
                    <div class="card border-hover-primary shadow">
                        <!--begin::Card header-->
                        <div class="card-header border-0 pt-9">
                            <!--begin::Card Title-->
                            <div class="card-title m-0">
                                <!--begin::Avatar-->
                                <div class="badge badge-primary">
                                    Right Side
                                </div>
                                <!--end::Avatar-->
                            </div>
                            <!--end::Car Title-->
                        </div>
                        <!--end:: Card header-->
                        <!--begin:: Card body-->
                        <div class="card-body p-9">
                            <!--begin::Info-->
                            <div class="mb-5">
                                <!--begin::Due-->
                                @foreach ($right_side as $right_item)
                                    <!--begin::Due-->
                                    <div class="border border-gray-300 border-dashed rounded py-3 px-4 me-7 mb-3">
                                        <div class="fs-6 text-gray-800 fw-bold">
                                            <div>
                                                <span class="svg-icon svg-icon-1 svg-icon-primary">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                                                        <path d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z" fill="currentColor"></path>
                                                        <path d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z" fill="white"></path>
                                                    </svg>
                                                </span>
                                                {{$right_item->description}}
                                            </div>
                                            @if ($right_item->multimedia_id)
                                                <div><img src="{{$right_item->multimedia->url}}" alt="{{$right_item->description}}"></div>
                                            @endif
                                        </div>
                                    </div>
                                    <!--end::Due-->
                                @endforeach
                                <!--end::Due-->
                            </div>
                            <!--end::Info-->
                        </div>
                        <!--end:: Card body-->
                    </div>
                    <!--end::Card-->
                </div>
                <!--end::Col-->
            </div>
        </div>
        <!--end::Card body-->
    </div>
@endsection