@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Exam Details</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }
    .header{
        white-space: nowrap;
        padding-left: 40px;
    }
    .headerPlaceholder{
        width:170px;
        margin: 0 10px;
        height:25px;
        font-size:18px;
    }
    .categoryTitle{
        font-size: 18px;
    }
    .question{
        font-size: 15px;
    }
    
    .choice{
        text-decoration: underline;
    }
</style>

@section('subcontent')
<div class="flex  mt-8">
    <a onclick="PrintElem('#examSheet')" class="btn btn-primary" title="Assign Questions"">
        <i data-lucide="printer" class="w-4 h-4 mr-1"></i> Add Questions
    </a>
</div>
<div class="grid grid-cols-12 gap-6">
    <!-- BEGIN: Profile Menu -->

    <!-- END: Profile Menu -->
    <div class="col-span-12 lg:col-span-8 2xl:col-span-9">
        <!-- BEGIN: Display Information -->
        <div class="intro-y box lg:mt-5" id="examSheet">
            <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <div style="width:100%; height:auto; ">
                    <table style=" " >
                        <tr colspan="3">
                            <td>Name:  </td>
                            <td  >
                                <input type="text" name="Paying Date" disabled class="headerPlaceholder" style="border:0px red solid; border-bottom: 1px black dashed; ">
                            </td>
                            <td class="header">Father Name:</td>
                            <td>
                                <input type="text" name="Paying Date" disabled class="headerPlaceholder"
                                style="border:0px red solid; border-bottom: 1px black dashed;">
                            </td>
                            <td class="header">Course:</td>
                            <td>
                                <input type="text" name="Paying Date" disabled value="{{$data['course']->title}}" class="headerPlaceholder"
                                style="border:0px red solid; border-bottom: 1px black dashed; ">
                            </td>
                            
                        </tr>
                        <tr colspan="3">
                            <td style=" ">Date: </td>
                            <td><input type="text" name="Paying Date" disabled class="headerPlaceholder"
                                style="border:0px red solid; border-bottom: 1px black dashed; ">
                            </td>

                            <td class="header">Group:</td>
                            <td>
                                <input type="text" name="Paying Date" value="{{$questions->first()->exam_group}}" disabled class="headerPlaceholder" 
                                style="border:0px red solid; border-bottom: 1px black dashed;">
                            </td>
                        </tr>
                    </table>
                    <hr class="mt-2">
                </div>
            </div>
            <div class="p-5 ml-4">
                <div class="flex flex-col-reverse xl:flex-row flex-col">
                    <div class="flex-1 mt-6 xl:mt-0">
                        <div class="">
                            @php $c = 0;@endphp
                            <div class="category mt-8">
                               <h1 class="categoryTitle"><strong>Open Questions</strong></h1>
                                @foreach ($questions as $row)
                                    @if($row->question->type == "Open")
                                        <p class="question ml-2 mt-4">{{++$c}}: {{$row->question->question}}</p>
                                    @endif
                                @endforeach
                            </div>
                            
                            <div class="category mt-8">
                                <h1 class="categoryTitle"><strong>Multi Choice Questions</strong></h1>
                                @foreach ($questions as $row)
                                    @if($row->question->type == "Multi Choice")
                                        <p class="question ml-2 mt-8"> {{++$c}}: {{$row->question->question}}</p>
                                            <table class="ml-2 mt-2" >
                                                <tr colspan="3">
                                                    <td>A:</td>
                                                    <td class="pl-3 choice">
                                                       {{$row->question->choice_a}}
                                                    </td>
                                                    <td class="header">B:</td>
                                                    <td class="pl-3 choice">
                                                       {{$row->question->choice_b}}
                                                    </td>
                                                    <td class="header">C:</td>
                                                    <td class="pl-3 choice">
                                                        {{$row->question->choice_c}}
                                                    </td>
                                                    <td class="header">D:</td>
                                                    <td class="pl-3 choice">      
                                                       {{$row->question->choice_d}}
                                                    </td>
                                                </tr>
                                            </table>
                                    @endif
                                @endforeach
                            </div>


                            <div class="category mt-8">
                                <h1 class="categoryTitle"><strong>True Or False Questions</strong></h1>
                                @foreach ($questions as $row)
                                    @if($row->question->type == "True or False")
                                    <p class="question ml-2 mt-4"> {{++$c}}:{{$row->question->question}} (_______)</p>
                                    @endif
                                @endforeach
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- END: Display Information -->
    </div>
</div>
@include('../pages/exam/categorize_questions')

@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script>
   // $(document).ready(function() {
        //     PrintElem('#invoice_print');
        // });

        // print invoice function
        function PrintElem(elem) {
           
            // document.getElementById('student_image').style.marginTop = '-40px';
            Popup($(elem).html());
        }

        function Popup(data) {
            var mywindow = window.open('', 'Exam', 'height=600,width=950');
            mywindow.document.write('<html><head><title>Invoice</title>');
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');

            setTimeout(() => {
                mywindow.print();
            mywindow.close();
            // document.getElementById('student_image').style.marginTop = '-120px';
            }, 500);
            return true;
        }
    </script>
@endsection
{{-- @section('script')
    <script type="text/javascript">
alert(123123);
        // $(document).ready(function() {
        //     PrintElem('#invoice_print');
        // });

        // print invoice function
        function PrintElem(elem) {
            alert(123);
            // document.getElementById('student_image').style.marginTop = '-40px';
            Popup($(elem).html());
        }

        function Popup(data) {
            var mywindow = window.open('', 'Exam', 'height=600,width=950');
            mywindow.document.write('<html><head><title>Invoice</title>');
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');

            setTimeout(() => {
                mywindow.print();
            mywindow.close();
            // document.getElementById('student_image').style.marginTop = '-120px';
            }, 500);
            return true;
        }
    </script>
@endsection --}}