@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Student Assignment Result</title>

@section('main-content')

<div class="d-none pop_up_msg" style="position: absolute; top:13%; margin-left:2%; z-index:1000;">
    
</div>

<div class="container">
    @if(count($assignmentResults) > 0)

        @php
            $firstResult = $assignmentResults->first();
            $assignment = $firstResult->assignment;
            $student = $firstResult->student;
        @endphp

        <div class="card-body">
            <div class="row">
                <div class="card w-20 cardBox col-6">
                    <div class="card-body">
                        <embed src="{{ asset('assets/assignments/' . $student->id . '/' . $firstResult->save_pdf) }}" type="application/pdf" width="100%" height="500px" />
                    </div>
                </div>
                <div class="col-5 border ms-5 target_div_ajax">   
                    <h3 class="mt-3">Assignment Details</h3>
                    <table class="table">
                        <tbody>
                            <tr>
                                <th class="fs-6 bg-white" scope="row">Name</th>
                                <td class="fs-6 bg-light">{{$assignment->heading}}</td>
                            </tr>    
                            <tr>
                                <th class="fs-6 bg-white" scope="row">Total Marks</th>
                                <td class="fs-6 bg-light">{{$assignment->marks}}</td>
                            </tr>
                            <tr>    
                                <th class="fs-6 bg-white" scope="row">Submission Date</th>
                                <td class="fs-6 bg-light">{{dateformatter($assignment->submission_date)}}</td>
                            </tr>
                            <tr>
                                <th class="fs-6 bg-white" scope="row">My Assignment</th>
                                <td class="fs-6 bg-light">
                                    <a href="{{ asset('assets/assignments/' . $assignment->save_pdf) }}" target="_blank">View</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <h3 class="mt-4">Submission Details</h3>
                    
                    @if ($assignment->submission_date>=$firstResult->created_at)
                        <h6 class="text-success">( On Time Submission )</h6>
                    @else
                        <h6 class="text-danger">( Late Submission )</h6>
                    @endif

                    <table class="table">
                        <tbody>
                            <tr>
                                <th class="fs-6 bg-white" scope="row">Name</th>
                                <td class="fs-6 bg-light">{{$student->first_name}} {{$student->last_name}}</td>
                            </tr>
                            <tr>    
                                <th class="fs-6 bg-white" scope="row">Submitted On</th>
                                <td class="fs-6 bg-light">{{dateformatter($firstResult->created_at)}}</td>
                            </tr>   
                            <tr>
                                <th class="fs-6 bg-white" scope="row">Assignment</th>
                                <td class="fs-6 bg-light">
                                    <a href="{{ asset('assets/assignments/' . $student->id . '/' . $firstResult->save_pdf) }}" target="_blank">View</a>
                                </td>
                            </tr> 
                            <tr>
                                <th class="fs-6 bg-white" scope="row">Marks Obtained</th>
                                <td class="fs-6 bg-light">{{($firstResult->marks_status==true)?($firstResult->marks_obtained==null)?0:($firstResult->marks_obtained):"--"}}</td>
                            </tr>
                            <tr>    
                                <th class="fs-6 bg-white" scope="row">Marks Given On</th>
                                <td class="fs-6 bg-light">{{($firstResult->marks_status==true )?dateformatter($firstResult->updated_at):"--"}}</td>
                            </tr>
                            @if (!isset($firstResult->remarks))
                                <tr>    
                                    <th class="fs-6 bg-white" scope="row">Remarks</th>
                                    <td class="fs-6 bg-light">--</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                    <div class="align-bottom mt-2">
                        {{-- <a href="{{route('teachers.edit', ['teacher' => $batch[0]->teacher->uuid]) }}" class="btn btn-primary text-white ">View More</a>     --}}
                    </div>                    
                </div>
            </div>
        </div>

        <!-- Embed PDF and other details as needed -->

    @endif

    @if (isset($firstResult->remarks))
        <div class="bg-white p-2 rounded">
            <h5>Remarks</h5>
            <div>{{$firstResult->remarks}}</div>
        </div>
    @endif

    <!-- Add Marks Form -->
    <div class="form-group mt-3">
        @if (!$firstResult->marks_status)
            <label for="marksInput">Marks:</label>
            <input type="text" class="form-control" id="marksInput" name="marks" placeholder="Enter marks from 0 to {{$assignment->marks}}" maxlength="2" onkeypress="allowNumberOnly(event)"></br>
            <label for="remarks">Remarks:</label>
            <input type="text" class="form-control" id="remarks" name="remarks" placeholder="Remarks ( optional )" maxlength="200"></br>
            <button id="addmarks_first_time" class="btn btn-primary mb-5">Add Marks</button>
        @else
            <label for="marksInput">Marks:</label>
            <input type="text" class="form-control" id="marksInput" name="marks" placeholder="Enter marks from 0 to {{$assignment->marks}}" maxlength="2" onkeypress="allowNumberOnly(event)"></br>
            <button id="addmarks" class="btn btn-primary mb-2">Update Marks</button>
        @endif
    </div>

    @if ($firstResult->marks_status)
        <div class="form-group mt-3">
            <label for="remarks">Remarks:</label>
            <input type="text" class="form-control" id="remarks" name="remarks" placeholder="Remarks ( optional )" maxlength="200"></br>
        </div>
        <button id="addremarks" class="btn btn-primary mb-5">{{isset($firstResult->remarks)?"Update":"Add"}} Remarks</button>
    @endif    

