@extends('layouts.layout')
@section('title', 'email template')

@section('content')
@include('settings.setting_sidebar')
<div class="tab-content-wrap">

<div class="tab-panel" id="setEmailTemplate">
            <div class="pb-4">
                <h3>Choose Email To Edit</h3>
            </div>
            <form method="post" action="{{ url('setting/update-email-template') }}"  id="add-email-template">
                @csrf
                <input type="hidden" name="id" id="id">
                <!-- <div class="form-wrap style-input">
                <div class="row d-lg-flex align-items-center">
                    <div class="col-12">
                        <label for="module" class="mb-lg-0 style-label with-value">Choose Email Module</label>
                        <select class="form-select" id="module" name="module">
                           <option value="">Select Option</option>  
                           @if(isset($setting_email_module))
                                @foreach($setting_email_module as $key=>$value)
                                <option value="{{$value['id']}}">{{$value['name']}}</option>
                            @endforeach
                            @endif
                        </select>
                        </div>
                </div>
            </div> -->
            <div class="fixedBtnOuter">
                <div class="container">
                    <div class="d-flex justify-content-end ">
                        <button type="submit" class="btn">Save</button>
                    </div>
                   
                </div>
            </div>
            <div class="form-wrap style-input">
                <div class="row d-lg-flex align-items-center">
                    <div class="col-12">
                        <label for="change_email_template" class="mb-lg-0 style-label with-value">Choose Email To Edit</label>
                        <select class="form-select" id="change_email_template" name="email">
                           <option value="">Select Option</option>  
                           @if(isset($setting_email_template))
                                @foreach($setting_email_template as $key=>$value)
                                <option value="{{$value['id']}}">{{$value['email']}}</option>
                            @endforeach
                            @endif
                        </select>
                        </div>
                </div>
            </div>
            <div class="form-wrap style-input">
                <div class="row d-lg-flex align-items-center">
                    <div class="col-12 col-lg-12">
                    <label for="subject" class="mb-lg-0 style-label with-value">Subject</label>
                      <input type="text" name="subject" class="form-control" placeholder="" id="subject">      
                    </div>
                </div>
            </div>
            <div class="userGroupOuter">
                <div class="user-groupBtn"><i class="fas fa-ellipsis-v"></i></div>
                <!-- <div class="user-groupBtn"><i class="fas fa-bars"></i></div> -->
                <div class="userGroupContent">
                    <input type="text" id="searchplaceholder" class="form-control" placeholder="Insert a Placeholder"/>
                    <ul class="userGroupInfo">
                        <li>#Franchise Name#</li>
                        <li>#Franchise contact phone number#</li>
                        <li>#Enter Disclaimer#</li>
                        <li>#first_name#</li>
                        <li>#last_name#</li>
                        <li>#firstname#</li>
                        <li>#lastname#</li>
                        <li>#First Name#</li>
                        <li>#Last Name#</li>
                        <li>#your_name#</li>
                        <li>#email_address#</li>
                        <li>#Email address#</li>
                        <li>#phone_number#</li>
                        <li>#Phone Number#</li>
                        <li>#reason#</li>
                        <li>#your_message#</li>    
                        <li>#parent_name#</li>                        
                        <li>#child_name#</li>
                        <li>#ethnicity#</li>
                        <li>#height#</li>
                        <li>#jigsaw_school#</li>
                        <li>#dob#</li>
                        <li>#gender#</li>
                        <li>#your_comment#</li>
                        <li>#attach_photo#</li>
                        <li>#Franchisee First Name#</li>
                        <li>#Franchisee Last Name#</li>
                        <li>#Franchise contact phone number#</li>
                        <li>#classes_name#</li>
                        <li>#Enter Disclaimer#</li>
                        <li>#refundamount#</li>
                        <li>#order number#</li>
                        <li>#Franchise name#</li>
                        <li>#Day of week#</li>
                        <li>#Start time#</li>
                        <li>#End time#</li>
                        <li>#Location Address#</li>
                        <li>#List of dates and times#</li>
                        <li>#link to add to Student#</li>
                        <li>#theme#</li>
                        <li>#date#</li>
                        <li>#time#</li>
                        <li>#Student name#</li>
                        <li>#next term name#</li>
                        <li>#Franchise#</li>
                        <li>#instalments dates#</li>
                        <li>#click here#</li>
                        <li>#cancel#</li>
                        <li>#name of Student#</li>
                        <li>#delivery address line 1#</li>
                        <li>#delivery address line 2#</li>
                        <li>#delivery town city#</li>
                        <li>#delivery postcode#</li>
                        <li>#delivery country#</li>
                        <li>#order items#</li>
                        <li>#sub total amount#</li>
                        <li>#delivery name#</li>
                        <li>#delivery amount#</li>
                        <li>#voucher code#</li>
                        <li>#voucher amount#</li>
                        <li>#grant total amount#</li>
                        <li>#order notes#</li>
                        <li>#name of Student or link to add to Student#</li>
                        <li>#book now#</li>
                        <li>#my account#</li>
                        <li>#shop link#</li>
                    </ul>
                </div>
            </div>
            <textarea  name="email_template_ckeditor" id="editor"></textarea>
                <div class="d-flex justify-content-end mt-4 mb-4">
                    <button type="submit" class="btn">Save</button>
                </div>

                <div class="d-flex justify-content-between w-full align-items-start email-pre-block">
                <div class="form-wrap style-input m-0 w-[80%]">
                    <label for="email" class="style-label">Email Address</label>
                    <input type="email" class="form-control" id="email">
                    <span id="email_send_error" class="d-none"></span>
                </div>
                <div class="d-flex justify-content-end m-0 w-[150px]">
                    <button type="button" class="btn btn-primary" id="send_test_email" onclick="send_email()">send / preview</button>
                </div>
                </div>
          
            </form>
        </div>
