@extends('layouts.app')

@section('title', 'Create New SMS Template')

@section('page-specific-style')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<style>
        .note-dropdown-menu.show {
            display: block !important;
            position: absolute;
            z-index: 1050;
        }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-size-18">Create New SMS Template</h4>
            <a href="{{ route('templates.index', ['tab' => 'sms']) }}" class="btn btn-sm btn-info" title="Back">
                <i class="bx bx-arrow-back"></i>
            </a>
        </div>
    </div>

    {{-- Form for creating a new template --}}
    <div class="card">
        <div class="card-body">
            <form action="{{ route('sms-templates.store') }}" method="POST">
                @csrf

                {{-- Template Name --}}
                <div class="form-group">
                    <label for="name">Template Name</label>
                    <input type="text" name="name" id="name" class="form-control" required>
                </div>

                {{-- Email Body with Summernote --}}
                <div class="form-group">
                    {{-- <label for="body">Message</label> --}}
                    <div id="char-count">0/320 characters</div>
                    <textarea name="content" id="body" class="form-control" maxlength="320" required></textarea>
                    <small>Use the variable buttons to insert dynamic content into the sms message.</small>
                </div>

                {{-- Submit Button --}}
                <button type="submit" class="btn-store btn btn-primary mt-3">Save Template</button>
                <a href="{{ route('templates.index', ['tab' => 'sms']) }}" class="btn btn-secondary mt-3">Cancel</a>
            </form>
        </div>
    </div>
</div>
@endsection

@section('page-specific-script')
    <!-- Include Summernote CSS and JS -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

    <script>
        $(document).ready(function() {
            const MAX_CHAR_LIMIT = 320;

            $('#body').summernote({
                height: 300, // Set editor height
                toolbar: [
                    ['mybutton', ['selectOptions']] // Add the custom select button
                ],
                buttons: {
                    selectOptions: function() {
                        return `
                            <div class="dropdown">
                                <select class="form-select" id="optionsSelect">
                                    <option value="">Select a variable</option>
                                    <option value="@{customer_name}">@{customer_name}</option>
                                    <option value="@{phone_number}">@{phone_number}</option>
                                    <option value="@{latest_policy_name}">@{latest_policy_name}</option>
                                    <option value="@{latest_policy_carrier}">@{latest_policy_carrier}</option>
                                    <option value="@{latest_policy_monthly_premium}">@{latest_policy_monthly_premium}</option>
                                    <option value="@{latest_policy_annualized_premium}">@{latest_policy_annualized_premium}</option>
                                    <option value="@{product_name}">@{product_name}</option>
                                    <option value="@{policy_number}">@{policy_number}</option>
                                </select>
                            </div>
                        `;
                    }
                },
                callbacks: {
                    onInit: function() {
                        $('.dropdown-toggle').dropdown();
                    },

                    onChange: function(contents, $editable) {
                        updateCharCount();  // Update character count on content change
                    }
                }
            });

            function updateCharCount() {
                const content = $('#body').summernote('code');
                const text = $(content).text();
                const remainingChars = MAX_CHAR_LIMIT - text.length;

                const totalTypedChars = text.length;

                $('#char-count').text(`${totalTypedChars}/${MAX_CHAR_LIMIT}` + ' characters');

                if (totalTypedChars > MAX_CHAR_LIMIT) {
                    $('.btn-store').prop('disabled', true);
                    $('#char-count').css('color', 'red');
                } else {
                    $('.btn-store').prop('disabled', false);
                    $('#char-count').css('color', 'black');
                }
            }

            // Event listener for select option
            $(document).on('change', '#optionsSelect', function() {
                var selectedValue = $(this).val();
                if (selectedValue) {
                    $('#body').summernote('insertText', selectedValue); // Insert selected option at cursor position
                    $(this).val(''); // Reset the select
                }
            });
        });
    </script>
@endsection