</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>

    $("#addmarks_first_time").on("click",function(){
        $('.text-danger').hide();
        $("#addmarks_first_time").prop("disabled",true);
        
        const id={{$firstResult->id}};
        const total_marks={{$assignment->marks}};
        const given_marks=$("#marksInput").val();
        const remarks=($("#remarks").val()).trim();

        $.ajax({
            url:"/addMarksFirstTime",
            headers:{
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            type:"POST",
            data:{"id":id,"total_marks":total_marks,"given_marks":given_marks,"remarks":remarks},
            success:function(resp){
                $("#addmarks_first_time").prop("disabled",false);
                let html_to_add="";
                if(resp["marks_error"]){
                    html_to_add+=`<div class='text-danger'>Marks in input field must be equal or less than total marks.</div>`;
                    $("#marksInput").after(html_to_add);
                }
                else if(resp["errors"]){
                    $.each(resp["errors"],function(key,val){
                        if(key=="id"){
                            html_to_add+=`<div class='text-danger'>Unable to find your assignment id.</div>`;
                        }else if(key=="total_marks"){
                            html_to_add+=`<div class='text-danger'>Total marks not defined.</div>`;
                        }
                        else if(key=="remarks"){
                            $("#remarks").after(`<div class='text-danger'>${val}</div>`);
                        }
                        else{
                            html_to_add+=`<div class='text-danger'>Enter marks for assignment.</div>`;
                        }
                    });
                    $("#marksInput").after(html_to_add);
                }else{
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });

                    $(".pop_up_msg").html(`<div id="alert">
                            <div class="alert alert-success" role="alert">
                                Marks added successfully.
                            </div>
                        </div>`);
                    $(".pop_up_msg").removeClass('d-none');
                    setTimeout(() => {
                        $('.pop_up_msg').html('').addClass('d-none');
                        window.location.reload();
                    }, 3000);
                }
            },
            error:function(resp){
                $("#addmarks_first_time").prop("disabled",false);
            }

        });

    });


    $("#addmarks").on("click",function(){
        $('.text-danger').hide();
        $("#addmarks").prop("disabled",true);
        const id={{$firstResult->id}};
        const total_marks={{$assignment->marks}};
        const given_marks=$("#marksInput").val();
        $.ajax({
            url:"/addMarks",
            headers:{
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            type:"POST",
            data:{"id":id,"total_marks":total_marks,"given_marks":given_marks},
            success:function(resp){
                $("#addmarks").prop("disabled",false);
                let html_to_add="";
                if(resp["marks_error"]){
                    html_to_add+=`<div class='text-danger'>Marks in input field must be equal or less than total marks.</div>`;
                    $("#marksInput").after(html_to_add);
                }
                else if(resp["errors"]){
                    $.each(resp["errors"],function(key,val){
                        if(key=="id"){
                            html_to_add+=`<div class='text-danger'>Unable to find your assignment id.</div>`;
                        }else if(key=="total_marks"){
                            html_to_add+=`<div class='text-danger'>Total marks not defined.</div>`;
                        }else{
                            html_to_add+=`<div class='text-danger'>Enter marks for assignment.</div>`;
                        }
                    });
                    $("#marksInput").after(html_to_add);
                }else{
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                    $(".pop_up_msg").html(`<div id="alert">
                            <div class="alert alert-success" role="alert">
                                Marks updated successfully.
                            </div>
                        </div>`);
                    $(".pop_up_msg").removeClass('d-none');
                    setTimeout(() => {
                        $('.pop_up_msg').html('').addClass('d-none');
                        window.location.reload();
                    }, 3000);
                }
            },
            error:function(resp){
                $("#addmarks").prop("disabled",false);
            }

        });
    });


    $("#addremarks").on("click",function(){
        $('.text-danger').hide();
        $("#addremarks").prop("disabled",true);
        const id={{$firstResult->id}};
        const remarks=($("#remarks").val()).trim();

        $.ajax({
            url:"/addRemarks",
            headers:{
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            type:"POST",
            data:{"id":id,"remarks":remarks},
            success:function(resp){
                console.log(resp);
                $("#addremarks").prop("disabled",false);
                let html_to_add="";
                if(resp["errors"]){
                    $.each(resp["errors"],function(key,val){
                        if(key=="id"){
                            html_to_add+=`<div class='text-danger'>Unable to find your assignment id.</div>`;
                        }else{
                            html_to_add+=`<div class='text-danger'>${val}</div>`;
                        }
                    });
                    $("#remarks").after(html_to_add);
                }else{
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                    $(".pop_up_msg").html(`<div id="alert">
                            <div class="alert alert-success" role="alert">
                                Remarks updated successfully.
                            </div>
                        </div>`);
                    $(".pop_up_msg").removeClass('d-none');
                    setTimeout(() => {
                        $('.pop_up_msg').html('').addClass('d-none');
                        window.location.reload();
                    }, 3000);
                }
            },
            error:function(resp){
                $("#addremarks").prop("disabled",false);
            }
        });

    });

    function allowNumberOnly(evt) {
        var theEvent = evt || window.event;
        // Handle paste
        if (theEvent.type === 'paste') {
            key = event.clipboardData.getData('text/plain');
        } else {
        // Handle key press
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode(key);
        }
        var regex = /[0-9]|\./;
        if( !regex.test(key) && evt.keyCode!=8) {
            theEvent.returnValue = false;
            if(theEvent.preventDefault) theEvent.preventDefault();
        }
    }
</script>
@endsection