@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Create Community Notification</h5>
                    </div>

                    <div class="card-body">
                        <form id="frmCustomNotification">
                            <div class="mb-3 row">
                                <label for="txtTopicId" class="col-sm-3 col-form-label">Topic ID <span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-9">
                                    <input id="txtTopicId" name="txtTopicId" type="number" class="form-control" required>
                                    <div id="errorTopicId" class="text-danger small"></div>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label for="txtTitle" class="col-sm-3 col-form-label">Notification Title</label>
                                <div class="col-sm-9">
                                    <input id="txtTitle" name="txtTitle" type="text" class="form-control"
                                        value="New post on QuitSure">
                                    <small id="titleCharCount" class="text-muted">20 / 25</small>
                                    <div id="errorTitle" class="text-danger small"></div>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label for="txtBody" class="col-sm-3 col-form-label">Notification Body <span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-9">
                                    <textarea id="txtBody" name="txtBody" class="form-control" rows="3" placeholder="Write notification text..."></textarea>
                                    <small id="charCount" class="text-muted">0 / 125</small>
                                    <div id="errorBody" class="text-danger small"></div>
                                </div>
                            </div>

                            <div class="mb-3 row">
                                <label for="selRecipient" class="col-sm-3 col-form-label">Recipient <span
                                        class="text-danger">*</span></label>
                                <div class="col-sm-9">
                                    <select id="selRecipient" name="selRecipient" class="form-control">
                                        <option value="all" selected>All</option>
                                        <option value="recent30">Recent 30</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-9 offset-sm-3">
                                    <button type="button" class="btn btn-success"
                                        id="btnSubmitCustomNotification">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module">
        $("#txtTitle").on("input", function() {
            let val = $(this).val();
            let currentLength = val.length;

            $("#titleCharCount").text(currentLength + " / 25");

            if (currentLength > 25) {
                $("#errorTitle").text("Maximum 25 characters allowed.");
            } else {
                $("#errorTitle").text("");
            }
        });
        $("#txtBody").on("input", function() {
            let rawText = $(this).val();

            // Replace newlines and carriage returns with space
            rawText = rawText.replace(/[\n\r]/g, ' ');
            $(this).val(rawText); // Update textarea content

            const currentLength = rawText.length;

            // Update live character count
            $("#charCount").text(currentLength + " / 125");

            // Show error if limit exceeded
            if (currentLength > 125) {
                $("#errorBody").text("Maximum 125 characters allowed.");
            } else {
                $("#errorBody").text("");
            }
        });
        $("#btnSubmitCustomNotification").on("click", function() {
            const topicId = $.trim($("#txtTopicId").val());
            let title = $.trim($("#txtTitle").val());
            const body = $.trim($("#txtBody").val().replace(/[\n\r]/g, ' '));
            const recipient = $("#selRecipient").val();

            $(".red").html("");

            let hasError = false;
            if (!topicId) {
                $("#errorTopicId").html("Topic ID is required");
                hasError = true;
            }
            if (body.length === 0 || body.length > 125) {
                $("#errorBody").html("Notification body is required and must be <= 125 characters");
                hasError = true;
            }
            if (title.length > 25) {
                $("#errorTitle").html("Title must be <= 25 characters");
                hasError = true;
            }

            if (hasError) return;

            $.ajax({
                url: "{{ route('customNotification.create') }}",
                type: "POST",
                data: {
                    txtTopicId: topicId,
                    txtTitle: title,
                    txtBody: body,
                    selRecipient: recipient,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.Status === true) {
                        dalert.alert(response.message, "Success!", function() {
                            location.reload();
                        });

                    } else {
                        dalert.alert(response.message, "Error!");
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        if (errors.txtTopicId) $("#errorTopicId").html(errors.txtTopicId[0]);
                        if (errors.txtTitle) $("#errorTitle").html(errors.txtTitle[0]);
                        if (errors.txtBody) $("#errorBody").html(errors.txtBody[0]);
                    } else {
                        dalert.alert("Something went wrong", "Error!");
                    }
                }
            });
        });
    </script>
@endpush