@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Student Activity Tracker</title>
<style>
    /*
    .container {
        margin: 20px;
    }

    #imageContainer img {
        max-width: 200px;
        margin: 10px;
    }

    .popup {
        display: none;
        position: fixed;
        z-index: 2000 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }

    .popup-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 80%;
        text-align: center;
    }

    .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close-button:hover,
    .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    } */

    .container {
        margin: 20px;
    }

    #imageContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .image-wrapper {
        position: relative;
        margin: 10px;
    }

    .image-wrapper img {
        max-width: 500px;
        max-height: 500px;
        display: block;
    }

    .remove-button {
        position: absolute;
        top: -8px;
        right: -8px;
        background: rgba(255, 0, 0, 0.8);
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup {
        display: none;
        position: fixed;
        z-index: 2000 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .popup-content {
        background-color: #fff;
        margin: 2% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        /* max-width: 500px; */
        text-align: center;
        position: relative;
    }

    .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .close-button:hover,
    .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .add-image-container {
        text-align: center;
        margin-top: 10px;
    }

    .add-button {
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 24px;
        cursor: pointer;
        display: none;
        /* Initially hidden */
    }

    .layout-container {
        z-index: 0;
    }

    .multiSelect_inputGroup {
        text-align: left;
    }

    .multiSelect_inputGroup .select2-container--default {
        width: 100% !important;
    }

    .add-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .showUploadingProcess {
        /* display: none; */
        position: fixed;
        z-index: 3000 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }


    /* new changes */

    .image-wrapper img {
        width: 150px;
        height: 150px;
        display: block;
        object-fit: cover;
    }
</style>

<style>
    .edit:hover {
        color: #fff !important;
        background-color: blue !important;
        border-color: #696cff !important;
        border-radius: 5px !important;
    }

    .delete:hover {
        color: #fff !important;
        background-color: #E3242B !important;
        border-color: #E3242B !important;
        border-radius: 5px !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

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

    .cardBox img.card-img-top {
        height: 240px;
        width: 100%;
        object-fit: cover;
    }

    table#services thead {
        display: none;
    }

    table.dataTable tbody tr {
        border-color: transparent;
    }

    table.dataTable thead .sorting_asc {
        background-image: none !important;
    }

    table.dataTable thead .sorting {
        background-image: none !important;
    }
</style>
<link rel="stylesheet" href="{{ asset('assets/css/card_inside_data_table.css') }}">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

@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 Activity Tracker </span></h4>
            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="row p-4 align-items-center">
                            <div class="col-6">
                                <h5 class="card-header p-0">Add Activity</h5>
                            </div>
                            <div class="container mt-2 mb-2">
                                <div>
                                    <label class="fw-bold">Description</label>
                                    <textarea class="form-control mb-1" rows="3" style="min-height:100px; max-height: 150px;" id="description"
                                        maxlength="2000">{{ isset($description->description) ? $description->description : '' }}</textarea>
                                    <div class="text-end mb-3">Max Description: 2000 characters</div>
                                    <a class="btn btn-success text-white mb-3 save_description">Save Description</a>
                                </div>
                                <div class="">
                                    <label class="fw-bold">Upload Images</label>
                                    <input type="file" id="imageInput" multiple accept=".jpg, .jpeg, .png"
                                        class="form-control">
                                </div>
                            </div>
                        </div>

                        {{-- <div class="trackList_main">
                    <ul class="trackList_ul_outer">
                        <li class="trackList_li">
                            <h2 class="tl_name">John</h2>
                            <ul class="tl_list_inner">
                            <!--  <li class="tl_li_inner">
                                    <img class="tl_stdImg" src="sample_img.jpg"/>
                                    <span class="tl_delete_img"><i class="fa-solid fa-circle-xmark"></i></span>
                                </li> -->
                            </ul>
                            <label for="upload_trackList_img" class="tl_plus_label">
                                <i class='bx bx-plus-circle'></i>
                                <input type="file" name="" multiple hidden id="upload_trackList_img"/>
                            </label>
                        </li>
            
                    </ul>
                </div> --}}
                    </div>
                </div>
                <div class="ms-2 card">
                    <div class="table cardTable dataTable text-nowrap dtbl_dropdown">
                        <table class="table" id="services">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>Column 1</th>
                                    <th>Column 2</th>
                                    <th>Column 3</th>
                                    <th>Column 4</th>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0">
                                @if (isset($studentlist) && count($studentlist) != 0 && !empty($studentlist))
                                    @for ($i = 0; $i < count($studentlist); $i += 4)
                                        <tr id="row_{{ $studentlist[$i]->id }}">
                                            <td style="display: none;">{{ $i }}</td>
                                            @for ($j = $i; $j < $i + 4; $j++)
                                                @if ($j < count($studentlist))
                                                    <td>
                                                        <div class="card w-30 cardBox">
                                                            <img class="card-img-top"
                                                                src="{{ $studentlist[$j]->profile_photo_path ?? $studentlist[$j]->profile_photo_url }}"
                                                                alt="Card image cap"
                                                                onerror="this.onerror=null; this.src='{{ url('assets/images/users/avatar.jpg') }}';">
                                                            <div class="card-body">
                                                                <h4 class="card-title">
                                                                    {{ strtoupper($studentlist[$j]->first_name) . ' ' . strtoupper($studentlist[$j]->last_name) }}
                                                                </h4>
                                                                <ul class="card-text">
                                                                    <li>Gender: {{ ucwords($studentlist[$j]->gender) }}
                                                                    </li>
                                                                    <li>DOB: {{ dateformatter($studentlist[$j]->dob) }}
                                                                    </li>
                                                                    <li>Age: {{ calculateAge($studentlist[$j]->dob) }}</li>
                                                                    </p>
                                                                    <a href="/studentActivityDetails/{{ $studentlist[$j]->uuid }}"
                                                                        class="btn btn-primary" target="_blank">View</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                @else
                                                    <td></td>
                                                @endif
                                            @endfor
                                        </tr>
                                    @endfor
                                @else
                                    <tr>
                                        <td></td>
                                        <td>Not a student mapped currently.</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->


        <div id="popup" class="popup">
            <div class="popup-content">
                <span class="close-button">&times;</span>
                <h5>Upload Images</h5>
                <div id="imageContainer"></div>
                <div class="add-image-container m-1">
                    <button id="addImageButton" class="add-button" onclick="openFileInput()">+</button>
                    <input type="file" id="imageInput" accept=".jpg, .jpeg, .png" multiple style="display: none;">
                </div>
                <div class="mb-3 col-12">
                    <div class="input-group multiSelect_inputGroup">
                        <select name="students" id="students" class="form-select input form-control-line" multiple>
                            @if (isset($studentlist) && count($studentlist) > 0)
                                <option value="" disabled>Select Students</option>
                                @foreach ($studentlist as $value)
                                    <option value="{{ $value->id }}">{{ $value->first_name . ' ' . $value->last_name }}
                                    </option>
                                @endforeach
                            @else
                                <option value="" selected disabled>Student Not Found.</option>
                            @endif
                        </select>
                    </div>
                </div>
                <div class="text-center  d-flex justify-content-between align-items-center">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="selectAllStudents">
                        <label class="form-check-label" for="selectAllStudents">
                            Select All Students
                        </label>
                    </div>
                    <a class="btn btn-primary text-white ms-2 submit_btn">Submit</a>
                </div>
                <div class="text-center error_msg d-none" style="color: red;"></div>
            </div>
        </div>
        <div class="showUploadingProcess d-none text-white">
            <div class="d-flex justify-content-center align-items-center display-6 change_to_success_message"
                style="margin-top:20%;">
                Please wait !!! Trying to upload your requested images.
            </div>
        </div>
    </div>
    <!-- Content wrapper -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

    <script>
        // Use jQuery.noConflict()
        jQuery.noConflict();

        // Now use jQuery instead of $ to avoid conflicts
        jQuery(document).ready(function($) {

            $('#students').select2({
                placeholder: 'Select Students',
            });

            $("#selectAllStudents").on("change", () => {
                const selectAllStudents = $("#selectAllStudents").is(':checked');
                if (selectAllStudents) {
                    $(".multiSelect_inputGroup").addClass("d-none");
                    $("#students").prop("disabled", true);
                } else {
                    $(".multiSelect_inputGroup").removeClass("d-none");
                    $("#students").prop("disabled", false);

                }
            });


            $(".save_description").on("click", () => {
                $("#imageInput").prop("disabled", true);
                $('.text-danger').remove();
                $(".save_description").prop("disabled", true);
                let formData = new FormData();
                const description = ($("#description").val()).trim();

                formData.append('description', description);
                $.ajax({
                    type: "post",
                    url: "{{ url('/addActivityDescription') }}",
                    contentType: 'multipart/form-data',
                    cache: false,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    success: function(resp) {
                        const status = resp["status"];
                        if (status === 200) {
                            if (!$('#description').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#description').closest('div').after(
                                    '<span class="text-strong text-success">Activity description saved successfully.</span>'
                                );
                            }
                            window.location.reload();
                        } else {
                            data = resp;
                            if (data["err_code"] == 1) {
                                $.each(data.error, function(field_name, error) {
                                    if (!$('#' + field_name + '').closest('div').next()
                                        .hasClass('text-danger')) {
                                        $('#' + field_name + '').closest('div').after(
                                            '<span class="text-strong text-danger">' +
                                            error[0] + '</span>');
                                    }
                                });
                            } else if (data["err_code"] == 2) {
                                if (!$('#description').closest('div').next().hasClass(
                                        'text-danger')) {
                                    $('#description').closest('div').after(
                                        '<span class="text-strong text-danger">Try again later. Unable to save your description.</span>'
                                    );
                                }
                            }
                        }
                        $(".save_description").prop("disabled", false);
                        $("#imageInput").prop("disabled", false);

                    },
                    error: function() {
                        $(".save_description").prop("disabled", false);
                        $("#imageInput").prop("disabled", false);
                    }
                });
            });

            $(".submit_btn").on("click", function() {
                $(".error_msg").addClass('d-none');
                if (sizeExceedLimit) {
                    $(".error_msg").removeClass('d-none').text(
                        "Remove images whose size is greater than 2 MB.");
                    return;
                }
                $(".text-danger").remove();
                $(".showUploadingProcess").removeClass('d-none');
                $(".submit_btn").prop("disabled", true);
                const selectAllStudents = $("#selectAllStudents").is(':checked');
                if (selectAllStudents) {
                    $("#students").prop("disabled", true);
                } else {
                    $("#students").prop("disabled", false);
                }

                const students = $('#students').val();

                let formData = new FormData();
                for (let i = 0; i < files.length; i++) {
                    formData.append('files[]', files[i]);
                }
                formData.append('selectAllStudents', selectAllStudents);
                formData.append('students', students);

                $.ajax({
                    type: "post",
                    url: "{{ url('/addActivityImages') }}",
                    contentType: 'multipart/form-data',
                    cache: false,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    success: function(data) {
                        const status = data["status"];
                        if (status === 200) {
                            $(".change_to_success_message").text(
                                "Images uploaded successfully.");
                            setTimeout(() => {
                                window.location.reload();
                            }, 1200);
                        } else {
                            // console.log(data.error);
                            $.each(data.error, function(field_name, error) {
                                // Check if the error message for the field already exists
                                // console.log(field_name,error);
                                if (!$('#' + field_name + '').closest('div').next()
                                    .hasClass('text-danger')) {
                                    $('#' + field_name + '').closest('div').after(
                                        '<span class="text-strong text-danger">' +
                                        error[0] + '</span>');
                                }
                            });
                        }
                        $(".submit_btn").prop("disabled", true);
                        $("#students").prop("disabled", false);
                        $(".showUploadingProcess").addClass('d-none');

                    },
                    error: function() {
                        // Hide loader in case of an error
                        $(".submit_btn").prop("disabled", true);
                        $("#students").prop("disabled", false);
                        $(".showUploadingProcess").addClass('d-none');

                        // Handle error
                    },
                    complete: function() {
                        // Hide loader when the request is completed (success, error, or failure)
                        $(".submit_btn").prop("disabled", true);
                        $("#students").prop("disabled", false);
                        $(".showUploadingProcess").addClass('d-none');
                    }
                });


            });
        });
    </script>

    <script>
        // script.js
        let files = []; // Initialize files outside the function to maintain its contents
        let sizeExceedLimit = false;
        const imageInput = document.getElementById('imageInput');
        const imageContainer = document.getElementById('imageContainer');
        const popup = document.getElementById('popup');
        const closeButton = document.querySelector('.close-button');
        const addImageButton = document.getElementById('addImageButton');

        imageInput.addEventListener('change', handleFileSelect);
        closeButton.addEventListener('click', function() {
            popup.style.display = 'none';
            $(".text-danger").remove();
            files = [];
        });

        window.addEventListener('click', event => {
            if (event.target === popup) {
                popup.style.display = 'none';
                files = [];
                $(".text-danger").remove();
            }
        });

        function handleFileSelect(event) {
            const input = event.target;
            const newFiles = Array.from(input.files); // Convert FileList to array
            // Add new files to the existing files array;
            files = files.concat(Array.from(newFiles));

            // console.log(files);
            if (files.length === 0) {
                return;
            }

            if (files.length > 6) {
                files = files.filter(file => !newFiles.includes(file));
                alert('You can only upload a maximum of 6 images.');
                input.value = ''; // Clear input value to allow selecting new files
                return;
            }
            imageContainer.innerHTML = ''; // Clear previous images before adding new ones

            for (let i = 0; i < files.length; i++) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imageWrapper = document.createElement('div');
                    imageWrapper.classList.add('image-wrapper');

                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.border = "1px solid grey";

                    const removeButton = document.createElement('button');
                    removeButton.classList.add('remove-button');
                    removeButton.innerHTML = '&times;';
                    removeButton.addEventListener('click', () => removeImage(imageWrapper, i));

                    // Create and append the size element
                    const sizeElement = document.createElement('div');
                    sizeElement.classList.add('image-size');
                    const sizeInMB = files[i].size / (1024 * 1024);
                    sizeElement.textContent = `Size: ${(files[i].size / (1024 * 1024)).toFixed(2)} MB`;

                    if (sizeInMB > 2) {
                        sizeElement.style.color = 'red';
                        sizeExceedLimit = true;
                    }

                    imageWrapper.appendChild(img);
                    imageWrapper.appendChild(sizeElement);
                    imageWrapper.appendChild(removeButton);
                    imageContainer.appendChild(imageWrapper);

                    updateAddImageButton();
                }
                reader.readAsDataURL(files[i]);
            }

            popup.style.display = 'block';
            input.value = null;
            input.value = '';
            $(".error_msg").addClass('d-none');
        }

        function handleNewUpload() {
            imageInput.value = '';
            imageContainer.innerHTML = '';
            popup.style.display = 'none';
            imageInput.click();
        }

        function removeImage(imageWrapper, i) {
            imageContainer.removeChild(imageWrapper);
            $(".error_msg").addClass('d-none');
            files.splice(i, 1);
            if (files.length == 0) {
                popup.style.display = 'none';
                files = [];
            }

            files.forEach(element => {
                const sizeInMB = element.size / (1024 * 1024);
                if (sizeInMB > 2) {
                    sizeExceedLimit = true;
                } else {
                    sizeExceedLimit = false;
                }
            });
            // After removing an image, update the plus button visibility
            updateAddImageButton();
        }

        function updateAddImageButton() {
            const currentImageCount = imageContainer.childElementCount;

            if (currentImageCount < 6) {
                addImageButton.style.display = 'block';
            } else {
                addImageButton.style.display = 'none';
            }
        }

        function openFileInput() {
            imageInput.click();
        }
    </script>
@endsection