@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Add Home Work</title>

@section('main-content')
    <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" />
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />

    <style>
        .input {
            color: black
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #students {
            display: inline-block !important;
            width: auto !important;
            margin-left: 5px;
            border-color: #697a8d;
        }

        #loader img {
            width: 30px;
        }

        .select2-selection {
            border-color: #dae0e7 !important;
        }

        /* Styles for the Select2 dropdown when focused or hovered */
        .select2-container--focus .select2-selection,
        .select2-selection:hover {
            border-color: #696cff !important;
        }

        /* Styles for the Select2 dropdown when active (clicked) */
        .select2-container--open .select2-selection {
            border-color: #696cff !important;
        }

        .select2-selection--single .select2-selection__rendered {
            color: #697a8d !important;
        }

        .custom_select12 .select2-container .selection .select2-selection {
            height: 38px;
        }

        .custom_select12 .select2-container .selection .select2-selection .select2-selection__rendered {
            height: 100%;
            line-height: 2.3;
        }

        .custom_select12 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100%;
        }

        .multiSelect_inputGroup .select2-container--default .select2-selection--multiple .select2-selection__choice {
            line-height: 1.6;
        }

        /* img card */
        .d_img_row {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .d_img_box {
            position: relative;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            padding: 10px;
            flex: 0 0 calc(25% - 12px);
        }

        .d_img_box img {
            border-radius: 10px;
        }

        .close_img_span {
            position: absolute;
            top: -8px;
            right: -8px;
            cursor: pointer;
            color: red;
        }

        .close_img_span i {
            font-size: 22px;
        }

        .d_img_box img {
            border-radius: 10px;
            height: 250px;
            object-fit: contain;
            width: 100%;
            background-color: #f1f1f1;
        }

        /* //img card */
    </style>

    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <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"></span> Add New Home Work</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Notifcation Details</h5>
                            <!-- <small class="text-muted float-end">Merged input group</small> -->
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label" for="basic-icon-default-fullname">Title</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                            class="bx bx-paste"></i></span>
                                    <input type="text" name="title" id="title" placeholder="Title name"
                                        class="form-control input form-control-line" minlength="3" maxlength="30"
                                        value="{{ $homework->title }}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Upload Image</label>
                                    <input type="file" name="images[]" id="images" placeholder="Images"
                                        class="form-control input form-control-line" accept="image/*" multiple
                                        onchange="previewImages()">
                                </div>
                                <div class="d_img_row">
                                    @php
                                          $images = App\Models\HomeWorkImage::select(DB::raw("CONCAT('$cdn', image) AS image"),'id')
                                            ->where('home_work_id', $homework->id)
                                            ->get()
                                            ->pluck('image','id')
                                            ->toArray();
                                    @endphp
                                    @foreach ($images as $key => $image)
                                        <div class="d_img_box">
                                            <img src="{{ $image }}" alt="">
                                            <span class="close_img_span" onclick="deleteimage('{{ $key }}')"><i
                                                    class='bx bxs-x-circle'></i></span>
                                        </div>
                                    @endforeach
                                </div>
                                <h3 id="new-images-heading" style="display: none" class="mt-4">New Images:</h3>

                                <div id="image-preview-container" class="mt-3"></div>

                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="basic-icon-default-fullname">Today Work Description</label>
                                <div id="today_work" class="form-control" style="height: 150px;">{!! $homework->html !!}
                                </div>


                            </div>


                            <div class="form-group loaderbtn_div">
                                <button type="button" class="btn btn-success text-white save_btn"
                                    onclick="saveWork('{{ $homework->id }}')">Save</button>
                                <div class="loaderDiv" id="loader" style="display: none;">
                                    <!-- Your loader HTML or spinner goes here -->
                                    <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>

    <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>
    <!-- Include the Quill library -->
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
        const quill = new Quill('#today_work', {
            theme: 'snow'
        });
    </script>

    <script>
        function deleteimage(imageId) {
            if (!confirm("Are you sure you want to delete this image?")) return;

            $.ajax({
                url: '/homework/delete-image/' + imageId,
                type: 'delete',
                data: {
                    _token: '{{ csrf_token() }}' // Pass CSRF token for security
                },
                success: function(response) {
                    if (response.success) {
                        alert(response.success);
                        location.reload(); // Reload to update UI
                    } else {
                        alert("Error deleting image.");
                    }
                },
                error: function(xhr) {
                    alert("Something went wrong! Please try again.");
                }
            });
        }
    </script>

    <script>
        // $( document ).ready(function() {
        function saveWork(id) {
            $('.text-danger').remove();
            $(".save_btn").prop("disabled", true);
            $('#loader').show();
            $(".text-danger").remove();
            $(".submit_btn").prop("disabled", true);

            var formData = new FormData();
            formData.append('id', id);
            var title = $.trim($('#title').val());
            formData.append('title', title);
            var today_work = $.trim($('.ql-editor').text());
            formData.append('today_work', today_work);
            var today_work_text = $.trim($('.ql-editor').html());
            formData.append('today_work_text', today_work_text);

            const images = $('#images').prop('files');
            if (images.length > 0) {
                for (let i = 0; i < images.length; i++) {
                    formData.append(`images[${i}]`, images[i]);
                }
            }
            $.ajax({
                type: "post",
                url: "{{ route('home-work.store') }}",
                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) {
                    if ($.isEmptyObject(data.error)) {
                        window.location.href = data.success;
                    } else {
                        // printErrorMsg(data.error);
                        $.each(data.error, function(field_name, error) {
                            // Check if the error message for the field already exists
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error + '</span>');
                            }
                        });
                    }
                    $(".save_btn").prop("disabled", false);
                },
                error: function() {
                    // Hide loader in case of an error
                    $('#loader').hide();
                    $(".save_btn").prop("disabled", false);
                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#loader').hide();
                    $(".save_btn").prop("disabled", false);
                }

            })
        }

        function previewImages() {
            const imageInput = document.getElementById('images');
            const previewContainer = document.getElementById('image-preview-container');
            previewContainer.innerHTML = '';
            const files = imageInput.files;
            if (files.length > 0) {
                $('#new-images-heading').show();
            } else {
                $('#new-images-heading').hide();
            }
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(event) {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.style.width = '300px';
                    img.style.objectFit = 'contain';
                    previewContainer.appendChild(img);
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
@endsection