@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Add Announcement</title>

@section('main-content')
    <style>
        .input {
            color: #697a8d;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }

        #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;
        }

        #loader img {
            width: 30px;
        }
    </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-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Notification</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">
                                <!-- USER TYPE DROPDOWN -->
                                <div class="mb-3">
                                    <label class="form-label">User Type</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bx bx-user"></i>
                                        </span>
                                        <select name="usertype" id="usertypeSelect" class="form-control">
                                            <option value="1">All</option>
                                            <option value="2">Teacher</option>
                                            <option value="3">Parent</option>
                                            <option value="4">Class</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- Class list dropdown (hidden by default) -->
                                <div class="mb-3 d-none" id="classSection">
                                    <label class="form-label">Select Class</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bx bx-user"></i>
                                        </span>
                                        <select name="class_id" id="class_id" class="form-control">
                                            <option value="">Select Class</option>
                                            @foreach ($class as $clas)
                                                <option value="{{ $clas->id }}">{{ $clas->class_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3 d-none" id="studentSection">
                                    <label class="form-label">Select Students</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="bx bx-user"></i>
                                        </span>
                                        <select name="student_ids[]" id="student_ids" class="form-control" multiple>
                                            <option value="">Select Student</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Notification Type</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <select name="notificationType" id="notificationType"
                                            class="form-control input form-control-line">
                                            <option value="general">General</option>
                                            <option value="scheduled">Scheduled</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3 notification_time_class" style="display:none">
                                    <label class="form-label" for="time">Notification Date</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                class="bx bx-user"></i></span>
                                        <input type="date" name="time" id="time"
                                            class="form-control input form-control-line" autocomplete="off" required>
                                    </div>
                                    <small>You cannot select a date earlier than tomorrow.</small>
                                </div>
                                <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-window'></i></span>
                                        <input type="text" name="title" id="title" placeholder="Title"
                                            class="form-control input form-control-line" minlength="3" maxlength="250"
                                            autocomplete="off">
                                    </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>
        // Show/Hide class + student sections
        $('#usertypeSelect').on('change', function() {
            if ($(this).val() == 4) {
                $('#classSection').removeClass('d-none');
                $('#studentSection').removeClass('d-none');
            } else {
                $('#classSection').addClass('d-none');
                $('#studentSection').addClass('d-none');
                $('#class_id').val('');
                $('#student_ids').html('<option value="">Select Student</option>');
            }
        });
    </script>
    <script>
        // Load students when CLASS is selected
        $('#class_id').on('change', function() {

            let class_id = $(this).val();
            $('#student_ids').html('<option>Loading...</option>');

            if (class_id == '') {
                $('#student_ids').html('<option value="">Select Student</option>');
                return;
            }

            $.ajax({
                url: '/get-students/' + class_id,
                type: 'GET',
                success: function(res) {

                    $('#student_ids').html(''); // Clear old

                    if (res.success && res.data.length > 0) {

                        $.each(res.data, function(index, student) {
                            $('#student_ids').append(`
                            <option value="${student.uuid}">
                                ${student.first_name} ${student.last_name}
                            </option>
                        `);
                        });

                    } else {
                        $('#student_ids').html('<option>No students found</option>');
                    }
                }
            });
        });
    </script>
    <script>
        const input = document.getElementById('time');
        const now = new Date();
        const nextDate = new Date(now);

        // Set the date to tomorrow
        nextDate.setDate(now.getDate() + 1);

        // Set the default value to the next date
        input.value = formatDateTimeLocal(nextDate);

        // Disable all previous dates
        input.setAttribute('min', formatDateTimeLocal(nextDate));

        // Function to format date in YYYY-MM-DD format
        function formatDateTimeLocal(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');

            return `${year}-${month}-${day}`;
        }
    </script>

    <script>
        document.getElementById('notificationType').addEventListener('change', function(e) {
            e.preventDefault();
            // Get the selected value
            const selectedValue = this.value;

            // Get the notification time class element
            const notificationTimeClass = document.querySelector('.notification_time_class');

            // Check the selected value and show or hide the notification time class
            if (selectedValue === 'general') {
                notificationTimeClass.style.display = 'none'; // Hide
            } else {
                notificationTimeClass.style.display = 'block'; // Show
            }
        });
    </script>

    <script>
        // $( document ).ready(function() {
        function getannouncement() {
            $('.text-danger').remove();
            $('#loader').show();
            $(".save_btn").prop("disabled", true);
            var formData = new FormData();
            var title = $('#title').val();
            var content = $('#content').val();
            var usertype = $('#usertypeSelect').val(); // Correct select id
            var class_id = $('#class_id').val(); // Class select
            var notificationType = $('#notificationType').val();
            var time = $('#time').val();
            // Validation: If usertype = Class (4), class_id must be selected
            if (usertype == 4 && (class_id == "" || class_id == null)) {
                $('#class_id').closest('div').after('<span class="text-danger">Please select a class.</span>');
                $(".save_btn").prop("disabled", false);
                $('#loader').hide();
                return false;
            }
            // Validate time: it should be greater than one hour ahead of now
            var selectedTime = new Date(time);
            var currentTimePlusOneHour = new Date();
            currentTimePlusOneHour.setHours(currentTimePlusOneHour.getHours() + 1);
            if (selectedTime <= currentTimePlusOneHour) {
                // Display an error message if the time is not valid
                $('#time').closest('div').after(
                    '<span class="text-strong text-danger">Time must be at least one hour ahead.</span>');
                $(".save_btn").prop("disabled", false);
                $('#loader').hide(); // Hide loader if validation fails
                return; // Stop further execution
            }
            var student_ids = $('#student_ids').val(); // array
            formData.append('student_ids', JSON.stringify(student_ids));

            formData.append('title', title);
            formData.append('content', content);
            formData.append('usertype', usertype);
            formData.append('class_id', class_id);
            formData.append('notificationType', notificationType);
            formData.append('time', time);

            $.ajax({
                type: "post",
                url: "{{ route('notifications.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 (data.success) {
                        // Check if 'redirect' key exists
                        if (data.redirect) {
                            // Redirect to the specified URL
                            window.location.href = data.redirect;
                        }
                    } else {
                        // Handle errors
                        $.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