@extends('layouts.teacher')

<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')
        <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Teacher deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif
        </div>
    </div>
    <!-- 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