@extends('crm.layouts.master')
@section('title','WhatsApp Messages')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
@section('main-content')
    <div class="breadcrumb">
        <h3>WhatsApp Messages</h3>
    </div>
    <div class="separator-breadcrumb border-top"></div>
    <div class="main-content">
        <div class="card chat-sidebar-container" data-sidebar-container="chat">
            <div class="chat-sidebar-wrap" data-sidebar="chat">
                <div class="border-end">
                    <div
                        class="pt-2 pb-2 ps-3 pe-3 d-flex align-items-center o-hidden box-shadow-1 chat-topbar"
                    >
                        <a class="link-icon d-md-none" data-sidebar-toggle="chat"
                        ><i class="icon-regular ms-0 me-3 i-Left"></i
                            ></a>
                        <div class="form-group m-0 flex-grow-1">
                            <input
                                class="form-control form-control-rounded"
                                id="search"
                                type="text"
                                placeholder="Search contacts"
                            />
                        </div>
                    </div>
                    <div class="contacts-scrollable perfect-scrollbar">
                        <div
                            class="mt-4 pb-2 ps-3 pe-3 fw-bold text-muted border-bottom"
                        >
                            Recent
                        </div>
                        <div
                            class="p-3 d-flex align-items-center border-bottom online contact"
                        >
                            <img
                                class="avatar-sm rounded-circle me-3"
                                src="../../dist-assets/images/faces/13.jpg"
                                alt="alt"
                            />
                            <div>
                                <h6 class="m-0">Frank Powell</h6>
                                <span class="text-muted text-small">3 Oct, 2018</span>
                            </div>
                        </div>
                        <div
                            class="mt-3 pb-2 ps-3 pe-3 fw-bold text-muted border-bottom"
                        >
                            Contacts
                        </div>
                        <div
                            class="p-3 d-flex border-bottom align-items-center contact online"
                        >
                            <img
                                class="avatar-sm rounded-circle me-3"
                                src="../../dist-assets/images/faces/3.jpg"
                                alt="alt"
                            />
                            <h6>William Wills</h6>
                        </div>
                        <div
                            class="p-3 d-flex border-bottom align-items-center contact online"
                        >
                            <img
                                class="avatar-sm rounded-circle me-3"
                                src="../../dist-assets/images/faces/4.jpg"
                                alt="alt"
                            />
                            <h6>Jaqueline Day</h6>
                        </div>
                        <div
                            class="p-3 d-flex border-bottom align-items-center contact"
                        >
                            <img
                                class="avatar-sm rounded-circle me-3"
                                src="../../dist-assets/images/faces/5.jpg"
                                alt="alt"
                            />
                            <h6>Jhone Will</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-content-wrap" data-sidebar-content="chat">
                <div
                    class="d-flex ps-3 pe-3 pt-2 pb-2 o-hidden box-shadow-1 chat-topbar"
                >
                    <a class="link-icon d-md-none" data-sidebar-toggle="chat"
                    ><i class="icon-regular i-Right ms-0 me-3"></i
                        ></a>
                    <div class="d-flex align-items-center">
                        <img
                            class="avatar-sm rounded-circle me-2"
                            src="../../dist-assets/images/faces/13.jpg"
                            alt="alt"
                        />
                        <p class="m-0 text-title text-16 flex-grow-1">Frank Powell</p>
                    </div>
                </div>
                <div
                    class="chat-content perfect-scrollbar"
                    data-suppress-scroll-x="true"
                >
                    <div class="d-flex mb-4">
                        <div class="message flex-grow-1">
                            <div class="d-flex">
                                <p class="mb-1 text-title text-16 flex-grow-1">
                                    Frank Powell
                                </p>
                                <span class="text-small text-muted">25 min ago</span>
                            </div>
                            <p class="m-0">
                                Do you ever find yourself falling into the “discount trap?
                            </p>
                        </div>
                        <img
                            class="avatar-sm rounded-circle ms-3"
                            src="../../dist-assets/images/faces/13.jpg"
                            alt="alt"
                        />
                    </div>
                    <div class="d-flex mb-4 user">
                        <img
                            class="avatar-sm rounded-circle me-3"
                            src="../../dist-assets/images/faces/1.jpg"
                            alt="alt"
                        />
                        <div class="message flex-grow-1">
                            <div class="d-flex">
                                <p class="mb-1 text-title text-16 flex-grow-1">
                                    Jhon Doe
                                </p>
                                <span class="text-small text-muted">24 min ago</span>
                            </div>
                            <p class="m-0">Lorem ipsum dolor sit amet. In today's digital world, transparency and security are paramount. At Sites.Report, we are dedicated to revealing the true identity of domain holders. Whether you’ve been a victim of an online scam or simply want to know more about a specific website, our comprehensive domain reporting service provides the information you need.</p>
                        </div>
                    </div>
                    <div class="d-flex mb-4">
                        <div class="message flex-grow-1">
                            <div class="d-flex">
                                <p class="mb-1 text-title text-16 flex-grow-1">
                                    Frank Powell
                                </p>
                                <span class="text-small text-muted">25 min ago</span>
                            </div>
                            <p class="m-0">
                                Do you ever find yourself falling into the “discount trap?
                            </p>
                        </div>
                        <img
                            class="avatar-sm rounded-circle ms-3"
                            src="../../dist-assets/images/faces/13.jpg"
                            alt="alt"
                        />
                    </div>
                    <div class="d-flex mb-4 user">
                        <img
                            class="avatar-sm rounded-circle me-3"
                            src="../../dist-assets/images/faces/1.jpg"
                            alt="alt"
                        />
                        <div class="message flex-grow-1">
                            <div class="d-flex">
                                <p class="mb-1 text-title text-16 flex-grow-1">
                                    Jhon Doe
                                </p>
                                <span class="text-small text-muted">24 min ago</span>
                            </div>
                            <p class="m-0">Lorem ipsum dolor sit amet.</p>
                        </div>
                    </div>
                </div>
                <div class="ps-3 pe-3 pt-3 pb-3 box-shadow-1 chat-input-area">
                    <form class="inputForm">
                        <div class="form-group">
                    <textarea
                        class="form-control form-control-rounded"
                        id="message"
                        placeholder="Type your message"
                        name="message"
                        cols="30"
                        rows="3"
                    ></textarea>
                        </div>
                        <div class="d-flex justify-content-between">
{{--                            <div class="flex-grow-1"></div>--}}
                            <button class="btn btn-icon btn-rounded btn-outline-primary text-white" type="">
                                <i class="i-Add-File"></i>
                            </button>
                            <button class="btn btn-icon btn-rounded btn-primary me-2">
                                <i class="i-Paper-Plane"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- end of main-content -->
    </div>

    <!-- The Add Modal -->
    <div class="modal" id="add_message_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Add Message</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="save_whatsapp_message">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" id="title" required class="form-control" >
                        </div>
                        <div class="form-group">
                            <label>Message</label>
                            <textarea type="text" id="message" rows="5"  class="form-control" ></textarea>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="submit_message_btn" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- The Edit Modal -->
    <div class="modal" id="edit_message_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Edit Message</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form class="" id="update_whatsapp_message">
                        <input type="hidden" id="message_id">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" id="edit_title" required class="form-control" >
                        </div>
                        <div class="form-group">
                            <label>Message</label>
                            <textarea type="text" id="edit_message" rows="5" class="form-control" ></textarea>
                        </div>

                        <div class="text-center">
                            <button class="btn btn-primary" id="update_message_btn" type="submit">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script src="{{ asset('assets/js/sidebar.script.min.js') }}"></script>
    <script>
        $(document).ready(function () {

        });

    </script>
@endsection