@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Student Activity Tracker</title>
<style>
    .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;
    }

    .stud_br0,
    .stud_tble * {
        border: 0 !important;
    }
</style>
<style>
    .preview-image-wrapper {
        position: relative;
        margin: 10px;
        width: 150px;
        text-align: center;
    }

    .preview-image-wrapper img {
        max-width: 100%;
        max-height: 120px;
        border: 1px solid #ccc;
        border-radius: 8px;
        object-fit: cover;
    }

    .image-name,
    .image-size {
        font-size: 0.85rem;
        margin-top: 4px;
        word-break: break-word;
    }

    .delete-icon {
        position: absolute;
        top: -6px;
        right: -6px;
        background: red;
        color: white;
        border-radius: 50%;
        padding: 2px 6px;
        font-weight: bold;
        cursor: pointer;
        z-index: 2;
    }

    .invalid img {
        border-color: red;
    }

    .invalid .image-size {
        color: red;
        font-weight: bold;
    }

    #imagePreviewContainer {
        justify-content: center;
    }
</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')
    <!-- 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">Add New Activity Tracker</h4>
            <div class="row">
                <div class="col-xl">
                    <div class="card p-4 mb-4">
                        {{-- Description --}}
                        <div class="mb-3 col-12">
                            <label class="fw-bold">Description</label>
                            <textarea class="form-control" name="description" id="description" rows="3" maxlength="2000"
                                placeholder="Enter description..." oninput="countCharacters(this)"></textarea>
                            <div class="text-end">
                                <small><span id="charCount">0</span>/2000 letters</small>
                            </div>
                        </div>
                        {{-- Multiple Image Upload + Preview --}}
                        <div class="mb-3 col-12">
                            <label class="fw-bold">Upload Images</label>
                            <input type="file" id="files" name="files[]" multiple accept="image/*"
                                class="form-control" onchange="previewImages(event)">
                            <div class="text-end">
                                <small><span>Max size 5MB per image. Max 6 images.</small>
                            </div>
                            <div id="imagePreviewContainer" class="d-flex flex-wrap mt-2"></div>
                            <div id="imageSizeError" class="text-danger mb-3" style="display: none;"></div>
                        </div>

                        <div class="mb-3 col-12">
                            <label class="fw-bold">Select Link Type</label>
                            <select name="link_type" class="form-select" id="linkTypeDropdown" onchange="handleLinkField()">
                                <option value="">Select Type</option>
                                <option value="1">YouTube Link</option>
                                <option value="2">Upload Video</option>
                                <option value="3">Drive Link</option>
                                <option value="4">Upload PDF</option> <!-- NEW -->
                            </select>
                        </div>

                        {{-- YouTube / Drive link input --}}
                        <div class="mb-3 col-12" id="youtubeLinkField" style="display: none;">
                            <label class="fw-bold">YouTube Link</label>
                            <input type="url" name="youtube_link" class="form-control"
                                placeholder="https://www.youtube.com/...">
                        </div>
                        {{-- Video Upload --}}
                        <div class="mb-3 col-12" id="videoUploadField" style="display: none;">
                            <label class="fw-bold">Upload Video</label>
                            <input type="file" name="video_file" class="form-control" accept="video/*">
                        </div>
                        <div class="mb-3 col-12" id="driveLinkField" style="display: none;">
                            <label class="fw-bold">Google Drive Link</label>
                            <input type="url" name="drive_link" class="form-control"
                                placeholder="https://drive.google.com/...">
                        </div>
                        <div class="mb-3 col-12" id="pdfLinkField" style="display: none;">
                            <label class="fw-bold">Upload PDF</label>
                            <input type="file" name="pdf_file" class="form-control" accept="application/pdf">
                        </div>

                        {{-- Class Dropdown --}}
                        <div class="col-12 mb-3">
                            <label class="form-label" for="class">Select the Class</label>
                            <select name="class" id="class" class="form-control">
                                <option value="" selected disabled>Select Class</option>
                                {{-- @if (count($classes) > 1)
                                    <option value="0">Send To All Classes</option>
                                @endif --}}
                                @foreach ($classes as $id => $class_name)
                                    <option value="{{ $id }}">{{ $class_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Student Multi Select Section --}}
                        <div class="mb-3 col-12" id="studentSelectDiv" style="display: none;">
                            <label class="fw-bold">Select Students</label>

                            {{-- Multiselect container --}}
                            <div class="input-group multiSelect_inputGroup">
                                <select name="students[]" id="students" multiple
                                    class="form-select multiSelect_field custom_multi_select"
                                    data-placeholder="Select the Students">
                                    <!-- options populated dynamically -->
                                </select>
                            </div>

                            {{-- No students found message --}}
                            <div id="noStudentMessage" class="text-danger fw-bold mt-2" style="display: none;">
                                Student Not Found.
                            </div>

                            {{-- Select All checkbox --}}
                            <div class="mt-2" id="selectAllCheckbox">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="selectAllStudents">
                                    <label class="form-check-label" for="selectAllStudents">Select All Students</label>
                                </div>
                                <div id="allStudentsSelectedMsg" class="text-success fw-bold mt-2"
                                    style="display: none;">
                                    You have selected all students of this class.
                                </div>
                            </div>
                        </div>

                        {{-- Submit --}}
                        <div class="text-end mt-4">
                            <button type="button" onclick="submit_btn()" class="btn btn-primary submit_btn">
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </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>
    {{-- Link Type --}}
    <script>
        // Show/hide message when "Select All Students" is checked
        $(document).ready(function() {
            $("#selectAllStudents").on("change", function() {
                if ($(this).is(':checked')) {
                    $(".multiSelect_inputGroup").addClass("d-none");
                    $("#students").prop("disabled", true);
                    $("#allStudentsSelectedMsg").show();
                } else {
                    $(".multiSelect_inputGroup").removeClass("d-none");
                    $("#students").prop("disabled", false);
                    $("#allStudentsSelectedMsg").hide();
                }
            });
        });
    </script>
    <script>
        // Add video and PDF size validation on file input change
        $(document).ready(function() {
            $('input[name="video_file"]').on('change', function() {
                const file = this.files[0];
                if (file && file.size > 20 * 1024 * 1024) {
                    $(this).val('');
                    alert('Video size must not exceed 20MB.');
                }
            });

            $('input[name="pdf_file"]').on('change', function() {
                const file = this.files[0];
                if (file && file.size > 10 * 1024 * 1024) {
                    $(this).val('');
                    alert('PDF size must not exceed 10MB.');
                }
            });
        });
    </script>
    {{-- this is for student multi select --}}
    <script>
        jQuery.noConflict();
        jQuery(document).ready(function($) {
            // initialize Select2
            $('#students').select2({
                placeholder: 'Select Students',
                width: '100%'
            });

            // Load students on class selection
            $('#class').on('change', function() {
                const classId = $(this).val();
                if (!classId) return;

                $.ajax({
                    type: "POST",
                    url: "{{ url('/class-studentActivityTracker') }}",
                    data: {
                        _token: '{{ csrf_token() }}',
                        class: classId
                    },
                    success: function(response) {
                        const studentSelect = $('#students');
                        const studentDiv = $('#studentSelectDiv');
                        const noStudentMsg = $('#noStudentMessage');
                        const checkboxDiv = $('#selectAllCheckbox');

                        studentSelect.empty(); // clear previous options

                        if (response.length > 0) {
                            response.forEach(student => {
                                studentSelect.append(
                                    `<option value="${student.id}">${student.first_name} ${student.last_name}</option>`
                                );
                            });

                            studentSelect.prop('disabled', false).trigger('change');
                            $('.multiSelect_inputGroup').removeClass('d-none');
                            $('#selectAllStudents').prop('checked', false);

                            studentDiv.show();
                            noStudentMsg.hide();
                            checkboxDiv.show();
                        } else {
                            studentDiv.show();
                            $('.multiSelect_inputGroup').addClass('d-none');
                            studentSelect.prop('disabled', true);
                            noStudentMsg.show();
                            checkboxDiv.hide();
                        }
                    },
                    error: function(err) {
                        alert('Unable to fetch students.');
                    }
                });
            });

            // "Select All Students" checkbox toggle
            $("#selectAllStudents").on("change", function() {
                if ($(this).is(':checked')) {
                    $(".multiSelect_inputGroup").addClass("d-none");
                    $("#students").prop("disabled", true);
                } else {
                    $(".multiSelect_inputGroup").removeClass("d-none");
                    $("#students").prop("disabled", false);
                }
            });
        });

        function countCharacters(textarea) {
            const maxLength = 2000;
            const currentLength = textarea.value.length;

            // Enforce max character limit
            if (currentLength > maxLength) {
                textarea.value = textarea.value.substring(0, maxLength);
            }

            document.getElementById("charCount").textContent = textarea.value.length;
        }
    </script>


    {{-- this is image preview script --}}
    <script>
        let selectedFiles = [];

        function previewImages(event, isDelete = false) {
            const input = document.getElementById('files');
            const container = document.getElementById('imagePreviewContainer');
            const maxSizeMB = 5;
            const maxFiles = 6;
            const dataTransfer = new DataTransfer();
            const oversizedFiles = [];

            if (!isDelete && event?.target?.files) {
                const newFiles = Array.from(event.target.files);
                selectedFiles = [...selectedFiles, ...newFiles];

                if (selectedFiles.length > maxFiles) {
                    alert("You can upload a maximum of 6 images.");
                    selectedFiles = selectedFiles.slice(0, maxFiles);
                    input.value = '';
                }
            }

            container.innerHTML = '';
            const errorBox = document.getElementById("imageSizeError");
            errorBox.style.display = "none";
            errorBox.innerHTML = '';

            const filteredFiles = [];

            selectedFiles.forEach((file) => {
                const isImage = file.type.startsWith('image/');
                const isValidSize = file.size <= maxSizeMB * 1024 * 1024;

                if (!isImage) return;

                if (!isValidSize) {
                    oversizedFiles.push({
                        name: file.name,
                        size: (file.size / (1024 * 1024)).toFixed(2)
                    });
                    input.value = '';
                    return;
                }

                filteredFiles.push(file);

                const reader = new FileReader();
                reader.onload = function(e) {
                    const wrapper = document.createElement("div");
                    wrapper.className = "preview-image-wrapper d-flex flex-column align-items-center me-3 mb-3";
                    wrapper.style.position = 'relative';

                    const img = document.createElement("img");
                    img.src = e.target.result;
                    img.style.maxWidth = "120px";
                    img.style.maxHeight = "120px";
                    img.style.objectFit = "cover";

                    const nameLabel = document.createElement("div");
                    nameLabel.className = "image-name small text-center";
                    nameLabel.innerText = file.name;

                    const sizeLabel = document.createElement("div");
                    sizeLabel.className = "image-size small text-muted";
                    sizeLabel.innerText = (file.size / (1024 * 1024)).toFixed(2) + " MB";

                    const delBtn = document.createElement("span");
                    delBtn.className =
                        "delete-icon position-absolute top-0 end-0 bg-danger text-white rounded-circle px-2";
                    delBtn.style.cursor = 'pointer';
                    delBtn.innerHTML = "&times;";
                    delBtn.onclick = function() {
                        selectedFiles = selectedFiles.filter(f => f.name !== file.name);
                        previewImages(null, true);
                    };

                    wrapper.appendChild(delBtn);
                    wrapper.appendChild(img);
                    wrapper.appendChild(nameLabel);
                    wrapper.appendChild(sizeLabel);
                    container.appendChild(wrapper);
                };

                reader.readAsDataURL(file);
                dataTransfer.items.add(file);
            });

            selectedFiles = filteredFiles;
            input.files = dataTransfer.files;

            if (oversizedFiles.length > 0) {
                let errorHTML = `<strong>The following images exceed 5MB and were not added:</strong><ul>`;
                oversizedFiles.forEach(file => {
                    errorHTML += `<li>${file.name} - ${file.size} MB</li>`;
                });
                errorHTML += `</ul>`;
                errorBox.style.display = "block";
                errorBox.innerHTML = errorHTML;
            }
        }

        function handleLinkField() {
            const selectedValue = $("#linkTypeDropdown").val();

            // Hide all and reset
            $("#youtubeLinkField, #videoUploadField, #driveLinkField, #pdfLinkField").hide().find('input').val('').prop(
                'disabled', true);

            // Show only relevant field
            if (selectedValue === "1") {
                $("#youtubeLinkField").show().find('input').prop('disabled', false);
            } else if (selectedValue === "2") {
                $("#videoUploadField").show().find('input').prop('disabled', false);
            } else if (selectedValue === "3") {
                $("#driveLinkField").show().find('input').prop('disabled', false);
            } else if (selectedValue === "4") {
                $("#pdfLinkField").show().find('input').prop('disabled', false);
            }
        }

        function countCharacters(textarea) {
            document.getElementById("charCount").innerText = textarea.value.length;
        }

        function submit_btn(e) {
            if (e) e.preventDefault();

            $(".error_msg").addClass('d-none');
            $(".text-danger").remove();
            $(".submit_btn").prop("disabled", true);

            const imageFiles = $('#files')[0].files;
            const linkType = $("#linkTypeDropdown").val();
            const description = $("#description").val().trim();
            const classId = $('#class').val();
            const students = $('#students').val();
            const selectAll = $("#selectAllStudents").is(":checked");

            const validImageTypes = ['image/jpeg', 'image/jpg', 'image/png'];
            const filteredImages = [];
            Array.from(imageFiles).forEach(file => {
                if (validImageTypes.includes(file.type)) {
                    if (file.size <= 5 * 1024 * 1024) {
                        filteredImages.push(file);
                    } else {
                        $("#imageSizeError").show().html(
                            `<strong>${file.name} exceeds 5MB and will be skipped.</strong>`);
                    }
                } else {
                    $("#imageSizeError").show().html(
                        `<strong>${file.name} is not a valid image type (JPEG, JPG, PNG).</strong>`);
                }
            });

            if (!description) {
                $("#description").after('<span class="text-danger">Description is required.</span>');
                $(".submit_btn").prop("disabled", false);
                return;
            }
            if (description.length < 10) {
                $("#description").after('<span class="text-danger">Description must be at least 10 letters.</span>');
                $(".submit_btn").prop("disabled", false);
                return;
            }

            if (imageFiles.length === 0 && !linkType) {
                $("#files").after('<span class="text-danger">Please upload images or select a link type.</span>');
                $(".submit_btn").prop("disabled", false);
                return;
            }

            if (linkType === "1" && !$("input[name='youtube_link']").val().trim()) {
                $("input[name='youtube_link']").after('<span class="text-danger">YouTube link is required.</span>');
                $(".submit_btn").prop("disabled", false);
                return;
            }

            if (linkType === "2") {
                const videoInput = $("input[name='video_file']")[0];
                if (!videoInput.files.length) {
                    $("input[name='video_file']").after('<span class="text-danger">Please upload a video file.</span>');
                    $(".submit_btn").prop("disabled", false);
                    return;
                }
                const videoFile = videoInput.files[0];
                if (videoFile.type !== 'video/mp4') {
                    $("input[name='video_file']").after('<span class="text-danger">Only MP4 video is allowed.</span>');
                    $(".submit_btn").prop("disabled", false);
                    return;
                }
            }

            if (linkType === "3" && !$("input[name='drive_link']").val().trim()) {
                $("input[name='drive_link']").after('<span class="text-danger">Drive link is required.</span>');
                $(".submit_btn").prop("disabled", false);
                return;
            }

            if (linkType === "4") {
                const pdfInput = $("input[name='pdf_file']")[0];
                if (!pdfInput.files.length) {
                    $("input[name='pdf_file']").after('<span class="text-danger">Please upload a PDF file.</span>');
                    $(".submit_btn").prop("disabled", false);
                    return;
                }
                const pdfFile = pdfInput.files[0];
                if (pdfFile.type !== 'application/pdf') {
                    $("input[name='pdf_file']").after('<span class="text-danger">Only PDF files are allowed.</span>');
                    $(".submit_btn").prop("disabled", false);
                    return;
                }
            }

            if (!classId) {
                $("#class").after('<span class="text-danger">Please select a class.</span>');
                $(".submit_btn").prop("disabled", false);
                return;
            }

            if (!selectAll && (!students || students.length === 0)) {
                $("#students").after('<span class="text-danger">Please select at least one student.</span>');
                $(".submit_btn").prop("disabled", false);
                return;
            }

            const formData = new FormData();
            formData.append('description', description);
            formData.append('class', classId);
            formData.append('selectAllStudents', selectAll ? 1 : 0);

            if (!selectAll) {
                students.forEach(s => formData.append('students[]', s));
            }

            filteredImages.forEach(file => formData.append('files[]', file));
            formData.append('link_type', linkType);

            if (linkType === "1") {
                formData.append('youtube_link', $('input[name="youtube_link"]').val());
            } else if (linkType === "2") {
                const videoFile = $('input[name="video_file"]')[0].files[0];
                formData.append('video_file', videoFile);
            } else if (linkType === "3") {
                formData.append('drive_link', $('input[name="drive_link"]').val());
            } else if (linkType === "4") {
                const pdfFile = $('input[name="pdf_file"]')[0].files[0];
                formData.append('pdf_file', pdfFile);
            }

            $.ajax({
                type: "POST",
                url: "{{ url('/all-addActivity') }}",
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    $(".submit_btn").prop("disabled", false);
                    $(".showUploadingProcess").addClass('d-none');
                    $("#students").prop("disabled", false);

                    if (data.status === 200) {
                        // Show loader before redirecting
                        $(".showUploadingProcess").removeClass('d-none'); // 👈 Show loader again

                        alert("Activity Added Successfully.");
                        setTimeout(() => {
                            window.location.href = "/viewactivitytracker"; // 👈 Redirect
                        }, 1200);
                    } else if (data.status === 400 && data.errors) {
                        $.each(data.errors, function(field, errorMsg) {
                            let target = $('#' + field);

                            // If not found, fallback for students
                            if (!target.length && field === 'students') {
                                target = $('#students');
                            }
                            // Remove old errors
                            target.closest('div').find('.text-danger').remove();

                            // Add new error message
                            target.closest('div').after('<span class="text-danger">' + errorMsg[0] +
                                '</span>');
                        });
                    }
                },
                error: function() {
                    $(".submit_btn").prop("disabled", false);
                    $(".showUploadingProcess").addClass('d-none');
                    $("#students").prop("disabled", false);
                    alert("Something went wrong. Please try again.");
                }
            });
        }

        $(document).ready(function() {
            handleLinkField();
            $("#linkTypeDropdown").on("change", handleLinkField);
        });
    </script>
@endsection