@extends('layouts.admin_dynamic')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

    <div class="content-wrapper">
    <div class=" mx-auto bg-white p-6 rounded-lg shadow-lg">
        <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">Send Message to Users</h1>

        <!-- User Selection -->
        <div class="mb-6">
            <label for="userSelect" class="block text-sm font-medium text-gray-700">Select Users</label>
            <select id="userSelect" class="select2 w-full mt-1 block p-2 border border-gray-300 rounded-md" multiple="multiple">
                @foreach($users as $user)
                <option value="{{ $user->id }}">{{ $user->name }}</option>
            @endforeach
            </select>
        </div>

        <!-- Message Type Selection -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">Message Type</label>
            <div class="flex items-center">
                <label class="inline-flex items-center mr-4">
                    <input type="radio" class="form-radio text-blue-600" name="messageType" value="email" checked>
                    <span class="ml-2 text-gray-700">Email</span>
                </label>
                <label class="inline-flex items-center mr-4">
                    <input type="radio" class="form-radio text-blue-600" name="messageType" value="sms">
                    <span class="ml-2 text-gray-700">SMS</span>
                </label>
                <label class="inline-flex items-center">
                    <input type="radio" class="form-radio text-blue-600" name="messageType" value="both">
                    <span class="ml-2 text-gray-700">Both</span>
                </label>
            </div>
        </div>
  <!-- Message Template Selection -->
  <div class="mb-6">
    <label class="block text-gray-700 font-semibold mb-2" for="messageTemplateSelect">Select Message Template</label>
    <select id="messageTemplateSelect" class="w-full p-2 border border-gray-300 rounded">
        <option value="">Write a new message...</option>
        @foreach($templates as $temp)
        <option 
            value="{{ $temp->id }}" 
            data-subject="{{ $temp->subject }}" 
            data-email-content="{{ $temp->email_content }}" 
            data-sms-content="{{ $temp->sms_content }}">
            {{ $temp->name }}
        </option>
    @endforeach
    </select>
</div>


        <!-- Email and SMS Template -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <!-- Email Template -->
            <div id="emailTemplateSection">
                <div class="bg-yellow-100 p-4 rounded-t-lg">
                    <h2 class="text-lg font-semibold text-gray-700">Email Template</h2>
                </div>
                <div class="border border-gray-300 rounded-b-lg p-4">
                    <div class="mb-4">
                        <label for="emailSubject" class="block text-sm font-medium text-gray-700">Subject</label>
                        <input type="text" id="emailSubject" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" placeholder="Enter email subject">
                    </div>
                    <div>
                        <label for="emailMessage" class="block text-sm font-medium text-gray-700">Message</label>
                        <textarea id="emailMessage" rows="10" class="mt-1 block w-full border border-gray-300 rounded-md"></textarea>
                        <small class="form-text text-muted">Word count: <span id="email_word_count">0</span></small>

                    </div>
                </div>
            </div>

            <!-- SMS Template -->
            <div id="smsTemplateSection">
                <div class="bg-yellow-100 p-4 rounded-t-lg">
                    <h2 class="text-lg font-semibold text-gray-700">SMS Template</h2>
                </div>
                <div class="border border-gray-300 rounded-b-lg p-4">
                    <div>
                        <label for="smsMessage" class="block text-sm font-medium text-gray-700">Message</label>
                        <textarea id="smsMessage" rows="12" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" placeholder="Enter SMS message"></textarea>
                        <small class="form-text text-muted">Word count: <span id="sms_word_count">0</span></small>

                    </div>
                </div>
            </div>
        </div>

        <!-- Send Button -->
        <div class="text-center">
            <button id="sendMessage" class="bg-blue-600 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-700 transition duration-200">Send Message</button>
        </div>
    </div>
</div>
    <script>


$('#messageTemplateSelect').on('change', function() {
    var selectedOption = $(this).find('option:selected');
    var selectedTemplateId = $(this).val();
    
    if (selectedTemplateId) {
        var subject = selectedOption.data('subject');
        var emailContent = selectedOption.data('email-content');
        var smsContent = selectedOption.data('sms-content');
        
        // Set the email content in Summernote
        $('#emailSubject').val(subject);

        $('#emailMessage').summernote('code', emailContent);

        // Set the SMS content in the textarea
        $('#smsMessage').val(smsContent);
    } else {
        $('#emailMessage').summernote('code', '');
        $('#smsMessage').val('');
    }
});



        // Initialize Select2 for searchable multi-select
        $('#userSelect').select2();

        // Initialize  for email message
        $('#emailMessage').summernote({
            height: 300,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
            ],
            callbacks: {
                onChange: function(contents, $editable) {
                    updateWordCount('emailMessage', 'email_word_count');
                }
            }
        });

        $('#sms_content').on('input', function() {
            updateWordCount('sms_content', 'sms_word_count');
        });

        // Initial word count
        updateWordCount('emailMessage', 'email_word_count');
        updateWordCount('smsMessage', 'sms_word_count');

        function updateWordCount(textareaId, counterId) {
        let content = '';
        if (textareaId === 'emailMessage') {
            content = $('#' + textareaId).summernote('code');
            // Remove HTML tags for accurate word count
            content = content.replace(/<[^>]*>/g, ' ');
        } else {
            content = $('#' + textareaId).val();
        }
        const words = content.trim().split(/\s+/).filter(function(word) {
            return word.length > 0;
        });
        $('#' + counterId).text(words.length);
    }
        // Show/Hide templates based on message type selection
        $('input[name="messageType"]').on('change', function() {
            let selectedType = $(this).val();
            if (selectedType === 'email') {
                $('#emailTemplateSection').show();
                $('#smsTemplateSection').hide();
            } else if (selectedType === 'sms') {
                $('#emailTemplateSection').hide();
                $('#smsTemplateSection').show();
            } else {
                $('#emailTemplateSection').show();
                $('#smsTemplateSection').show();
            }
        });

        // Initial visibility based on the default selected radio button
        $('input[name="messageType"]:checked').trigger('change');

        // Handle send message button click
        $('#sendMessage').on('click', function() {
            let selectedUsers = $('#userSelect').val();
            let messageType = $('input[name="messageType"]:checked').val();
            let emailSubject = $('#emailSubject').val();
            let emailMessage = $('#emailMessage').summernote('code');
            let smsMessage = $('#smsMessage').val();

            // Validation (you can enhance this as needed)
            if (!selectedUsers.length) {
                Swal.fire('Error', 'Please select at least one user.', 'error');
                return;
            }

            if (messageType === 'email' && (!emailSubject || !emailMessage)) {
                Swal.fire('Error', 'Please fill out the email subject and message.', 'error');
                return;
            }

            if (messageType === 'sms' && !smsMessage) {
                Swal.fire('Error', 'Please fill out the SMS message.', 'error');
                return;
            }

            if (messageType === 'both' && (!emailSubject || !emailMessage) && !smsMessage) {
                Swal.fire('Error', 'Please fill out the missing details.', 'error');
                return;
            }

            // Example AJAX request (you would replace this with your actual endpoint)
            $.ajax({
                url: '/Notification/send-message',
                method: 'POST',
                data: {
                    users: selectedUsers,
                    type: messageType,
                    email_subject: emailSubject,
                    email_message: emailMessage,
                    sms_message: smsMessage
                },
                success: function(response) {
                    Swal.fire('Success', 'Messages have been sent!', 'success');
                },
                error: function(error) {
                    Swal.fire('Error', 'Something went wrong. Please try again.', 'error');
                }
            });
        });
    </script>

@endsection