@extends('backend.layouts.app')
@section('head')
    <style>
        /* .container{
            background-color: #555;
            color: #ddd;
            border-radius: 10px;
            padding: 20px;
            font-family: 'Montserrat', sans-serif;
            max-width: 700px;
        }
        .container > p{
            font-size: 32px;
        } */
        .question{
            width: 75%;
        }
        .options{
            position: relative;
            padding-left: 40px;
        }
        #options label{
            display: block;
            margin-bottom: 15px;
            font-size: 14px;
            cursor: pointer;
        }
        .options input{
            opacity: 0;
        }
        .checkmark {
            position: absolute;
            top: -1px;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #fbf9f9;
            border: 1px solid #ddd;
            border-radius: 50%;
        }
        .options input:checked ~ .checkmark:after {
            display: block;
        }
        .options .checkmark:after{
            content: "";
            width: 10px;
            height: 10px;
            display: block;
            background: white;
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            transform: translate(-50%,-50%) scale(0);
            transition: 300ms ease-in-out 0s;
        }
        .options input[type="radio"]:checked ~ .checkmark{
            background: #21bf73;
            transition: 300ms ease-in-out 0s;
        }
        .options input[type="radio"]:checked ~ .checkmark:after{
            transform: translate(-50%,-50%) scale(1);
        }
        .btn-primary{
            background-color: #555;
            color: #ddd;
            border: 1px solid #ddd;
        }
        .btn-primary:hover{
            background-color: #21bf73;
            border: 1px solid #21bf73;
        }
        .btn-success{
            padding: 5px 25px;
            background-color: #21bf73;
        }
        @media(max-width:576px){
            .question{
                width: 100%;
                word-spacing: 2px;
            } 
        }
    </style>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-9">
        <div class="card" id="orderList">
            <div class="card-header border-0">
                <div class="row align-items-center gy-3">
                    <div class="col-sm">
                        <span class="card-title mb-0" style="color: darkgoldenrod; font-size: 32px; font-weight:500">{{$exam->title}}</span>
                    </div>
                    @php
                        $logo = 'placeholder';
                        if(\Auth::user()->user_type == 'school' || \Auth::user()->user_type == 'admin'){
                            $logo = \Auth::user()->school_logo == null ? \Auth::user()->image : $logo;
                        }elseif(\Auth::user()->user_type == 'teacher'){
                            $logo = \Auth::user()->school->school_logo == null ? \Auth::user()->school->image : $logo;
                        }
                    @endphp
                    <div class="col-sm-auto">
                        <div class="d-flex gap-1 flex-wrap">
                            <img src="{{uploaded_asset($logo)}}" alt="" style="height: 80px; width: auto;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border border-dashed border-end-0 border-start-0">
                <div class="row g-3 justify-content-start">
                    <!--end col-->
                    <div class="col-xxl-6 col-sm-6 ">
                        <table class="table table-borderless">
                            <tbody>
                                <tr>
                                    <th scope="row">Grade</th>
                                    <td>{{$exam->grade->name}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">Section</th>
                                    @php
                                        if(json_decode($exam->section_id, true) != null){
                                        $sections = \App\Models\Section::whereIn('id', json_decode($exam->section_id, true))->get();
                                        }
                                    @endphp
                                    @if(json_decode($exam->section_id, true) != null)
                                    <td>@foreach ($sections as $val)
                                        <ul>
                                            <li>{{$val->name}}</li>
                                        </ul>
                                        
                                    @endforeach</td>
                                    @endif
                                </tr>
                                <tr>
                                    <th scope="row">Date and Time</th>
                                    <td>{{date('d M Y, h:i A', strtotime($exam->date_and_time))}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">Duration</th>
                                    @php
                                     $hour = floor($exam->duration / 60);
                                     $min = $exam->duration % 60;
                                    @endphp
                                    <td class="">{{$hour.': '.$min.'0 Hours'}}</td>
                                </tr>
                                </tbody>
                        </table>
                    </div>
                    <div class="col-xxl-6 col-sm-6 ">
                        <table class="table table-borderless">
                            <tbody>
                                <tr>
                                    <th scope="row">Instruction</th>
                                    <td>{{$exam->description}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div> 
            </div>
            <div class="card-body pt-0">
                <div>
                    <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                       
                    </ul>

                    <div class="row mx-auto">
                        <div class="col-sm-9">
                            @if(!empty($questions_category))
                                @foreach ($questions_category as $key => $questions)
                                    @php
                                        $category = \App\Models\QuestionCategory::findOrFail($key);
                                    @endphp
                                    <div class="card">
                                        <div class="card-header align-items-center d-flex">
                                            <h4 class="card-title mb-0 flex-grow-1">{{$category->name}}</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="question ml-sm-5 pl-sm-5 pt-2">
                                                @foreach ($questions as $question)
                                                    <div class="py-2 h6"><b><p>{!!$question->name!!}</p></b> @if ($question->image != null)
                                                        <img src="{{uploaded_asset($question->image)}}" alt="" width="50" height="50" id="image">
                                                    @endif</div>
                                                    <div class="ml-md-3 ml-sm-3 pl-md-5 pt-sm-0 pt-3" id="options">
                                                            <ul>
                                                                <li class="@if($question->right_ans == 'option_one') text-success @endif fs-25 options"> {{$question->option_one}} </li>
                                                                <li class="@if($question->right_ans == 'option_tow') text-success @endif fs-25 options"> {{$question->option_tow}} </li>
                                                                <li class="@if($question->right_ans == 'option_three') text-success @endif fs-25 options"> {{$question->option_three}} </li>
                                                                <li class="@if($question->right_ans == 'option_four') text-success @endif fs-25 options"> {{$question->option_four}} </li>
                                                                
                                                            </ul>
                                                        
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endempty
                        </div>
                        <div class="col-sm-2">
                            <button type="reset" id="publish" onClick="publish(this)" class="btn btn-success w-100"> <i class="lab la-telegram"></i> Publish</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--end col-->
</div>
@endsection
@section('modal')
<div id="img_modal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <img src="" alt="" id="zoom_img">
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        function publish(el){
            var id = '{{$exam->id}}';
            if(id == null || id== '' || id == undefined){
                RNS.plugins.notify('warning', 'Please Select Exam');
            }
            $.post('{{ route('exam.publish') }}', {_token:'{{ csrf_token() }}', id: id}, function(data){
                if(data == 1){
                    RNS.plugins.notify('success', 'Exam Published successfully');
                }else if(data == 2){
                    RNS.plugins.notify('warning', 'Exam status must be active');
                }else if(data == 3){
                    RNS.plugins.notify('info', 'Exam is already published');
                }
                else{
                    RNS.plugins.notify('danger', '{{ ('Something went wrong') }}');
                }
            });
        }
        $('#image').click(function(){
            $('#zoom_img').attr('src', $(this).attr('src'));
            $('#img_modal').modal('show')
        })
    </script>
@endsection