@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Meal plan</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;
    }

    .twoLine_p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>



{{-- <link rel="stylesheet" href="{{ asset('assets/css/card_inside_data_table.css') }}"> --}}
<link rel="stylesheet" href="{{ URL::asset('assets/multi_select/multiselect_style.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">
            <div class="row">

                <div class="col-6">
                    <h4 class="fw-bold py-3 mb-4"> Add New Plan </h4>
                </div>
                @php
                    $yearRange = session('year_range'); // Example: "2023-2024"
                    $currentDate = now();
                    [$startYear, $endYear] = explode('-', $yearRange);

                    $startDate = \Carbon\Carbon::create($startYear, 4, 1, 0, 0, 0); // April 1st
                    $endDate = \Carbon\Carbon::create($endYear, 3, 31, 23, 59, 59); // March 31st
                @endphp
                @if ($currentDate->between($startDate, $endDate))
                    <div class="col-6">
                        <div class="text-end upgrade-btn">
                            <a href="/planner" class="btn btn-primary text-white">Add Planner</a>
                        </div>
                    </div>
                @endif
                <div class="">
                    {{-- <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Meal Planner</span></h4> --}}
                    <div class="row">
                        <div class="card pb-3 ms-2">
                            <h5 class="mt-3">Planner</h5>
                            <div class="table dataTable text-nowrap dtbl_dropdown">
                                <table class="table" id="services">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>classes</th>
                                            <th>Title</th>
                                            <th class="text-nowrap">Start Date</th>
                                            <th class="text-nowrap">End Date</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-border-bottom-0">
                                        @if (count($mealPlans) != 0)
                                            @foreach ($mealPlans as $key => $mealPlan)
                                                <tr id="row_{{ $key }}">
                                                    <td class="ps-3">{{ $key + 1 }}</td>
                                                    {{-- <td class="ps-3">
                                                        <a href="{{ $mealPlan->file }}" target="_blank">
                                                            {{ $mealPlan->file }}
                                                        </a>
                                                    </td> --}}


                                                    <td class="ps-3">
                                                        {{ \App\Models\ClassPackageInformation::where('login_id', $mealPlan->teacher_id)->value('class_name') ?? 'N/A' }}
                                                    </td>
                                                    <td class="ps-3">
                                                        <p class="twoLine_p">{{ $mealPlan->title }}</p>
                                                    </td>
                                                    <td class="ps-3 text-nowrap">
                                                        {{ date('d-m-Y', strtotime($mealPlan->start_date)) }}
                                                    </td>
                                                    <td class="ps-3 text-nowrap">
                                                        {{ date('d-m-Y', strtotime($mealPlan->end_date)) }}
                                                    </td>

                                                    <td>
                                                        <div class="dropdown text-center">
                                                            <button type="button"
                                                                class="btn p-0 dropdown-toggle hide-arrow"
                                                                data-bs-toggle="dropdown">
                                                                <i class="bx bx-dots-vertical-rounded"></i>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="{{ $mealPlan->file }}"
                                                                    target="_blank"><i class="bx bx-show-alt me-1"></i>
                                                                    View
                                                                </a>
                                                                @if ($currentDate->between($startDate, $endDate))
                                                                    <a class="dropdown-item"
                                                                        href="/editplanner/{{ $mealPlan->id }}">
                                                                        <i class="bx bx-edit-alt me-1"></i> Edit
                                                                    </a>

                                                                    <form method="POST"
                                                                        action="{{ route('deleteplanner', $mealPlan->id) }}">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit" class="dropdown-item"
                                                                            onclick="return confirm('Are you sure, you want to remove plan?');">
                                                                            <i class="bx bx-trash me-1"></i> Delete
                                                                        </button>
                                                                    </form>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td><span>{{ 'No record found' }}</span></td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </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 src="{{ URL::asset('assets/multi_select/multi_select_myWork1.js') }}"></script>
    <!-- Include Toastr CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <!-- Toastr Notification -->
    <script>
        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif
    </script>
    {{-- <script>
        // script.js
        var files = []; // Initialize files outside the function to maintain its contents
        var sizeExceedLimit = false;
        var imageInput = document.getElementById('imageInput');
        var imageContainer = document.getElementById('imageContainer');
        var popup = document.getElementById('popup');
        var closeButton = document.querySelector('.close-button');
        var 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 calculateTotalAmount() {

        }

        function handleFileSelect(event) {
            var input = event.target;
            var 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++) {

                var reader = new FileReader();
                reader.onload = function(e) {
                    var imageWrapper = document.createElement('div');
                    imageWrapper.classList.add('image-wrapper');

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

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

                    // Create and append the size element
                    var sizeElement = document.createElement('div');
                    sizeElement.classList.add('image-size');

                    var 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 => {
                var 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() {
            var currentImageCount = imageContainer.childElementCount;

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

        function openFileInput() {
            imageInput.click();
        }


        function save_description() {
            $("#imageInput").prop("disabled", true);
            $('.text-danger').remove();
            $(".save_description").prop("disabled", true);
            let formData = new FormData();
            const description = ($("#description").val()).trim();
            const class_name = ($('#class').val()).trim();
            formData.append('class', class_name);
            formData.append('description', description);
            $.ajax({
                type: "post",
                url: "{{ url('/class-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);
                }
            });
        };

        function submit_btn() {

            $(".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', ValueArray);
            const class_name = ($('#class').val()).trim();
            formData.append('class', class_name);

            $.ajax({
                type: "post",
                url: "{{ url('/class-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> --}}

@endsection