</div>

<!-- setting user contracts get data using id  -->
<script>

    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

    function send_email(){

        $('#email_send_error').addClass('d-none').text('');

        const email = document.getElementById('email').value;
        const subject = document.getElementById('subject').value;
        const content = tinymce.get('editor') ? tinymce.get('editor').getContent() : '';

        let errorSpan = $('#email_send_error');
        errorSpan.addClass('d-none').removeClass('text-danger').text('');

        if (!email || !validateEmail(email)) {
            errorSpan.removeClass('d-none').addClass('text-danger').text('Please enter a valid email address.');
            return;
        }

        if (!subject) {
            errorSpan.removeClass('d-none').addClass('text-danger').text('Subject is required.');
            return;
        }

        if (!content) {
            errorSpan.removeClass('d-none').addClass('text-danger').text('Email content cannot be empty.');
            return;
        }

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: "btn btn-success",
                cancelButton: "btn btn-danger",
            },
            buttonsStyling: false,
        });
        swalWithBootstrapButtons
            .fire({
                title: "Are you sure?",
                text: "Are you sure want to send email!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, send it!",
                cancelButtonText: "No, cancel!",
                reverseButtons: true,
            })
            .then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        url: '/setting/send-test-email',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            _token: $('input[name="_token"]').val(),
                            email: email,
                            subject: subject,
                            content: content
                        },
                        success: function (response) {
                            $('#email').val('');
                            $('#email_send_error').removeClass('d-none text-danger').addClass('text-success').text(response.message);
                        },
                        error: function (xhr, status, error) {
                            console.error('AJAX Error:', status, error);
                            $('#email_send_error').removeClass('d-none text-danger').addClass('text-success').text('Failed to send test email.');
                        }
                    });
                }
            });
    }

    



//  $(document).ready(function() {
//     $('select[name="module"]').on('change', function() {
//         var module_id = $(this).val();

//         if (module_id) {
//             $.ajax({
//                 url: '/setting/get_email_template/' + encodeURI(module_id),
//                 type: "GET",
//                 dataType: "json",
//                 success: function(data) {
//                     // Clear existing options
//                     $('select[name="email"]').empty();

//                     // Populate options based on the received data

//                     $.each(data, function(key, value) {
//                     console.log(value.email);
//                         $('select[name="email"]').append('<option value="' + value.id + '">' + value.email + '</option>');
//                     });
//                 },
//                 error: function(xhr, status, error) {
//                     console.error('AJAX Error:', status, error);
//                 }
//             });
//         } else {
//             // Clear options if no module is selected
//             $('select[name="state"]').empty();
//         }
//     });
// });
document.getElementById('searchplaceholder').addEventListener('input', function() {
    // Get the value entered in the input field
    let searchValue = this.value.toLowerCase();

    // Get all list items
    let listItems = document.querySelectorAll('.userGroupInfo li');
    
    // Loop through all list items and hide those that don't match the search value
    listItems.forEach(function(item) {
        let text = item.textContent.toLowerCase();
        
        // Show or hide the list item based on the search value
        if (text.includes(searchValue)) {
            item.style.display = '';  // Show the item
        } else {
            item.style.display = 'none';  // Hide the item
        }
    });
});
        $("#change_email_template").on("change", function () {
        var email_id = $(this).val();
        axios.post('onchange-get-email-template', {
        email_id: email_id
        })
        .then(function(response) {
            const get_template_data = response.data.get_template;
            $("#id").val(get_template_data[0].id);
            var editor = tinymce.get('editor');
                if (!editor) {
                    tinymce.init({
                        selector: '#editor',
                        plugins: 'link image code',
                        relative_urls: true,
                   });
                    editor = tinymce.get('editor');
                }
                $("#subject").val(get_template_data[0].subject);
                editor.setContent(get_template_data[0].description);
     
        });
    });
</script>
{!! JsValidator::formRequest('App\Http\Requests\SettingEmailTemplate','#add-email-template') !!}
@include('scripts.setting_terms_script')

@endsection