@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Add Announcement</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" />

    <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;
        }
    </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 Notification</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">
                            <form method="POST" action="{{ url('add-new-announcement') }}" enctype="multipart/form-data">
                                <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="500"
                                            onkeydown="return /[a-zA-Z\s]/i.test(event.key)">
                                    </div>
                                </div>
                                <div class="mb-3 selecting_student">
                                    <label class="form-label" for="basic-icon-default-fullname">Select Student</label>
                                    <div class="input-group mb-2 custom_select12 multiSelect_inputGroup">
                                        <select name="students" id="students" class="form-select input form-control-line"
                                            {{ count($student_list) == 0 ? 'disabled' : '' }} multiple>
                                            @if (count($student_list) > 0)
                                                @foreach ($student_list as $student)
                                                    <option value="{{ $student->id }}">
                                                        {{ $student->first_name . ' ' . $student->last_name }}</option>
                                                @endforeach
                                            @else
                                                <option>No Student Found</option>
                                            @endif
                                        </select>
                                    </div>
                                    <div></div>
                                    <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>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Content/Description</label>
                                    <div class="input-group input-group-merge">
                                        <textarea id="content" name="content" rows="8" class="form-control input form-control-line"
                                            style="max-height: 250px;" maxlength="5000"></textarea>
                                    </div>
                                    <div class="text-end">Max Description: 5000 characters</div>
                                </div>

                                <div class="form-group loaderbtn_div">
                                    <button type="button" class="btn btn-success text-white save_btn"
                                        onclick="getannouncement()">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>
                            </form>
                        </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>

    <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");
                    $(".selecting_student .text-danger").addClass("d-none");
                    $("#students").prop("disabled", true);
                } else {
                    $(".multiSelect_inputGroup").removeClass("d-none");
                    $(".selecting_student .text-danger").removeClass("d-none");
                    $("#students").prop("disabled", false);

                }
            });

            $(".submit_btn").on("click", function() {
                $(".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();
                formData.append('selectAllStudents', selectAllStudents);
                formData.append('students', students);
                // console.log(formData);

                $.ajax({
                    type: "post",
                    url: "{{ route('teacherannouncements.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) {
                        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>
        // $( document ).ready(function() {
        function getannouncement() {
            $('.text-danger').remove();
            $(".save_btn").prop("disabled", true);
            $('#loader').show();
            $(".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();

            var formData = new FormData();
            var batch_id = $('#batch_id').val();
            var title = $.trim($('#title').val());
            var content = $.trim($('#content').val());

            formData.append('title', title);
            formData.append('content', content);
            formData.append('selectAllStudents', selectAllStudents);
            formData.append('students', students);

            $.ajax({
                type: "post",
                url: "{{ route('teacherannouncements.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);
                }

            })
        }
    </script>
@endsection