@extends('layouts.master')
@section('contain')
    {{-- title --}}
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            @if (isset($announcement))
                <h4 class="card-title">Update Announcment</h4>
            @else
                <h4 class="card-title">Invite Users</h4>
            @endif
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active"><a class="text-cyan" href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item active">
                        <a href="{{ Route('invite.index') }}" class="text-cyan">Invite Management</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    {{-- end title --}}
    <div class="row">
        <div class="col-12">
            <div class="card card-body">
                <div class="row">
                    <style>
                        .email-tag {
                            display: inline-block;
                            background-color: #007bff;
                            color: white;
                            padding: 0.25rem 0.75rem;
                            margin-right: 0.5rem;
                            border-radius: 0.25rem;
                            margin-top: 0.25rem;
                        }

                        .email-tag .remove-email {
                            margin-left: 0.5rem;
                            cursor: pointer;
                        }

                        .input-danger {
                            border-color: #dc3545 !important;
                            /* Red color */
                        }
                    </style>
                    <div class="col-sm-6 col-xs-12">
                        @if (isset($announcement))
                            <form method="POST" action="{{ Route('announcement.update', $announcement->id) }}"
                                enctype="multipart/form-data" data-parsley-validate>
                                @csrf
                            @else
                                <form method="POST" action="{{ Route('send.Invites') }}" enctype="multipart/form-data"
                                    data-parsley-validate>
                                    @csrf
                        @endif
                        <div class="container mt-3">
                            <div id="email-input-container" class="form-group">
                                <label for="email-input">Enter Emails:</label>
                                <input type="text" id="email-input" class="form-control"
                                    placeholder="Add an email and press enter...">
                                <div id="email-tags" class="mt-2">
                                    <!-- Email tags will appear here -->
                                </div>
                            </div>
                            <button type="submit" class="btn btn-success me-2 text-white">Submit</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const emailInput = document.getElementById('email-input');
        const emailTags = document.getElementById('email-tags');
        const emails = [];

        function removeEmail(index) {
            emails.splice(index, 1);
            renderEmails();
        }

        function renderEmails() {
            emailTags.innerHTML = '';
            emails.forEach((email, index) => {
                const emailTag = document.createElement('span');
                emailTag.className = 'email-tag';
                emailTag.textContent = email;
                const removeBtn = document.createElement('span');
                removeBtn.className = 'remove-email';
                removeBtn.textContent = 'x';
                removeBtn.onclick = () => removeEmail(index);
                emailTag.appendChild(removeBtn);
                emailTags.appendChild(emailTag);
                // Add hidden input field with email value
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'emails[]'; // Array name
                hiddenInput.value = email;
                emailTags.appendChild(hiddenInput);
            });
        }

        emailInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                const email = emailInput.value.trim();
                // Validate email format and required field
                if (email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    // Check for duplicate email
                    if (!emails.includes(email)) {
                        // Add the email to the array and render
                        emails.push(email);
                        renderEmails();
                        // Remove error class if it exists
                        emailInput.classList.remove('input-danger');
                    } else {
                        // Show error message and add error class
                        emailInput.classList.add('input-danger');
                        emailInput.placeholder = 'Duplicate email!';
                    }
                } else {
                    // Show error message for invalid email format or empty field
                    emailInput.classList.add('input-danger');
                    emailInput.placeholder = 'Invalid email!';
                }
                emailInput.value = '';
                event.preventDefault();
            }
        });
    </script>
    <script>
        // $(document).ready(function() {
        //     var exampleUrl = "http://example.com";
        //     var errorMessage = "Please enter a valid HTTP URL. Example: " + exampleUrl;
        //     $('#exampleInputEmail111').parsley().on('field:error', function() {
        //         var errorElement = $(this.$element).closest('.form-group').find(
        //             '.parsley-errors-list.filled');
        //         errorElement.html(errorMessage);
        //     });
        // });
    </script>
@endsection