@push('css')
<style>
    .ck ul {
        margin-left: 20px;
    }

    .ck li {
        list-style-type: unset !important;
        margin-left: 10px;
    }

    .ck blockquote {
        border-left: 4px solid #ccc;
        margin: 10px 0;
        padding: 10px 15px;
        background-color: #f9f9f9;
        font-style: italic;
        color: #555;
    }

    .ck blockquote p {
        margin: 0;
    }

    .cc_email .select2-dropdown {
        display: none !important;
    }

    .cc_email {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
</style>
@endpush
<div class="col-6">
    <div class="row">
        <div class="card">
            <div class="card-body p-0">
                <!-- Nav tabs -->
                <div class="default-tab pt-3">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link text-black active" data-bs-toggle="tab" href="#notes-section">
                                <i class="bi bi-journal-text me-2" style="font-size: smaller;"></i> Notes</a>
                        </li>


                        <li class="nav-item">
                            <a class="nav-link text-black" data-bs-toggle="tab" href="#send-email-section"><i
                                    class="la la-envelope me-2"></i>
                                Email</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-black" data-bs-toggle="tab" href="#text-section"><i
                                    class="la la-sms me-2"></i> Text</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-black" data-bs-toggle="tab" href="#call-log-section"><i
                                    class="la la-phone me-2"></i> Log
                                Call</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="notes-section" role="tabpanel">
                            <div class="pt-2 pb-2">
                                <form id="add-notes-form">
                                    <x-text-input type="hidden" :value="$contact['id']" name="id" />
                                    <input type="hidden" value="{{ isset($contact['id']) ? 'contact' : '' }}"
                                        name="noteable_type" />
                                    <textarea class="notes-editor" placeholder="write your Notes" name="note" cols="30" rows="10"></textarea>
                                    <div class="col-auto d-flex justify-content-end mt-2">
                                        <button type="submit" class="btn btn-primary btn-sm p-2">
                                            <i class="fas fa-paper-plane"></i> Save Notes
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="send-email-section">
                            <div class="pt-2">
                                <form id="add-send-mail-form">
                                    <x-text-input type="hidden" :value="$contact['id']" name="id" />
                                    <x-text-input type="hidden" :value="$contact['email']" name="email" />
                                    <input type="hidden" value="{{ isset($contact['id']) ? 'contact' : '' }}"
                                        name="contactable_type" />
                                    <div class="row mb-3 align-items-center">
                                        <label for="emailSubject" class="col-auto col-form-label">Subject</label>
                                        <div class="col">
                                            <x-text-input id="emailSubject" name="subject"
                                                placeholder="Enter subject" />
                                        </div>
                                        <label for="emailTo" class="col-auto col-form-label">CC</label>
                                        <div class="col cc_email">
                                            <select name="cc_emails[]" class="multi-select form-control form-control-sm multiple_cc_emails" multiple>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <textarea id="ckeditor" name="message" placeholder="Write your Email" cols="30" rows="10"></textarea>
                                    </div>
                                    <div class="row mb-3 align-items-center">
                                        <div class="col">
                                            <div class="input-group">
                                                <input type="file" class="form-control form-control-sm" name="attachments"
                                                    id="fileAttachment">
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <button type="submit" class="btn btn-primary btn-sm"><i
                                                    class="fas fa-paper-plane"></i> Send Email</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="text-section">
                            <div class="pt-4">
                                <form id="add-text-send-form">
                                    <div class="mb-3">
                                        <x-text-input type="hidden" :value="$contact['id']" name="id" />
                                        <input type="hidden" value="{{ isset($contact['id']) ? 'contact' : '' }}"
                                            name="smsable_type" />
                                        <input type="hidden"
                                            value="{{ preg_replace('/[\s-]/', '', $contact['cell_phone']) }}"
                                            name="textPhone" />
                                        <textarea name="textMessage" id="text_editor" cols="10" rows="7" class="form-control form-control-sm"
                                            placeholder="Write your Text"></textarea>
                                    </div>
                                    <div class="row mb-3 align-items-center">
                                        <div class="col-5">
                                            <div class="mb-3">
                                                <select class="form-control form-control-sm" name="sms_template"
                                                    id="">
                                                    <option selected>Select Template</option>
                                                    <option value="template 1">Template 1</option>
                                                    <option value="template 2">Template 2</option>
                                                    <option value="template 3">Template 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-7 d-flex justify-content-end">
                                            <button type="submit" class="btn btn-primary btn-sm"><i
                                                    class="fas fa-paper-plane"></i> Send Text</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="call-log-section">
                            <div class="pt-2">
                                <form>
                                    <div class="mb-3">
                                        <textarea name="calling_message" id="" cols="10" rows="7"
                                            class="call_editor form-control form-control-sm" placeholder="Write your Call Notes"></textarea>
                                    </div>
                                    <div class="row mb-3 align-items-center">
                                        <div class="col-4">
                                            <x-text-input id="calling-contact-number" name="calling_contact_numbre"
                                                value="{{ $contact['cell_phone'] }}" placeholder="+92 ###-###-####"
                                                pattern="^\+92 \d{3}-\d{3}-\d{4}$" aria-label="phone number" />
                                        </div>
                                        <div class="col-8 d-flex justify-content-end">
                                            <button type="button" class="btn btn-primary btn-sm me-2"
                                                data-bs-toggle="modal" id="make-call-btn"
                                                data-bs-target="#callingModal">
                                                Call
                                            </button>
                                            <button type="button" class="btn btn-info btn-sm me-2">
                                                Save Notes
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('layouts.includes.particles.contact.show.time_line')
</div>
@push('js')

<script>
    $('.multiple_cc_emails').select2({
        tags: true,
        tokenSeparators: [',', ' '],
        placeholder: "Add CC Emails",
        allowClear: false,
        createTag: function(params) {
            var term = $.trim(params.term);
            if (!term.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
                return null;
            }

            return {
                id: term,
                text: term,
                newTag: true
            };
        }

    });


    document.querySelectorAll('.call_editor, #text_editor').forEach(function(textarea) {
        ClassicEditor
            .create(textarea, {
                toolbar: [
                    'heading', 'paragraph',
                    'bold', 'italic', 'underline', 'strike', 'code', '|',
                    'fontFamily', 'fontSize', 'fontColor', 'bgColor', '|',
                    'link', 'unlink', 'insertImage', 'insertTable', 'mediaEmbed', 'emoji',
                    'insertVideo', 'horizontalLine', '|',
                    'bulletedList', 'numberedList', 'blockQuote', '|',
                    'alignment', 'indent', 'outdent', '|',
                    'subscript', 'superscript', '|',
                    'findAndReplace', 'removeFormat', 'selectAll', 'styles', 'format', 'paragraph', '|',
                    'source', 'showBlocks', 'spellChecker', 'language', 'insertDateTime', 'specialChar',
                    '|',
                    'undo', 'redo', '|'
                ],

            })
            .catch(error => {
                console.error(error);
            });
    });
</script>
@endpush