@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Students</title>
<style>
    .edit:hover,
    .delete:hover {
        color: #fff !important;
        border-radius: 5px !important;
    }

    .edit:hover {
        background-color: blue !important;
        border-color: #696cff !important;
    }

    .delete:hover {
        background-color: #e3242b !important;
        border-color: #e3242b !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .exam-list-item {
        border: 1px solid #dee2e6;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
    }

    .list-group {
        overflow-y: auto;
        max-height: 500px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    #memo_scroll{
        min-height: 320px;
        max-height: 350px;
        padding: 5px;
    }
    .sdf_div{
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 5px;
    }
    .notes_pt_li{
        text-align: end;
        list-style-type: none;
    }
    .notes_pt_textarea{
        min-height: 80px;
        max-height: 200px;
        width: auto;
    }
    .notes_pt_ul{
        overflow-y: auto;
        height: 200px;
        background: white;
    }
    .note_pt_div{
        text-align: end;
    }
    .activity_date {
        font-size: 20px;
        font-weight: 600;
    }
    .activity_date {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 6px;
        background-color: #e9e9e9;
        display: inline-block;
        padding: 8px 14px;
        border-radius: 27px;
    }
    .activity_description {
        margin: 0 0 10px;
    }
    .ais_div_outer {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }
    .activity_imgSpan img {
        object-fit: cover;
    }
    .activityImg_row:last-child {
        border-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
</style>
<link rel="stylesheet" href="{{asset('assets/css/toggle.css')}}">
@section('main-content')

<!-- Content wrapper -->
<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Student /</span> {{ isset($studentdetail->first_name)?ucwords($studentdetail->first_name):" " }} {{ isset($studentdetail->last_name)?ucwords($studentdetail->last_name):" " }}</h4>

        
        <div class="row card">
            <div class="card-body">
            @if (isset($studentimages) && count($studentimages)>0)
                @foreach ($studentimages as $key=>$data)
                    <div class="activityImg_row mb-3 pb-4 border-bottom">
                        <h3 class="activity_date">{{dateformatter($key)}}</h3>
                        <p class="activity_description">{!! isset($activty_description[$key][0]->description) ? nl2br(e($activty_description[$key][0]->description)) : "" !!}</p>
                        <div class="ais_div_outer">
                        @foreach ($data as $val)
                            <span class="activity_imgSpan">
                                <img src="{{$val->image}}" alt="activity_image" width="175" height="175"/>
                            </span>
                        @endforeach
                        </div>
                    </div>
                @endforeach               
            @elseif (isset($activty_description) && count($activty_description)>0)
                @foreach ($activty_description as $key=>$data)
                    <div class="activityImg_row mb-3 pb-4 border-bottom">
                        <h3 class="activity_date">{{dateformatter($key)}}</h3>
                        <p class="activity_description">{!! isset($data[0]->description) ? nl2br(e($data[0]->description)) : "" !!}</p>
                    </div>
                @endforeach               
            @else
                <div>No Activity Found.</div>
            @endif

        </div>
    </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    let chatHistory = document.getElementById("memo_scroll");
    chatHistory.scrollTop = chatHistory.scrollHeight;
</script>

<script>
    $(".notes_pt_textarea").on("change keyup", function(e) {
        if (($(this).val()).length > 500) $(".textarea_max_span").css('color', 'red');
        else $(".textarea_max_span").css('color', 'rgb(0 0 0 / 50%)');
    });

    function notes_send(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).prop("disabled", true);
        const notes = $.trim($(".notes_pt_textarea").val());
        const teacher_id = "{{auth()->id()}}";
        const student_name = "{{$studentdetail->first_name.' '.$studentdetail->last_name}}";
        const student_id = "{{$studentdetail->id}}";
        const added_by = "{{auth()->id()}}";

        if (notes.length >= 3) {
            $.ajax({
                url: "/add-notes",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "teacher_id": teacher_id,
                    "student_id": student_id,
                    "student_name": student_name,
                    "notes": notes,
                    "added_by": added_by,
                },
                success: function(resp) {
                    $(".notes_pt_textarea").val('');
                    $(".notes_pt_ul").html(resp);
                    chatHistory = document.getElementById("memo_scroll");
                    chatHistory.scrollTop = chatHistory.scrollHeight;
                    $(".send_notes").prop("disabled", false);
                },
                error: function(resp) {
                    console.log("Error Arise");
                    $(".send_notes").prop("disabled", false);
                }
            });
        } else {
            $(this).prop("disabled", false);
            alert('Enter atleast 3 characters in Memo!!!');
            $(".loader_div").css("display", "none");
        }
    }
    $(".send_notes").click(function(e) {
        notes_send(e);
    });
</script>
@endsection