@extends('layouts.app')

@section('title', 'Create New Email 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 Email Template</h4>
            <a href="{{ route('templates.index', ['tab' => 'email']) }}" 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('email-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>

                {{-- Template Types --}}
                {{-- <div class="form-group">
                    <label for="type">Template Type</label>
                    <select name="type" id="type" class="form-control" required>
                        <option value="">Select a type</option>
                        <option value="lead_email">Lead Email</option>
                        <option value="lead_thank_you">Lead Thank you</option>
                    </select> --}}

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

                {{-- Email Body with Summernote --}}
                <div class="form-group">
                    <label for="body">Email Body</label>
                    <textarea name="body" id="body" class="form-control" required></textarea>
                    <small>Use the variable buttons to insert dynamic content into the email body.</small>
                </div>

                {{-- Submit Button --}}
                <button type="submit" class="btn btn-primary mt-3">Save Template</button>
                <a href="{{ route('templates.index', ['tab' => 'email']) }}" 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() {
            $('#body').summernote({
                height: 300, // Set editor height
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen']],
                    ['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="@{assigned_agent_name}">@{assigned_agent_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="@{latest_policy_carrier_website}">@{latest_policy_carrier_website}</option>
                                    <option value="@{latest_policy_effective_date}">@{latest_policy_effective_date}</option>
                                    <option value="@{latest_policy_premium_due}">@{latest_policy_premium_due}</option>
                                    <option value="@{assigned_policy_agent_name}">@{assigned_policy_agent_name}</option>
                                    <option value="@{product_name}">@{product_name}</option>
                                    <option value="@{policy_number}">@{policy_number}</option>
                                    <option value="@{company_phone_number}">@{company_phone_number}</option>
                                    <option value="@{business_hours}">@{business_hours}</option>
                                </select>
                            </div>
                        `;
                    }
                },
                callbacks: {
                    onInit: function() {
                        console.log('Summernote is ready');
                        // Initialize Bootstrap dropdowns
                        $('.dropdown-toggle').dropdown();
                    }
                }
            });

            // 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