@extends('backend.layouts.app')

@section('content')
<div class="row page-titles">
   <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Email Templates</h4>
   </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"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item "><a href="{{ route('email') }}">Email Templates</a></li>

            <li class="breadcrumb-item active">Email Templates</li>
         </ol>
      </div>
   </div>
</div>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            @if (session('status'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="far fa-check-circle"></i>
                    <strong></strong> {{ session('status') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            <div class="col-md-8">
                <div class="card card-primary">
                    <!-- form start -->
                    <form action="{{ route('member.mail.send', 1) }}" method="post" id="form">
                        @csrf
                        <div class="card-body">
                            <div class="row" style="margin-top:2%;">

                                <input type="hidden" name="idJson" value="{{ $ids }}">



                             <!-- Language Tabs Start -->
                             <div class="col-sm-12">

                                    <div class="tab-content" id="languageTabContent" style="margin-top:1%">

                                            <div class="" id="language-content" role="tabpanel" aria-labelledby="language-tab">
                                                <!-- Subject Field -->
                                                <div class="form-group">
                                                    <label for="subject">Subject <span style="color: red;font-size:18px;"><b>*</b></span></label>
                                                    <input type="text" name="subject"
                                                    id="subject" class="form-control" placeholder="Enter Subject" value="{{ old('subject') }}" >
                                                </div>

                                                <!-- Description Field -->
                                                <div class="form-group">
                                                    <label for="description">Description <span style="color: red;font-size:18px;"><b>*</b></span></label><br />
                                                    <textarea required name="description" class="form-control" placeholder="Enter Description" id="description">{{ old('description') }}</textarea>

                                                    <p style="color:red;" id="description-error"></p>

                                                    @error('description')
                                                        <p style="color:red;">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                <!-- Language Tabs End -->

                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" id="submitButton" class="btn btn-primary">Submit</button>
                            <a href="{{ route('member') }}" class="btn btn-secondary">Back</a>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-4">
</div>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

<script>
    $(document).ready(function() {
    // Initialize CKEditor
    CKEDITOR.replace('description');

    // Custom method for CKEditor validation
    $.validator.addMethod("ckeditorFilled", function(value, element) {
    var editorData = CKEDITOR.instances[element.id].getData().replace(/<[^>]*>|&nbsp;/gi, '').trim();
        return editorData.length > 0;
    }, "This field is required.");

    // Validation rules
    $('#form').validate({
        ignore: [],
        debug: false,
        rules: {
            subject: {
                required: true,
                maxlength: 100,
                noOnlySpaces: true // Ensure you have this custom rule defined if needed
            },
            description: {
                minlength: 10,
                ckeditorFilled: true // Add this line to ensure the CKEditor field is validated
            }
        },
        messages: {
            subject: {
                required: "Subject is required.",
                maxlength: "Subject cannot exceed 100 characters."
            },
            description: {
                required: "Description is required.",
                minlength: "Description must be at least 10 characters long."
            }
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") === "description") {
                error.insertAfter("#description-error").css("color", "red");
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            // Update the textarea value with CKEditor data before submitting
            for (var instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
            // Validate the form after updating CKEditor content
            if ($(form).validate().form()) {
                form.submit(); // Only submit if valid
            }
        }
    });
});
    </script>

@endsection
